/*
Theme Name: Ponderosa CR — tema hijo de Twenty Twenty-Five
Theme URI: https://ponderosacostarica.com
Description: Tema hijo de Twenty Twenty-Five para el nuevo stack de Ponderosa Costa Rica (sitio de desarrollo devcr). Los tokens de diseño (paleta, tipografías, escala) viven en theme.json, que es la fuente de verdad; aquí solo van el contenedor, la alineación de header/contenido/pie y ajustes que no son tokens.
Author: Equipo Ponderosa CR
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ponderosa-child
Tags: block-theme, full-site-editing, custom-colors, custom-typography
*/

/* ---------------------------------------------------------------------------
   Fuentes de la marca, autohospedadas (17-oct).

   Antes se pedían a Google Fonts en cada visita: dos conexiones a un tercero y
   una hoja extra que bloqueaba el pintado. Ahora los archivos viven en
   `fuentes/` y se declaran aquí. Google sirve Roboto y Roboto Slab como
   **fuentes variables**, así que basta un archivo por familia con el rango de
   pesos: 77 KB en total (43 + 34) en vez de las seis descargas por peso que
   harían falta si fueran estáticas.
   `font-display: swap` para que el texto se lea desde el primer píxel.
   Ojo: la familia declarada tiene que coincidir con la de theme.json
   (`Roboto` y `Roboto Slab`), no se inventa un nombre nuevo.
--------------------------------------------------------------------------- */
@font-face {
	font-family: 'Roboto';
	src: url('fuentes/roboto-var.woff2') format('woff2');
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto Slab';
	src: url('fuentes/roboto-slab-var.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------------------
   Tokens de contenedor y forma.
   No duplican los de theme.json: son los que el CSS necesita por su cuenta.
   Medidos sobre el landing aprobado de la marca (12-oct-2026).
--------------------------------------------------------------------------- */
:root {
	--ponderosa-contenedor: 1120px;
	--ponderosa-gutter: clamp(16px, 2vw, 30px);
	--ponderosa-radio: 16px;
	--ponderosa-sombra: 0 10px 30px rgba(15, 23, 42, 0.08);
}

/* El grupo interno de la barra y del pie no lleva relleno propio: el aire lateral lo pone el grupo
   `.alignfull` de fuera, con el token de relleno raíz. Antes esto iba con `!important` porque con
   `useRootPaddingAwareAlignments` activo WordPress añadía `has-global-padding` a esos grupos y metía
   el relleno dentro. Se apagó ese ajuste (medido el 17-oct: solo afecta a grupos de primer nivel, los
   nuestros están anidados, y su único efecto era obligar a estos tres `!important`). */
.pp-barra > .wp-block-group.has-global-padding,
.pp-pie > .wp-block-group.has-global-padding,
.pp-pie-legal > .wp-block-group.has-global-padding {
	padding-left: 0;
	padding-right: 0;
}

/* ---------------------------------------------------------------------------
   Header, contenido y pie al mismo borde.
   El contentSize de cada grupo no basta: WP hornea una clase por hash en el
   markup guardado. Se resuelve con padding (no margin) para que los fondos
   sigan saliendo a sangre.
--------------------------------------------------------------------------- */
header > .wp-block-group.alignfull,
footer > .wp-block-group.alignfull,
.wp-block-post-content > .wp-block-group.alignfull {
	padding-left: var(--wp--style--root--padding-left, var(--ponderosa-gutter));
	padding-right: var(--wp--style--root--padding-right, var(--ponderosa-gutter));
}

/* El centrado y el ancho de los grupos internos ya los hace `alignwide` con el `wideSize` de
   theme.json (1120 px), que es exactamente `--ponderosa-contenedor`. Aquí estaban declarados con
   `!important` y sobraban: lo único que hacían era repetir el valor nativo (medido el 17-oct:
   con y sin la regla, el grupo interno mide 1120 px y arranca en x73). */

/* ---------------------------------------------------------------------------
   Detalles de marca que no son tokens
--------------------------------------------------------------------------- */
.wp-block-button__link {
	border-radius: var(--ponderosa-radio);
}

.wp-block-navigation a:hover,
.wp-block-navigation a:focus-visible {
	text-decoration-thickness: 2px;
}

/* Foco visible y consistente en todo el sitio (accesibilidad) */
:where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid var(--wp--preset--color--violeta);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Barra de cabecera (pp-barra)
   Valores medidos sobre el landing de marca en devcr (16-oct-2026):
   74 px de alto · logo 40 px · separación 18 px · acciones 12 px ·
   botones de la barra a 44 px de alto con letra de 15 px.
   El degradado NO se repite aquí: es el preset 'barra' de theme.json.
--------------------------------------------------------------------------- */
.pp-barra {
	position: sticky;
	top: 0;
	z-index: 5;
}

.pp-barra > .wp-block-group > .wp-block-group {
	min-height: 74px;
	gap: 18px;
}

/* Ni el logo ni las acciones se encogen: si se encogen, la etiqueta del CTA se parte
   en dos líneas y el botón pasa de 44 a 63 px de alto (medido a 390 px). */
.pp-barra .wp-block-site-logo,
.pp-barra .wp-block-buttons {
	flex-shrink: 0;
}

.pp-barra .wp-block-button__link {
	white-space: nowrap;
}

.pp-barra .wp-block-site-logo img {
	display: block;
	width: auto;
	height: 40px;
}

.pp-barra .wp-block-buttons {
	gap: 12px;
}

.pp-barra .wp-block-button__link {
	min-height: 44px;
	padding: 10px 20px;
	font-size: 15px;
}

/* Sobre el violeta de la barra el violeta de marca es invisible (1,0:1):
   el botón de borde pasa a blanco, y el foco también. */
.pp-barra .pp-btn-borde .wp-block-button__link {
	background-color: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.75);
}

.pp-barra .pp-btn-borde .wp-block-button__link:hover,
.pp-barra .pp-btn-borde .wp-block-button__link:focus-visible {
	background-color: rgba(255, 255, 255, 0.14);
}

.pp-barra :where(a, button):focus-visible {
	outline-color: #fff;
}

/* ---------------------------------------------------------------------------
   Botón de la marca: píldora, letra gruesa, 48 px de alto (el landing).
   El color del CTA (amarillo con letra violeta) sale de theme.json.
--------------------------------------------------------------------------- */
.pp-acciones .wp-block-button__link,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	border-radius: 999px;
}

.pp-btn-borde .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--violeta);
	border: 2px solid currentColor;
}

.pp-btn-borde .wp-block-button__link:hover {
	background-color: rgba(73, 61, 109, 0.07);
}

@media (max-width: 768px) {
	/* Igual que el landing: en móvil la barra se queda solo con el CTA */
	.pp-barra .pp-btn-borde {
		display: none;
	}

	.pp-barra .wp-block-site-logo img {
		height: 32px;
	}

	.pp-barra .wp-block-button__link {
		min-height: 44px;
		padding: 9px 16px;
	}
}

/* ---------------------------------------------------------------------------
   Pie (pp-pie) — cuatro columnas sobre el violeta de marca #56487F (preset 'violeta-pie').
   Contrastes medidos sobre ese fondo: blanco 7,97:1 · amarillo #FDD72E 5,67:1 · #CBD5E1 5,38:1.
   El gris #94A3B8 del landing se descarta aquí a propósito: sobre este violeta da 3,11:1
   y no pasa AA para texto normal.
--------------------------------------------------------------------------- */
.pp-pie {
	padding-top: 48px;
	padding-bottom: 14px;
	font-size: 15px;
}

.pp-pie-columnas {
	align-items: start;
}

.pp-pie-titulo {
	margin: 0 0 4px;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Base de las listas del pie: sin viñetas ni sangría. Esta regla es imprescindible:
   sin ella el navegador pinta los puntos y WordPress deja su padding-left. */
.pp-pie-lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pp-pie-lista li {
	margin: 0;
	list-style: none;
}

/* Los enlaces del pie van en el mismo tono que la descripción (#CBD5E1, 5,38:1 sobre el
   violeta), no en amarillo: así el amarillo queda reservado al botón.
   No se usa un comodín '.pp-pie a' a propósito, porque teñiría el botón. */
.pp-pie-lista a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--noche-texto);
	text-decoration: none;
}

.pp-pie-lista a:hover,
.pp-pie-lista a:focus-visible {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}

.pp-pie-descripcion {
	margin: 16px 0 0;
	max-width: 32ch;
	line-height: 1.6;
	color: var(--wp--preset--color--noche-texto);
}

.pp-pie-logo img {
	display: block;
	width: auto;
	height: 40px;
}

/* Redes: el icono mide 24 px, pero el área que se toca mide 44. Ahora viven en la
   franja inferior, entre el copyright y el crédito, así que no llevan margen inferior. */
.pp-pie-redes {
	margin: 0;
}

.pp-pie-redes .wp-block-social-link {
	margin: 0;
}

/* En móvil los tres elementos de la franja se apilan; los iconos toman su propio
   renglón y se centran (si el <ul> no ocupa el ancho, centrarlo no hace nada). */
@media (max-width: 768px) {
	.pp-pie-redes {
		width: 100%;
		justify-content: center;
	}
}

.pp-pie-redes .wp-block-social-link-anchor {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--wp--preset--color--base);
}

.pp-pie-redes .wp-block-social-link-anchor:hover,
.pp-pie-redes .wp-block-social-link-anchor:focus {
	color: var(--wp--preset--color--amarillo);
}

.pp-pie-redes svg {
	fill: currentColor;
}

.pp-pie-cta {
	margin-top: 2px;
}

/* El botón vive ahora en la primera columna, bajo la descripción de la marca. */
.pp-pie-marca .pp-pie-cta {
	margin-top: 20px;
}

.pp-pie-cta .wp-block-button__link {
	min-height: 44px;
	padding: 10px 22px;
	font-size: 15px;
}

/* Fila de la dirección: va entre las columnas y la franja del copyright, con su propia
   línea divisoria. Es la que separa los dos bloques, así que la franja inferior ya no la lleva. */
.pp-pie-dir {
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	padding-top: 20px;
	padding-bottom: 0;
	font-size: 13px;
}

.pp-pie-direccion {
	margin: 0;
	color: var(--wp--preset--color--noche-texto);
	line-height: 1.6;
}

/* Franja inferior: copyright, redes y créditos */
.pp-pie-legal {
	padding-top: 4px;
	padding-bottom: 18px;
	font-size: 13px;
}

/* Tres partes iguales: copyright a la izquierda, iconos en el centro exacto de la página y
   crédito a la derecha. Con flex y space-between los iconos caían 84 px a la derecha, porque
   el hueco sobrante se reparte según el ancho de los dos textos, no del centro. */
.pp-pie-creditos {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: 26px;
}

.pp-pie-creditos .pp-pie-credito {
	justify-self: end;
	text-align: right;
}

.pp-pie-creditos p {
	margin: 0;
	color: var(--wp--preset--color--noche-texto);
}

/* En móvil los tres se apilan, todo centrado. */
@media (max-width: 768px) {
	.pp-pie-creditos {
		grid-template-columns: 1fr;
		row-gap: 4px;
		justify-items: center;
		text-align: center;
	}

	.pp-pie-creditos .pp-pie-credito {
		justify-self: center;
		text-align: center;
	}
}

.pp-pie-credito a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--noche-texto);
	text-decoration: none;
}

.pp-pie-credito a:hover,
.pp-pie-credito a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}

/* Sobre el violeta el violeta de marca no se ve: el foco pasa a blanco. */
.pp-pie :where(a, button):focus-visible,
.pp-pie-legal :where(a, button):focus-visible {
	outline-color: #fff;
}

@media (max-width: 768px) {
	.pp-pie {
		padding-top: 36px;
		/* 26 y no 34: el hueco visible hasta la franja del copyright debe parecerse al de
		   escritorio (33 px), y en móvil la franja se apila, así que no suma el centrado. */
		padding-bottom: 26px;
	}

	.pp-pie-descripcion,
	.pp-pie-dato {
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	:where(.wp-block-button__link, a):hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   FICHA DE PRODUCTO (plantilla nativa templates/single-product.html)
   Estructura tomada de la referencia de venta (migas -> hero en dos columnas ->
   ficha), con la linea grafica de la marca. Todo son bloques nativos de
   WooCommerce y de core: aqui no hay ningun bloque dibujado a mano.
--------------------------------------------------------------------------- */

/* --- Migas --------------------------------------------------------------- */
.pp-migas .woocommerce-breadcrumb {
	margin-block-start: 22px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--wp--preset--color--tinta-suave);
}

.pp-migas .woocommerce-breadcrumb a {
	color: var(--wp--preset--color--violeta);
	text-decoration: none;
}

.pp-migas .woocommerce-breadcrumb a:hover,
.pp-migas .woocommerce-breadcrumb a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Hero: medios a la izquierda, datos a la derecha --------------------- */
.pp-ficha-hero {
	align-items: flex-start;
	gap: 30px 56px;
	margin-block-start: 20px;
}

/* La foto del producto, con el radio de la marca. El contenedor queda con
   altura fija para que el hueco no salte mientras carga la imagen. */
.pp-ficha-galeria img {
	border-radius: var(--ponderosa-radio);
}

/* Sellos de confianza bajo el boton de compra: mismo lenguaje que el bloque
   .confianza del landing aprobado (circulo violeta translucido + glifo), pero
   con el icono del bloque NATIVO core/icon (core/language, core/shield,
   core/comment). El glifo va marcado como decorativo y el texto que lo
   acompaña es el que se lee. */
.pp-sellos {
	margin-block-start: 20px;
	padding: 18px 20px;
	list-style: none;
	padding-inline-start: 20px;
	background: var(--wp--preset--color--fondo);
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: var(--ponderosa-radio);
}

.pp-sellos li,
.pp-sellos .pp-sello p {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 15px;
	line-height: 1.45;
	color: var(--wp--preset--color--tinta-suave);
}

.pp-sellos .pp-sello p {
	margin: 0;
}

.pp-sellos li + li {
	margin-block-start: 12px;
}

/* El grupo flex que junta glifo y texto */
.pp-sellos .pp-sello {
	gap: 14px;
	align-items: center; /* el glifo va dentro de un círculo de 44 px y el texto no: con flex-start el
	                        texto quedaba 11 px por encima del centro. Centrado, como los puntos de
	                        confianza (pedido de Taylor, 17-oct). */
}

/* El circulo del glifo: 44 px, el mismo tono del landing */
.pp-sellos .pp-sello .wp-block-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(73, 61, 109, 0.12);
	color: var(--wp--preset--color--violeta);
}

.pp-sellos .pp-sello .wp-block-icon svg {
	width: 24px;
	height: 24px;
}

/* En pantalla estrecha el glifo no se encoge y el texto respira */
@media (max-width: 481px) {
	.pp-sellos {
		padding: 16px;
		padding-inline-start: 16px;
	}
}

/* --- Puntos de confianza bajo la galería -----------------------------------------
   Los tres que ya usa producción (candado / burbuja / visto), en la columna de las fotos y
   separados de la galería por una línea fina. Iconos con el bloque nativo `core/icon`: dos del
   set de WordPress (`core/comment`, `core/check`) y el candado de la colección propia
   `ponderosa/candado`, porque el set nativo no trae candado. Texto en 13,5 px para que no
   compita con la columna de datos. */
.pp-ficha-medios .pp-confianza {
	display: grid;
	gap: 10px;
	margin: 18px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--wp--preset--color--linea);
	list-style: none;
}

.pp-ficha-medios .pp-confianza li {
	margin: 0;
}

.pp-ficha-medios .pp-confianza-item {
	display: flex;
	align-items: center; /* el texto queda centrado contra el icono, también si envuelve a dos líneas */
	gap: 10px;
}

.pp-ficha-medios .pp-confianza-item svg {
	width: 23.4px; /* 30 % más que los 18 px originales (pedido de Taylor, 17-oct) */
	height: 23.4px;
	flex: 0 0 auto;
}

.pp-ficha-medios .pp-confianza-item p {
	margin: 0;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--wp--preset--color--tinta-suave);
}

/* --- Datos del producto -------------------------------------------------- */
.pp-ficha-datos > * {
	margin-block: 0;
}

.pp-ficha-datos > * + * {
	margin-block-start: 14px;
}

.pp-ficha-titulo {
	font-size: 40px;
	line-height: 1.12;
}

.pp-ficha-estrellas {
	font-size: 15px;
	color: var(--wp--preset--color--tinta-suave);
}

.pp-ficha-precio {
	font-size: 30px;
	line-height: 1.1;
	color: var(--wp--preset--color--violeta);
	font-weight: 700;
}

/* «Precio por persona:» a la izquierda del precio (pedido de Taylor, 17-oct). El texto va como párrafo
   real en la plantilla —editable en el editor de sitio y traducible—, no como `::before` de CSS. La
   fila es flex propia del tema (como `.pp-sello`), sin depender de las clases de layout de WordPress:
   así el `gap` y la alineación quedan bajo control del tema. Por línea base, para que la etiqueta caiga
   a la altura del precio grande (30 px, violeta). */
.pp-ficha-linea-precio {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.pp-ficha-linea-precio .pp-ficha-porpersona {
	margin: 0;
	font-size: 16px;
	line-height: 1.2;
	color: var(--wp--preset--color--tinta-suave);
}

.pp-ficha-precio del,
.pp-ficha-precio .wc-block-components-product-price__regular {
	color: var(--wp--preset--color--tinta-suave);
	font-weight: 400;
	font-size: 20px;
}

/* Entradilla de la ficha (descripción corta). Pedido de Taylor (17-oct): el mismo estilo de texto que
   los bloques de Descripción y Valoraciones. Medido en las pestañas: Roboto 18 px, interlineado 27 px
   (1,5) y color `tinta` (#1E293B). Antes la entradilla iba a 17 px y en `tinta-suave` (#334155), de ahí
   que se leyera como otro tipo de texto. El ancho se mantiene en 60ch para que la línea no se estire. */
.pp-ficha-entradilla {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 18px;
	line-height: 1.5;
	color: var(--wp--preset--color--tinta);
	font-weight: 300;
	max-width: 60ch;
}

/* --- Boton de compra: la pildora amarilla de la marca -------------------- */
.pp-ficha-compra form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin-block-start: 6px;
}

/* Etiqueta visible del campo de cantidad. WooCommerce sólo deja una etiqueta para lectores de
   pantalla («Day Pass cantidad»); en pantalla el número quedaba suelto, sin decir de qué era.
   La fecha ya tiene su etiqueta encima, así que la cantidad la imita para que la fila se lea. */
.pp-ficha-compra .quantity {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pp-ficha-compra .quantity::before {
	content: "Personas";
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--tinta);
}

/* --- Campo de fecha de la visita -----------------------------------------
   Lo inyecta el mu-plugin ponderosa-pases dentro del formulario nativo (el bloque de WooCommerce
   no tiene hueco para campos propios), asi que su aspecto se viste aqui, en el tema.
   La fila queda: fecha | cantidad | boton. align-items:flex-end mantiene cantidad y boton
   apoyados en la misma linea que el campo, aunque el campo lleve etiqueta encima. */
.pp-campo-fecha {
	flex: 1 1 240px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.pp-campo-fecha label {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--tinta);
}

/* Los dos campos de la compra —fecha y cantidad— se perdían sobre el blanco: el borde `linea`
   (#E2E8F0) daba 1,23:1 y el campo parecía flotar. El borde es el violeta de la marca atenuado
   (rgba(73,61,109,.45)) y pasa a violeta pleno al enfocar. Un solo trazo, sin anillo exterior: Taylor
   lo pidió así el 17-oct («me gusta el morado, pero sin el doble borde»).

   Aquí había dos parches que ya no hacen falta: el color iba en una regla aparte que quedaba por encima
   del shorthand `border` de más abajo (de ahí el `!important`), y una regla de foco vieja añadía
   `outline: 3px solid`, que era el «segundo borde» que se veía al hacer clic. Ahora el color vive dentro
   de la misma regla que el `border` y el foco solo cambia el color, sin outline ni sombra. */
.pp-campo-fecha input[type="date"] {
	box-sizing: border-box; /* sin esto el ancho 100% + 28 px de padding + 2 de borde = 360 px dentro
	                           de un contenedor de 330: el campo se salía por la derecha y se montaba
	                           encima del campo de cantidad (medido: -18 px de hueco). */
	height: 48px;
	width: 100%;
	max-width: 100%;
	padding: 0 14px;
	border: 1px solid rgba(73, 61, 109, 0.45);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 16px;
	color: var(--wp--preset--color--tinta);
	box-shadow: none;
}

/* Foco: el mismo trazo, a violeta pleno. El indicador visible de foco es el cambio de color del borde
   (WCAG 2.4.7), así que no hace falta el anillo del navegador ni uno propio. */
.pp-campo-fecha input[type="date"]:focus-visible,
.pp-ficha-compra .quantity input:focus-visible {
	border-color: var(--wp--preset--color--violeta);
	outline: none;
	box-shadow: none;
}

.pp-campo-fecha__ayuda {
	margin-block: 10px 0;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 13px;
	line-height: 1.45;
	color: var(--wp--preset--color--tinta-suave);
}

/* Campo de cantidad: radio de campo, no de boton. Con la pildora de 999 px
   parecia un boton mas y no se leia como algo que se puede escribir.
   El borde va aquí —y no en una regla aparte— para que el shorthand no borre el color del borde
   violeta de los campos de compra. */
.pp-ficha-compra .quantity input {
	box-sizing: border-box;
	height: 48px;
	width: 88px;
	padding: 0 8px;
	border: 1px solid rgba(73, 61, 109, 0.45);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 16px;
	text-align: center;
	box-shadow: none;
}

.pp-ficha-compra button.single_add_to_cart_button,
.pp-ficha-compra .wp-block-button__link {
	min-height: 48px;
	padding: 0 32px;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--amarillo);
	color: var(--wp--preset--color--violeta-oscuro);
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.pp-ficha-compra button.single_add_to_cart_button:hover {
	filter: brightness(0.94);
}

.pp-ficha-compra button.single_add_to_cart_button:focus-visible {
	outline: 3px solid var(--wp--preset--color--violeta);
	outline-offset: 3px;
}

/* --- En pantalla estrecha, una sola columna ----------------------------- */
@media (max-width: 781px) {
	.pp-ficha-hero {
		gap: 26px;
	}

	.pp-sellos {
		margin-block-start: 16px;
	}

	.pp-ficha-titulo {
		font-size: 30px;
	}

	.pp-ficha-compra form.cart {
		width: 100%;
	}

	.pp-ficha-compra button.single_add_to_cart_button {
		flex: 1 1 auto;
	}
}

/* --- Galería de la ficha: la foto grande y las miniaturas --------------------
   El «cinco» se pide por el filtro de WooCommerce (woocommerce_product_thumbnails_columns, en
   functions.php), que marca el bloque con --columns-5. Pero la hoja del plugin no trae reparto para
   cinco columnas: deja las miniaturas al 25 % y la quinta foto del safari cae sola a una segunda
   fila. Ese reparto es trabajo del tema (el plugin marca, el tema pinta), así que aquí va la
   rejilla: cinco del mismo ancho, con aire entre ellas, en una sola fila. CSS del tema, sin plugins
   ni JavaScript añadidos.
   Aparte, dos cosas que el bloque no sabe hacer: las esquinas y el tono de las miniaturas (la activa
   en color pleno con anillo violeta) y la lupa del zoom, que WooCommerce dibuja con un emoji que el
   navegador se baja de s.w.org: un pedido a un tercero en cada visita.
   Especificidad en vez de `!important`: la hoja del plugin apunta a `.woocommerce div.product
   div.images …` (cuatro clases). El contenedor del bloque trae la clase `.wp-block-woocommerce-
   product-image-gallery`, así que sumándola el selector del tema queda en cinco clases y gana la
   cascada por peso, sin `!important` ni parches (criterio de Taylor, 17-oct). */
.pp-ficha-galeria.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery.woocommerce-product-gallery--with-images .flex-control-thumbs {
	display: grid;
	/* Cinco columnas fijas. Con `auto-fit` la séptima miniatura caía sola a una segunda fila y
	   se estiraba a todo el ancho; con columnas fijas la segunda fila queda alineada a la
	   izquierda y todas las miniaturas miden lo mismo. */
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	width: 100%;
	/* El aire entre la foto grande y la tira de miniaturas: la hoja del plugin trae `margin: 0` para
	   este contenedor y sin él quedaban pegadas (medido). Gana por la clase del bloque en el selector,
	   no por `!important`. */
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.pp-ficha-galeria.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery.woocommerce-product-gallery--with-images .flex-control-thumbs li {
	float: none;
	width: auto;
	margin: 0;
}

.pp-ficha-galeria.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery.woocommerce-product-gallery--with-images .flex-control-thumbs img {
	width: 100%;
	height: auto;
	/* Las de en medio van a escuadra: el redondeo de la pieza va solo en la primera y la última. */
	border-radius: 0;
	opacity: 0.6; /* sin el flag, WooCommerce impone 0.5 (medido) */
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.pp-ficha-galeria.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery.woocommerce-product-gallery--with-images .flex-control-thumbs img:hover,
.pp-ficha-galeria.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery.woocommerce-product-gallery--with-images .flex-control-thumbs img.flex-active {
	opacity: 1; /* pareja de la anterior: mismo motivo */
}

/* La foto grande y la tira de miniaturas se leen como una sola pieza: el redondeo de arriba es de la
   foto (12 px, solo esas dos esquinas) y el de abajo, de la primera y la última miniatura, que son
   las que cierran la pieza. */
.pp-ficha-galeria.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery.woocommerce-product-gallery--with-images .woocommerce-product-gallery__image img {
	border-radius: 12px 12px 0 0;
}

.pp-ficha-galeria.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery.woocommerce-product-gallery--with-images .flex-control-thumbs li:first-child img {
	border-radius: 0 0 0 10px;
}

.pp-ficha-galeria.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery.woocommerce-product-gallery--with-images .flex-control-thumbs li:last-child img {
	border-radius: 0 0 10px 0;
}

/* La lupa de WooCommerce: un círculo blanco con un emoji que el navegador se baja de s.w.org, o sea
   un pedido a un tercero (y una pista del visitante hacia allá) en cada visita a la ficha. Se
   reemplaza por un círculo violeta con la lupa dibujada en línea: se ve en marca y deja de salir
   ese pedido. El plugin apunta a `.woocommerce div.product div.images …` (tres clases y tres
   etiquetas); el selector del tema suma la clase del bloque y queda en cinco clases, así que gana
   por peso sin `!important`. */
.pp-ficha-galeria.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery.woocommerce-product-gallery--with-images .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 999px;
	text-indent: -9999px;
	background: var(--wp--preset--color--violeta) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20.5 20.5l-4-4'/%3E%3C/svg%3E") center/20px 20px no-repeat;
	box-shadow: 0 6px 16px rgba(30, 41, 59, 0.22);
}

.pp-ficha-galeria.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery.woocommerce-product-gallery--with-images .woocommerce-product-gallery__trigger img {
	/* Sin `!important` desde el 17-oct: hacía falta porque WordPress core trae
	   `img.wp-smiley, img.emoji { display: inline !important }`, que se comía esta regla. Al apagar los
	   emojis del core (functions.php) esa regla dejó de existir y la especificidad del tema alcanza. */
	display: none;
}

/* WooCommerce dibuja SU lupa con los pseudo-elementos del botón: ::before es el aro de la lente
   (`border: 2px solid #000`) y ::after el mango (`background: #000`). Como el tema ya pinta la lupa
   en el fondo del botón, las dos se veían superpuestas —una negra y otra blanca—. Se apagan las del
   plugin. Se apagan por peso de selector (cinco clases del tema contra tres del plugin), sin
   `!important`.
   El `span[aria-hidden]` del emoji lo recorta el propio WooCommerce (`clip-path: inset(50%)`), así
   que ahí no hay nada que hacer; además el `img` va oculto arriba. */
.pp-ficha-galeria.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery.woocommerce-product-gallery--with-images .woocommerce-product-gallery__trigger::before,
.pp-ficha-galeria.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery.woocommerce-product-gallery--with-images .woocommerce-product-gallery__trigger::after {
	display: none;
}

/* --- Migas y valoración de la ficha ----------------------------------------------
   Migas: antes iban sobre todo el hero, alineadas al ancho de la página. Taylor las pidió dentro de la
   columna de datos, justo encima del título (17-oct), así que el bloque se movió en la plantilla y aquí
   sólo se ajusta el ritmo: más pequeñas, un poco atenuadas (a .72 de opacidad, sin inventar color) y
   con aire debajo.
   Estrellas: en oro #E2B90C, el tono que pasó Taylor en una captura (mediana de sus píxeles amarillos).
   WooCommerce dibuja las estrellas con su tipografía de iconos: el `::before` del contenedor son las
   cinco vacías y el `<span>` de dentro es el relleno, recortado por ancho al promedio (4,67 → 93,4 %).
   Vacías en el gris de línea y con la opacidad al 1 (el plugin la deja en 0,5: un gris claro al 50 % no
   se vería). Las reseñas de la pestaña usan el marcado clásico `.star-rating`, con las mismas dos capas. */
.pp-ficha-datos .pp-migas {
	margin: 0 0 10px;
	font-size: 14px !important;
	letter-spacing: 0.01em;
	opacity: 0.72;
}

.pp-ficha-datos .pp-migas a {
	color: inherit;
	text-decoration: none;
}

.pp-ficha-datos .pp-migas a:hover,
.pp-ficha-datos .pp-migas a:focus-visible {
	text-decoration: underline;
}

.pp-ficha-estrellas {
	--pp-oro-estrellas: #E2B90C;
}

.pp-ficha-estrellas .wc-block-components-product-rating__stars {
	color: var(--wp--preset--color--linea);
}

.pp-ficha-estrellas .wc-block-components-product-rating__stars::before {
	opacity: 1 !important;
}

.pp-ficha-estrellas .wc-block-components-product-rating__stars > span {
	color: var(--pp-oro-estrellas);
}

#reviews .star-rating::before {
	color: var(--wp--preset--color--linea);
}

/* El relleno de las estrellas clásicas: `!important` por precaución, porque la hoja del plugin
   también pinta estas estrellas (la fila vacía la gana sin él). */
#reviews .star-rating span::before {
	color: #E2B90C !important;
}

/* --- Pestaña de valoraciones: primero el formulario, después la lista -------------
   Pedido de Taylor (17-oct): dentro de la pestaña nativa «Valoraciones» el formulario va arriba y las
   valoraciones debajo. No se toca el marcado de WooCommerce —`#reviews` contiene `#comments` (título +
   lista) y `#review_form_wrapper` (formulario)—: se reordena con flex + order, así los dos bloques
   siguen siendo los del plugin y sus manejadores no se mueven. Se descartaron dos caminos con el
   formulario: el bloque nativo `woocommerce/product-review-form` duplica los IDs del formulario clásico
   (commentform, review_form, respond) y sus estrellas dependen de la Interactivity API; y sacarlo de la
   pestaña obligaba a mover nodos con JS. */
#reviews {
	display: flex;
	flex-direction: column;
}

#reviews #review_form_wrapper {
	order: 1;
	margin: 0 0 28px;
}

#reviews #comments {
	order: 2;
}

/* --- Productos relacionados -------------------------------------------------------
   Pedido de Taylor (17-oct). Colección de productos con `collection: related`, la del patrón oficial
   de WooCommerce (relaciona por categoría y etiqueta). Sin botón de «añadir al carrito» a propósito:
   nuestros pases se compran eligiendo fecha en la ficha, y un botón suelto en la tarjeta saltaría ese
   paso. Ojo: mientras los productos estén en borrador la colección sale vacía, porque WooCommerce sólo
   relaciona productos publicados. */
.pp-relacionados {
	margin-block-start: 40px;
	padding-block-start: 28px;
	border-top: 1px solid var(--wp--preset--color--linea);
	/* En páginas el contenido va a todo lo ancho (`alignfull`), así que `alignwide` no
	   acota nada y las tarjetas salían de 345 px. Se fija el ancho del sitio. */
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
}

.pp-relacionados .pp-relacionados-titulo {
	margin: 0 0 14px;
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 20px;
	line-height: 1.2;
	color: var(--wp--preset--color--violeta);
}

/* Tamaño de las tarjetas (17-oct). Recorrido con Taylor: 265 px → 208 → 104 → **135 px**. Las 104 se
   quedaron cortas cuando los productos dejaron de mostrar el marcador gris y empezaron a traer foto
   real: a ese ancho la imagen no se lee. 135 es un 30 % más, y sigue por debajo de la mitad de la foto
   principal de la ficha, que es la que manda.
   La anchura se fija con `flex` y no con el número de columnas del bloque, porque WooCommerce no tiene
   clases de rejilla por encima de 6 columnas. En móvil va a la mitad de la fila. */
/* Las tarjetas de relacionados son las mismas de la tienda: la anatomía (imagen 1:1,
   título, valoración, precio y CTA) la ponen las reglas de `.pp-archivo` compartidas
   vía `:is(.pp-archivo, .pp-relacionados, .page-id-398)`. Aquí sólo se define la rejilla. */
.pp-relacionados ul.wc-block-product-template,
.pp-relacionados ul.is-flex-container {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	list-style: none;
	padding: 0;
	margin: 0;
	align-items: stretch;
}

/* Todas las tarjetas de la fila con la misma altura: el CTA se ancla al pie.
   `margin-block: 0` es imprescindible: WordPress aplica 19,2 px de margen superior a
   los hijos de un layout de flujo, así que las tres últimas tarjetas bajaban 19 px
   respecto de la primera y el aire del pie no coincidía. */
.pp-relacionados li.wc-block-product {
	height: 100%;
	box-sizing: border-box;
	margin-block: 0 !important;
	padding: 16px;
}

/* Un poco más bajas que las de la tienda: la fila de relacionados es secundaria y
   así se recorta scroll. La imagen pasa de cuadrada a 4:3. */
.pp-relacionados li.wc-block-product > .wc-block-components-product-image img,
.pp-relacionados li.wc-block-product .wc-block-components-product-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (max-width: 900px) {
	.pp-relacionados ul.wc-block-product-template,
	.pp-relacionados ul.is-flex-container {
		grid-auto-rows: 1fr;
	}
}

@media (max-width: 900px) {
	.pp-relacionados ul.wc-block-product-template,
	.pp-relacionados ul.is-flex-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
}

@media (max-width: 600px) {
	.pp-relacionados ul.wc-block-product-template,
	.pp-relacionados ul.is-flex-container {
		grid-template-columns: 1fr;
	}
}

/* --- Visor de fotos (la lupa) -------------------------------------------------
   WooCommerce trae PhotoSwipe 4 con su piel de fábrica. Taylor pidió el fondo NEGRO pero sin llegar
   a tapar del todo la ficha: negro al 75 %.
   El tono NO se pinta por CSS: va por el filtro nativo de WooCommerce
   `woocommerce_single_product_photoswipe_options` (bgOpacity => 0.75), en functions.php. Antes había
   aquí un `.pswp__bg { background: … !important }` que peleaba con la hoja del plugin para lo mismo.
   Todo lo demás del visor (contador, pie de foto, iconos y flechas) se deja COMO VIENE del plugin:
   se probó redibujar los mandos y no quedó bien, así que se revirtió. */

/* ===========================================================================
   ARCHIVO DE PRODUCTO — /tienda/ y /categoria-producto/*
   Plantilla: templates/archive-product.html (bloques nativos de WooCommerce).
   Estructura tomada del patrón oficial blockificado del plugin y de la
   referencia de BXM: migas, título del término, descripción, contador con
   orden, rejilla de tarjetas y paginación. El archivo sirve igual para la
   tienda, las categorías y las etiquetas porque la colección hereda la
   consulta (`inherit`).
=========================================================================== */
.pp-archivo {
	padding-block: 30px 72px;
}

.pp-archivo-cabeza {
	gap: 0;
}

/* El grupo de la cabecera es `constrained`, así que sus hijos se frenaban en el contentSize de
   800 px y el título quedaba centrado y desalineado respecto a las migas y la rejilla (medido:
   h1 en x276 con el resto en x116). Aquí el ancho lo manda el archivo, que va a 1120. */
.pp-archivo-cabeza > .wp-block-query-title,
.pp-archivo-cabeza > .wp-block-term-description {
	width: 100%;
	max-width: none;
}

/* Migas: mismo tamaño que en la ficha, para que el sitio hable igual. */
.pp-archivo .woocommerce-breadcrumb {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14px;
	color: var(--wp--preset--color--tinta-suave);
	opacity: 0.72;
	margin-block: 0 14px;
}

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

.pp-archivo .woocommerce-breadcrumb a:hover {
	color: var(--wp--preset--color--violeta);
}

/* Título del archivo: «Tienda», «Paquetes», «Actividades»… */
.pp-archivo .wp-block-query-title {
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: clamp(30px, 4vw, 42px);
	line-height: 1.15;
	color: var(--wp--preset--color--tinta);
	margin-block: 0 12px;
}

/* Descripción del término: mismo texto que las pestañas de la ficha (18 px). */
.pp-archivo .wp-block-term-description,
.pp-archivo .wp-block-term-description p {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 18px;
	line-height: 1.5;
	font-weight: 300;
	color: var(--wp--preset--color--tinta);
}

.pp-archivo .wp-block-term-description p {
	margin-block: 0 18px;
	max-width: 68ch;
}

/* Barra de contador + orden. */
.pp-archivo-barra {
	border-block: 1px solid var(--wp--preset--color--linea);
	padding-block: 12px;
	margin-block: 6px 26px;
	gap: 12px;
}

.pp-archivo .woocommerce-result-count {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14px;
	color: var(--wp--preset--color--tinta-suave);
	margin: 0;
}

/* El selector de orden usa el mismo borde que los campos de la ficha. */
.pp-archivo .woocommerce-ordering {
	margin: 0;
}

.pp-archivo .woocommerce-ordering select {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14px;
	color: var(--wp--preset--color--tinta);
	background-color: #fff;
	border: 1px solid rgba(73, 61, 109, 0.45);
	border-radius: 10px;
	padding: 8px 32px 8px 12px;
	cursor: pointer;
}

.pp-archivo .woocommerce-ordering select:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--violeta);
}

/* Rejilla de tarjetas. */
.pp-archivo ul.wc-block-product-template {
	gap: 22px;
	list-style: none;
	padding: 0;
	margin: 0;
}

:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 16px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Mismo trato que las preguntas de la FAQ: el borde vira al lila al pasar el cursor.
   Sobre blanco el tono de hover de la FAQ (#D3CAE6) no se percibía, así que en la
   tienda se usa el lila del estado abierto con la sombra un poco más marcada. */
:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product:hover {
	border-color: #C4B8DE;
	box-shadow: 0 10px 26px rgba(73, 61, 109, 0.12);
}

:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product img {
	width: 100%;
	/* Las fichas del catálogo son carteles cuadrados: con 4/3 se recortaba el texto de la
	   imagen. En 1:1 se ven enteras y la rejilla sigue pareja. */
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 12px;
}

:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product h2,
:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product .wp-block-post-title {
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 19px;
	line-height: 1.25;
	margin: 2px 0 0;
}

:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product h2 a {
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
}

:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product h2 a:hover {
	color: var(--wp--preset--color--violeta);
}

/* Título a dos líneas como máximo y con la misma altura siempre: sin esto, un nombre largo
   («Preventa Día del Niño…») empujaba estrellas, precio y botón a una altura distinta que el
   resto de la fila. */
:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product h2 a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product h2 {
	min-height: calc(2 * 1.25em);
}

:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product .wc-block-components-product-rating {
	margin: 0;
	/* Estrellas, precio y botón forman el pie de la tarjeta y se anclan abajo juntos. */
	margin-top: auto;
}

/* Estrellas de las tarjetas: mismo criterio que la ficha del producto.
   WooCommerce pinta las cinco vacías con el `::before` del contenedor y el relleno con el
   `<span>` de dentro recortado por ancho. En la ficha las vacías van en el gris de línea
   (#E2E8F0) con opacidad 1 y el relleno en oro #E2B90C; en la tarjeta venían las dos en tinta
   al 50 %, que es lo que se veía apagado. Se replican los tres valores y el tamaño. */
:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product .wc-block-components-product-rating__stars {
	color: var(--wp--preset--color--linea);
	font-size: 15px;
}

:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product .wc-block-components-product-rating__stars::before {
	opacity: 1;
}

:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product .wc-block-components-product-rating__stars > span {
	color: #E2B90C;
}

:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product .wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 18px;
	font-weight: 700;
	color: var(--wp--preset--color--violeta);
}

/* El `margin-top: auto` va en el contenedor del bloque de precio, que es el hijo directo de la
   tarjeta; puesto en `.wc-block-components-product-price` (el elemento de dentro) no empujaba
   nada y los precios quedaban a distinta altura según el largo del título. */
:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product .wp-block-woocommerce-product-price {
	margin-top: 0;
}

/* CTA de la tarjeta: misma píldora que el botón de compra de la ficha (amarillo de acción
   con letra violeta oscura), a escala de tarjeta. Lleva a la ficha porque el pase necesita
   fecha antes de comprarse. Va después del precio, que tiene `margin-top: auto`, así que
   queda pegado al pie de la tarjeta aunque los títulos tengan distinto largo. */
:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product .pp-cta-tarjeta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 40px;
	margin-top: 10px;
	padding: 0 14px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--amarillo);
	color: var(--wp--preset--color--violeta-oscuro);
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: filter 0.18s ease;
}

:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product .pp-cta-tarjeta:hover {
	filter: brightness(0.95);
}

:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product .pp-cta-tarjeta:focus-visible {
	outline: 2px solid var(--wp--preset--color--violeta);
	outline-offset: 2px;
}

:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product .pp-cta-flecha {
	font-size: 15px;
	line-height: 1;
}

/* Paginación. */
.pp-archivo .wp-block-query-pagination {
	margin-block: 34px 0;
	gap: 6px;
}

.pp-archivo .wp-block-query-pagination a,
.pp-archivo .wp-block-query-pagination .page-numbers {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14px;
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 10px;
	padding: 8px 13px;
}

.pp-archivo .wp-block-query-pagination .current {
	background-color: var(--wp--preset--color--violeta);
	border-color: var(--wp--preset--color--violeta);
	color: #fff;
}

/* En móvil, dos columnas cómodas en vez de una tarjeta enorme. */
@media (max-width: 781px) {
	.pp-archivo {
		padding-block: 18px 48px;
	}

	.pp-archivo ul.wc-block-product-template {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product {
		padding: 9px;
		border-radius: 13px;
	}

	:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product h2,
	:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product .wp-block-post-title {
		font-size: 15px;
	}

	:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product .wc-block-components-product-price {
		font-size: 15px;
	}
}

/* En teléfono la tarjeta pasa a horizontal: foto a la izquierda de 132 px y los datos a la
   derecha. Con la foto a todo el ancho el cartel ocupaba la pantalla entera y el precio y el
   botón quedaban fuera de vista. */
@media (max-width: 480px) {
	.pp-archivo ul.wc-block-product-template {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product {
		display: grid;
		grid-template-columns: 132px minmax(0, 1fr);
		grid-auto-rows: min-content;
		column-gap: 14px;
		row-gap: 7px;
		align-content: start;
		padding: 14px;
	}

	:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product .wc-block-components-product-image {
		grid-column: 1;
		grid-row: 1 / span 5;
		margin: 0;
	}

	:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product h2,
	:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product .wp-block-post-title {
		grid-column: 2;
		font-size: 16px;
		line-height: 1.3;
		margin: 0;
	}

	:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product .wc-block-components-product-rating {
		grid-column: 2;
		margin-top: 0;
	}

	:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product .wp-block-woocommerce-product-price {
		grid-column: 2;
	}

	:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product .wc-block-components-product-price {
		font-size: 16px;
	}

	:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product .pp-cta-tarjeta {
		grid-column: 2;
		min-height: 36px;
		margin-top: 2px;
		padding: 0 10px;
		font-size: 13px;
	}

	:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product h2 {
		min-height: 0;
	}
}

/* Número de reseñas junto a las estrellas de la tarjeta. */
:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product .wc-block-components-product-rating__container {
	flex-wrap: wrap;
}

/* La nota va debajo de las estrellas, no al lado: «4,7 · 6 reseñas» ocupa más que un «(6)» y en la
   fila apretaba el ancho de la tarjeta. */
:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product .pp-tarjeta-resenas {
	display: block;
	width: 100%;
	margin: 4px 0 0;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--wp--preset--color--tinta-suave, #334155);
}

/* Sin reseñas no se pintan cinco estrellas vacías: no aportan y ensucian la tarjeta. */
:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product .pp-sin-resenas {
	display: none;
}

/* ---------------------------------------------------------------------------
   Barra lateral de filtros (bloques nativos woocommerce/product-filters).
   Escritorio: columna fija de 260 px pegada al hacer scroll.
   Móvil: el propio bloque pasa a botón + panel superpuesto (`overlayMode: auto`),
   así que ahí se sueltan la anchura y el sticky para no pelear con su cajón.
--------------------------------------------------------------------------- */
.pp-archivo-cuerpo {
	align-items: flex-start;
}

.pp-filtros {
	flex: 0 0 260px;
	max-width: 260px;
	position: sticky;
	top: calc(var(--pp-cabecera) + 22px);
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 16px;
	padding: 18px;
}

.pp-filtros-cabeza {
	border-bottom: 1px solid var(--wp--preset--color--linea);
	padding-bottom: 12px;
	margin-bottom: 14px;
}

.pp-filtros-titulo {
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 18px;
	line-height: 1.2;
	color: var(--wp--preset--color--tinta);
	margin: 0;
}

/* «Limpiar» del bloque nativo. */
.pp-filtros .wc-block-product-filter-clear-button,
.pp-filtros .wc-block-product-filter-clear-button__button {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 13px;
	color: var(--wp--preset--color--violeta);
	text-decoration: underline;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

/* Títulos de cada grupo de filtro (Categorías, Precio…). */
.pp-filtros h3,
.pp-filtros .wc-block-product-filter-title {
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 15px;
	color: var(--wp--preset--color--tinta);
	margin-block: 16px 8px;
}

.pp-filtros .wc-block-components-checkbox {
	margin-block: 6px;
}

.pp-filtros .wc-block-components-checkbox__label,
.pp-filtros label {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14.5px;
	color: var(--wp--preset--color--tinta-suave);
}

.pp-filtros .wc-block-components-checkbox__mark {
	border-radius: 5px;
}

/* El resultado ocupa lo que queda y no desborda. */
.pp-archivo-resultados {
	flex: 1 1 auto;
	min-width: 0;
	/* Los hijos de un grupo restringido se centran con `max-width: content-size`. Con el tope
	   de 800 px la rejilla arrancaba 20 px a la derecha del hueco real y la separación con el
	   sidebar quedaba en 40 px. Al 100 %, la distancia es el gap de la columna (20 px), igual
	   que en los posts del blog. */
	--wp--style--global--content-size: 100%;
}

@media (max-width: 900px) {
	/* La disposición de WP (`.wp-block-group-is-layout-flex`) es más específica que un simple
	   `display: block`, así que se cambia el eje en vez de pelear por el display: el grupo envuelve
	   y cada columna ocupa el ancho completo. Medido antes: la barra quedaba a 240 px al lado de la
	   rejilla y las tarjetas se aplastaban a 36 px. */
	.pp-archivo .pp-archivo-cuerpo {
		flex-wrap: wrap;
		gap: 16px;
	}

	.pp-archivo .pp-archivo-cuerpo > .pp-filtros,
	.pp-archivo .pp-archivo-cuerpo > .pp-archivo-resultados {
		flex: 1 1 100%;
		max-width: 100%;
		min-width: 0;
	}

	.pp-archivo .pp-archivo-cuerpo > .pp-filtros {
		position: static;
		top: auto;
		margin-bottom: 0;
	}
}

/* Lista de categorías del bloque nativo `product-categories`. */
.pp-filtros .wc-block-product-categories-list,
.pp-filtros .wp-block-woocommerce-product-categories ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pp-filtros .wc-block-product-categories-list-item,
.pp-filtros .cat-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	padding: 7px 0;
	border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

/* El conteo va en la misma línea, a la derecha, sin partirse. */
.pp-filtros .wc-block-product-categories-list-item-count {
	margin-left: auto;
	white-space: nowrap;
}

.pp-filtros .wc-block-product-categories-list-item:last-child,
.pp-filtros .cat-item:last-child {
	border-bottom: 0;
}

/* Filtro de precio: WooCommerce lo maqueta con columnas fijas de 185 px
   (`grid-template-columns: 185px 0px 185px`), más anchas que los 222 px útiles del
   sidebar: el deslizador y la caja del máximo se desbordaban 153 px a la derecha.
   Columnas elásticas y cajas al 100 % del espacio real. */
.pp-filtros .wc-block-product-filter-price-slider__content {
	grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr);
	gap: 10px 12px;
	box-sizing: border-box;
}

.pp-filtros .wc-block-product-filter-price-slider__range,
.pp-filtros .wc-block-product-filter-price-slider__left,
.pp-filtros .wc-block-product-filter-price-slider__right {
	width: auto;
	min-width: 0;
}

.pp-filtros .wc-block-product-filter-price-slider__left input,
.pp-filtros .wc-block-product-filter-price-slider__right input {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 6px 8px;
	font-size: 14px;
	text-align: center;
}

.pp-filtros .wc-block-product-filter-price-slider__range input[type="range"] {
	width: 100%;
	accent-color: var(--wp--preset--color--violeta);
}

.pp-filtros .wc-block-product-categories-list-item a,
.pp-filtros .cat-item a {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14.5px;
	color: var(--wp--preset--color--tinta-suave);
	text-decoration: none;
	display: flex;
	justify-content: space-between;
	gap: 8px;
	align-items: baseline;
}

.pp-filtros .wc-block-product-categories-list-item a:hover,
.pp-filtros .cat-item a:hover {
	color: var(--wp--preset--color--violeta);
}

/* La categoría en la que estamos, marcada. `pp-cat-actual` la pone el filtro de functions.php;
   `current-cat` es la clase clásica por si algún día la añade el propio block. */
.pp-filtros .wc-block-product-categories-list-item.current-cat a,
.pp-filtros .current-cat > a,
.pp-filtros a.pp-cat-actual {
	color: var(--wp--preset--color--violeta);
	font-weight: 700;
}

.pp-filtros a.pp-cat-actual::after {
	content: "";
	display: block;
	height: 2px;
	background-color: var(--wp--preset--color--violeta);
	border-radius: 2px;
	margin-top: 2px;
}

.pp-filtros .wc-block-product-categories-list-item-count,
.pp-filtros .count {
	font-size: 12.5px;
	color: var(--wp--preset--color--tinta-suave);
	opacity: 0.75;
}

/* Buscador de la barra. */
.pp-filtros .wp-block-search__input,
.pp-filtros input[type="search"],
.pp-filtros .wc-block-product-search__field {
	width: 100%;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14px;
	color: var(--wp--preset--color--tinta);
	background-color: #fff;
	border: 1px solid rgba(73, 61, 109, 0.45);
	border-radius: 10px;
	padding: 9px 12px;
}

.pp-filtros .wp-block-search__input:focus-visible,
.pp-filtros input[type="search"]:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--violeta);
}

.pp-filtros .wp-block-search__button,
.pp-filtros .wc-block-product-search__button {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
	background-color: var(--wp--preset--color--violeta);
	border: 0;
	border-radius: 10px;
	padding: 9px 14px;
	margin-top: 8px;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Página de contacto (pp-contacto): datos a la izquierda, formulario a la derecha.
   Los datos salen del pie del sitio (teléfono, correo, WhatsApp y dirección ya
   publicados); no se inventa ninguno.
--------------------------------------------------------------------------- */
/* El título de las páginas se alinea con la rejilla ancha (la plantilla lo dejaba en el
   ancho de lectura, centrado, y no coincidía con las tarjetas de abajo). */
body.page .wp-block-post-title {
	max-width: var(--wp--style--global--wide-size);
	margin-left: auto;
	margin-right: auto;
}

.pp-contacto {
	/* El grupo contenedor de la plantilla de página impone el ancho de lectura (800 px) y el
	   `contentSize` del bloque no se aplica; se fija aquí con el token del tema.
	   Se le suman los dos rellenos de raíz (27,32 px cada uno) para que el contenido útil siga
	   midiendo 1120 y arranque en x=116, igual que el hero (medido: antes arrancaba en 143). */
	max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--style--root--padding-left, 27px));
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 40px;
}

.pp-contacto-cuerpo {
	align-items: flex-start;
}

.pp-contacto-datos,
.pp-contacto-form {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 16px;
	padding: 22px;
	box-sizing: border-box;
}

.pp-contacto-datos {
	flex: 0 0 340px;
	max-width: 340px;
}

.pp-contacto-form {
	flex: 1 1 auto;
	min-width: 0;
}

.pp-contacto-datos h2,
.pp-form-titulo {
	font-size: 22px;
	margin: 0 0 6px;
}

/* Encabezado de la tarjeta de datos con un subrayado corto en el amarillo de acción. */
.pp-contacto-datos h2,
.pp-form-titulo {
	position: relative;
	padding-bottom: 12px;
	margin-bottom: 6px;
}

.pp-contacto-datos h2::after,
.pp-form-titulo::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34px;
	height: 3px;
	border-radius: 2px;
	background-color: var(--wp--preset--color--violeta);
}

/* Cada dato: tile con icono a la izquierda, etiqueta y valor a la derecha. */
.pp-dato {
	align-items: flex-start;
	gap: 12px;
	border-top: 1px solid rgba(15, 23, 42, 0.07);
	padding: 14px 0;
}

.pp-dato:first-of-type {
	border-top: 0;
	padding-top: 6px;
}

.pp-dato-icono {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	margin: 0;
	border-radius: 12px;
	background-color: rgba(73, 61, 109, 0.09);
	color: var(--wp--preset--color--violeta);
}

.pp-dato-icono svg,
.pp-dato-icono .wp-block-icon {
	width: 20px;
	height: 20px;
	display: block;
	fill: currentColor;
}

/* Tiles de los datos de contacto. Van con dos clases porque más abajo hay otro `.pp-dato-icono`
   que fija el color en violeta y, al ser posterior, ganaba: el pin salía violeta y el tile de
   WhatsApp tampoco se veía verde. */
.pp-dato-icono.pp-icono--wa {
	background-color: rgba(37, 211, 102, 0.16);
	color: #12824A;
}

.pp-dato-icono.pp-icono--agua {
	background-color: var(--wp--preset--color--agua-claro, #e7f4f6);
	color: var(--wp--preset--color--agua, #0a7280);
}

.pp-dato-texto {
	min-width: 0;
}

.pp-datos-accion .wp-block-button {
	width: 100%;
}

.pp-boton-wa .wp-block-button__link {
	width: 100%;
	justify-content: center;
	min-height: 48px;
	padding: 10px 24px;
	border-radius: 999px;
	background-color: #25D366;
	color: #06301A;
	font-size: 16px;
	font-weight: 700;
}

.pp-boton-wa .wp-block-button__link:hover {
	filter: brightness(0.95);
}

/* Sin remate de color arriba (18-oct, decisión de Taylor). El `border-top` de 4 px se curvaba con
   el radio de 16 y moría contra el borde de 1 px: dejaba un escalón visible en las dos esquinas,
   y las dos tarjetas usaban violetas distintos (#493D6D y #2A2440) para el mismo elemento. Ahora
   las dos llevan el mismo borde de 1 px y el único acento es el subrayado corto del título. */

.pp-dato-etiqueta {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tinta-suave);
	margin: 0 0 2px;
}

.pp-dato-valor {
	margin: 0;
	font-size: 16px;
	color: var(--wp--preset--color--tinta);
}

.pp-dato-valor a {
	color: var(--wp--preset--color--violeta);
	text-decoration: none;
}

.pp-dato-valor a:hover,
.pp-dato-valor a:focus-visible {
	text-decoration: underline;
}

.pp-dato-enlace {
	margin: 6px 0 0;
	font-size: 14px;
}

.pp-dato-enlace a {
	color: var(--wp--preset--color--violeta);
}

/* Formulario */
.pp-form-titulo {
	margin-bottom: 14px;
}

.pp-form-campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 14px;
}

.pp-form-campo label {
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--tinta);
}

.pp-form-opcional {
	font-weight: 400;
	color: var(--wp--preset--color--tinta-suave);
}

.pp-form input,
.pp-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 10px;
	background-color: #fff;
	color: var(--wp--preset--color--tinta);
	font: inherit;
	font-size: 16px;
}

.pp-form input:focus,
.pp-form textarea:focus {
	border-color: var(--wp--preset--color--violeta);
	outline: 2px solid var(--wp--preset--color--violeta);
	outline-offset: 1px;
}

.pp-form textarea {
	min-height: 120px;
	resize: vertical;
}

/* El amarillo queda reservado al proceso de compra (ficha, carrito, checkout y el CTA de la
   tienda). Los formularios de contacto usan el violeta de marca. */
.pp-form-boton {
	min-height: 48px;
	padding: 0 28px;
	border: 0;
	border-radius: 999px;
	background-color: var(--wp--preset--color--violeta);
	color: #fff;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.pp-form-boton:hover {
	background-color: var(--wp--preset--color--violeta-oscuro);
}

.pp-form-boton:focus-visible {
	outline: 2px solid var(--wp--preset--color--violeta);
	outline-offset: 2px;
}

.pp-form-aviso {
	margin: 0 0 16px;
	padding: 11px 14px;
	border-left: 3px solid var(--wp--preset--color--violeta);
	border-radius: 8px;
	background-color: rgba(73, 61, 109, 0.06);
	font-size: 15px;
}

.pp-form-aviso--error {
	border-left-color: var(--wp--preset--color--error, #b3261e);
	background-color: rgba(179, 38, 30, 0.06);
}

/* Campo trampa: fuera de pantalla, sin tamaño y oculto a lectores de pantalla.
   No se usa `display: none` porque algunos bots lo detectan. */
.pp-form-trampa {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

@media (max-width: 900px) {
	.pp-contacto .pp-contacto-cuerpo {
		flex-wrap: wrap;
	}

	.pp-contacto .pp-contacto-cuerpo > .pp-contacto-datos,
	.pp-contacto .pp-contacto-cuerpo > .pp-contacto-form {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/* ==========================================================================
   Carrito: la misma línea que la tienda (bordes de un solo trazo, píldoras,
   amarillo sólo en la acción de compra, precio con dos decimales).
   ========================================================================== */

/* `woocommerce-blocktheme.css` mete 1000 px a cualquier `.woocommerce` dentro del carrito
   (`.woocommerce-cart main .woocommerce` = 0,2,1). Se gana con dos clases propias: 0,3,0. */
.pp-archivo .wc-block-breadcrumbs.wp-block-woocommerce-breadcrumbs,
.pp-archivo .wc-block-breadcrumbs .woocommerce-breadcrumb {
	width: 100%;
	max-width: none;
}

/* Las migas y el título de esta plantilla nacen `constrained`, así que se frenaban en el ancho de
   lectura. Igual que en el archivo, el ancho lo manda la rejilla del catálogo (1120). */
.pp-archivo-cabeza > .wp-block-post-title,
.pp-archivo-cabeza > .wp-block-woocommerce-breadcrumb,
.pp-archivo-cabeza > .wp-block-woocommerce-breadcrumbs {
	width: 100%;
	max-width: none;
	padding-inline: 0;
}

.pp-carrito .wp-block-woocommerce-cart {
	font-family: var(--wp--preset--font-family--roboto);
}

/* Títulos de sección con el peso de la ficha, no el 30 px por defecto del bloque. */
.pp-carrito .wc-block-cart h2 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--tinta);
}

/* La columna del carrito y el resumen son tarjetas blancas, como las de la tienda (el fondo de la
   página es gris muy claro, así que sin tarjeta el contenido flotaba). La tarjeta va en el
   contenedor y no en la tabla porque el plugin fuerza `background: initial !important` en
   `table.wc-block-cart-items`, y vencerlo pediría un `!important` propio. */
.pp-carrito .wc-block-cart__main {
	background-color: #fff;
	border: 1px solid rgba(73, 61, 109, 0.14);
	border-radius: 16px;
	padding: 4px 18px 8px;
	margin: 0;
}

.pp-carrito .wc-block-cart__sidebar {
	background-color: #fff;
	border: 1px solid rgba(73, 61, 109, 0.14);
	border-radius: 16px;
	padding: 20px;
}

/* Tabla: un solo trazo violeta suave, el mismo de las tarjetas de la tienda. */
.pp-carrito .wc-block-cart-items__header th,
.pp-carrito .wc-block-cart-items__row td {
	border-color: rgba(73, 61, 109, 0.14);
}

.pp-carrito .wc-block-cart-items__header th {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tinta-suave);
}

/* Nombre del producto como los títulos de tarjeta. */
/* El plugin usa `table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name`
   (0,3,1). Para el mismo peso, se replica la ruta y se antepone el ámbito de la página. */
.pp-carrito table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	font-size: 17px;
	font-weight: 700;
	color: var(--wp--preset--color--violeta);
	text-decoration: none;
}

.pp-carrito table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name:hover {
	text-decoration: underline;
}

/* Precio en negrita y con el mismo tamaño que en la tienda. */
.pp-carrito .wc-block-cart .wc-block-components-product-price,
.pp-carrito .wc-block-cart .price {
	font-size: 16px;
	font-weight: 700;
	color: var(--wp--preset--color--tinta);
}

/* Cantidad: caja redondeada, no el cuadro gris del plugin. */
.pp-carrito .wc-block-components-quantity-selector {
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 999px;
	background-color: #fff;
	overflow: hidden;
}

.pp-carrito .wc-block-components-quantity-selector__button {
	color: var(--wp--preset--color--violeta);
}

.pp-carrito .wc-block-components-quantity-selector__button:hover {
	background-color: rgba(73, 61, 109, 0.08);
}

.pp-carrito .wc-block-components-quantity-selector__input {
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--tinta);
}

/* WooCommerce recorta la descripción corta en el carrito y la deja en «Si querés aprovec…».
   Un fragmento con puntos suspensivos no aporta: la tienda tampoco la muestra en las tarjetas. */
.pp-carrito .wc-block-components-product-metadata__description {
	display: none;
}

/* Quitar del carrito: discreto hasta que se pasa el ratón. */
.pp-carrito .wc-block-cart-item__remove-link {
	color: var(--wp--preset--color--tinta-suave);
}

.pp-carrito .wc-block-cart-item__remove-link:hover {
	color: var(--wp--preset--color--violeta);
}

/* Resumen: tarjeta blanca con el borde de la tienda. */
.pp-carrito .wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.pp-carrito .wc-block-cart__sidebar {
	border-color: rgba(73, 61, 109, 0.14);
}

.pp-carrito .wc-block-components-totals-item__label {
	font-size: 15px;
	color: var(--wp--preset--color--tinta-suave);
}

.pp-carrito .wc-block-components-totals-item__value {
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--tinta);
}

/* Total: más grande que el resto de líneas. */
.pp-carrito .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.pp-carrito .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 18px;
	font-weight: 700;
	color: var(--wp--preset--color--tinta);
}

/* Botón de finalizar: el amarillo del proceso de compra, en píldora. */
.pp-carrito .wc-block-cart__submit-button {
	min-height: 52px;
	border: 0;
	border-radius: 999px;
	background-color: var(--wp--preset--color--amarillo);
	color: var(--wp--preset--color--violeta-oscuro);
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 16px;
	font-weight: 700;
}

.pp-carrito .wc-block-cart__submit-button:hover {
	background-color: var(--wp--preset--color--amarillo);
	filter: brightness(0.96);
	color: var(--wp--preset--color--violeta-oscuro);
}

.pp-carrito .wc-block-cart__submit-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--violeta);
	outline-offset: 2px;
}

/* Enlaces de texto (cupón, volver a la tienda) con el violeta de marca. */
.pp-carrito .wc-block-components-totals-coupon__button,
.pp-carrito .wc-block-components-button.is-link {
	color: var(--wp--preset--color--violeta);
}

/* ==========================================================================
   Cabecera: pegajosa y con menú de hamburguesa.
   ========================================================================== */

/* El `position: sticky` estaba en `.pp-barra`, que es el único hijo del `header`: el contenedor
   mide exactamente lo mismo que la barra, así que no había recorrido y no se pegaba (medido:
   top −700 px tras bajar 700). Se aplica al `header` completo, cuyo contenedor sí es la página. */
:root {
	/* Alto real de la cabecera fija, incluida la barra de administración cuando la hay.
	   Lo usan los bloques pegajosos (filtros de archivo, tarjetas del artículo) para no
	   meterse debajo de la cabecera con la sesión abierta. */
	--pp-cabecera: 74px;
}

body.admin-bar {
	--pp-cabecera: 106px;
}

@media (max-width: 782px) {
	body.admin-bar {
		--pp-cabecera: 120px;
	}
}

header:has(.pp-barra) {
	position: sticky;
	top: 0;
	z-index: 60;
}

/* La barra de administración de WordPress mide 32 px (46 en móvil) y va por encima de todo.
   Con la cabecera pegada en `top: 0`, esos píxeles la tapaban: al revisar el sitio con la
   sesión abierta se veía el logo recortado. Medido: 32 px tapados en escritorio y 46 en móvil. */
body.admin-bar header:has(.pp-barra) {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar header:has(.pp-barra) {
		top: 46px;
	}
}

/* Los saltos a anclas (índice del artículo, «Saltar al contenido», enlaces con #) dejaban el
   destino justo bajo la cabecera: medido, el titular quedaba a 0 px con 74 px de cabecera.
   `scroll-padding-top` desplaza el punto de destino en todos los saltos, sin tocar el marcado. */
html {
	scroll-padding-top: 90px;
}

html:has(body.admin-bar) {
	scroll-padding-top: 122px;
}

@media (max-width: 782px) {
	html {
		scroll-padding-top: 86px;
	}

	html:has(body.admin-bar) {
		scroll-padding-top: 132px;
	}
}

.pp-barra {
	position: static;
}

.pp-barra-derecha {
	gap: 10px;
}

/* WooCommerce inyecta su propio bloque de cuenta dentro de la navegación. El menú ya tiene
   «Mi cuenta», así que se oculta: duplicaba el acceso y quedaba con contraste nulo sobre violeta. */
.pp-barra-derecha .wp-block-woocommerce-customer-account {
	display: none;
}

/* El mini-carrito también llega inyectado y quedaba invisible (tinta oscura sobre violeta).
   Se pinta en blanco con el contador en amarillo, y se ordena: carrito antes, hamburguesa al borde. */
.pp-barra-derecha .wc-block-mini-cart {
	order: 1;
	color: #fff;
}

.pp-barra-derecha .wc-block-mini-cart__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 999px;
	color: #fff;
	background-color: transparent;
}

.pp-barra-derecha .wc-block-mini-cart__button:hover {
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--wp--preset--color--amarillo);
	background-color: rgba(255, 255, 255, 0.08);
}

/* Sin artículos el icono va limpio en blanco; el amarillo sólo aparece cuando hay algo en el
   carrito, para no competir con el botón de compra de la barra. */
.pp-barra-derecha .wc-block-mini-cart__quantity-badge {
	background-color: transparent;
	color: #fff;
}

.pp-barra-derecha .wc-block-mini-cart .wc-block-mini-cart__icon {
	fill: #fff;
}

.pp-barra-derecha .wc-block-mini-cart__badge {
	background-color: var(--wp--preset--color--amarillo);
	color: var(--wp--preset--color--violeta-oscuro);
	font-weight: 600;
}

.pp-barra-derecha .pp-menu {
	order: 2;
}

/* En móvil la barra queda en logo + hamburguesa: WhatsApp e «Ir a la tienda» ya están en el menú.
   Se sube la especificidad porque `body .is-layout-flex` y `.pp-barra .wp-block-site-logo img`
   pesan más que una clase sola. */
@media (max-width: 640px) {
	.pp-barra .pp-acciones {
		display: none;
	}

	.pp-barra .wp-block-site-logo.pp-marca img {
		width: 120px;
		height: auto;
	}

	.pp-barra-derecha {
		gap: 8px;
	}

	.pp-barra .pp-menu .wp-block-navigation__responsive-container-open {
		width: 44px;
		height: 44px;
	}

	.pp-barra-derecha .wc-block-mini-cart__button {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pp-barra-derecha .wc-block-mini-cart__icon {
		width: 22px;
		height: 22px;
	}
}

/* Botón de la hamburguesa: píldora discreta sobre el degradado violeta. */
.pp-menu .wp-block-navigation__responsive-container-open {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 999px;
	background-color: transparent;
	color: #fff;
	cursor: pointer;
}

.pp-menu .wp-block-navigation__responsive-container-open:hover {
	border-color: rgba(255, 255, 255, 0.6);
	background-color: rgba(255, 255, 255, 0.12);
}

.pp-menu .wp-block-navigation__responsive-container-open svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* Panel desplegable: el violeta de la marca, enlaces grandes y el botón de cerrar a la vista. */
/* El core pinta el panel de blanco con
   `.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open`
   (0,4,0). Se iguala la especificidad con la clase del bloque delante. */
/* Panel como COLUMNA de 320 px pegada al borde derecho, no a pantalla completa.
   Referencia medida en bachilleratopormadurez.com: el core abre el contenedor a
   `inset: 0`; acá se atan los tres bordes y se suelta el izquierdo (`left: auto`),
   que es lo que deja que el `width` mande en vez del viewport.
   `box-sizing: border-box` hace que los 320 px incluyan los 25 px de padding; sin
   eso el panel mediría 320 + 50 = 370. */
.pp-menu.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open {
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	width: min(320px, 100%);
	box-sizing: border-box;
	padding: 25px;
	background-color: var(--wp--preset--color--violeta);
	color: #fff;
	overflow-y: auto;
	overscroll-behavior: contain;
	box-shadow: -28px 0 60px rgba(20, 14, 40, 0.35);
}

/* Aire para la ✕: el core reserva 56 px; con el panel más angosto conviene 64
   para que no roce el primer enlace. */
.pp-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 64px;
	justify-content: flex-start;
	align-items: stretch;
}

/* Los enlaces, en una columna pareja: cada fila ocupa el ancho del panel y la lista
   no se estira más que el propio panel. */
.pp-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 10px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	align-items: stretch;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 18px;
}

.pp-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: stretch;
	width: 100%;
}

/* La cabecera crea su propio contexto de apilado (z-index 60), así que el panel —aunque
   el core lo pone en 100000— no podía pasar por encima del aviso de cookies (9999) y
   éste tapaba los últimos enlaces. Con el menú abierto se sube la cabecera entera. */
header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	z-index: 100001;
}

.pp-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	box-sizing: border-box; /* sin esto el padding se suma al 100 % y el enlace desborda el panel */
	width: 100%;
	padding: 12px 16px;
	border-radius: 10px;
	color: #fff;
}

.pp-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.pp-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
	background-color: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* El enlace de la página actual se marca con peso y subrayado, no con amarillo:
   el amarillo queda reservado a los botones de compra. */
.pp-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"] {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.pp-menu .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 0;
	right: 0;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 999px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pp-menu .wp-block-navigation__responsive-container-close:hover {
	background-color: rgba(255, 255, 255, 0.12);
}

.pp-menu .wp-block-navigation__responsive-container-close svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.pp-checkout .wc-block-checkout h2,
.pp-checkout .wc-block-checkout h3 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--tinta);
}

/* Formulario y resumen como tarjetas blancas. */
.pp-checkout .wc-block-checkout__main,
.pp-checkout .wc-block-checkout__sidebar {
	background-color: #fff;
	border: 1px solid rgba(73, 61, 109, 0.14);
	border-radius: 16px;
	padding: 24px;
}

/* Campos iguales a los del formulario de contacto: trazo suave, radio 10, 48 px. */
.pp-checkout .wc-block-components-form .wc-block-components-text-input input,
.pp-checkout .wc-block-components-form .wc-block-components-textarea textarea,
.pp-checkout .wc-block-components-form .wc-block-components-select select,
.pp-checkout .wc-block-components-form .wc-block-components-country-input select,
/* El selector de provincia usa otro componente (`wc-blocks-components-select`, con «blocks»). */
.pp-checkout .wc-blocks-components-select__select {
	height: 48px;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 10px;
	background-color: #fff;
	color: var(--wp--preset--color--tinta);
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 15px;
	font-weight: 400;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* El relleno horizontal se pone sólo a los campos de texto: los selectores llevan su etiqueta
   dentro y necesitan su propio reparto vertical (16 px arriba), que ya trae el plugin. */
.pp-checkout .wc-block-components-form .wc-block-components-text-input input {
	padding: 0 12px;
}

.pp-checkout .wc-block-components-form .wc-block-components-textarea textarea {
	height: auto;
	min-height: 96px;
	padding: 10px 12px;
}

.pp-checkout .wc-block-components-text-input label,
.pp-checkout .wc-block-components-select label {
	font-size: 14px;
	color: var(--wp--preset--color--tinta-suave);
}

.pp-checkout .wc-block-components-form .wc-block-components-text-input input:focus,
.pp-checkout .wc-block-components-form .wc-block-components-textarea textarea:focus,
.pp-checkout .wc-block-components-form .wc-block-components-select select:focus,
.pp-checkout .wc-block-components-form .wc-block-components-country-input select:focus {
	border-color: var(--wp--preset--color--violeta);
	box-shadow: 0 0 0 3px rgba(73, 61, 109, 0.12);
	outline: none;
}

.pp-checkout .wc-block-components-validation-error {
	font-size: 13px;
	color: var(--wp--preset--color--error, #b3261e);
}

/* Botón de realizar el pedido: el amarillo del cierre de compra, en píldora. */
.pp-checkout .wc-block-components-checkout-place-order-button {
	min-height: 56px;
	border: 0;
	border-radius: 999px;
	background-color: var(--wp--preset--color--amarillo);
	color: var(--wp--preset--color--violeta-oscuro);
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 16px;
	font-weight: 700;
}

.pp-checkout .wc-block-components-checkout-place-order-button:hover {
	background-color: var(--wp--preset--color--amarillo);
	filter: brightness(0.96);
	color: var(--wp--preset--color--violeta-oscuro);
}

.pp-checkout .wc-block-components-checkout-place-order-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--violeta);
	outline-offset: 2px;
}

/* Opciones de pago y envío: cajas con el trazo de las tarjetas. */
.pp-checkout .wc-block-components-radio-control__option,
.pp-checkout .wc-block-components-radio-control-accordion-option {
	border-color: rgba(73, 61, 109, 0.14);
}

.pp-checkout .wc-block-components-radio-control input[type="radio"],
.pp-checkout .wc-block-components-checkbox input[type="checkbox"] {
	accent-color: var(--wp--preset--color--violeta);
}

/* Los selectores llevan la etiqueta dentro del campo: se deja aire arriba para que el valor
   no quede pegado a ella. */
/* Los selectores conservan el reparto interno del plugin (etiqueta arriba, valor abajo). */

/* Enlaces legales: violeta y subrayados, como el resto de enlaces del sitio. */
.pp-checkout .wc-block-checkout__terms a,
.pp-checkout .wc-block-components-checkbox__label a {
	color: var(--wp--preset--color--violeta);
	text-decoration: underline;
}

/* WooCommerce recorta la descripción corta en el resumen («Si querés aprovec…»): fuera, igual que
   en el carrito. */
.pp-checkout .wc-block-components-product-metadata__description {
	display: none;
}

/* Términos y notas al pie del formulario. */
.pp-checkout .wc-block-checkout__terms,
.pp-checkout .wc-block-components-checkout-order-summary__caption {
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--tinta-suave);
}

/* Totales del resumen. */
.pp-checkout .wc-block-components-totals-item__label {
	font-size: 15px;
	color: var(--wp--preset--color--tinta-suave);
}

.pp-checkout .wc-block-components-totals-item__value {
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--tinta);
}

.pp-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.pp-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 18px;
	font-weight: 700;
	color: var(--wp--preset--color--tinta);
}

/* ---------------------------------------------------------------------------
   Preguntas frecuentes (18-oct).
   Hero partido, buscador en vivo y acordeón con el bloque nativo `core/details`:
   el navegador abre y cierra solo, sin JS ni plugin. El JS únicamente filtra.
   Paleta de siempre; el amarillo no aparece porque no es proceso de compra.
--------------------------------------------------------------------------- */

/* El hueco entre la barra y el hero: el `wp-site-blocks` del tema separa los bloques de nivel
   superior con `margin-block-start: var(--wp--style--block-gap)`, y sobre un hero a sangre eso se
   ve como una franja blanca de 19 px. Se anula solo en esta plantilla. */
.page-template-page-preguntas-frecuentes .wp-site-blocks > main,
.page-template-page-planea-tu-visita .wp-site-blocks > main,
.page-template-page-contacto .wp-site-blocks > main {
	margin-block-start: 0;
}

.pp-faq-hero,
.pp-planea-hero,
.pp-promos-hero,
.pp-contacto-hero {
	padding-block: clamp(36px, 6vw, 72px);
	/* Degradado vertical que arranca en el color exacto de la barra (#3c325a) y aclara hacia
	   abajo hasta #524579: barra y hero se leen como una sola pieza, sin costura. */
	background: linear-gradient(
		180deg,
		var(--wp--preset--color--violeta-barra, #3c325a) 0%,
		var(--wp--preset--color--violeta-hero, #524579) 100%
	);
	color: #fff;
}

.pp-faq-hero-cuerpo,
.pp-planea-hero-cuerpo,
.pp-promos-hero-cuerpo,
.pp-contacto-hero-cuerpo {
	display: flex;
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	/* Sin relleno lateral: el gutter ya lo pone `.pp-faq-hero` (regla del tema para los
	   `.alignfull` hijos del contenido). Con los dos, el texto arrancaba 27 px adentro. */
}

.pp-faq-hero-texto,
.pp-planea-hero-texto,
.pp-promos-hero-texto,
.pp-contacto-hero-texto {
	flex: 1 1 520px;
	min-width: 0;
}

.pp-faq-eyebrow,
.pp-planea-eyebrow,
.pp-promos-eyebrow,
.pp-contacto-eyebrow {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.pp-faq-titulo,
.pp-planea-titulo,
.pp-promos-titulo,
.pp-contacto-titulo {
	margin: 0 0 14px;
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.12;
	color: #fff;
	text-wrap: balance;
}

.pp-faq-sub,
.pp-planea-sub,
.pp-promos-sub,
.pp-contacto-sub {
	margin: 0 0 26px;
	font-size: clamp(16px, 1.5vw, 18px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.84);
	/* Sin `max-width`: el layout «constrained» del core centra todo hijo con ancho propio
	   (con `margin: auto !important`), y eso dejaba el subtítulo y el buscador 21 px a la
	   derecha del titular. El ancho lo fija el contenedor de 600 px, que ya da línea cómoda. */
}

/* Buscador: pastilla blanca, la lupa dentro del campo. */
.pp-faq-buscador {
	position: relative;
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 14px 34px rgba(15, 23, 42, 0.22);
	padding-right: 8px;
}

.pp-faq-lupa {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wp--preset--color--violeta, #493D6D);
	display: flex;
	pointer-events: none;
}

.pp-faq-buscador input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 17px 8px 17px 50px;
	font-size: 16px;
	color: var(--wp--preset--color--tinta, #1E293B);
	border-radius: 14px;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.pp-faq-buscador input[type="search"]::placeholder {
	/* 3,67:1 con el gris anterior; 5,77:1 con este. */
	color: #5D6678;
}

.pp-faq-buscador input[type="search"]:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
	border-radius: 14px;
}

.pp-faq-buscador input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.pp-faq-limpiar {
	flex: 0 0 auto;
	border: 0;
	background: #F1EEF8;
	color: var(--wp--preset--color--violeta, #493D6D);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: 10px;
	cursor: pointer;
}

.pp-faq-limpiar:hover {
	background: #E7E2F4;
}

.pp-faq-contador {
	margin: 10px 0 0;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
}

.pp-faq-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.pp-faq-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.34);
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.pp-faq-chip:hover,
.pp-faq-chip:focus-visible {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
}

.pp-faq-hero-foto,
.pp-planea-hero-foto,
.pp-promos-hero-foto {
	flex: 0 0 42%;
	max-width: 420px;
	margin: 0;
}

.pp-faq-hero-foto img,
.pp-planea-hero-foto img,
.pp-promos-hero-foto img {
	width: 100%;
	height: clamp(240px, 30vw, 340px);
	object-fit: cover;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
}

/* --------------------------- Listado por categorías ------------------------ */

.pp-faq-cat {
	margin-top: clamp(34px, 5vw, 58px);
	padding-left: var(--ponderosa-gutter);
	padding-right: var(--ponderosa-gutter);
	scroll-margin-top: 90px;
}

.pp-faq-cat-cabeza {
	margin-bottom: 18px;
}

.pp-faq-cat h2 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 6px;
	font-size: clamp(22px, 2.6vw, 29px);
	color: var(--wp--preset--color--tinta, #1E293B);
}

.pp-faq-cat-emoji {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	border-radius: 13px;
	background: #F1EEF8;
	font-size: 22px;
	line-height: 1;
}

.pp-faq-cat-cuenta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 24px;
	padding: 0 9px;
	border-radius: 999px;
	background: #F1EEF8;
	color: var(--wp--preset--color--violeta, #493D6D);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
}

.pp-faq-cat-entrada {
	margin: 0;
	color: var(--wp--preset--color--tinta-suave, #334155);
	font-size: 16px;
}

/* Acordeón nativo. */
.pp-faq-item {
	background: #fff;
	border: 1px solid var(--wp--preset--color--linea, #E2E8F0);
	border-radius: 14px;
	margin-bottom: 10px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pp-faq-item + .pp-faq-item {
	margin-top: 0;
}

.pp-faq-item:hover {
	border-color: #C4B8DE;
	box-shadow: 0 10px 26px rgba(73, 61, 109, 0.12);
}

.pp-faq-item[open] {
	border-color: #C4B8DE;
	box-shadow: 0 10px 26px rgba(73, 61, 109, 0.12);
}

.pp-faq-item summary {
	position: relative;
	padding: 17px 56px 17px 20px;
	font-weight: 600;
	font-size: 17px;
	line-height: 1.45;
	color: var(--wp--preset--color--tinta, #1E293B);
	cursor: pointer;
	list-style: none;
	border-radius: 14px;
}

.pp-faq-item summary::-webkit-details-marker {
	display: none;
}

.pp-faq-item summary::marker {
	content: "";
}

.pp-faq-cat .pp-faq-item summary::after {
	content: "";
	position: absolute;
	right: 22px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--wp--preset--color--violeta, #493D6D);
	border-bottom: 2px solid var(--wp--preset--color--violeta, #493D6D);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.18s ease;
}

.pp-faq-cat .pp-faq-item[open] summary::after {
	transform: translateY(-30%) rotate(-135deg);
}

.pp-faq-item summary:hover {
	background: #FAF8FE;
}

/* WordPress mete `:where(.wp-site-blocks :focus) { outline: 2px solid }`, que por
   especificidad cero alcanza a cualquier elemento enfocado —incluido el summary al
   hacer clic— y dibuja un recuadro oscuro alrededor de la pregunta abierta. Se anula
   solo para el foco de ratón: con teclado sigue el anillo violeta de abajo. */
.pp-faq-item summary:focus:not(:focus-visible) {
	outline: none;
}

.pp-faq-item summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--violeta, #493D6D);
	outline-offset: -3px;
}

.pp-faq-item p {
	margin: 0 20px 14px;
	color: var(--wp--preset--color--tinta-suave, #334155);
	line-height: 1.7;
	font-size: 16px;
}

.pp-faq-item p:first-of-type {
	margin-top: 2px;
	padding-top: 12px;
	border-top: 1px solid #F1EEF8;
}

.pp-faq-item p:last-of-type {
	margin-bottom: 20px;
}

.pp-faq-item[hidden] {
	display: none;
}

.pp-faq-cat[hidden] {
	display: none;
}

/* Cada categoría es ahora UN bloque blanco: título, subtítulo y todas sus preguntas.
   Las preguntas van sobre el lila de tarjeta del sitio para conservar la jerarquía. */
main .pp-faq-cat {
	box-sizing: border-box;
	max-width: 1172px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: clamp(16px, 2vw, 26px);
	background: #fff;
	border: 1px solid var(--wp--preset--color--linea, #E2E8F0);
	border-radius: 18px;
}

.pp-faq-cat {
	margin-top: clamp(18px, 2.6vw, 26px);
}

.pp-faq-cat .pp-faq-cat-cabeza {
	margin-bottom: 16px;
}

.pp-faq-cat .pp-faq-item {
	background: var(--wp--preset--color--tarjeta, #F4F1F9);
	border-color: #E6E0F1;
}

.pp-faq-cat .pp-faq-item summary:hover {
	background: #EFEAF7;
}

.pp-faq-cat .pp-faq-item[open] {
	background: #F8F5FC;
	border-color: #C4B8DE;
}

/* En móvil la tarjeta no llega a los bordes: conserva el margen del sitio. */
@media (max-width: 782px) {
	main .pp-faq-cat {
		max-width: calc(100% - 32px);
		padding: 16px;
	}
}

/* La caja de ayuda y el cierre repiten el ancho y el patrón de las categorías:
   bloque blanco con las piezas en el lila de tarjeta. */
main .pp-faq-ayuda-caja,
main .pp-faq-cierre {
	box-sizing: border-box;
	max-width: 1172px;
	margin-left: auto !important;
	margin-right: auto !important;
}

main .pp-faq-cierre {
	padding: clamp(16px, 2vw, 26px);
	background: #fff;
	border: 1px solid var(--wp--preset--color--linea, #E2E8F0);
	border-radius: 18px;
}

.pp-faq-cierre .pp-exp-card {
	background: var(--wp--preset--color--tarjeta, #F4F1F9);
	border-color: #E6E0F1;
}

@media (max-width: 782px) {
	main .pp-faq-cierre {
		max-width: calc(100% - 32px);
		padding: 16px;
	}
}

.pp-faq-accion a {
	font-weight: 600;
	color: var(--wp--preset--color--violeta, #493D6D);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pp-faq-accion a:hover {
	color: var(--wp--preset--color--violeta-oscuro, #2A2440);
}

/* -------------------------------- Ayuda ---------------------------------- */

.pp-faq-ayuda {
	margin-top: clamp(40px, 6vw, 64px);
	padding-left: var(--ponderosa-gutter);
	padding-right: var(--ponderosa-gutter);
}

.pp-faq-ayuda-caja {
	/* Antes era #F4F1F9 sobre un fondo #EDF0F5: casi el mismo valor, y la caja se perdía.
	   Va en violeta de marca para que cierre la página. */
	background: linear-gradient(160deg, #493D6D 0%, #3C325A 100%);
	border: 0;
	border-radius: 20px;
	padding: clamp(28px, 4vw, 46px) clamp(20px, 4vw, 44px);
	text-align: center;
	box-shadow: 0 16px 34px rgba(73, 61, 109, 0.24);
}

.pp-faq-ayuda-caja h2 {
	margin: 0 0 10px;
	font-size: clamp(22px, 2.4vw, 27px);
	color: #ffffff;
}

.pp-faq-ayuda-caja p {
	margin: 0 auto 22px;
	max-width: 56ch;
	color: rgba(255, 255, 255, 0.86);
}

.pp-faq-ayuda-caja .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.pp-faq-ayuda-caja .wp-block-button__link {
	border-radius: 999px;
	padding: 12px 24px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.pp-faq-btn-wa .wp-block-button__link {
	background: #ffffff;
	color: var(--wp--preset--color--violeta, #493D6D);
}

.pp-faq-btn-wa .wp-block-button__link:hover {
	background: #F1EEF8;
}

.pp-faq-btn-wa .wp-block-button__link:hover {
	background: var(--wp--preset--color--violeta-oscuro, #2A2440);
	color: #fff;
}

.pp-faq-btn-borde .wp-block-button__link {
	border: 2px solid rgba(255, 255, 255, 0.6);
	color: #ffffff;
	background: transparent;
}

.pp-faq-btn-borde .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.14);
}

/* -------------------------------- Cierre --------------------------------- */

.pp-faq-cierre {
	margin-top: clamp(40px, 6vw, 64px);
	padding-block: clamp(34px, 5vw, 56px);
	background: #F8F6FC;
	border-top: 1px solid #EDE9F6;
}

.pp-faq-cierre > h2 {
	text-align: center;
	margin: 0 0 clamp(22px, 3vw, 32px);
	font-size: clamp(22px, 2.6vw, 30px);
	color: var(--wp--preset--color--tinta, #1E293B);
}

.pp-faq-cierre-cards {
	gap: 18px;
}

.pp-faq-cierre-cards .wp-block-column {
	background: #fff;
	border: 1px solid var(--wp--preset--color--linea, #E2E8F0);
	border-radius: 16px;
	padding: clamp(20px, 3vw, 28px);
}

.pp-faq-cierre-kicker {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--violeta, #493D6D);
}

.pp-faq-cierre-cards h3 {
	margin: 0 0 8px;
	font-size: clamp(20px, 2vw, 23px);
	color: var(--wp--preset--color--tinta, #1E293B);
}

.pp-faq-cierre-cards p {
	margin: 0 0 10px;
	color: var(--wp--preset--color--tinta-suave, #334155);
}

.pp-faq-cierre-cards a {
	font-weight: 600;
	color: var(--wp--preset--color--violeta, #493D6D);
	text-underline-offset: 3px;
}

.pp-faq-vacio-caja {
	margin-top: clamp(28px, 4vw, 44px);
	padding-left: var(--ponderosa-gutter);
	padding-right: var(--ponderosa-gutter);
}

.pp-faq-vacio {
	text-align: center;
	margin: 0;
	padding: 22px 24px;
	background: #F8F6FC;
	border: 1px dashed #D9D2E9;
	border-radius: 14px;
	font-size: 15px;
	color: var(--wp--preset--color--tinta-suave, #334155);
}

.pp-faq-vacio[hidden] {
	display: none;
}

/* ------------------------------ Responsive ------------------------------- */

@media (max-width: 900px) {
	.pp-faq-hero-cuerpo,
	.pp-planea-hero-cuerpo,
	.pp-promos-hero-cuerpo,
	.pp-contacto-hero-cuerpo {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.pp-faq-hero-foto,
	.pp-planea-hero-foto,
	.pp-promos-hero-foto {
		flex: 0 0 auto;
		max-width: none;
	}

	.pp-faq-hero-foto img,
	.pp-planea-hero-foto img,
	.pp-promos-hero-foto img {
		height: 200px;
		border-radius: 16px;
	}

}

@media (max-width: 600px) {
	.pp-faq-chip {
		font-size: 13px;
		padding: 7px 11px;
	}

	.pp-faq-chips {
		gap: 7px;
	}

	.pp-faq-buscador input[type="search"] {
		font-size: 15px;
		padding: 16px 6px 16px 46px;
	}

	.pp-faq-item summary {
		padding: 15px 48px 15px 16px;
		font-size: 16px;
	}

	.pp-faq-item p {
		margin-left: 16px;
		margin-right: 16px;
	}

	.pp-faq-cat-emoji {
		width: 40px;
		height: 40px;
		flex-basis: 40px;
		font-size: 19px;
	}

	.pp-faq-cierre-cards {
		flex-wrap: wrap;
	}
}

/* ---------------------------------------------------------------------------
   Botones de WhatsApp con el branding de la marca (18-oct).

   Verde de marca: #25D366. Con texto blanco daría 1,98:1, así que el texto y el glifo van en
   la tinta casi negra (#0B141A), que es como los usa WhatsApp en su propio sitio: 9,9:1 sobre
   ese verde. El glifo es un `mask` con `currentColor`, el mismo trazo de 24×24 que el icono
   registrado `ponderosa/whatsapp` en functions.php.
--------------------------------------------------------------------------- */
.pp-wa .wp-block-button__link,
.pp-boton-wa .wp-block-button__link,
.pp-faq-btn-wa .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	background-color: #25D366;
	border: 1px solid transparent;
	color: #0B141A;
	font-weight: 600;
	text-decoration: none;
}

.pp-wa .wp-block-button__link::before,
.pp-boton-wa .wp-block-button__link::before,
.pp-faq-btn-wa .wp-block-button__link::before {
	content: "";
	width: 19px;
	height: 19px;
	flex: 0 0 19px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M17.47%2014.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.96-.94%201.16-.17.2-.35.22-.64.08-.3-.15-1.26-.47-2.39-1.48-.88-.79-1.48-1.76-1.65-2.06-.18-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.61-.91-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2%200-.52.07-.79.37-.27.3-1.04%201.02-1.04%202.48s1.07%202.88%201.21%203.07c.15.2%202.1%203.2%205.08%204.49.71.3%201.26.49%201.69.62.71.23%201.36.2%201.87.12.57-.09%201.76-.72%202-1.41.25-.7.25-1.29.18-1.42-.08-.12-.28-.2-.58-.34M12.05%2021.8h-.01a9.87%209.87%200%200%201-5.03-1.38l-.36-.21-3.74.98%201-3.65-.24-.37a9.86%209.86%200%200%201-1.51-5.26c0-5.45%204.44-9.89%209.89-9.89%202.64%200%205.12%201.03%206.99%202.9a9.83%209.83%200%200%201%202.89%206.99c0%205.45-4.44%209.89-9.88%209.89m8.41-18.3A11.82%2011.82%200%200%200%2012.05%200C5.5%200%20.16%205.34.16%2011.89c0%202.1.55%204.14%201.59%205.95L.06%2024l6.3-1.65a11.88%2011.88%200%200%200%205.69%201.45h.01c6.55%200%2011.89-5.34%2011.89-11.89a11.82%2011.82%200%200%200-3.49-8.4%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M17.47%2014.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.96-.94%201.16-.17.2-.35.22-.64.08-.3-.15-1.26-.47-2.39-1.48-.88-.79-1.48-1.76-1.65-2.06-.18-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.61-.91-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2%200-.52.07-.79.37-.27.3-1.04%201.02-1.04%202.48s1.07%202.88%201.21%203.07c.15.2%202.1%203.2%205.08%204.49.71.3%201.26.49%201.69.62.71.23%201.36.2%201.87.12.57-.09%201.76-.72%202-1.41.25-.7.25-1.29.18-1.42-.08-.12-.28-.2-.58-.34M12.05%2021.8h-.01a9.87%209.87%200%200%201-5.03-1.38l-.36-.21-3.74.98%201-3.65-.24-.37a9.86%209.86%200%200%201-1.51-5.26c0-5.45%204.44-9.89%209.89-9.89%202.64%200%205.12%201.03%206.99%202.9a9.83%209.83%200%200%201%202.89%206.99c0%205.45-4.44%209.89-9.88%209.89m8.41-18.3A11.82%2011.82%200%200%200%2012.05%200C5.5%200%20.16%205.34.16%2011.89c0%202.1.55%204.14%201.59%205.95L.06%2024l6.3-1.65a11.88%2011.88%200%200%200%205.69%201.45h.01c6.55%200%2011.89-5.34%2011.89-11.89a11.82%2011.82%200%200%200-3.49-8.4%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.pp-wa .wp-block-button__link:hover,
.pp-boton-wa .wp-block-button__link:hover,
.pp-faq-btn-wa .wp-block-button__link:hover {
	background-color: #1FBF5B;
	filter: none;
	color: #0B141A;
}

.pp-wa .wp-block-button__link:focus-visible,
.pp-boton-wa .wp-block-button__link:focus-visible,
.pp-faq-btn-wa .wp-block-button__link:focus-visible {
	outline: 3px solid rgba(37, 211, 102, 0.55);
	outline-offset: 2px;
}

/* Enlaces de WhatsApp fuera de los botones (menú y pie): sólo el glifo, en el verde de marca. */
.pp-menu a[href*="wa.me"]::before,
.pp-pie a[href*="wa.me"]::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 7px;
	vertical-align: -3px;
	background-color: #25D366;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M17.47%2014.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.96-.94%201.16-.17.2-.35.22-.64.08-.3-.15-1.26-.47-2.39-1.48-.88-.79-1.48-1.76-1.65-2.06-.18-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.61-.91-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2%200-.52.07-.79.37-.27.3-1.04%201.02-1.04%202.48s1.07%202.88%201.21%203.07c.15.2%202.1%203.2%205.08%204.49.71.3%201.26.49%201.69.62.71.23%201.36.2%201.87.12.57-.09%201.76-.72%202-1.41.25-.7.25-1.29.18-1.42-.08-.12-.28-.2-.58-.34M12.05%2021.8h-.01a9.87%209.87%200%200%201-5.03-1.38l-.36-.21-3.74.98%201-3.65-.24-.37a9.86%209.86%200%200%201-1.51-5.26c0-5.45%204.44-9.89%209.89-9.89%202.64%200%205.12%201.03%206.99%202.9a9.83%209.83%200%200%201%202.89%206.99c0%205.45-4.44%209.89-9.88%209.89m8.41-18.3A11.82%2011.82%200%200%200%2012.05%200C5.5%200%20.16%205.34.16%2011.89c0%202.1.55%204.14%201.59%205.95L.06%2024l6.3-1.65a11.88%2011.88%200%200%200%205.69%201.45h.01c6.55%200%2011.89-5.34%2011.89-11.89a11.82%2011.82%200%200%200-3.49-8.4%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M17.47%2014.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.96-.94%201.16-.17.2-.35.22-.64.08-.3-.15-1.26-.47-2.39-1.48-.88-.79-1.48-1.76-1.65-2.06-.18-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.61-.91-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2%200-.52.07-.79.37-.27.3-1.04%201.02-1.04%202.48s1.07%202.88%201.21%203.07c.15.2%202.1%203.2%205.08%204.49.71.3%201.26.49%201.69.62.71.23%201.36.2%201.87.12.57-.09%201.76-.72%202-1.41.25-.7.25-1.29.18-1.42-.08-.12-.28-.2-.58-.34M12.05%2021.8h-.01a9.87%209.87%200%200%201-5.03-1.38l-.36-.21-3.74.98%201-3.65-.24-.37a9.86%209.86%200%200%201-1.51-5.26c0-5.45%204.44-9.89%209.89-9.89%202.64%200%205.12%201.03%206.99%202.9a9.83%209.83%200%200%201%202.89%206.99c0%205.45-4.44%209.89-9.88%209.89m8.41-18.3A11.82%2011.82%200%200%200%2012.05%200C5.5%200%20.16%205.34.16%2011.89c0%202.1.55%204.14%201.59%205.95L.06%2024l6.3-1.65a11.88%2011.88%200%200%200%205.69%201.45h.01c6.55%200%2011.89-5.34%2011.89-11.89a11.82%2011.82%200%200%200-3.49-8.4%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* Página de contacto: la foto del equipo va en 3:2 y sin recorte. La caja del hero de la FAQ
   es más cuadrada (420×340) y sobre una foto de grupo cortaría a la gente de los extremos. */
.pp-contacto-hero-foto {
	flex: 0 0 46%;
	max-width: 470px;
	margin: 0;
}

.pp-contacto-hero-foto img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
}

/* La página de contacto ahora arranca con el hero; el bloque de datos y formulario necesita su
   propio aire arriba (antes lo daba el margen de la plantilla de página). */
.pp-contacto {
	padding-top: clamp(28px, 4vw, 46px);
}

@media (max-width: 900px) {
	.pp-contacto-hero-foto {
		flex: 0 0 auto;
		max-width: none;
	}

	.pp-contacto-hero-foto img {
		border-radius: 16px;
	}
}

/* ---------------------------------------------------------------------------
   Accesos a la app de mapas (contacto, 18-oct).

   Tres pastillas debajo del subtítulo del hero con el enlace directo al parque. Los tres abren
   la app si está instalada y caen a la versión web si no (son los enlaces universales de cada
   casa). El destino son las coordenadas reales del lugar del cliente en Google Maps,
   verificadas por geocodificación inversa: 10.5552586, -85.3971677 → El Salto Oeste, Liberia.

   Logos a color dentro de una insignia blanca de 28 px: sobre el violeta del hero el glifo de
   Waze (trazo cian) se perdía, y el pin de Google quedaba apretado contra el borde. La
   insignia blanca da el mismo fondo a los tres y hace que el recorte interno de Waze se lea
   blanco, como en su icono real. Los SVG van en `data:` (Google 765 B, Waze 1,3 KB, Apple 1 KB),
   sin peticiones extra ni archivos sueltos.
--------------------------------------------------------------------------- */
.pp-mapas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.pp-mapas .wp-block-button {
	margin: 0;
}

.pp-mapa .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	/* Relleno simétrico: 15 px a cada lado. Antes era 5 px a la izquierda para que la insignia
	   quedara pegada al borde, pero el lado derecho tenía 15 y la pastilla se leía torcida. */
	padding: 5px 15px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.34);
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.pp-mapa .wp-block-button__link::before {
	content: "";
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	border-radius: 50%;
	background-color: #fff;
	background-image: var(--pp-mapa-logo);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 19px 19px;
	/* Anillo interior de 1 px: separa la insignia de la pastilla y, sobre todo, da contorno al
	   icono de Apple Maps, que es claro y se deslavaba contra el blanco. */
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.pp-mapa .wp-block-button__link:hover,
.pp-mapa .wp-block-button__link:focus-visible {
	background: rgba(255, 255, 255, 0.22);
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}

/* El pin de Google es más alto que ancho (92×132): se ajusta por alto para que no quede chico. */
.pp-mapa--google .wp-block-button__link::before { background-size: 15px auto; }
.pp-mapa--waze .wp-block-button__link::before { background-size: 17px 17px; }
.pp-mapa--apple .wp-block-button__link::before { background-size: 19px 19px; }

.pp-mapa--google { --pp-mapa-logo: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5Mi4zIDEzMi4zIj48cGF0aCBmaWxsPSIjMWE3M2U4IiBkPSJNNjAuMiAyLjJDNTUuOC44IDUxIDAgNDYuMSAwIDMyIDAgMTkuMyA2LjQgMTAuOCAxNi41bDIxLjggMTguM0w2MC4yIDIuMnoiLz48cGF0aCBmaWxsPSIjZWE0MzM1IiBkPSJNMTAuOCAxNi41QzQuMSAyNC41IDAgMzQuOSAwIDQ2LjFjMCA4LjcgMS43IDE1LjcgNC42IDIybDI4LTMzLjMtMjEuOC0xOC4zeiIvPjxwYXRoIGZpbGw9IiM0Mjg1ZjQiIGQ9Ik00Ni4yIDI4LjVjOS44IDAgMTcuNyA3LjkgMTcuNyAxNy43IDAgNC4zLTEuNiA4LjMtNC4yIDExLjQgMCAwIDEzLjktMTYuNiAyNy41LTMyLjctNS42LTEwLjgtMTUuMy0xOS0yNy0yMi43TDMyLjYgMzQuOGMzLjMtMy44IDguMS02LjMgMTMuNi02LjMiLz48cGF0aCBmaWxsPSIjZmJiYzA0IiBkPSJNNDYuMiA2My44Yy05LjggMC0xNy43LTcuOS0xNy43LTE3LjcgMC00LjMgMS41LTguMyA0LjEtMTEuM2wtMjggMzMuM2M0LjggMTAuNiAxMi44IDE5LjIgMjEgMjkuOWwzNC4xLTQwLjVjLTMuMyAzLjktOC4xIDYuMy0xMy41IDYuMyIvPjxwYXRoIGZpbGw9IiMzNGE4NTMiIGQ9Ik01OS4xIDEwOS4yYzE1LjQtMjQuMSAzMy4zLTM1IDMzLjMtNjMgMC03LjctMS45LTE0LjktNS4yLTIxLjNMMjUuNiA5OGMyLjYgMy40IDUuMyA3LjMgNy45IDExLjMgOS40IDE0LjUgNi44IDIzLjEgMTIuOCAyMy4xczMuNC04LjcgMTIuOC0yMy4yIi8+PC9zdmc+"); }
.pp-mapa--waze { --pp-mapa-logo: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iIzMzQ0NGRiIgZD0iTTEzLjIxOCAwQzkuOTE1IDAgNi44MzUgMS40OSA0LjcyMyA0LjE0OGMtMS41MTUgMS45MTMtMi4zMSA0LjI3Mi0yLjMxIDYuNzA2djEuNzM5YzAgLjg5NC0uNjIgMS43MzgtMS44NjIgMS44MTMtLjI5OC4wMjUtLjU0Ny4yMjQtLjU0Ny41MjItLjA1LjgyLjgyIDIuMzEgMi4wMTIgMy41MDIuODIuODQ0IDEuNzg4IDEuNTE1IDIuODMyIDIuMDM2YTMgMyAwIDAgMCAyLjk1NSAzLjUyOCAyLjk2NiAyLjk2NiAwIDAgMCAyLjkzMS0yLjM4NWgyLjUwOWMuMzIzIDEuNjg5IDIuMDg2IDIuODU2IDMuOTc0IDIuMjEgMS42NC0uNTQ2IDIuMzYtMi40MDkgMS43NjMtMy45MjRhMTIuODQgMTIuODQgMCAwIDAgMS44MzgtMS40NjUgMTAuNzMgMTAuNzMgMCAwIDAgMy4xOC03LjY1YzAtMi44ODItMS4xMTgtNS41ODktMy4xNTUtNy42MjVBMTAuODk5IDEwLjg5OSAwIDAgMCAxMy4yMTggMHptMCAxLjIxN2MyLjU1OCAwIDQuOTY3Ljk5NCA2Ljc4IDIuODA3YTkuNTI1IDkuNTI1IDAgMCAxIDIuODA3IDYuNzhBOS41MjYgOS41MjYgMCAwIDEgMjAgMTcuNTg1YTkuNjQ3IDkuNjQ3IDAgMCAxLTYuNzggMi44MDdoLTIuNDZhMy4wMDggMy4wMDggMCAwIDAtMi45My0yLjQxIDMuMDMgMy4wMyAwIDAgMC0yLjUzNCAxLjM2N3YuMDI0YTguOTQ1IDguOTQ1IDAgMCAxLTIuNDEtMS43ODhjLS44NDQtLjg0NC0xLjMxNi0xLjYxNC0xLjUxNS0yLjExYTIuODU4IDIuODU4IDAgMCAwIDEuNDQxLS44NDYgMi45NTkgMi45NTkgMCAwIDAgLjc5NS0yLjAzNnYtMS43ODljMC0yLjExLjY5Ni00LjE5NyAyLjAxMi01Ljg2MSAxLjg2My0yLjM4NSA0LjYyLTMuNzI2IDcuNi0zLjcyNnptLTIuNDEgNS45ODZhMS4xOTIgMS4xOTIgMCAwIDAtMS4xOTEgMS4xOTIgMS4xOTIgMS4xOTIgMCAwIDAgMS4xOTIgMS4xOTNBMS4xOTIgMS4xOTIgMCAwIDAgMTIgOC4zOTVhMS4xOTIgMS4xOTIgMCAwIDAtMS4xOTItMS4xOTJ6bTcuMjA0IDBhMS4xOTIgMS4xOTIgMCAwIDAtMS4xOTIgMS4xOTIgMS4xOTIgMS4xOTIgMCAwIDAgMS4xOTIgMS4xOTMgMS4xOTIgMS4xOTIgMCAwIDAgMS4xOTItMS4xOTMgMS4xOTIgMS4xOTIgMCAwIDAtMS4xOTItMS4xOTJ6bS03LjM3NyA0Ljc2OWEuNTk2LjU5NiAwIDAgMC0uNTQ2Ljg0NSA0LjgxMyA0LjgxMyAwIDAgMCA0LjM0NiAyLjc1NyA0Ljc3IDQuNzcgMCAwIDAgNC4zNDctMi43NTcuNTk2LjU5NiAwIDAgMC0uNTQ3LS44NDVoLS4wMjVhLjU2MS41NjEgMCAwIDAtLjUyMS4zNDggMy41OSAzLjU5IDAgMCAxLTMuMjU0IDIuMDYxIDMuNTkxIDMuNTkxIDAgMCAxLTMuMjU0LTIuMDYxLjY0LjY0IDAgMCAwLS41NDYtLjM0OHoiLz48L3N2Zz4="); }
.pp-mapa--apple { --pp-mapa-logo: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgoJPGRlZnM+CgkJPGNpcmNsZSBpZD0iY2lyY2xlIiBjeD0iMjU2IiBjeT0iMjU2IiByPSIyNTYiLz4KCTwvZGVmcz4KCTxtYXNrIGlkPSJjbGlwIiBmaWxsPSJ3aGl0ZSI+CgkJPHVzZSB4bGluazpocmVmPSIjY2lyY2xlIi8+Cgk8L21hc2s+Cgk8dXNlIGZpbGw9IiNGRkYiIHhsaW5rOmhyZWY9IiNjaXJjbGUiLz4KCTxnIG1hc2s9InVybCgjY2xpcCkiPgoJCTxyZWN0IGZpbGw9IiNCRUI5OUUiIHg9IjAiIHk9IjAiIHdpZHRoPSIxNzMiIGhlaWdodD0iNTEyIi8+CgkJPHJlY3QgZmlsbD0iI0U0RERDOSIgeD0iMCIgeT0iMCIgd2lkdGg9IjE3MCIgaGVpZ2h0PSI1MTIiLz4KCQk8cmVjdCBmaWxsPSIjODhBRDU4IiB4PSIzMzciIHk9IjAiIHdpZHRoPSIxNzUiIGhlaWdodD0iMTczIi8+CgkJPHJlY3QgZmlsbD0iIzc2QzYzQiIgeD0iMzQwIiB5PSIwIiB3aWR0aD0iMTcyIiBoZWlnaHQ9IjE3MCIvPgoJCTxyZWN0IGZpbGw9IiNDQUFEQTIiIHg9IjMzNyIgeT0iMzM5IiB3aWR0aD0iMTc1IiBoZWlnaHQ9IjE3MyIvPgoJCTxyZWN0IGZpbGw9IiNGQkM2RDEiIHg9IjM0MCIgeT0iMzQyIiB3aWR0aD0iMTcyIiBoZWlnaHQ9IjE3MCIvPgoJCTxwYXRoIGQ9Ik0yNTYsMzg0IEMzMjcuNjkyNDQ4LDM4NCAzODQsMzI3LjY5MjQ0OCAzODQsMjU2IEMzODQsMTg0LjMwNzU1MiAzMjcuNjkyNDQ4LDEyOCAyNTYsMTI4IEMxODQuMzA3NTUyLDEyOCAxMjgsMTg0LjMwNzU1MiAxMjgsMjU2IEMxMjgsMzI3LjY5MjQ0OCAxODQuMzA3NTUyLDM4NCAyNTYsMzg0IFoiIGZpbGw9IiMwMDdBRkYiLz4KCQk8cG9seWdvbiBmaWxsPSIjRkZGIiBwb2ludHM9IjI1NiAxNzEuNSAyMDMuNSAzNDEgMjU2IDI4MiAzMDguNSAzNDEiLz4KCTwvZz4KPC9zdmc+"); }

/* ---------------------------------------------------------------------------
   CTA de la página de contacto hacia preguntas frecuentes (18-oct).

   Va arriba de las dos tarjetas, antes del formulario: si la persona encuentra la respuesta ahí,
   no manda el mensaje. Fondo violeta muy claro y botón violeta, sin el amarillo de compra.
--------------------------------------------------------------------------- */
.pp-cta-faq {
	gap: 20px;
	margin-bottom: 22px;
	padding: 20px 22px;
	background-color: #F4F1F9;
	border: 1px solid #E4DCF2;
	border-radius: 16px;
}

/* Variante tarjeta: mismo blanco y mismo borde que los paneles de datos y formulario de la página de
   contacto. La versión lavanda quedaba como un bloque aparte, fuera del lenguaje de la página. */
.pp-cta-faq--tarjeta {
	background-color: #fff;
	border-color: #E2E8F0;
}

.pp-cta-faq-texto {
	flex: 1 1 auto;
	min-width: 0;
}

.pp-cta-faq-titulo {
	margin: 0 0 4px;
	font-size: 20px;
	line-height: 1.25;
	color: var(--wp--preset--color--tinta);
}

.pp-cta-faq-sub {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--wp--preset--color--tinta-suave);
}

.pp-cta-faq-accion {
	flex: 0 0 auto;
}

.pp-cta-faq-accion .wp-block-button__link {
	padding: 12px 20px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--violeta-barra, #3c325a);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.pp-cta-faq-accion .wp-block-button__link:hover,
.pp-cta-faq-accion .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--violeta);
	color: #fff;
}

@media (max-width: 780px) {
	.pp-cta-faq {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 18px;
	}

	.pp-cta-faq-accion .wp-block-button,
	.pp-cta-faq-accion .wp-block-button__link {
		width: 100%;
	}

	.pp-cta-faq-accion .wp-block-button__link {
		text-align: center;
	}
}

/* ============================================================
   Hero de la tienda — sólo en /tienda/
   La plantilla es archive-product.html; las categorías usan
   taxonomy-product_cat.html y conservan su cabecera sin hero.
   Misma familia visual que los heroes de preguntas frecuentes
   y contacto: degradado de marca y foto a la derecha.
   ============================================================ */

/* La plantilla de la tienda mete el hero a sangre: sin el relleno superior del archivo. */
.pp-archivo--tienda {
	padding-block: 0 72px;
}

/* En la propia tienda el CTA «Ir a la tienda» de la barra no lleva a ninguna parte. */
.pp-es-tienda .pp-barra-derecha .pp-btn-acento {
	display: none;
}

/* El hero arranca pegado a la barra: sin el margen superior que el core le da a `main`
   (medido: quedaba una franja de 19 px entre la barra de 74 y el hero). */
.wp-site-blocks > main.pp-archivo--tienda {
	margin-block-start: 0;
}

.pp-archivo--tienda .pp-archivo-barra {
	margin-block-start: 34px;
}

.pp-tienda-hero {
	background: linear-gradient(180deg, #3c325a 0%, #524579 100%);
	padding-block: 46px 48px;
}

.pp-tienda-hero-cuerpo {
	gap: 44px;
}

.pp-tienda-hero-texto {
	max-width: 560px;
}

/* Migas dentro del hero: heredan el blanco del hero, más apagadas. */
.pp-tienda-hero .woocommerce-breadcrumb {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.72);
	margin-block: 0 12px;
}

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

.pp-tienda-hero .woocommerce-breadcrumb a:hover {
	color: #ffffff;
}

/* Doble selector a propósito: `.pp-archivo .wp-block-query-title` pinta el título de tinta
   oscura y tiene la misma especificidad, así que esta regla tiene que nombrar el bloque
   para ganarle (medido: el h1 salía #1E293B sobre violeta, 2,2:1). */
.pp-tienda-hero .pp-tienda-titulo,
.pp-tienda-hero .wp-block-query-title {
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: clamp(32px, 4vw, 46px);
	line-height: 1.1;
	color: #ffffff;
	margin: 0;
}

.pp-tienda-sub {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.86);
	margin-block: 14px 0;
	max-width: 46ch;
}

/* `0 1` y no `0 0`: entre 900 y 1080 px la columna de texto y la foto no caben rígidas y
   la foto tiene que poder encogerse (sin esto desbordaba en tablet). */
.pp-tienda-hero-foto {
	flex: 0 1 520px;
	width: 520px;
	max-width: 52%;
	min-width: 0;
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(20, 14, 40, 0.35);
}

.pp-tienda-hero-foto img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 16px;
}

/* Selling points del hero: tres hechos concretos del parque, no adjetivos.
   Van debajo del párrafo, en una fila que envuelve. */
.pp-tienda-puntos {
	gap: 10px 24px;
	margin-block-start: 20px;
	padding-block-start: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	max-width: 560px;
}

.pp-tienda-punto {
	gap: 8px;
}

.pp-tienda-punto .pp-punto-icono {
	color: rgba(255, 255, 255, 0.78);
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

/* El bloque core/icon trae el SVG a 24 px; aquí se pide 18. */
.pp-tienda-punto .pp-punto-icono svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	display: block;
}

.pp-tienda-punto .pp-punto-texto {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.92);
	margin: 0;
}

@media (max-width: 900px) {
	.pp-tienda-hero {
		padding-block: 30px 34px;
	}

	.pp-tienda-hero-cuerpo {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
	}

	.pp-tienda-hero-texto {
		max-width: none;
	}

	.pp-tienda-hero-foto {
		flex: none;
		width: 100%;
		max-width: 100%;
	}

	/* 3:2 y no 16:9: en 16:9 el recorte se comía la punta de la cabeza de la jirafa.
	   La foto ya viene en 3:2, así que en móvil se ve completa. */
	.pp-tienda-hero-foto img {
		aspect-ratio: 3 / 2;
	}
}

/* En pantallas angostas los tres puntos van uno por línea: envolviendo quedaba 2+1 con un
   hueco muerto a la derecha. */
@media (max-width: 600px) {
	.pp-tienda-puntos {
		flex-direction: column;
		align-items: flex-start;
		gap: 9px;
		max-width: none;
	}
}

/* ============================================================
   Blog: archivo (archive.html) y resultados de búsqueda (search.html)
   Mismo esqueleto en las dos: hero a sangre + contenido a la
   izquierda y barra lateral a la derecha.
   ============================================================ */

.pp-blog {
	padding-block: 0 72px;
}

/* El hero tiene que arrancar pegado a la barra, como en la tienda. */
.wp-site-blocks > main.pp-blog {
	margin-block-start: 0;
}

.pp-blog-hero {
	background: linear-gradient(180deg, #3c325a 0%, #524579 100%);
	padding-block: 32px;
}

.pp-blog-eyebrow {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.66);
	margin: 0 0 10px;
}

/* Doble selector: `.pp-archivo .wp-block-query-title` pinta los títulos de tinta oscura con la
   misma especificidad; hay que nombrar el bloque para ganarle. */
.pp-blog-hero .pp-blog-titulo,
.pp-blog-hero .wp-block-query-title {
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.1;
	color: #ffffff;
	margin: 0;
}

.pp-blog-sub {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.86);
	margin-block: 12px 0;
	max-width: 62ch;
}

/* Dos columnas del hero del blog: texto a la izquierda, foto a la derecha.
   Antes el hero era sólo texto y, al igualar todos a 441 px, quedaba un vacío
   grande a la derecha (el del archivo de categoría pasó de 162 a 441 px). */
.pp-blog-hero-cuerpo {
	display: flex;
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

.pp-blog-hero-texto {
	flex: 1 1 auto;
	min-width: 0;
}

.pp-blog-hero-foto {
	flex: 0 0 38%;
	max-width: 380px;
	margin: 0;
}

.pp-blog-hero-foto img {
	display: block;
	width: 100%;
	height: clamp(220px, 27vw, 300px);
	object-fit: cover;
	/* La foto es un primer plano y la cabeza toca el borde superior: sin anclar
	   arriba, el recorte del móvil le come los osicones. */
	object-position: 50% 12%;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
}

/* En móvil la foto va arriba del texto, como en FAQ y contacto. */
@media (max-width: 900px) {
	.pp-blog-hero-cuerpo {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.pp-blog-hero-foto {
		flex: 0 0 auto;
		max-width: none;
	}

	.pp-blog-hero-foto img {
		height: 190px;
	}
}

/* Selling points del hero del blog: mismo estilo que los sellos de «Planeá tu visita»
   —icono arriba, título y una línea de apoyo—, adaptado al fondo morado del hero.
   Reemplaza la fila de píldoras que copiaba la de la tienda. */
.pp-blog-sellos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px 28px;
	max-width: 620px;
	margin-block-start: 14px;
	padding-block-start: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.pp-blog-sello-icono {
	display: flex;
	margin-block-end: 8px;
	color: rgba(255, 255, 255, 0.88);
}

.pp-blog-sello-icono svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.pp-blog-sello-titulo {
	margin: 0 0 4px;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff;
}

.pp-blog-sello-texto {
	margin: 0;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 13px;
	line-height: 1.42;
	color: rgba(255, 255, 255, 0.74);
}

@media (max-width: 900px) {
	.pp-blog-sellos {
		grid-template-columns: 1fr;
		gap: 16px;
		max-width: none;
	}
}

/* Buscador dentro del hero (sólo en la página de resultados). */
.pp-blog-buscador-hero {
	margin-block-start: 14px;
	max-width: 520px;
}

.pp-blog-buscador-hero .wp-block-search__inside-wrapper {
	border: 0;
	background: #ffffff;
	border-radius: 999px;
	padding: 5px 5px 5px 18px;
	gap: 8px;
}

.pp-blog-buscador-hero .wp-block-search__input {
	background: transparent;
	border: 0;
	font-size: 15px;
	padding: 8px 0;
	min-width: 0;
}

.pp-blog-buscador-hero .wp-block-search__button {
	border-radius: 999px;
	background-color: var(--wp--preset--color--violeta-barra, #3c325a);
	color: #fff;
	padding: 10px 14px;
	margin: 0;
	flex: 0 0 auto;
}

/* ---------- cuerpo: lista + barra lateral ---------- */

.pp-blog-cuerpo {
	gap: 34px;
	padding-block: 42px 0;
	/* El atributo del bloque no llega: el core deja `align-items: center` y la barra lateral
	   arrancaba 115 px más arriba que la lista (medido). */
	align-items: flex-start;
}

.pp-blog-lista {
	flex: 1 1 auto;
	min-width: 0;
}

.pp-blog-side {
	flex: 0 0 320px;
	width: 320px;
}

/* ---------- tarjeta de entrada ---------- */

.pp-articulo {
	gap: 22px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 18px;
	margin-block-end: 18px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pp-articulo:hover {
	border-color: #C4B8DE;
	box-shadow: 0 10px 26px rgba(73, 61, 109, 0.12);
}

.pp-articulo-foto {
	flex: 0 0 260px;
	width: 260px;
	margin: 0;
}

.pp-articulo-foto img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

.pp-articulo-texto {
	flex: 1 1 auto;
	min-width: 0;
}

.pp-articulo-cat {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--violeta, #493d6d);
	margin: 0 0 8px;
}

.pp-articulo-cat a {
	color: inherit;
	text-decoration: none;
}

.pp-articulo-titulo {
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: clamp(19px, 1.6vw, 23px);
	line-height: 1.25;
	margin: 0 0 8px;
}

.pp-articulo-titulo a {
	color: var(--wp--preset--color--tinta, #1e293b);
	text-decoration: none;
}

.pp-articulo-titulo a:hover {
	color: var(--wp--preset--color--violeta, #493d6d);
}

.pp-articulo-extracto {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--tinta-suave, #334155);
	margin: 0 0 10px;
}

.pp-articulo-fecha {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 12.5px;
	color: #64748b;
	margin: 0;
}

.pp-blog-vacio {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 16px;
	color: var(--wp--preset--color--tinta-suave, #334155);
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 26px;
	margin: 0;
}

/* Paginación */
.pp-blog-paginacion {
	gap: 6px;
	margin-block-start: 26px;
}

.pp-blog-paginacion .page-numbers,
.pp-blog-paginacion a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 12px;
	border-radius: 999px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	color: var(--wp--preset--color--tinta, #1e293b);
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14px;
	text-decoration: none;
}

.pp-blog-paginacion .current {
	background: var(--wp--preset--color--violeta-barra, #3c325a);
	border-color: var(--wp--preset--color--violeta-barra, #3c325a);
	color: #ffffff;
}

/* ---------- barra lateral ---------- */

.pp-side-bloque {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 20px;
	margin-block-end: 18px;
}

.pp-side-titulo {
	position: relative;
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 17px;
	line-height: 1.25;
	color: var(--wp--preset--color--tinta, #1e293b);
	padding-bottom: 12px;
	margin: 0 0 14px;
}

.pp-side-titulo::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34px;
	height: 3px;
	border-radius: 2px;
	background-color: var(--wp--preset--color--violeta, #493d6d);
}

/* Ojo: el <ul> es el propio bloque `.pp-side-cats`, no un hijo, así que
   `.pp-side-cats ul` no lo alcanzaba y las viñetas seguían apareciendo al quitar el contador. */
.pp-side-cats,
.pp-side-cats ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pp-side-cats li {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14.5px;
	border-bottom: 1px solid #f1f5f9;
	padding-block: 7px;
}

.pp-side-cats li:last-child {
	border-bottom: 0;
}

.pp-side-cats li a {
	color: var(--wp--preset--color--tinta-suave, #334155);
	text-decoration: none;
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

.pp-side-cats li a:hover {
	color: var(--wp--preset--color--violeta, #493d6d);
}

.pp-side-recientes ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pp-side-recientes li {
	border-bottom: 1px solid #f1f5f9;
	padding-block: 9px;
}

.pp-side-recientes li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.pp-side-recientes li a {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--tinta, #1e293b);
	text-decoration: none;
	display: block;
}

.pp-side-recientes li a:hover {
	color: var(--wp--preset--color--violeta, #493d6d);
}

.pp-side-recientes .wp-block-latest-posts__post-date {
	font-size: 12px;
	color: #64748b;
	margin-top: 3px;
}

/* CTA de la barra.

   Antes era un bloque violeta oscuro macizo: pesaba más que las dos tarjetas blancas de arriba y
   se leía como un contrapeso pegado al final de la columna. Ahora es una tarjeta blanca más, igual
   que la de arriba (mismo fondo, borde y radio); el peso lo lleva sólo el botón violeta. Sin
   amarillo: el amarillo es sólo del proceso de compra.
*/
.pp-side-cta {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 20px 20px 18px;
	color: var(--wp--preset--color--tinta, #1e293b);
}

.pp-side-cta-titulo {
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 18px;
	line-height: 1.28;
	color: var(--wp--preset--color--tinta, #1e293b);
	margin: 0 0 6px;
}

.pp-side-cta-texto {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14px;
	line-height: 1.55;
	color: var(--wp--preset--color--tinta-suave, #334155);
	margin: 0 0 15px;
}

.pp-side-cta-boton {
	width: 100%;
}

.pp-side-cta-boton .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	background-color: var(--wp--preset--color--violeta, #493d6d);
	color: #ffffff;
	border-radius: 999px;
	padding: 11px 18px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.pp-side-cta-boton .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--violeta-barra, #3c325a);
}

/* ---------- móvil ---------- */

@media (max-width: 900px) {
	.pp-blog-hero {
		padding-block: 30px 32px;
	}

	.pp-blog-cuerpo {
		flex-direction: column;
		gap: 26px;
		padding-block: 26px 0;
	}

	.pp-blog-side {
		flex: 1 1 auto;
		width: 100%;
	}

	.pp-articulo {
		flex-direction: column;
		gap: 14px;
	}

	.pp-articulo-foto {
		flex: none;
		width: 100%;
	}
}

/* ============================================================
   Entrada individual (single.html)
   Mismo esqueleto que el blog; en el hero, en lugar del buscador,
   van migas, categoría, título, metadatos y la imagen destacada.
   ============================================================ */

.pp-post-hero {
	padding-block: 40px 44px;
}

.pp-post-hero-cuerpo {
	gap: 44px;
}

.pp-post-hero-texto {
	flex: 1 1 auto;
	min-width: 0;
}

/* Migas dentro del hero: core/breadcrumbs trae sus propios separadores. */
.pp-post-hero .pp-post-migas,
.pp-post-hero .pp-post-migas a {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14px;
	color: rgba(255, 255, 255, 0.84);
	text-decoration: none;
}

.pp-post-hero .pp-post-migas a:hover {
	color: #ffffff;
}

.pp-post-hero .pp-post-migas a,
.pp-post-hero .pp-post-migas span {
	font-size: 14px;
}

.pp-post-hero .pp-post-migas ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pp-post-hero .pp-post-migas li {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.pp-post-hero .pp-post-migas span[aria-current="page"] {
	color: #ffffff;
}

.pp-post-cat {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
	margin-block: 16px 10px;
}

.pp-post-cat a {
	color: inherit;
	text-decoration: none;
}

.pp-post-hero .pp-post-titulo,
.pp-post-hero .wp-block-post-title {
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: clamp(28px, 3.4vw, 42px);
	line-height: 1.14;
	color: #ffffff;
	margin: 0;
}

.pp-post-hero .pp-post-extracto {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
	margin-block: 14px 0;
	max-width: 58ch;
}

.pp-post-meta {
	gap: 8px 14px;
	margin-block-start: 18px;
	font-size: 13px;
}

.pp-post-meta .pp-post-meta-item {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.86);
	margin: 0;
}

/* core/post-author mete «Por» y el nombre en dos párrafos: van en línea y con aire. */
.pp-post-meta .wp-block-post-author__content {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.pp-post-meta .wp-block-post-author__byline,
.pp-post-meta .wp-block-post-author__name {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.4;
}

.pp-post-meta .pp-post-meta-item a {
	color: inherit;
	text-decoration: none;
}

/* Separador fino entre los datos, sin viñetas ni bordes duros. */
/* El nombre del autor se partía en tres líneas dentro de la fila de metadatos:
   el bloque core/post-author apila «Por» y el nombre, así que se fuerza una sola línea. */
.pp-post-hero .pp-post-meta-item,
.pp-post-hero .pp-post-meta-item * {
	white-space: nowrap;
}

.pp-post-hero .wp-block-post-author {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
}

.pp-post-meta > * + *::before {
	content: "·";
	margin-inline-end: 14px;
	color: rgba(255, 255, 255, 0.4);
}

/* ---------- cuerpo de la entrada ---------- */

/* El cuerpo de la entrada va sobre su propia tarjeta blanca, como las del archivo:
   el texto deja de flotar sobre el gris y la columna se lee como una superficie de lectura. */
.pp-post-cuerpo {
	flex: 1 1 auto;
	min-width: 0;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 40px 40px 34px;
}

.pp-post-contenido {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 19px;
	line-height: 1.75;
	color: var(--wp--preset--color--tinta, #1e293b);
	max-width: 660px;
}

.pp-post-contenido > * {
	max-width: none;
}

.pp-post-contenido p {
	margin-block: 0 1.15em;
}

.pp-post-contenido h2 {
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: clamp(23px, 2.2vw, 29px);
	line-height: 1.25;
	margin-block: 1.8em 0.5em;
}

.pp-post-contenido h3 {
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: clamp(19px, 1.7vw, 23px);
	line-height: 1.3;
	margin-block: 1.5em 0.45em;
}

.pp-post-contenido ul,
.pp-post-contenido ol {
	margin-block: 0 1.15em;
	padding-inline-start: 1.35em;
}

.pp-post-contenido li {
	margin-block-end: 0.4em;
}

.pp-post-contenido blockquote {
	margin-block: 1.5em;
	padding: 4px 0 4px 20px;
	border-left: 4px solid var(--wp--preset--color--violeta, #493d6d);
	font-size: 18px;
	line-height: 1.6;
	color: var(--wp--preset--color--tinta-suave, #334155);
	font-style: italic;
}

.pp-post-contenido a {
	color: var(--wp--preset--color--violeta, #493d6d);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pp-post-contenido img {
	border-radius: 12px;
	height: auto;
}

.pp-post-contenido figcaption {
	font-size: 13px;
	color: #64748b;
	margin-block-start: 8px;
}

/* ---------- seguí leyendo ---------- */

/* El cuerpo del post y esta sección viven en la misma columna, al lado de la barra lateral. */
.pp-post-columna {
	flex: 1 1 auto;
	min-width: 0;
}

.pp-relacionadas {
	margin-block-start: 34px;
}

.pp-rel-titulo {
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 22px;
	line-height: 1.25;
	color: #1E293B;
	margin: 0 0 18px;
}

.pp-rel-rejilla {
	gap: 20px;
}

.pp-rel-tarjeta {
	height: 100%;
	background: #ffffff;
	border: 1px solid #E2E8F0;
	border-radius: 16px;
	overflow: hidden;
	padding-bottom: 16px;
}

.pp-rel-foto {
	margin: 0;
}

.pp-rel-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pp-rel-nombre {
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.32;
	color: #1E293B;
	margin: 14px 16px 0;
}

.pp-rel-nombre a {
	color: inherit;
	text-decoration: none;
}

.pp-rel-nombre a:hover {
	color: #493D6D;
}

/* Las tres notas y el producto comparten rejilla: el query y su plantilla se vuelven
   `display: contents` para que las tarjetas sean hijas directas de la misma rejilla. */
.pp-rel-grupo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.pp-rel-grupo .wp-block-query,
.pp-rel-grupo .wp-block-post-template {
	display: contents;
}

/* El layout de flujo del core mete margen superior entre hermanos: en una rejilla sobra
   y desalineaba la tarjeta de producto 19 px respecto de la fila. */
.pp-rel-grupo > .pp-rel-producto,
.pp-rel-grupo > .wp-block-query {
	margin: 0;
}

.pp-rel-producto-ficha .wc-block-grid__product-image {
	order: 1;
	position: relative;
	width: 100%;
	height: 124px;
	overflow: hidden;
	margin: 0;
	display: block;
}

.pp-rel-producto-ficha .wc-block-grid__product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	display: block;
	transition: transform 0.6s ease;
}

.pp-rel-producto:hover .wc-block-grid__product-image img {
	transform: scale(1.04);
}

.pp-rel-producto-ficha .wc-block-grid__product-price {
	order: 4;
	text-align: left;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 12.5px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.7);
	margin: 6px 20px 0;
}

.pp-rel-producto-ficha .wc-block-grid__product-price .woocommerce-Price-amount {
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 19px;
	font-weight: 700;
	color: #ffffff;
	margin-left: 5px;
}

.pp-rel-producto-boton .wp-block-button__link {
	display: inline-block;
	background: #fdd72e;
	color: #1e293b;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14.5px;
	font-weight: 700;
	border-radius: 999px;
	padding: 10px 20px;
	text-decoration: none;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
	transition: background 0.18s ease, transform 0.18s ease;
}

.pp-rel-producto-boton .wp-block-button__link:hover {
	background: #f5cd12;
	transform: translateY(-1px);
}

@media (max-width: 600px) {
	.pp-rel-grupo {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 14px;
	}

	.pp-rel-producto-ficha .wc-block-grid__product-image {
		height: 160px;
	}

	.pp-rel-producto-boton,
	.pp-rel-producto-boton .wp-block-button,
	.pp-rel-producto-boton .wp-block-button__link {
		width: auto;
		text-align: center;
	}
}

/* ---------- etiquetas y navegación ---------- */

/* Al cierre del artículo, sobre la misma tarjeta blanca del cuerpo. Los datos salen de
   bloques dinámicos (`post-author-name`, `post-author-biography`): se cambian desde el
   perfil del usuario, no desde esta plantilla. */
.pp-post-autor {
	background: #F7F5FB;
	border: 1px solid #E4DCF2;
	border-radius: 14px;
	padding: 22px 24px;
	margin-block-start: 34px;
	max-width: 660px;
}

.pp-post-autor-inner {
	gap: 18px;
	margin-block-start: 0;
}

.pp-post-autor-foto,
.wp-block-avatar.pp-post-autor-foto {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0;
}

.pp-post-autor-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.pp-post-autor-texto {
	flex: 1 1 auto;
	min-width: 0;
}

.pp-post-autor-rotulo {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #493D6D;
	margin: 0 0 2px;
}

.pp-post-autor-nombre {
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: #1E293B;
	margin: 0 0 4px;
}

.pp-post-autor-nombre a {
	color: inherit;
	text-decoration: none;
}

.pp-post-autor-bio {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14.5px;
	line-height: 1.55;
	color: #334155;
	margin: 0;
}

@media (max-width: 600px) {
	.pp-post-autor {
		padding: 18px;
		margin-block-start: 26px;
	}

	.pp-post-autor-inner {
		align-items: flex-start;
		gap: 14px;
	}

	.pp-post-autor-foto,
	.wp-block-avatar.pp-post-autor-foto {
		width: 56px;
		height: 56px;
	}
}

/* Por debajo de 380 px el avatar de lado deja 140 px de texto: se apila arriba. */
@media (max-width: 380px) {
	.pp-post-autor-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.pp-post-autor-foto,
	.wp-block-avatar.pp-post-autor-foto {
		width: 48px;
		height: 48px;
	}
}

/* ---------- pie de la entrada ---------- */

.pp-post-pie {
	margin-block-start: 34px;
	padding-block-start: 22px;
	border-top: 1px solid #e2e8f0;
}

.pp-post-etiquetas {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 13px;
	color: var(--wp--preset--color--tinta-suave, #334155);
}

.pp-post-etiquetas a {
	display: inline-block;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	padding: 4px 12px;
	margin-inline-end: 6px;
	color: var(--wp--preset--color--tinta-suave, #334155);
	text-decoration: none;
}

.pp-post-etiquetas a:hover {
	border-color: var(--wp--preset--color--violeta, #493d6d);
	color: var(--wp--preset--color--violeta, #493d6d);
}

.pp-post-etiquetas .wp-block-post-terms__prefix {
	color: #64748b;
}

/* Las etiquetas son píldoras: la coma del bloque sobra. */
.pp-post-etiquetas .wp-block-post-terms__separator {
	display: none;
}

.pp-post-navegacion {
	gap: 18px;
	margin-block-start: 22px;
}

.pp-post-navegacion .wp-block-post-navigation-link {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.pp-post-navegacion .post-navigation-link__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #64748b;
	margin-inline-end: 2px;
}

.pp-post-navegacion .post-navigation-link__title {
	font-weight: 600;
}

.pp-post-navegacion .wp-block-post-navigation-link__arrow-next,
.pp-post-navegacion .wp-block-post-navigation-link__arrow-previous {
	color: var(--wp--preset--color--violeta, #493d6d);
	font-size: 15px;
}

.pp-post-navegacion a {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--wp--preset--color--tinta, #1e293b);
	text-decoration: none;
}

.pp-post-navegacion a:hover {
	color: var(--wp--preset--color--violeta, #493d6d);
}

@media (max-width: 900px) {
	.pp-post-hero {
		padding-block: 28px 32px;
	}

	.pp-post-hero-cuerpo {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.pp-post-cuerpo {
		padding: 22px 20px 20px;
	}

	.pp-post-contenido {
		font-size: 17px;
		line-height: 1.72;
	}
}

/* ============================================================================
   Página «Planeá tu visita» (page-planea-tu-visita)
   Reconstruida desde la página de producción, con el hero del sitio y los
   textos de producción pasados a bloques escaneables.
   ============================================================================ */

/* El bloque «Cómo llegar» de la portada es una sección más: lleva el mismo
   relleno de 72 px arriba y abajo que el resto. La regla de la página
   /planea-tu-visita/ (más abajo) ya está acotada a esa página. */
.pp-seccion.pp-planea {
	padding: 72px 0;
}

/* Botón del hero: blanco sobre el degradado, sin tocar el amarillo de compra. */
.pp-planea-cta-hero .wp-block-button__link {
	background-color: #ffffff;
	color: var(--wp--preset--color--violeta-barra, #3c325a);
	border-radius: 999px;
	padding: 13px 26px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.pp-planea-cta-hero .wp-block-button__link:hover {
	background-color: #f1eef8;
	color: var(--wp--preset--color--violeta-barra, #3c325a);
}

.pp-planea-seccion {
	margin-block-start: 46px;
}

.pp-planea-h2 {
	margin: 0 0 8px;
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.2;
	color: var(--wp--preset--color--tinta, #1e293b);
}

.pp-planea-intro {
	margin: 0 0 22px;
	max-width: 64ch;
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--tinta-suave, #334155);
}

/* ============================================================================
   Alto estándar de los héroes (19-oct-2026)

   Antes cada hero medía lo que le dejaba su propio relleno: 162 a 516 px según la
   página. Ahora todos comparten un mínimo de 441 px (lo que medía el de la tienda,
   ≈49 vh en un viewport de 900) y el contenido se centra verticalmente. Es
   `min-height` y no `height`: si una página crece (más texto, otra foto), el hero
   crece con ella en vez de recortar. En móvil no se aplica: ahí el hero se apila
   con la foto y el contenido ya manda.
   ============================================================================ */

@media (min-width: 901px) {
	.pp-tienda-hero,
	.pp-faq-hero,
	.pp-planea-hero,
	.pp-contacto-hero,
	.pp-blog-hero,
	.pp-post-hero {
		/* Rejilla de una sola celda: centra el contenido en los dos ejes sin tocar
		   los márgenes automáticos que el core usa para alinear a 1120 px. Con
		   `flex` esos márgenes encogían el hijo y el texto se iba a x=439. */
		display: grid;
		align-content: center;
		justify-items: center;
		min-height: 441px;
	}

	/* Estos tres traían 72 px de relleno y su contenido mide 372/313/340 px:
	   con ese relleno el hero pasaba de 441 y el mínimo no servía de nada.
	   Con 32 px el contenido entra y el `min-height` es el que fija la altura. */
	.pp-faq-hero,
	.pp-planea-hero,
	.pp-contacto-hero {
		padding-block: 32px;
	}

	.pp-tienda-hero > *,
	.pp-faq-hero > *,
	.pp-planea-hero > *,
	.pp-contacto-hero > *,
	.pp-blog-hero > *,
	.pp-post-hero > * {
		width: 100%;
		max-width: 1120px;
	}
}

/* ---------- los cuatro pasos ---------- */

.pp-pasos {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

/* El core mete `margin-block-start` a los hermanos de un grupo con layout de flujo
   (1,2rem). En una rejilla eso descuadra la segunda tarjeta y siguientes. */
.pp-pasos > *,
.pp-aventura > *,
.pp-datos > *,
.pp-sellos > * {
	margin-block-start: 0;
}

.pp-paso {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 20px 20px 22px;
}

.pp-paso-cabeza {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: 14px;
}

.pp-paso-icono {
	display: flex;
	color: var(--wp--preset--color--violeta, #493d6d);
}

.pp-paso-icono svg {
	width: 26px;
	height: 26px;
}

.pp-paso-num {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	/* 2,56:1 con #94a3b8 sobre blanco; 4,76:1 con este. */
	color: #64748b;
}

.pp-paso-titulo {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.28;
	color: var(--wp--preset--color--agua-oscuro, #084F58);
}

.pp-paso-texto {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--wp--preset--color--tinta-suave, #334155);
}

/* ---------- elegí tu aventura ---------- */

.pp-aventura {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.pp-aventura-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 24px;
}

.pp-aventura-card--destacada {
	border-color: #d9d1ec;
	box-shadow: 0 12px 30px rgba(73, 61, 109, 0.1);
}

/* La etiqueta va montada sobre el borde para no empujar el título: así las dos
   tarjetas arrancan a la misma altura, con o sin «Recomendado». */
.pp-aventura-badge {
	position: absolute;
	top: -12px;
	right: 18px;
	margin: 0;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--wp--preset--color--violeta, #493d6d);
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.pp-aventura-titulo {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 1.25;
	color: var(--wp--preset--color--tinta, #1e293b);
}

.pp-aventura-texto {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--tinta-suave, #334155);
}

.pp-aventura-accion {
	margin-block-start: auto;
}

.pp-aventura-accion .wp-block-button__link {
	background-color: var(--wp--preset--color--violeta, #493d6d);
	color: #ffffff;
	border-radius: 999px;
	padding: 12px 22px;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
}

.pp-aventura-accion .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--violeta-barra, #3c325a);
}

/* ---------- lo que conviene saber ---------- */

.pp-hero .pp-datos {
	background: transparent;
}

.pp-datos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 30px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 24px 28px;
}

.pp-dato {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding-block: 12px;
	border-bottom: 1px solid #eef2f7;
}

.pp-dato-icono {
	display: flex;
	flex: 0 0 auto;
	margin-block-start: 3px;
	color: var(--wp--preset--color--violeta, #493d6d);
}

.pp-dato-icono svg {
	width: 20px;
	height: 20px;
}

.pp-dato-label {
	margin: 0 0 2px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #64748b;
}

.pp-dato-valor {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--wp--preset--color--tinta, #1e293b);
}

.pp-dato-valor a {
	color: var(--wp--preset--color--violeta, #493d6d);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- preguntas frecuentes ---------- */

/* Los acordeones reutilizan `.pp-faq-item` de la página de FAQ; acá sólo se
   neutraliza el margen que el core pone a los hermanos dentro del grupo. */
.pp-planea-faq > * {
	margin-block-start: 0;
}

/* ---------- sellos ---------- */

.pp-sellos {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
	margin-block-start: 22px;
}

.pp-sello-icono {
	display: flex;
	margin-block-end: 8px;
	color: var(--wp--preset--color--violeta, #493d6d);
}

.pp-sello-icono svg {
	width: 22px;
	height: 22px;
}

.pp-sello-titulo {
	margin: 0 0 4px;
	font-size: 15px;
	line-height: 1.3;
	color: var(--wp--preset--color--tinta, #1e293b);
}

.pp-sello-texto {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: #64748b;
}

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

@media (max-width: 1000px) {
	.pp-pasos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pp-sellos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px 22px;
	}
}

@media (max-width: 900px) {
	.pp-planea-seccion {
		margin-block-start: 34px;
	}

	.pp-aventura,
	.pp-datos {
		grid-template-columns: 1fr;
	}

	.pp-datos {
		padding: 18px 20px;
	}
}

@media (max-width: 520px) {
	.pp-pasos {
		grid-template-columns: 1fr;
	}

	.pp-sellos {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Página de la encuesta (/tu-opinion/)
   ========================================================================== */

.pp-enc-hero {
	background: linear-gradient(135deg, #3c325a 0%, #524579 100%);
	padding: 64px 24px 104px;
}

.pp-enc-hero-cuerpo {
	max-width: 1120px;
	margin: 0 auto;
	text-align: center;
}

.pp-enc-eyebrow {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
	margin: 0 0 12px;
}

.pp-enc-titulo {
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.16;
	color: #ffffff;
	margin: 0 0 12px;
}

.pp-enc-sub {
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.86);
	max-width: 580px;
	margin: 0 auto;
}

/* La tarjeta sube sobre el violeta: deja de ser un formulario suelto. */
.pp-enc-caja {
	margin-top: -68px;
	position: relative;
	z-index: 2;
	padding-bottom: 64px;
}

.pp-enc-form,
.pp-enc-aviso {
	background: #ffffff;
	border-radius: 18px;
	box-shadow: 0 18px 44px rgba(60, 50, 90, 0.14);
	padding: 34px 38px 30px;
}

.pp-enc-paso {
	border: 0;
	padding: 0;
	margin: 0 0 28px;
}

.pp-enc-paso legend {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 19px;
	font-weight: 700;
	color: #3c325a;
	padding: 0;
	margin: 0 0 14px;
	line-height: 1.3;
}

.pp-enc-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #f4f1f9;
	color: #3c325a;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 13px;
	font-weight: 700;
	flex: 0 0 auto;
}

.pp-enc-opcional {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 13px;
	font-weight: 400;
	color: #64748b;
}

.pp-enc-pista {
	font-size: 13px;
	color: #64748b;
	margin: 8px 0 0;
}

.pp-enc-inicio {
	margin: 0 0 22px;
	color: var(--wp--preset--color--tinta-suave, #334155);
}

/* Estrellas: los inputs van ocultos y el relleno se hace con :has(). */
.pp-enc-estrellas {
	display: flex;
	gap: 4px;
}

.pp-enc-estrellas input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.pp-enc-estrellas label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 48 px de área táctil aunque la estrella dibuje 38: en el teléfono se toca con el pulgar. */
	min-width: 48px;
	min-height: 48px;
	font-size: 38px;
	line-height: 1;
	color: #d3dae4;
	cursor: pointer;
	transition: color 0.15s ease, transform 0.15s ease;
}

.pp-enc-estrellas label:hover {
	transform: scale(1.08);
}

.pp-enc-estrellas:has(#pp-puntaje-1:checked) label:nth-of-type(1),
.pp-enc-estrellas:has(#pp-puntaje-2:checked) label:nth-of-type(-n + 2),
.pp-enc-estrellas:has(#pp-puntaje-3:checked) label:nth-of-type(-n + 3),
.pp-enc-estrellas:has(#pp-puntaje-4:checked) label:nth-of-type(-n + 4),
.pp-enc-estrellas:has(#pp-puntaje-5:checked) label:nth-of-type(-n + 5) {
	color: #3c325a;
}

.pp-enc-estrellas input:focus-visible + label {
	outline: 2px solid #524579;
	outline-offset: 3px;
	border-radius: 4px;
}

/* NPS: once píldoras del 0 al 10. */
.pp-enc-nps {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	width: 100%;
}

.pp-enc-nps input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.pp-enc-nps label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	min-width: 34px;
	height: 40px;
	padding: 0 6px;
	border: 1px solid #dfe4ec;
	border-radius: 10px;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 15px;
	font-weight: 600;
	color: #334155;
	cursor: pointer;
	transition: all 0.15s ease;
}

.pp-enc-nps label:hover {
	border-color: #3c325a;
}

.pp-enc-nps input:checked + label {
	background: #3c325a;
	border-color: #3c325a;
	color: #ffffff;
}

.pp-enc-nps input:focus-visible + label {
	outline: 2px solid #524579;
	outline-offset: 2px;
}

.pp-enc-extremos {
	display: flex;
	justify-content: space-between;
	font-size: 12.5px;
	color: #64748b;
	margin-top: 8px;
	/* Se alinea con los extremos reales de las once píldoras. */
	width: 100%;
}

/* Chips de «qué fue lo mejor». */
.pp-enc-gusto {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pp-enc-gusto input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.pp-enc-gusto label {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 9px 16px;
	border: 1px solid #dfe4ec;
	border-radius: 999px;
	font-size: 14.5px;
	color: #334155;
	cursor: pointer;
	transition: all 0.15s ease;
}

.pp-enc-gusto label:hover {
	border-color: #3c325a;
}

.pp-enc-gusto input:checked + label {
	background: #3c325a;
	border-color: #3c325a;
	color: #ffffff;
}

.pp-enc-gusto input:focus-visible + label {
	outline: 2px solid #524579;
	outline-offset: 2px;
}

.pp-enc-paso textarea,
.pp-enc-paso input[type="email"] {
	width: 100%;
	border: 1px solid #dfe4ec;
	border-radius: 12px;
	padding: 12px 14px;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 16px;
	color: #1e293b;
	background: #fbfcfe;
}

.pp-enc-paso textarea:focus,
.pp-enc-paso input[type="email"]:focus {
	outline: 2px solid #524579;
	outline-offset: 1px;
	background: #ffffff;
}

.pp-enc-enviar {
	display: inline-block;
	background: #3c325a;
	color: #ffffff;
	border: 0;
	border-radius: 999px;
	padding: 15px 34px;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease;
}

.pp-enc-enviar:hover {
	background: #524579;
	transform: translateY(-1px);
}

.pp-enc-legal {
	font-size: 12.5px;
	color: #64748b;
	margin: 12px 0 0;
}

.pp-enc-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 14.5px;
	margin: 0 0 22px;
}

/* Agradecimiento y enlaces inválidos. */
.pp-enc-aviso {
	text-align: center;
	max-width: 620px;
	margin: 0 auto;
}

.pp-enc-aviso h2 {
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 26px;
	color: #3c325a;
	margin: 14px 0 10px;
}

.pp-enc-aviso p {
	color: #334155;
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 12px;
}

.pp-enc-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #e8f5ec;
	color: #157f3c;
	font-size: 26px;
	font-weight: 700;
}

.pp-enc-cta-texto {
	margin-top: 18px !important;
	font-weight: 600;
}

.pp-enc-cta {
	display: inline-block;
	background: #3c325a;
	color: #ffffff !important;
	text-decoration: none;
	border-radius: 999px;
	padding: 13px 28px;
	font-weight: 700;
	margin-top: 4px;
	transition: background 0.18s ease;
}

.pp-enc-cta:hover {
	background: #524579;
}

/* Honeypot: fuera de la vista y del foco, pero presente para los bots. */
.pp-enc-trampa {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 700px) {
	.pp-enc-hero {
		padding: 44px 20px 84px;
	}

	.pp-enc-form,
	.pp-enc-aviso {
		padding: 26px 20px 24px;
		border-radius: 14px;
	}

	.pp-enc-caja {
		margin-top: -56px;
	}

	.pp-enc-estrellas label {
		font-size: 34px;
	}

	/* Once píldoras en una fila no caben en un teléfono: pasan a dos filas con dedo cómodo. */
	.pp-enc-nps {
		flex-wrap: wrap;
	}

	.pp-enc-nps label {
		flex: 1 1 28px;
		min-width: 30px;
		height: 42px;
		font-size: 14px;
	}

	.pp-enc-extremos {
		font-size: 12px;
	}

	.pp-enc-paso legend {
		font-size: 17.5px;
	}

	.pp-enc-enviar {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------- *
 * Descripción del producto (panel de la ficha)                                 *
 * El contenido viene de producción convertido a bloques: encabezados de nivel 3 *
 * y listas. El layout nuevo no usa acordeones (criterio de Taylor, 21-oct),      *
 * así que el texto se lee corrido.                                              *
 * --------------------------------------------------------------------------- */
.pp-ficha-detalle .woocommerce-Tabs-panel--description h3 {
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 20px;
	line-height: 1.35;
	margin: 30px 0 12px;
	color: var(--wp--preset--color--violeta, #493D6D);
}

.pp-ficha-detalle .woocommerce-Tabs-panel--description h3:first-child {
	margin-top: 0;
}

.pp-ficha-detalle .woocommerce-Tabs-panel--description ul,
.pp-ficha-detalle .woocommerce-Tabs-panel--description ol {
	margin: 0 0 18px;
	padding-left: 22px;
}

.pp-ficha-detalle .woocommerce-Tabs-panel--description li {
	margin-bottom: 7px;
	line-height: 1.55;
}

.pp-ficha-detalle .woocommerce-Tabs-panel--description li::marker {
	color: var(--wp--preset--color--violeta, #493D6D);
}

/* Texto suelto de la descripción (párrafos y encabezados fuera de acordeón). */
.pp-ficha-detalle .woocommerce-Tabs-panel--description > p {
	max-width: 74ch;
	margin: 0 0 16px;
}

.pp-ficha-detalle .woocommerce-Tabs-panel--description > h3 {
	font-size: 20px;
	margin: 28px 0 12px;
	color: var(--wp--preset--color--violeta, #493D6D);
}

/* ------------------------------------------------------------------ */
/* Páginas de campaña (/promociones/ y sus hijas)                      */
/* ------------------------------------------------------------------ */
/* La plantilla genérica deja el título en ancho completo y el texto en la medida por defecto,
   así que el título arranca más a la izquierda que los párrafos. Acá las dos cosas comparten
   la misma columna de lectura. */

/* `main` en el selector no es adorno: los estilos globales fijan el ancho del título con
   `:root :where(.is-layout-constrained) > :where(…)`, que empata en especificidad con
   `.pp-campanas .wp-block-post-title` y gana por orden de carga. */
.pp-campanas main .wp-block-post-title {
	max-width: 760px;
	margin: 0 auto 10px;
	padding-top: 56px;
}

.pp-campanas .wp-block-post-content > p,
.pp-campanas .wp-block-post-content > .wp-block-buttons {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.pp-campanas .wp-block-post-content > p {
	font-size: 17px;
	line-height: 1.65;
	color: var(--wp--preset--color--tinta, #1E293B);
}

/* Entradilla: el primer párrafo pesa más que el resto. */
.pp-campanas .wp-block-post-content > p:first-child {
	font-size: 19px;
	line-height: 1.6;
}

/* La línea de temporada va en versalitas suaves, sin competir con el texto. */
.pp-campanas .wp-block-post-content > p:has(em) {
	color: var(--wp--preset--color--violeta, #493D6D);
	font-weight: 600;
}

.pp-campanas .pp-promo-dato {
	box-sizing: border-box;
	margin-top: 28px;
	padding: 16px 20px;
	background: var(--wp--preset--color--lavanda, #F4F1F9);
	border-left: 4px solid var(--wp--preset--color--violeta, #493D6D);
	border-radius: 4px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--tinta-suave, #334155);
}

.pp-campanas .wp-block-buttons {
	gap: 12px;
	margin-top: 24px;
}

.pp-campanas .wp-block-button__link {
	border-radius: 999px;
	padding: 13px 24px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

/* Primario en violeta: es navegación, no compra. El amarillo queda para el botón de compra. */
.pp-campanas .wp-block-button:first-child .wp-block-button__link {
	background: var(--wp--preset--color--violeta, #493D6D);
	color: #fff;
}

.pp-campanas .wp-block-button:first-child .wp-block-button__link:hover {
	background: #3c325a;
}

.pp-campanas .wp-block-button:not(:first-child) .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--violeta, #493D6D);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--violeta, #493D6D);
}

.pp-campanas .wp-block-button:not(:first-child) .wp-block-button__link:hover {
	background: var(--wp--preset--color--lavanda, #F4F1F9);
}

/* Índice: la lista de campañas, con la temporada al lado. */
.pp-campanas-indice .wp-block-list {
	max-width: 760px;
	margin: 8px auto 0;
	padding-left: 0;
	list-style: none;
}

.pp-campanas-indice .wp-block-list li {
	padding: 14px 0;
	border-bottom: 1px solid var(--wp--preset--color--linea, #E2E8F0);
	line-height: 1.5;
}

.pp-campanas-indice .wp-block-list li:last-child {
	border-bottom: 0;
}

.pp-campanas-indice .wp-block-list a {
	font-weight: 600;
	color: var(--wp--preset--color--violeta, #493D6D);
	text-decoration: none;
}

.pp-campanas-indice .wp-block-list a:hover {
	text-decoration: underline;
}

@media (max-width: 782px) {
	.pp-campanas main .wp-block-post-title {
		padding-top: 32px;
	}
	.pp-campanas .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}
	.pp-campanas .wp-block-button,
	.pp-campanas .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

/* ------------------------------------------------------------------ */
/* Pulido de la ficha de producto (21-oct-2026)                        */
/* ------------------------------------------------------------------ */
/* La compra estaba suelta sobre el fondo: precio, campos y botón parecían tres cosas distintas.
   Ahora van en una tarjeta, con el precio arriba y el botón ocupando el ancho que queda libre. */

.pp-ficha-caja {
	max-width: 60ch;
	margin: 22px 0 0;
	padding: 20px 22px 18px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--linea, #E2E8F0);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(30, 41, 59, 0.06);
}

.pp-ficha-caja .pp-ficha-linea-precio {
	margin: 0 0 4px;
	align-items: baseline;
}

.pp-ficha-caja .pp-ficha-precio .woocommerce-Price-amount {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--wp--preset--color--violeta, #493D6D);
}

/* El formulario en dos filas: la fecha manda (ancho completo) y abajo quedan personas + botón.
   Antes los tres campos iban en una fila y el botón quedaba flotando a la derecha. */
.pp-ficha-caja .pp-ficha-compra form.cart {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	gap: 12px;
	align-items: end;
	margin: 12px 0 0;
}

.pp-ficha-caja .pp-campo-fecha {
	grid-column: 1 / -1;
	flex: none;
}

.pp-ficha-caja .pp-ficha-compra .quantity {
	grid-column: 1;
}

.pp-ficha-caja .pp-ficha-compra button.single_add_to_cart_button {
	grid-column: 2;
	width: 100%;
	justify-content: center;
}

/* La nota de «podés cambiarla» quedaba lejos del campo al que se refiere. */
.pp-ficha-caja .pp-campo-fecha__ayuda {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: #64748B;
}

/* Estrellas y cifra de reseñas en la misma línea, y la cifra lleva a las valoraciones. */
.pp-ficha-estrellas {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pp-ficha-estrellas .wc-block-components-product-rating__container {
	display: flex;
	align-items: center;
}

.pp-ficha-resenas {
	font-size: 14px;
	color: #64748B;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.pp-ficha-resenas:hover {
	color: var(--wp--preset--color--violeta, #493D6D);
}

/* Los tres sellos van uno debajo del otro: en columnas el texto se partía en trozos de tres
   palabras y no se leía. */
.pp-sellos {
	display: block;
	max-width: 60ch;
}

.pp-sellos li + li {
	margin-block-start: 12px;
}

/* En pantallas muy angostas la fila personas + botón se apila: el botón a 196 px dejaba el
   texto justo y con texto ampliado se cortaba. */
@media (max-width: 360px) {
	.pp-ficha-caja .pp-ficha-compra form.cart {
		grid-template-columns: 1fr;
	}
	.pp-ficha-caja .pp-ficha-compra .quantity,
	.pp-ficha-caja .pp-ficha-compra button.single_add_to_cart_button {
		grid-column: 1;
	}
}

@media (max-width: 600px) {
	.pp-ficha-caja {
		padding: 16px 16px 14px;
	}
	.pp-ficha-caja .pp-ficha-precio .woocommerce-Price-amount {
		font-size: 28px;
	}
}

/* La zona de pestañas va a 1120 px de ancho y el texto quedaba pegado a la izquierda, con medio
   bloque vacío a la derecha. Se acota la columna de lectura del detalle y se centra: las pestañas,
   los títulos y las listas comparten el mismo eje. */
.pp-ficha-detalle .woocommerce-tabs {
	max-width: 820px;
	margin-inline: auto;
}

.pp-ficha-detalle .woocommerce-Tabs-panel--description > p,
.pp-ficha-detalle .woocommerce-Tabs-panel--description > ul,
.pp-ficha-detalle .woocommerce-Tabs-panel--description > ol {
	max-width: none;
}

/* ------------------------------------------------------------------ */
/* Superficies de la ficha, con el lenguaje de la página de contacto   */
/* ------------------------------------------------------------------ */
/* En contacto las tarjetas son planas: blanco, borde `linea` de 1 px, radio 16 y sin sombra.
   La ficha tenía los bloques transparentes sobre el gris del sitio, así que el texto caía
   directo sobre el fondo y no había contraste de superficie. Acá se replica el mismo patrón. */

.pp-producto .pp-ficha-datos,
.pp-producto .pp-ficha-medios,
.pp-producto .pp-ficha-detalle .woocommerce-tabs {
	background: #fff;
	border: 1px solid var(--wp--preset--color--linea, #E2E8F0);
	border-radius: 16px;
}

.pp-producto .pp-ficha-datos {
	padding: 24px 26px 26px;
}

.pp-producto .pp-ficha-medios {
	padding: 16px;
}

/* La caja de compra ya no flota: va en lavanda, como la tarjeta de aviso de contacto. */
.pp-producto .pp-ficha-caja {
	max-width: none;
	margin: 18px 0 0;
	padding: 18px 20px 16px;
	background: var(--wp--preset--color--lavanda, #F4F1F9);
	border: 1px solid #E4DCF2;
	border-radius: 14px;
	box-shadow: none;
}

/* Los sellos dejan de ser otra caja dentro de la tarjeta: pasan a ser una lista separada por
   una línea, que es lo que hace de cierre del bloque. */
.pp-producto .pp-sellos {
	max-width: none;
	margin-top: 22px;
	padding: 18px 0 0;
	background: none;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--linea, #E2E8F0);
	border-radius: 0;
}

/* Descripción y valoraciones: tarjeta ancha, con el texto en columna de lectura. */
.pp-producto .pp-ficha-detalle {
	margin-top: 24px;
}

.pp-producto .pp-ficha-detalle .woocommerce-tabs {
	max-width: none;
	margin-inline: 0;
	padding: 22px 26px 26px;
}

.pp-producto .pp-ficha-detalle .woocommerce-Tabs-panel {
	max-width: 820px;
	margin-inline: auto;
}

.pp-producto .pp-relacionados {
	margin-top: 32px;
}

@media (max-width: 781px) {
	.pp-producto .pp-ficha-datos {
		padding: 18px 16px 20px;
	}
	.pp-producto .pp-ficha-medios {
		padding: 10px;
	}
	.pp-producto .pp-ficha-detalle .woocommerce-tabs {
		padding: 16px 16px 20px;
	}
}

/* --- Ajustes finos de la ficha ------------------------------------------- */

/* Las tarjetas blancas sobre el gris del sitio necesitaban separarse del fondo: el borde solo
   no alcanzaba. Sombra muy baja y amplia, del mismo tono violeta que usa el sitio. */
.pp-producto .pp-ficha-datos,
.pp-producto .pp-ficha-medios,
.pp-producto .pp-ficha-detalle .woocommerce-tabs {
	box-shadow: 0 8px 24px rgba(38, 34, 78, 0.05);
}

/* Mismo aire en las dos columnas: la galería arrancaba 10 px antes que el texto. */
.pp-producto .pp-ficha-medios {
	padding: 22px;
}

/* En la ficha, el amarillo es de «Añadir al carrito». El atajo de la cabecera baja a outline. */
.pp-es-ficha .pp-acciones .pp-btn-acento .wp-block-button__link {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.pp-es-ficha .pp-acciones .pp-btn-acento .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* La descripción corta deja de leerse pegada al formulario. */
.pp-producto .pp-ficha-entradilla {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--wp--preset--color--linea, #E2E8F0);
}

/* Los dos campos de la compra a la misma altura que el botón. */
.pp-producto .pp-ficha-caja .pp-campo-fecha input[type="date"],
.pp-producto .pp-ficha-caja .quantity input.qty {
	height: 48px;
	box-sizing: border-box;
}

/* La tira de miniaturas se reparte pareja: con cinco columnas fijas, la séptima caía sola a una
   segunda fila. Con `auto-fit` las siete entran en una sola línea. */
.pp-producto .pp-ficha-galeria.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery.woocommerce-product-gallery--with-images .flex-control-thumbs {
	grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
}

/* Valoración y migas, un punto más oscuras sobre blanco. */
.pp-producto .pp-ficha-datos .pp-migas,
.pp-producto .pp-ficha-resenas {
	color: #5A6B85;
}

/* Controles: el borde de los campos sube a rgba(.62) para pasar el 3:1 de componentes de
   interfaz (WCAG 1.4.11); con .45 quedaba en 2,6:1 sobre blanco. */
.pp-producto .pp-ficha-caja .pp-campo-fecha input[type="date"],
.pp-producto .pp-ficha-caja .quantity input.qty {
	border-color: rgba(73, 61, 109, 0.62);
}

/* La miniatura activa se marca con un anillo violeta: con solo opacidad no se distinguía. */
.pp-producto .pp-ficha-galeria.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery.woocommerce-product-gallery--with-images .flex-control-thumbs img.flex-active {
	box-shadow: 0 0 0 2px var(--wp--preset--color--violeta, #493D6D);
	border-radius: 4px;
}

/* En móvil la tira de miniaturas se había estirado a siete columnas de 50 px: demasiado chico
   para el dedo (el objetivo táctil recomendado es 44 px, y con el hueco quedaba justo). */
@media (max-width: 781px) {
	.pp-producto .pp-ficha-galeria.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery.woocommerce-product-gallery--with-images .flex-control-thumbs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 10px;
	}

	/* La lista de confianza ocupa mucho alto en una columna y empuja la compra lejos. Se aprieta. */
	.pp-producto .pp-ficha-medios .pp-confianza {
		margin-top: 14px;
	}

	.pp-producto .pp-ficha-medios .pp-confianza li + li {
		margin-top: 10px;
	}

	.pp-producto .pp-ficha-medios .pp-confianza-item p {
		font-size: 14px;
		line-height: 1.4;
	}
}

/* --- En móvil, primero la compra (decisión de Taylor, 21-oct) --------------
   Con la galería arriba, el precio y el botón caían en y≈1000 px: segunda pantalla. En una
   columna el orden se invierte y la ficha abre con título, precio y «Añadir al carrito». La
   galería queda debajo, con las fotos y los sellos de confianza como refuerzo. */
@media (max-width: 781px) {
	.pp-producto .pp-ficha-hero {
		display: flex;
		flex-direction: column;
		gap: 18px;
	}

	.pp-producto .pp-ficha-datos {
		order: 1;
	}

	.pp-producto .pp-ficha-medios {
		order: 2;
	}
}

/* La nota del campo de fecha quedaba en #64748B sobre el lavanda de la caja: 4,3:1, por debajo
   del 4,5:1 que pide el texto pequeño. */
.pp-producto .pp-ficha-caja .pp-campo-fecha__ayuda {
	color: #55637A;
}

/* El hueco entre las dos columnas era de 56 px —el `gap` por defecto de las columnas de
   WordPress— y se comía ancho que la foto necesita. Baja a 20 px y ese ancho pasa a la galería
   (46 % en vez de 38 %). Pedido de Taylor, 21-oct. */
@media (min-width: 782px) {
	.pp-producto .pp-ficha-hero {
		column-gap: 20px;
	}
}

/* El `gap` de las columnas lo vuelve a escribir el bloque en algunos anchos (medido: a 900 px
   volvía a 56 px). Se fija el reparto desde el contenedor con la clase del bloque. */
@media (min-width: 782px) {
	.pp-producto .pp-ficha-hero.wp-block-columns {
		gap: 30px 20px;
		column-gap: 20px;
	}
}

/* Entre 782 y 900 px la columna de datos queda angosta: con personas + botón en la misma fila el
   botón bajaba a 117 px y «Añadir al carrito» se partía. Debajo de 900 se apila. */
@media (min-width: 782px) and (max-width: 900px) {
	.pp-producto .pp-ficha-caja .pp-ficha-compra form.cart {
		grid-template-columns: 1fr;
	}

	.pp-producto .pp-ficha-caja .pp-ficha-compra .quantity,
	.pp-producto .pp-ficha-caja .pp-ficha-compra button.single_add_to_cart_button {
		grid-column: 1;
		width: 100%;
	}
}

/* Las dos tarjetas no se fuerzan al mismo alto. Se probó con `align-items: stretch` y anclando
   los sellos al pie: la tarjeta de la galería ganaba 300 px de blanco vacío entre las miniaturas
   y el pie, que se lee como un hueco, no como aire. Cada tarjeta termina donde termina su
   contenido. */
@media (min-width: 782px) {
	.pp-producto .pp-ficha-hero .pp-ficha-medios {
		align-self: flex-start;
	}
}

/* ------------------------------------------------------------------ */
/* Cierre de la ficha: precio contenido y puntos de venta unificados   */
/* (pedido de Taylor, 21-oct)                                          */
/* ------------------------------------------------------------------ */

/* El precio iba a 32 px —casi el doble de cualquier otro texto de la tarjeta— y se comía la
   jerarquía. Baja a 24 px, que sigue siendo el número más grande de la caja pero deja de gritar. */
.pp-producto .pp-ficha-caja .pp-ficha-precio,
.pp-producto .pp-ficha-caja .pp-ficha-precio .woocommerce-Price-amount {
	font-size: 24px;
}

.pp-producto .pp-ficha-caja .pp-ficha-linea-precio .pp-ficha-porpersona {
	font-size: 14.5px;
}

@media (max-width: 600px) {
	.pp-producto .pp-ficha-caja .pp-ficha-precio,
	.pp-producto .pp-ficha-caja .pp-ficha-precio .woocommerce-Price-amount {
		font-size: 21px;
	}
}

/* Una sola lista de puntos de venta, debajo de la galería, con el estilo de los sellos del
   producto: círculo violeta macizo y glifo en blanco. Antes eran dos listas en columnas distintas
   con dos estilos y dos colores distintos. */
.pp-producto .pp-ficha-medios .pp-sellos-ficha {
	display: block;
	max-width: none;
	margin: 18px 0 0;
	padding: 16px 18px;
	background: #F7F5FB;
	border: 1px solid #E4DCF2;
	border-top: 1px solid #E4DCF2;
	border-radius: 14px;
	list-style: none;
}

.pp-producto .pp-ficha-medios .pp-sellos-ficha li {
	margin: 0;
	padding: 0;
}

.pp-producto .pp-ficha-medios .pp-sellos-ficha li + li {
	margin-top: 12px;
}

.pp-producto .pp-ficha-medios .pp-sellos-ficha .pp-sello {
	gap: 12px;
	align-items: center;
}

.pp-producto .pp-ficha-medios .pp-sellos-ficha .pp-sello .wp-block-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--wp--preset--color--violeta, #3C325A);
	color: #FFFFFF;
}

.pp-producto .pp-ficha-medios .pp-sellos-ficha .pp-sello .wp-block-icon svg {
	width: 19px;
	height: 19px;
	fill: currentColor;
}

.pp-producto .pp-ficha-medios .pp-sellos-ficha .pp-sello p {
	margin: 0;
	font-family: var(--wp--preset--font-family--roboto, Roboto, sans-serif);
	font-size: 14.5px;
	line-height: 1.4;
	font-weight: 500;
	color: #1E293B;
}

/* El bloque de icono aplica `has-violeta-color` al propio SVG, así que `currentColor` dentro del
   círculo violeta pintaba el glifo del mismo color que el fondo. Se fuerza el blanco en el SVG. */
.pp-producto .pp-ficha-medios .pp-sellos-ficha .pp-sello .wp-block-icon svg,
.pp-producto .pp-ficha-medios .pp-sellos-ficha .pp-sello .wp-block-icon svg.has-text-color {
	color: #FFFFFF;
	fill: #FFFFFF;
	stroke: none;
}

/* El glifo de «idioma» es de trazo fino y a 19 px se perdía dentro del círculo. Sube a 21 px. */
.pp-producto .pp-ficha-medios .pp-sellos-ficha .pp-sello .wp-block-icon svg {
	width: 21px;
	height: 21px;
}

/* ------------------------------------------------------------------ */
/* Color secundario: turquesa «agua»                                   */
/*                                                                     */
/* Sale de los propios carteles: el turquesa es la familia de color    */
/* más repetida del catálogo (72 de 114 carteles), el del paisaje de   */
/* Ponderosa —río, piscinas, catarata— y el complementario natural del */
/* violeta de marca. Se usa para lo interactivo y lo informativo, no  */
/* para la compra: el amarillo sigue siendo la única señal de acción.  */
/*                                                                     */
/* Contraste medido: 5,63:1 sobre blanco y 5,04:1 sobre las tarjetas   */
/* (AA en texto pequeño). El tinte #E7F4F6 lleva texto violeta a 10,4:1*/
/* ------------------------------------------------------------------ */
:root {
	--pp-agua: var(--wp--preset--color--agua, #0A7280);
	--pp-agua-claro: var(--wp--preset--color--agua-claro, #E7F4F6);
}

/* Enlaces dentro del contenido: blog, páginas, campañas y descripción de producto.
   Se excluyen los botones propios (`.pp-boton`): su color lo decide su variante, y la regla de
   enlaces los dejaba en agua sobre el violeta del cierre y del botón violeta, sin contraste.
   La portada también vive en `.wp-block-post-content` desde que se pasó a bloques; sus
   enlaces llevan estilo propio y se reafirman más abajo con `body.home`. */
.wp-block-post-content a:not(.wp-block-button__link):not(.wp-element-button):not(.pp-boton),
.pp-campanas .wp-block-post-content a:not(.wp-block-button__link):not(.pp-boton),
.pp-ficha-detalle .woocommerce-Tabs-panel--description a {
	color: var(--pp-agua);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.wp-block-post-content a:not(.wp-block-button__link):not(.wp-element-button):not(.pp-boton):hover,
.pp-campanas .wp-block-post-content a:not(.wp-block-button__link):not(.pp-boton):hover,
.pp-ficha-detalle .woocommerce-Tabs-panel--description a:hover {
	color: var(--wp--preset--color--violeta, #493D6D);
}

/* Índice de campañas */
.pp-campanas-indice .wp-block-list a {
	color: var(--pp-agua);
}

.pp-campanas-indice .wp-block-list a:hover {
	color: var(--wp--preset--color--violeta, #493D6D);
}

/* Migas: el enlace se tiñe al pasar, el texto en curso no. */
.pp-migas a:hover,
.pp-migas a:focus-visible,
.pp-archivo .woocommerce-breadcrumb a:hover {
	color: var(--pp-agua);
}

/* Enlace «N reseñas» de la ficha */
.pp-ficha-resenas:hover,
.pp-ficha-resenas:focus-visible {
	color: var(--pp-agua);
}

/* Pestañas de la ficha: la activa se subraya en turquesa, no en violeta.
   WooCommerce pinta la pestaña activa con `.woocommerce div.product .woocommerce-tabs ul.tabs
   li.active` —cinco clases y tres elementos—, así que estos selectores llevan una clase más para
   ganar sin `!important`. */
.pp-producto .pp-ficha-detalle .woocommerce-tabs ul.tabs.wc-tabs li.active {
	border-bottom-color: var(--pp-agua);
	color: var(--pp-agua);
}

.pp-producto .pp-ficha-detalle .woocommerce-tabs ul.tabs.wc-tabs li.active a {
	color: var(--pp-agua);
	text-shadow: none;
}

/* Puntos de venta de la ficha: el círculo pasa a turquesa. Violeta queda para la estructura
   (título, precio, encabezados) y el amarillo para comprar; el turquesa informa. */
.pp-producto .pp-ficha-medios .pp-sellos-ficha .pp-sello .wp-block-icon {
	background: var(--pp-agua);
}

/* Etiquetas de categoría en las tarjetas y en el archivo */
.pp-archivo .wp-block-woocommerce-product-categories a:hover,
.pp-archivo .wc-block-product-categories-list a:hover {
	color: var(--pp-agua);
}

/* Separadores de datos en campañas */
.pp-campanas .pp-promo-dato {
	border-left-color: var(--pp-agua);
}

/* Botones secundarios de las campañas: en turquesa, para que el violeta quede en la acción
   principal y el acento se vea también en las páginas de promoción. Acotado al contenido: la
   cabecera y el pie también viven bajo `body.pp-campanas`. */
.pp-campanas .wp-block-post-content .wp-block-button:not(:first-child) .wp-block-button__link {
	color: var(--pp-agua);
	box-shadow: inset 0 0 0 2px var(--pp-agua);
}

.pp-campanas .wp-block-post-content .wp-block-button:not(:first-child) .wp-block-button__link:hover {
	background: var(--pp-agua-claro);
	color: var(--pp-agua);
}

/* La pestaña activa con 2 px de turquesa: el subrayado de 1 px heredado de WooCommerce se perdía
   contra la línea gris de la barra. */
.pp-producto .pp-ficha-detalle .woocommerce-tabs ul.tabs.wc-tabs li.active {
	border-bottom-width: 2px;
	border-bottom-style: solid;
}

/* ------------------------------------------------------------------ */
/* Estrellas: oro de marca, excepción aceptada (21-oct-2026)            */
/*                                                                     */
/* Medido: #E2B90C sobre blanco da 1,88:1 y no llega al 3:1 de 1.4.11. */
/* Taylor decidió conservar el oro de marca como excepción: el dato no */
/* depende del color porque cada bloque lleva su aria-label y la ficha */
/* repite «4,7 · 6 reseñas» en texto. #A67C00 (3,82:1) queda anotado   */
/* como alternativa si algún día se quiere cumplir a rajatabla.        */
/* ------------------------------------------------------------------ */
.pp-ficha-estrellas {
	--pp-oro-estrellas: #E2B90C;
}

:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product .wc-block-components-product-rating__stars > span {
	color: #E2B90C;
}

#reviews .star-rating span::before {
	color: #E2B90C !important;
}

/* Cuidado con pintar `.rating` aquí: verificado pintando cada candidato de otro color y midiendo los
   píxeles, el relleno de las estrellas lo dibuja `span.rating` —el «6» del final del texto, que la
   fuente «WooCommerce» convierte en glifos de estrella—. Teñirlo de tinta apaga el oro. Las estrellas
   toman el color del `<span>` padre y punto; la cifra legible de la ficha es `.pp-ficha-resenas`. */

/* Estrellas vacías un punto más oscuras que el gris de línea: con #E2E8F0 el dibujo de las cinco
   estrellas se perdía sobre blanco (1,23:1). #CBD5E1 las hace perceptibles sin competir con el
   relleno. El dato en sí no depende de esto: cada bloque lleva su `aria-label` con la nota y la
   ficha repite «4,7 · 6 reseñas» en texto. */
:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product .wc-block-components-product-rating__stars::before,
.pp-ficha-estrellas .wc-block-components-product-rating__stars::before {
	color: #CBD5E1;
}

/* ------------------------------------------------------------------ */
/* Datos de contacto: iconos centrados y enlaces con más peso          */
/*                                                                     */
/* El tile hereda `display: flex` de una regla posterior de la hoja,   */
/* así que el `place-items: center` del bloque original dejaba de     */
/* aplicar en el eje horizontal y el glifo se iba 10 px a la          */
/* izquierda —exactamente el sobrante de (40 − 20) / 2—. Se centra    */
/* explícitamente con `justify-content`.                              */
/* ------------------------------------------------------------------ */
.pp-dato-icono {
	justify-content: center;
}

/* Los enlaces de la sección estaban en peso 300, el mismo que el texto que los rodea: se leían como
   parte del dato y no como algo que se puede tocar. A 500 se separan sin competir con los títulos. */
.pp-dato a,
.pp-dato-valor a {
	font-weight: 500;
}

/* ------------------------------------------------------------------ */
/* Rejilla de dos columnas: 20 px en todo el sitio                     */
/*                                                                     */
/* El espacio entre la galería y los datos de la ficha de producto     */
/* (20 px) se toma como referencia y se aplica a toda sección de dos   */
/* columnas: cuerpo con barra lateral, héroes partidos y filas de      */
/* artículo. Antes cada plantilla traía su propio hueco —34 px en los  */
/* cuerpos, 44 y 54,64 en los héroes, 22 en las filas— y el sitio no   */
/* se leía como una sola pieza. Se ajusta sólo el hueco entre          */
/* columnas: el vertical se deja como estaba para no cambiar el ritmo  */
/* cuando las columnas se apilan en móvil.                             */
/* ------------------------------------------------------------------ */
.pp-contacto-cuerpo,
.pp-blog-cuerpo,
.pp-archivo-cuerpo,
.pp-contacto-hero-cuerpo,
.pp-blog-hero-cuerpo,
.pp-tienda-hero-cuerpo,
.pp-articulo {
	column-gap: var(--pp-gutter-columnas, 20px);
}

/* El héroe de la tienda repartía el hueco con `space-between`, así que el `column-gap` de 20 px no
   se veía: quedaban 114 px reales entre las dos columnas. Se pasa a reparto por crecimiento y las
   columnas absorben ese sobrante conservando su proporción. */
.pp-tienda-hero-cuerpo {
	justify-content: flex-start;
}

.pp-tienda-hero-cuerpo > * {
	flex: 1 1 auto;
}

/* ------------------------------------------------------------------ */
/* Motivo de la consulta: radios                                       */
/*                                                                     */
/* Se elige uno solo y ese texto encabeza el asunto del correo. Los    */
/* radios heredaban el ancho de `.pp-form input` (100 %) y el peso 700 */
/* de las etiquetas del formulario, así que hay que deshacer las dos   */
/* cosas para que se lean como opciones y no como campos.              */
/* ------------------------------------------------------------------ */
.pp-form .pp-form-motivo {
	/* Bloque, no flex: dentro de un fieldset el `legend` queda fuera del contexto flex y el `gap`
	   no se aplica entre la leyenda y la primera opción. */
	display: block;
	border: 0;
	padding: 0;
	margin: 0 0 14px;
	min-width: 0;
}

.pp-form .pp-form-motivo legend {
	display: block;
	padding: 0;
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--tinta);
}

.pp-form .pp-form-radio {
	display: flex;
	align-items: center;
	gap: 10px;
	/* 11 px de relleno y 16 px de texto: la opción mide 48 px, igual que un campo del formulario. */
	padding: 11px 14px;
	margin: 0 0 8px;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 10px;
	background-color: #fff;
	cursor: pointer;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--tinta);
	transition: border-color .15s, background-color .15s;
}

.pp-form .pp-form-radio:last-of-type {
	margin-bottom: 0;
}

.pp-form .pp-form-radio:hover {
	border-color: var(--wp--preset--color--violeta);
	background-color: #FAF8FD;
}

.pp-form .pp-form-radio input[type="radio"] {
	width: 18px;
	height: 18px;
	min-width: 18px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	accent-color: #493D6D;
	flex: 0 0 auto;
}

/* La opción marcada se tiñe de lavanda y cambia el tono del borde; sin el halo interior que
   duplicaba el grosor y se leía como un anillo de foco. */
.pp-form .pp-form-radio:has(input:checked) {
	border-color: var(--wp--preset--color--violeta);
	background-color: #F4F1F9;
}

/* El anillo solo con teclado: al hacer clic con el ratón se sumaba al borde violeta de la opción
   marcada y se veía como un contorno doble que engordaba la fila. */
.pp-form .pp-form-radio:has(input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--violeta);
	outline-offset: 1px;
}

/* ------------------------------------------------------------------ */
/* Redes sociales en la barra lateral de contacto                      */
/*                                                                     */
/* Mismo lenguaje que los tiles de datos: 40×40, radio 12, fondo       */
/* lavanda y glifo violeta. Al pasar el ratón pasan al turquesa, que   */
/* es el color de apoyo del sitio.                                      */
/* ------------------------------------------------------------------ */
.pp-datos-redes {
	margin: 20px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--wp--preset--color--linea);
}

.pp-redes-titulo {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tinta-suave);
}

.pp-redes.wp-block-social-links {
	margin: 0;
	gap: 10px;
	row-gap: 10px;
}

/* El color de marca lo pinta el core sobre el <li>, no sobre el <a>: sin tocar el `li` los tiles
   salen azul de Facebook, magenta de Instagram, negro de TikTok y rojo de YouTube. */
.pp-datos-redes .pp-redes.wp-block-social-links .wp-block-social-link.wp-social-link {
	margin: 0;
	border-radius: 12px;
	background-color: rgba(73, 61, 109, 0.09);
	transition: background-color .15s;
}

.pp-datos-redes .pp-redes.wp-block-social-links .wp-block-social-link.wp-social-link:hover {
	background-color: var(--wp--preset--color--agua-claro, #e7f4f6);
}

/* El core pinta el glifo con `color: currentColor` desde un selector de CUATRO clases
   (`.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor`), y su
   CSS se carga después del tema: con menos clases el icono sale blanco sobre el tile lavanda, es decir
   invisible. Este selector tiene cinco y gana sin `!important`. */
.pp-datos-redes .pp-redes.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 12px;
	background-color: transparent;
	color: var(--wp--preset--color--violeta);
	transition: background-color .15s, color .15s;
}

.pp-datos-redes .pp-redes.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor:hover,
.pp-datos-redes .pp-redes.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor:focus {
	background-color: var(--wp--preset--color--agua-claro, #e7f4f6);
	color: var(--wp--preset--color--agua, #0a7280);
}

.pp-datos-redes .pp-redes svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* El foco de teclado tiene que verse: el anillo del navegador sobre un tile lavanda se pierde. */
.pp-datos-redes .pp-redes.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor:focus-visible {
	outline: 2px solid var(--wp--preset--color--violeta);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Móvil: el formulario antes que la barra lateral                     */
/*                                                                     */
/* Apiladas, las dos columnas dejaban primero los datos de contacto y  */
/* el formulario más abajo: cuatro salidas por fuera antes de la caja  */
/* donde queremos que escriban. Con `order` se invierte SÓLO el orden  */
/* visual: el DOM sigue con los datos primero, así que un lector de    */
/* pantalla o el tabulador encuentran los datos antes que el formulario. */
/* Se acepta porque son dos bloques independientes y todo sigue        */
/* alcanzable; si algún día se exige paridad exacta, hay que mover los  */
/* bloques en el contenido y devolver el orden en escritorio con `order`. */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
	.pp-contacto .pp-contacto-cuerpo > .pp-contacto-form {
		order: 1;
	}

	.pp-contacto .pp-contacto-cuerpo > .pp-contacto-datos {
		order: 2;
	}
}

/* ------------------------------------------------------------------ */
/* Horario y llegada, dentro de la tarjeta de datos                    */
/*                                                                     */
/* Cierra la tarjeta con lo que la industria pone siempre y aquí       */
/* faltaba: a qué hora se abre, cómo se llega y dónde se parquea.      */
/* ------------------------------------------------------------------ */
.pp-llegada {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--wp--preset--color--linea);
}

.pp-llegada-titulo {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tinta-suave);
}

.pp-llegada-horario {
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--wp--preset--color--tinta);
}

.pp-llegada-horario strong {
	font-weight: 500;
}

.pp-llegada-datos {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.pp-llegada-datos li {
	position: relative;
	margin: 0 0 3px;
	padding-left: 16px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--wp--preset--color--tinta-suave);
}

/* Viñeta propia: el marcador del navegador no hereda el color del token. */
.pp-llegada-datos li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 7px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--agua, #0a7280);
}

/* Imagen propia en vez de un iframe: el mapa incrustado de OpenStreetMap pedía las teselas en vivo y
   dentro de un tile de 296 px se quedaba en blanco. Esta versión se armó con 9 teselas, marcador y
   atribución, pesa 12 KB y no hace ninguna petición externa ni deja cookies. */
.pp-llegada-marco {
	display: block;
	border-radius: 12px;
}

.pp-llegada-mapa {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 592 / 210;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 12px;
	background-color: var(--wp--preset--color--fondo, #edf0f5);
	object-fit: cover;
}

.pp-llegada-marco:hover .pp-llegada-mapa,
.pp-llegada-marco:focus-visible .pp-llegada-mapa {
	border-color: var(--wp--preset--color--agua, #0a7280);
}

.pp-llegada-enlace {
	margin: 8px 0 0;
	font-size: 13.5px;
}

.pp-llegada-enlace a {
	color: var(--wp--preset--color--agua, #0a7280);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Promesa de respuesta, pegada al botón de enviar. */
.pp-form-promesa {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--wp--preset--color--tinta-suave);
}

/* Páginas legales: el título se alinea con el cuerpo de texto.
   La plantilla pinta el H1 a ancho «wide» (1120 px) con una regla `body.page` que tiene
   más peso que un selector de dos clases; por eso aquí se repite `body.` para empatar
   especificidad y quedar después en la cascada. Solo aplica a las páginas marcadas con
   `pp-texto-legal` desde functions.php. */
body.pp-texto-legal .wp-block-post-title {
	max-width: var(--wp--style--global--content-size, 800px);
	margin-inline: auto;
}

/* Identificadores de herramientas dentro del texto legal (GTM, GA4, píxeles). */
.wp-block-post-content code {
	padding: 1px 5px;
	border-radius: 4px;
	background-color: var(--wp--preset--color--tarjeta, #f4f1f9);
	color: var(--wp--preset--color--tinta, #1e293b);
	font-size: 0.92em;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Aviso de privacidad bajo el formulario de contacto                  */
/* ------------------------------------------------------------------ */
/* Casilla de consentimiento: sin caja propia, para que no compita con los radios del motivo.
   El enlace va en turquesa y subrayado como el resto de los enlaces del formulario. */
.pp-form .pp-form-privacidad {
	margin: 2px 0 16px;
}

.pp-form .pp-form-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--tinta-suave);
	cursor: pointer;
}

.pp-form .pp-form-check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	min-width: 18px;
	/* Alinea la casilla con la primera línea de texto, no con el centro del párrafo. */
	margin: 1px 0 0;
	padding: 0;
	border: 1px solid #94A3B8;
	border-radius: 4px;
	accent-color: #493D6D;
	flex: 0 0 auto;
	cursor: pointer;
}

.pp-form .pp-form-check a {
	color: var(--wp--preset--color--agua);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pp-form .pp-form-check a:hover {
	color: var(--wp--preset--color--violeta);
}

.pp-form .pp-form-check input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--violeta);
	outline-offset: 2px;
}

/* 44 px de alto para el dedo en móvil, sin agrandar el texto. */
@media (max-width: 900px) {
	.pp-form .pp-form-check {
		min-height: 44px;
		align-items: center;
	}
}

/* Marcador de dato pendiente en las legales: deliberadamente visible, para que no se
   publique una página legal con huecos sin que nadie lo note. */
.pp-pendiente {
	padding: 1px 6px;
	border-radius: 4px;
	background-color: #FEF3C7;
	color: #7C2D12;
	font-weight: 600;
	font-size: 0.95em;
}

/* ── Exoneración de responsabilidad: formulario nativo ─────────────────────────────
   Sustituye los dos formularios de Contact Form 7 de producción. Mismas medidas que el
   resto del sitio: radio 16, borde #E2E8F0, campos de 48 px, rejilla de 20 px. */
.pp-exon{background:#fff;border:1px solid #E2E8F0;border-radius:16px;padding:32px;margin:32px 0}
.pp-exon form{margin:0}
.pp-exon-trampa{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.pp-exon-aviso{border-radius:12px;padding:14px 18px;margin:0 0 24px;font-size:15px;line-height:1.5}
.pp-exon-aviso.is-ok{background:#E7F4F6;color:#0A4A54;border:1px solid #0A7280}
.pp-exon-aviso.is-error{background:#FDECEA;color:#8C1D18;border:1px solid #B3261E}
.pp-exon-idiomas{display:flex;gap:8px;margin:0 0 28px}
.pp-exon-idioma{background:#F4F1F9;border:1px solid #E2E8F0;border-radius:999px;color:#334155;
  font-size:14px;font-weight:600;padding:8px 18px;cursor:pointer;min-height:40px}
.pp-exon-idioma.is-activo{background:#493D6D;border-color:#493D6D;color:#fff}
.pp-exon-idioma:focus-visible{outline:3px solid #0A7280;outline-offset:2px}
.pp-exon-campos{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;row-gap:18px;margin:0 0 28px}
.pp-exon-campo{margin:0;display:flex;flex-direction:column;gap:6px}
.pp-exon-campo label{font-size:14px;font-weight:600;color:#1E293B}
.pp-exon-req{color:#B3261E;font-weight:700}
.pp-exon-campo input,.pp-exon-campo select{min-height:48px;border:1px solid #CBD5E1;border-radius:10px;
  padding:0 14px;font-size:16px;color:#1E293B;background:#fff;width:100%;box-sizing:border-box}
.pp-exon-campo input:focus,.pp-exon-campo select:focus{outline:3px solid #0A7280;outline-offset:1px;border-color:#0A7280}
.pp-exon-ayuda{font-size:13px;color:var(--wp--preset--color--tinta-suave, #334155);line-height:1.45}
.pp-exon-documento{background:#F4F1F9;border-radius:12px;padding:24px 26px;margin:0 0 24px}
.pp-exon-titulo{font-size:19px;line-height:1.3;margin:0 0 10px;color:#493D6D}
.pp-exon-intro{margin:0 0 14px;font-size:15px;line-height:1.6;color:#1E293B}
.pp-exon-lista{margin:0;padding-left:22px;font-size:15px;line-height:1.6;color:#1E293B}
.pp-exon-lista li{margin:0 0 10px}
.pp-exon-lista li:last-child{margin-bottom:0}
.pp-exon-consentimientos{display:flex;flex-direction:column;gap:14px;margin:0 0 26px}
.pp-exon-check{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:#334155;cursor:pointer}
.pp-exon-check input{width:20px;height:20px;min-width:20px;margin:1px 0 0;accent-color:#493D6D}
.pp-exon-check input:focus-visible{outline:3px solid #0A7280;outline-offset:2px}
.pp-exon-legal{font-size:13.5px;line-height:1.55;color:#334155;margin:18px 0 22px}
.pp-exon-legal a{color:#0A7280;font-weight:600}
.pp-exon-enviar{background:#493D6D;color:#fff;border:0;border-radius:999px;font-size:16px;font-weight:700;
  padding:16px 34px;min-height:52px;cursor:pointer;width:100%}
.pp-exon-enviar:hover{background:#3c325a}
.pp-exon-enviar:focus-visible{outline:3px solid #0A7280;outline-offset:3px}
@media (max-width:900px){
  .pp-exon{padding:22px 18px;border-radius:14px}
  .pp-exon-campos{grid-template-columns:1fr}
  .pp-exon-documento{padding:20px 18px}
  .pp-exon-idiomas{flex-wrap:wrap}
}

/* ── Firma en pantalla ────────────────────────────────────────────────────────────
   Lienzo con `touch-action:none` para que el dedo no arrastre la página al firmar.
   El guion «Firmá acá» desaparece con el primer trazo. */
.pp-exon-firma{margin:0 0 26px}
.pp-exon-firma-titulo{margin:0 0 8px;font-size:14px;font-weight:600;color:#1E293B}
.pp-exon-lienzo-caja{position:relative;border:1px solid #CBD5E1;border-radius:12px;background:#fff;overflow:hidden}
.pp-exon-lienzo-caja:focus-within{border-color:#0A7280;box-shadow:0 0 0 3px rgba(10,114,128,.25)}
.pp-exon-lienzo{display:block;width:100%;height:220px;touch-action:none;cursor:crosshair;background:
  repeating-linear-gradient(90deg,transparent 0 39px,#F1F5F9 39px 40px)}
.pp-exon-lienzo-guia{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#64748B;font-size:15px;pointer-events:none;user-select:none}
.pp-exon-lienzo-caja.is-firmado .pp-exon-lienzo-guia{display:none}
.pp-exon-firma-pie{display:flex;gap:16px;justify-content:space-between;align-items:center;margin:10px 0 0;flex-wrap:wrap}
.pp-exon-firma-pie .pp-exon-ayuda{flex:1 1 260px}
.pp-exon-borrar{background:#fff;border:1px solid #CBD5E1;border-radius:999px;color:#334155;font-size:14px;
  font-weight:600;padding:0 18px;min-height:44px;cursor:pointer}
.pp-exon-borrar:hover{border-color:#493D6D;color:#493D6D}
.pp-exon-borrar:focus-visible{outline:3px solid #0A7280;outline-offset:2px}
.pp-exon-firma-error{margin:10px 0 0;font-size:14px;font-weight:600;color:#8C1D18;background:#FDECEA;
  border:1px solid #B3261E;border-radius:10px;padding:10px 14px}
@media (max-width:900px){
  .pp-exon-lienzo{height:170px}
  .pp-exon-firma-pie{flex-direction:column;align-items:stretch}
  /* En columna, el `flex-basis` de 260px se convierte en 260px de ALTO y deja un hueco
     enorme entre la ayuda y el botón. Se anula. */
  .pp-exon-firma-pie .pp-exon-ayuda{flex:none}
  .pp-exon-borrar{width:100%}
}

/* ── Tablas del contenido del blog ───────────────────────────────────────────────
   Portado del tema de Sunset (que a su vez lo copió de BXM, `.responsive-table`).
   Se conserva la mecánica —100% de ancho, `border-collapse: separate`, celdas de
   20 px y tres escalones de móvil (768 / 600 / 480) que evitan el scroll
   horizontal— y se cambian los colores por los de Ponderosa:
     · cabecera VIOLETA #493D6D con texto blanco (contraste 9,4:1)
     · bordes #E2E8F0, el mismo gris de línea del resto del sitio
     · fila alterna en lavanda #F4F1F9, el fondo de las cajas de la ficha
   Esquinas de 12 px: en Ponderosa las tarjetas sí llevan radio. */
.pp-post-contenido .wp-block-table,
.pp-texto-legal .wp-block-table{display:block;width:100%;max-width:100%;overflow-x:auto;margin:28px 0;
  border-radius:12px}
.pp-post-columna,.pp-post-contenido{min-width:0}
/* Rejilla completa y uniforme.
   El tema pinta el borde superior e izquierdo de cada celda con `currentColor` (#1E293B), así que
   el interior se veía casi negro mientras el derecho e inferior iban en gris: media tabla oscura y
   media clara, y los bordes exteriores desaparecían porque el último de cada fila/columna se
   anulaba. Ahora todas las celdas llevan el mismo borde de 1 px en #E2E8F0 y el colapso hace que
   las líneas compartidas no se dupliquen. Las esquinas redondeadas las pone el contenedor. */
.pp-post-contenido table,
.pp-texto-legal table{width:100%;border:1px solid #E2E8F0;border-collapse:collapse;border-spacing:0;
  font-size:16px;line-height:1.45;margin:0}
.pp-post-contenido thead,
.pp-texto-legal thead{background:#493D6D;color:#fff}
.pp-post-contenido th,
.pp-post-contenido td,
.pp-texto-legal th,
.pp-texto-legal td{padding:20px;border:1px solid #E2E8F0;text-align:left;vertical-align:top}
.pp-post-contenido th,
.pp-texto-legal th{font-weight:700}
.pp-post-contenido tbody tr:nth-child(odd),
.pp-texto-legal tbody tr:nth-child(odd){background:#F4F1F9}
.pp-post-contenido tbody tr:nth-child(even),
.pp-texto-legal tbody tr:nth-child(even){background:#fff}
.pp-post-contenido .wp-block-table figcaption,
.pp-texto-legal .wp-block-table figcaption{font-size:13.5px;line-height:1.5;color:var(--wp--preset--color--tinta-suave, #334155);margin-top:10px;text-align:left}
@media (max-width:1400px){
  .pp-post-contenido th,.pp-post-contenido td,
  .pp-texto-legal th,.pp-texto-legal td{padding:14px 16px}
}
@media (max-width:768px){
  .pp-post-contenido th,.pp-post-contenido td,
  .pp-texto-legal th,.pp-texto-legal td{padding:12px 14px;font-size:.92em}
}
/* Bajo 600px la tabla de cuatro columnas ya no se lee a 12,8 px: se deja de
   encoger la letra y se le da scroll propio al contenedor. Medido: a 13 px el
   texto se partía en cinco líneas por celda y la ruta no se seguía. */
@media (max-width:768px){
  .pp-post-contenido .wp-block-table,
  .pp-texto-legal .wp-block-table{-webkit-overflow-scrolling:touch}
}
@media (max-width:600px){
  .pp-post-contenido table,
  .pp-texto-legal table{min-width:520px}
  .pp-post-contenido th,.pp-post-contenido td,
  .pp-texto-legal th,.pp-texto-legal td{padding:10px 12px;font-size:14px}
  .pp-post-contenido .wp-block-table,
  .pp-texto-legal .wp-block-table{padding-bottom:6px;padding-right:4px}
}
@media (max-width:480px){
  .pp-post-contenido table,
  .pp-texto-legal table{min-width:480px}
  .pp-post-contenido th,.pp-post-contenido td,
  .pp-texto-legal th,.pp-texto-legal td{padding:8px 10px;font-size:13.5px}
}
.pp-side-producto{background:#fff;border:1px solid #E2E8F0;border-radius:16px;padding:16px;margin:16px 0 0}
.pp-side-producto:first-of-type{margin-top:18px}
.pp-side-prod-foto{margin:0 0 14px}
.pp-side-prod-foto img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;display:block}
.pp-side-prod-eyebrow{margin:0 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0A7280}
.pp-side-prod-nombre{margin:0 0 8px;font-size:18px;line-height:1.25}
.pp-side-prod-nombre a{color:#493D6D;text-decoration:none}
.pp-side-prod-nombre a:hover,.pp-side-prod-nombre a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.pp-side-prod-linea{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--wp--preset--color--tinta-suave, #334155)}
.pp-side-prod-precio{margin:0 0 14px;font-size:18px;font-weight:700;color:#1E293B}
.pp-side-prod-boton{margin:0}
.pp-side-prod-boton .wp-block-button,.pp-side-prod-boton .wp-block-button__link{width:100%}
.pp-side-prod-boton .wp-block-button__link{background:#FDD72E;color:#1E293B;border-radius:999px;
  font-size:15px;font-weight:700;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 18px;text-decoration:none}
.pp-side-prod-boton .wp-block-button__link:hover{background:#EBC400;color:#1E293B}
.pp-side-prod-boton .wp-block-button__link:focus-visible{outline:3px solid #0A7280;outline-offset:3px}
@media (max-width:900px){
  .pp-side-producto{padding:14px}
  .pp-side-prod-foto img{aspect-ratio:16/9}
}
/* En pantallas chicas las dos columnas del blog se apilan y ocupan el ancho
   completo. Sin esto el contenedor seguía en `nowrap` y la columna del artículo
   se estiraba hasta el `min-width` de la tabla (480 px), desbordando la página. */
@media (max-width:900px){
  .pp-blog-cuerpo{flex-wrap:wrap}
  .pp-blog-cuerpo > .pp-post-columna,
  .pp-blog-cuerpo > .pp-blog-side{flex:1 1 100%;max-width:100%;min-width:0}
}

/* ── Boletín en la barra lateral ──────────────────────────────────────────────────
   Misma tarjeta blanca que el resto de la barra. El botón va en violeta y no en
   amarillo: el amarillo es solo para el CTA de compra de la ficha de producto. */
.pp-side-boletin{margin-top:24px;padding:20px}
/* Ritmo vertical de la tarjeta: escala única de 10/12/20, sin huecos accidentales.
   Medido antes del arreglo: 124 px entre la intro y la etiqueta, 0 px entre el campo y
   el botón y 82 px de blanco al pie, con tres <p> vacíos y tres <br> que aportaban 110 px. */
.pp-side-boletin > *{margin-top:0}
.pp-side-boletin > :last-child{margin-bottom:0}
.pp-side-boletin p:empty{display:none}
.pp-nl-form{display:flex;flex-direction:column;gap:12px;margin:0}
.pp-side-boletin .pp-side-cta-texto{margin-bottom:12px}
.pp-nl-form > *{margin:0}
/* Etiqueta y campo van agrupados en un div: si quedan sueltos, `wpautop` los envuelve
   en un <p> y el campo deja de ser hermano del botón. */
.pp-nl-grupo{margin:0;display:flex;flex-direction:column;gap:4px}
.pp-nl-grupo:last-of-type{gap:0}
.pp-nl-form br{display:none}
.pp-nl-trampa{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.pp-nl-etiqueta{font-size:13px;font-weight:600;color:#1E293B;line-height:1.4}
/* El borde #CBD5E1 daba 1,48:1 sobre blanco: WCAG 1.4.11 pide 3:1 para el límite de un
   control. #64748B sobre blanco da 4,60:1 y sigue siendo un gris de la paleta. */
.pp-nl-campo{min-height:48px;height:48px;border:1px solid #64748B;border-radius:10px;padding:0 14px;
  font-family:inherit;font-size:16px;line-height:1;color:#1E293B;background:#fff;width:100%;box-sizing:border-box;margin:0}
.pp-nl-campo::placeholder{color:#64748B;opacity:1}
.pp-nl-campo:focus{outline:3px solid #0A7280;outline-offset:1px;border-color:#0A7280}
.pp-nl-boton{background:#0A7280;color:#fff;border:0;border-radius:999px;font-family:inherit;
  font-size:15px;font-weight:700;height:48px;min-height:48px;padding:0 18px;cursor:pointer;width:100%}
.pp-nl-boton:hover{background:#085A66}
.pp-nl-boton:focus-visible{outline:3px solid #0A7280;outline-offset:3px}
.pp-nl-legal{font-size:12.5px;line-height:1.5;color:var(--wp--preset--color--tinta-suave, #334155)}
.pp-nl-legal a{color:#0A7280;font-weight:600}
.pp-nl-aviso{font-size:13.5px;line-height:1.5;border-radius:10px;padding:10px 12px}
.pp-nl-aviso.is-ok{background:#E7F4F6;color:#0A4A54;border:1px solid #0A7280}
.pp-nl-aviso.is-error{background:#FDECEA;color:#8C1D18;border:1px solid #B3261E}

/* Enlaces a producto dentro de las tablas: todo producto listado enlaza a su ficha, así que el
   enlace tiene que leerse como enlace y no como texto. Turquesa sobre blanco (5,63:1) y sobre la
   fila lavanda (5,04:1). */
.pp-post-contenido table a,
.pp-texto-legal table a{color:#0A7280;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.pp-post-contenido table a:hover,
.pp-post-contenido table a:focus-visible{color:#085A66;text-decoration-thickness:2px}

/* ============================================================
   Entrada: portada a todo el ancho, índice de contenido y compartir
   (23-oct-2026) La imagen destacada sale del hero —donde quedaba a
   460 px compitiendo con el título— y pasa a abrir el artículo.
   ============================================================ */

/* 30 px de aire respecto del hero violeta, y sin relleno lateral: la portada comparte el
   borde del texto del hero y de las columnas del cuerpo (1120 px). Antes perdía 24 px por lado.
   Nota:  el mismo borde que el texto del hero
   y que las columnas del cuerpo (1120 px). */
.pp-post-portada {
	max-width: 1120px;
	margin: 36px auto 0;
	padding-inline: 0;
}

/* Simetría: la portada deja 36 px arriba, así que la tarjeta del artículo tiene que arrancar
   a los mismos 36 px por debajo. El contenedor ya traía 19 px de separación y 42 px de relleno
   superior: se recorta el relleno a 17 px para que el hueco total sea 36 y no 61. */
.pp-post-portada + .wp-block-group .pp-blog-cuerpo {
	padding-top: 17px;
}

.pp-post-portada-foto {
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
	/* Sombra centrada, no desplazada hacia abajo: con 22 px de desplazamiento el halo pesaba
	   más del lado inferior y los dos huecos (36 px arriba y abajo) se leían desiguales. */
	box-shadow: 0 0 34px rgba(20, 14, 40, 0.16);
	background: var(--wp--preset--color--tarjeta, #f4f1f9);
}

.pp-post-portada-foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 18px;
}

/* ---------- índice de contenido ---------- */

.pp-toc {
	margin: 0 0 34px;
}

.pp-toc-caja {
	border: 1px solid var(--wp--preset--color--linea, #e2e8f0);
	border-radius: 14px;
	background: #f8fafc;
	overflow: hidden;
}

.pp-toc-cabecera {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	cursor: pointer;
	list-style: none;
	min-height: 52px;
}

.pp-toc-cabecera::-webkit-details-marker {
	display: none;
}

.pp-toc-cabecera:focus-visible {
	outline: 3px solid var(--wp--preset--color--agua, #0a7280);
	outline-offset: -3px;
}

.pp-toc-rayas {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: none;
}

.pp-toc-rayas i {
	display: block;
	width: 17px;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--agua, #0a7280);
}

.pp-toc-rayas i:nth-child(3) {
	width: 11px;
}

.pp-toc-titulo {
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--tinta, #1e293b);
	line-height: 1.3;
}

.pp-toc-accion {
	margin-inline-start: auto;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--wp--preset--color--agua, #0a7280);
	white-space: nowrap;
}

.pp-toc-accion .cuando-abierto,
.pp-toc-caja[open] .pp-toc-accion .cuando-cerrado {
	display: none;
}

.pp-toc-caja[open] .pp-toc-accion .cuando-abierto {
	display: inline;
}

.pp-toc-cuenta {
	margin-inline-start: auto;
	font-size: 13px;
	color: #64748b;
	white-space: nowrap;
}

.pp-toc-flecha {
	width: 18px;
	height: 18px;
	flex: none;
	color: #64748b;
	transition: transform 0.2s ease;
}

.pp-toc-caja[open] .pp-toc-flecha {
	transform: rotate(180deg);
}

.pp-toc-lista {
	margin: 0;
	padding: 2px 18px 18px 40px;
	counter-reset: pp-toc;
}

.pp-toc-lista li {
	margin: 9px 0;
	font-size: 15px;
	line-height: 1.45;
	color: #64748b;
}

.pp-toc-lista li::marker {
	color: #94a3b8;
	font-variant-numeric: tabular-nums;
}

.pp-toc-lista a {
	color: var(--wp--preset--color--tinta-suave, #334155);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.pp-toc-lista a:hover,
.pp-toc-lista a:focus-visible {
	color: var(--wp--preset--color--violeta, #493d6d);
	border-bottom-color: #c4b5e0;
}

/* ---------- compartir ---------- */

.pp-share {
	margin: 44px 0 10px;
	padding-top: 26px;
	border-top: 1px solid var(--wp--preset--color--linea, #e2e8f0);
}

.pp-share-titulo {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #64748b;
}

.pp-share-botones {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pp-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	box-sizing: border-box;
	height: 46px;
	min-height: 46px;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--linea, #e2e8f0);
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--tinta-suave, #334155);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease,
		box-shadow 0.15s ease;
}

.pp-share-btn svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.pp-share-btn:hover,
.pp-share-btn:focus-visible {
	border-color: var(--wp--preset--color--violeta, #493d6d);
	color: var(--wp--preset--color--violeta, #493d6d);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(73, 61, 109, 0.14);
}

.pp-share-btn:focus-visible {
	outline: 3px solid var(--wp--preset--color--agua, #0a7280);
	outline-offset: 2px;
}

.pp-share-hecho,
.pp-share-hecho:hover {
	border-color: var(--wp--preset--color--agua, #0a7280);
	color: var(--wp--preset--color--agua, #0a7280);
}

@media (max-width: 900px) {
	.pp-post-portada {
		padding-inline: 16px;
	}

	.pp-post-portada-foto,
	.pp-post-portada-foto img {
		border-radius: 14px;
	}

	.pp-post-portada-foto img {
		aspect-ratio: 4 / 3;
	}

	.pp-toc-lista {
		padding-inline: 18px 16px 16px 36px;
		font-size: 14px;
	}

	.pp-share-btn span {
		display: none;
	}

	.pp-share-btn {
		width: 48px;
		height: 48px;
		justify-content: center;
		padding: 0;
	}

	.pp-share-btn.pp-share-copiar span {
		display: none;
	}
}

/* ---------- fuente preferida en Google ---------- */

/* Va a la mitad del artículo y tiene que competir con el texto, no desaparecer en él:
   tarjeta con borde y sombra suaves, estrella en un disco blanco, titular en la serif del
   sitio y un botón violeta de verdad —46 px, el mismo alto que el CTA de compra—.
   El amarillo no se usa acá: el oro queda para la estrella y el amarillo para comprar. */
.pp-fuente {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	margin: 36px 0;
	padding: 18px 20px;
	border: 1px solid #c9e3e7;
	border-left: 4px solid var(--wp--preset--color--agua, #0a7280);
	border-radius: 16px;
	background: linear-gradient(180deg, #e7f4f6 0%, #dceff2 100%);
	box-shadow: 0 10px 26px rgba(10, 114, 128, 0.14);
}

.pp-fuente-icono {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	flex: none;
	border: 2px solid #bcdce1;
	border-radius: 50%;
	background: #ffffff;
	color: var(--wp--preset--color--agua, #0a7280);
}

.pp-fuente-icono svg {
	width: 22px;
	height: 22px;
}

.pp-fuente-texto {
	min-width: 0;
}

.pp-fuente-titulo {
	margin: 0 0 3px;
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.28;
	color: var(--wp--preset--color--agua-oscuro, #084F58);
}

.pp-fuente-linea {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #2e4a50;
}

/* Doble clase a propósito: `.pp-post-contenido a` pinta los enlaces en turquesa y le ganaba
   a esta regla, así que el botón salía con texto turquesa sobre violeta (1,7:1). */
.pp-fuente .pp-fuente-boton {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 46px;
	padding: 0 18px;
	border-radius: 999px;
	background: var(--wp--preset--color--agua, #0a7280);
	color: #ffffff;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.pp-fuente .pp-fuente-boton svg {
	width: 16px;
	height: 16px;
	flex: none;
}

.pp-fuente .pp-fuente-boton:hover,
.pp-fuente .pp-fuente-boton:focus-visible {
	background: #085c66;
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(10, 114, 128, 0.3);
}

.pp-fuente .pp-fuente-boton:focus-visible {
	outline: 3px solid var(--wp--preset--color--agua, #0a7280);
	outline-offset: 3px;
}

@media (max-width: 780px) {
	.pp-fuente {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 14px;
		margin: 30px 0;
		padding: 16px;
	}

	.pp-fuente-icono {
		width: 40px;
		height: 40px;
	}

	.pp-fuente-titulo {
		font-size: 16px;
	}

	.pp-fuente-boton {
		grid-column: 1 / -1;
		justify-content: center;
		width: 100%;
	}
}

/* ── Barra lateral pegajosa ───────────────────────────────────────────────────────
   Las dos tarjetas de producto acompañan la lectura en escritorio. Es CSS puro
   (`position: sticky`), sin plugin ni JavaScript.

   Dos decisiones medidas, no supuestas:
   1. Las imágenes pasan de 1:1 a 16:9 también en escritorio: cada tarjeta baja de
      490 a ~383 px y las dos entran juntas en pantalla.
   2. Con `max-height` y desplazamiento interno, en pantallas bajas (portátiles de
      900 px de alto) el bloque no se corta: se desplaza dentro de la barra en vez
      de dejar la segunda tarjeta inalcanzable.
   Por debajo de 1025 px las columnas se apilan y el pegajoso no tiene sentido. */
@media (min-width: 1025px) {
  /* Se pega el grupo de las dos tarjetas, no la tarjeta de la barra completa: así el
     título «Reservá tu actividad» se va con el scroll y el bloque que acompaña la
     lectura mide 752 px, que sí cabe en una ventana de 900 (788 disponibles). */
  .pp-side-sticky {
    position: sticky;
    top: calc(var(--pp-cabecera) + 20px);
    max-height: calc(100vh - var(--pp-cabecera) - 38px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
  }

  .pp-side-sticky::-webkit-scrollbar {
    width: 6px;
  }

  .pp-side-sticky::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
  }

  .pp-side-prod-foto {
    margin-bottom: 12px;
  }

  .pp-side-prod-foto img {
    aspect-ratio: 16 / 9;
  }

  .pp-side-producto {
    padding: 14px;
    margin-top: 12px;
  }

  .pp-side-reserva .pp-side-cta-texto {
    margin-bottom: 0;
  }
}

/* El `position: sticky` no viajaba porque el contenedor de la barra solo medía lo que
   medían sus tarjetas (1969 px) y el artículo mide 7454: en cuanto la barra terminaba,
   el bloque se soltaba. Se estira la columna a la altura de la fila para que tenga
   recorrido durante toda la lectura. */
@media (min-width: 1025px) {
  .pp-blog-cuerpo > .wp-block-template-part {
    align-self: stretch;
  }

  .pp-blog-side {
    height: 100%;
  }
}

/* Ajuste fino para que el bloque quepa sin desplazamiento interno en portátiles:
   medía 902 px y necesitaba caber en 788 (ventana de 900). Con 12 px de relleno,
   márgenes de 4/6/10 y la tarjeta de la barra a 16 px baja a ~858. */
@media (min-width: 1025px) {
  .pp-side-reserva {
    padding: 16px 16px 14px;
  }

  .pp-side-producto {
    padding: 12px;
    margin-top: 10px;
  }

  .pp-side-prod-foto {
    margin-bottom: 10px;
  }

  .pp-side-prod-eyebrow {
    margin-bottom: 4px;
  }

  .pp-side-prod-nombre {
    margin-bottom: 6px;
  }

  .pp-side-prod-linea {
    margin-bottom: 10px;
  }

  .pp-side-prod-precio {
    margin-bottom: 10px;
  }
}

/* Al quitar la tarjeta «Reservá tu actividad», las dos de producto quedaban a 19 px del
   bloque anterior. Se iguala al ritmo de 24 px que separa el resto de tarjetas de la barra. */
.pp-side-sticky {
  margin-top: 24px;
}

.pp-side-sticky .pp-side-producto:first-of-type {
  margin-top: 0;
}

/* ---------- entrada del bloque de fuente preferida ----------
   Animación guiada por scroll, sin JavaScript: el bloque aparece con fundido, sube 16 px y se
   asienta con una escala mínima a medida que entra en pantalla. El rango es corto (se completa
   cuando lleva un tercio dentro) para que no se quede a medio aparecer mientras se lee.
   Todo va dentro de @supports: en Firefox, donde `animation-timeline` viene desactivado por
   defecto, el bloque simplemente se ve normal. Y respeta prefers-reduced-motion. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.pp-fuente {
			animation: pp-fuente-entra linear both;
			animation-timeline: view();
			/* Se completa cuando el bloque ya lleva un tercio de recorrido dentro de la ventana,
			   no cuando asoma el primer píxel: si no, la animación se gasta en el borde inferior
			   y el lector nunca la ve. */
			animation-range: entry 0% cover 35%;
		}

		@keyframes pp-fuente-entra {
			from {
				opacity: 0;
				transform: translateY(16px) scale(0.985);
			}
			to {
				opacity: 1;
				transform: translateY(0) scale(1);
			}
		}
	}
}

/* ==========================================================================
   Cabecera clara sobre el hero
   --------------------------------------------------------------------------
   Por defecto la cabecera es violeta con el logo blanco (todo el sitio, y
   siempre que no haya hero). Cuando hay hero y se ve, `cabecera.js` pone
   `pp-cabecera-blanca` en el body: fondo blanco, logo violeta e iconos oscuros.
   Los dos logos van superpuestos y se intercambian con opacidad, así el cambio
   no produce saltos de maquetación.
   ========================================================================== */

.pp-marca {
	position: relative;
	display: block;
	flex: none;
	width: 169px;
	height: 40px;
	line-height: 0;
}

.pp-marca .pp-logo {
	position: absolute;
	inset: 0;
	width: 169px;
	height: 40px;
	object-fit: contain;
	transition: opacity 0.2s ease;
}

/* Estado por defecto: cabecera violeta, logo blanco. */
.pp-logo-violeta {
	opacity: 0;
}

.pp-logo-blanco {
	opacity: 1;
}

body.pp-cabecera-blanca .pp-logo-violeta {
	opacity: 1;
}

body.pp-cabecera-blanca .pp-logo-blanco {
	opacity: 0;
}

body.pp-cabecera-blanca .pp-barra {
	background-color: #fff !important;
	background-image: none !important;
}

body.pp-cabecera-blanca header:has(.pp-barra) {
	box-shadow: 0 1px 0 #e2e8f0;
}

body.pp-cabecera-animada .pp-barra {
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Iconos y enlaces de la barra cuando está clara: violeta sobre blanco. */
body.pp-cabecera-blanca .pp-barra-derecha .wc-block-mini-cart,
body.pp-cabecera-blanca .pp-barra-derecha .wc-block-mini-cart__button {
	color: #493d6d;
}

body.pp-cabecera-blanca .pp-barra-derecha .wc-block-mini-cart__button {
	border-color: rgba(73, 61, 109, 0.38);
}

/* El icono del carrito tiene su propio `fill: #fff` más arriba: sin esto quedaba
   blanco sobre blanco, sólo visible el aro del botón. */
body.pp-cabecera-blanca .pp-barra-derecha .wc-block-mini-cart .wc-block-mini-cart__icon {
	fill: #493d6d;
	color: #493d6d;
}

body.pp-cabecera-blanca .pp-barra .wp-block-navigation__responsive-container-open,
body.pp-cabecera-blanca .pp-barra .wp-block-navigation__responsive-container-open svg {
	color: #493d6d;
	fill: #493d6d;
}

body.pp-cabecera-blanca .pp-barra a:not(.wp-block-button__link),
body.pp-cabecera-blanca .pp-barra .wp-block-navigation-item__content {
	color: #493d6d;
}

/* Quien pide menos movimiento recibe el cambio sin transición. */
@media (prefers-reduced-motion: reduce) {
	.pp-marca .pp-logo,
	body.pp-cabecera-animada .pp-barra {
		transition: none;
	}
}

/* ==========================================================================
   Portada (templates/front-page.html)
   Se construye con los tokens del tema: violeta de marca, amarillo solo en los
   botones de compra y tarjetas blancas sobre el fondo gris del sitio.
   ========================================================================== */

.pp-inicio {
	--pp-ancho: 1120px;
}

.pp-contenedor {
	box-sizing: border-box; /* sin esto el padding suma 40 px al ancho y desborda en móvil */
	width: 100%;
	max-width: var(--pp-ancho);
	margin: 0 auto;
	padding: 0 20px;
}

.pp-seccion {
	padding: 72px 0;
}

.pp-eyebrow {
	margin: 0 0 6px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--agua);
}

.pp-titulo-seccion {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: clamp(1.65rem, 3vw, 2.35rem);
	line-height: 1.15;
	color: var(--wp--preset--color--violeta);
}

.pp-intro {
	margin: 0;
	max-width: 62ch;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--wp--preset--color--tinta-suave);
}

/* Botones ---------------------------------------------------------------- */
.pp-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border: 1.5px solid transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.pp-boton--sm {
	min-height: 40px;
	padding: 0 16px;
	font-size: 14px;
}

.pp-boton--amarillo {
	background: var(--wp--preset--color--amarillo);
	color: #2a2440;
}

.pp-boton--amarillo:hover {
	background: #f5cc12;
	transform: translateY(-1px);
}

.pp-boton--borde {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.68);
	color: #fff;
}

.pp-boton--borde:hover {
	background: rgba(255, 255, 255, 0.14);
}

/* Hero ------------------------------------------------------------------- */
.pp-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 600px;
	overflow: hidden;
	isolation: isolate;
	color: #fff;
}

.pp-hero-fondo {
	display: block;
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
	max-width: none;
	background-size: cover;
	background-position: center 45%;
}

.pp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(20, 14, 40, 0) 60%, rgba(20, 14, 40, 0.38) 100%),
		linear-gradient(
			90deg,
			rgba(24, 17, 45, 0.88) 0%,
			rgba(24, 17, 45, 0.74) 40%,
			rgba(24, 17, 45, 0.34) 72%,
			rgba(24, 17, 45, 0.12) 100%
		);
}

.pp-hero-cuerpo {
	padding: 84px 20px 60px;
}

.pp-hero-etiqueta {
	display: inline-block;
	margin: 0 0 18px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.3);
	font-size: 12.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pp-hero-titulo {
	margin: 0 0 14px;
	max-width: 18ch;
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: clamp(2.1rem, 4.6vw, 3.5rem);
	line-height: 1.05;
	color: #fff;
}

.pp-hero-reclamo {
	margin: 0 0 10px;
	font-size: clamp(1.05rem, 1.7vw, 1.3rem);
	font-weight: 300;
	color: rgba(255, 255, 255, 0.96);
}

.pp-hero-texto {
	margin: 0;
	max-width: 48ch;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
}

.pp-hero-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.pp-hero-datos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 0;
	margin: 42px 0 0;
	padding: 24px 0 0;
	/* Solo la línea superior: el recuadro completo venía de una regla vieja de `.pp-datos`
	   que se aplicaba por colisión de nombres. Sin lados, sin base y sin radio. */
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 0;
	max-width: 760px;
}

.pp-hero-datos > div {
	padding: 0 18px;
	border-left: 0; /* sin separadores verticales: la franja se lee por el espacio */
}

.pp-hero-datos > div:first-child {
	padding-left: 0;
}

.pp-hero-datos dt {
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
}

.pp-hero-datos dd {
	margin: 4px 0 0;
	font-size: 12.5px;
	line-height: 1.35;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
}

/* Experiencias ----------------------------------------------------------- */
.pp-exp {
	background: #fff;
}

.pp-exp-rejilla {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 34px;
}

.pp-exp-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 16px;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pp-exp-card:hover {
	border-color: #C4B8DE;
	box-shadow: 0 10px 26px rgba(73, 61, 109, 0.12);
}

.pp-exp-card--premium {
	border-color: rgba(73, 61, 109, 0.42);
}

.pp-exp-foto {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--wp--preset--color--tarjeta);
}

.pp-exp-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pp-exp-cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 16px 18px 18px;
}

.pp-exp-cat {
	margin: 0 0 6px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--agua);
}

.pp-exp-nombre {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 1.2rem;
	line-height: 1.25;
}

.pp-exp-nombre a {
	color: var(--wp--preset--color--violeta);
	text-decoration: none;
}

.pp-exp-nombre a:hover {
	text-decoration: underline;
}

.pp-exp-texto {
	margin: 0 0 16px;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--wp--preset--color--tinta-suave);
}

.pp-exp-pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--wp--preset--color--linea);
}

.pp-exp-precio {
	margin: 0;
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--wp--preset--color--violeta);
}

/* Un día en Ponderosa ---------------------------------------------------- */
.pp-dia-pasos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: paso;
}

.pp-dia-pasos li {
	position: relative;
	padding: 22px 20px 20px;
	/* Pedido 27-oct-2026: las tarjetas del itinerario van en blanco, no en el lila
	   de tarjeta, para separarlas del gris de la franja. */
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 16px;
}

.pp-dia-hora {
	display: inline-block;
	margin-bottom: 8px;
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--wp--preset--color--violeta);
}

.pp-dia-pasos h3 {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 1.05rem;
	color: var(--wp--preset--color--tinta);
}

.pp-dia-pasos p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--wp--preset--color--tinta-suave);
}

.pp-dia-nota {
	margin: 22px 0 0;
	font-size: 0.95rem;
	color: var(--wp--preset--color--tinta-suave);
}

/* Adaptación ------------------------------------------------------------- */
@media (max-width: 1024px) {
	.pp-exp-rejilla {
		grid-template-columns: repeat(2, 1fr);
	}

	.pp-dia-pasos {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 782px) {
	.pp-hero {
		min-height: 0;
	}

	.pp-hero-cuerpo {
		padding: 56px 20px 44px;
	}

	.pp-hero-datos {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px 0;
	}

	.pp-hero-datos > div {
		padding: 0 16px;
	}

	.pp-hero-datos > div:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	/* Con tres datos la última celda se queda sola en su fila: se estira a todo
	   el ancho para que la rejilla no quede coja. Con cuatro no cambia nada. */
	.pp-hero-datos > div:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.pp-seccion {
		padding: 52px 0;
	}

	/* Misma especificidad que la regla de escritorio, para que el bloque de
	   «Cómo llegar» baje a 52 px con el resto en móvil. */
	.pp-seccion.pp-planea {
		padding: 52px 0;
	}
}

@media (max-width: 640px) {
	.pp-exp-rejilla,
	.pp-dia-pasos {
		grid-template-columns: 1fr;
	}

	.pp-hero-acciones .pp-boton {
		flex: 1 1 100%;
	}
}

/* Portada: botones extra --------------------------------------------------- */
.pp-boton--violeta {
	background: var(--wp--preset--color--violeta);
	color: #fff;
}

.pp-boton--violeta:hover {
	background: var(--wp--preset--color--violeta-oscuro);
	transform: translateY(-1px);
}

.pp-boton--texto {
	padding: 0 6px;
	min-height: 44px;
	color: var(--wp--preset--color--violeta);
	text-decoration: underline;
	text-underline-offset: 4px;
	border: 0;
	background: transparent;
}

.pp-boton--texto:hover {
	color: var(--wp--preset--color--violeta-oscuro);
}

/* Portada: por qué Ponderosa --------------------------------------------- */
.pp-motivos {
	background: #fff;
}

.pp-motivos-lista {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
}

.pp-motivos-lista li {
	padding: 0 2px;
}

.pp-motivo-num {
	display: inline-block;
	margin-bottom: 10px;
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--agua);
}

.pp-motivos-lista h3 {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 1.12rem;
	color: var(--wp--preset--color--violeta);
}

.pp-motivos-lista p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--wp--preset--color--tinta-suave);
}

/* Portada: animales ------------------------------------------------------- */
.pp-animales-rejilla {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 32px;
}

.pp-animal {
	position: relative;
	display: block;
	border: 1px solid transparent;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	aspect-ratio: 4 / 5;
	background: var(--wp--preset--color--tarjeta);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pp-animal img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.pp-animal:hover img {
	transform: scale(1.04);
}

.pp-animal::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 14, 40, 0) 45%, rgba(20, 14, 40, 0.82) 100%);
}

.pp-animal-nombre,
.pp-animal-texto {
	position: absolute;
	left: 16px;
	right: 16px;
	z-index: 1;
	color: #fff;
}

.pp-animal-nombre {
	display: block;
	bottom: 44px;
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.2;
}

.pp-animal-texto {
	display: block;
	bottom: 14px;
	font-size: 0.82rem;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.88);
}

/* Portada: planeá tu visita ---------------------------------------------- */
.pp-planea {
	background: var(--wp--preset--color--fondo);
}

.pp-planea-cuerpo {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 40px;
	align-items: center;
}

.pp-planea-lista {
	margin: 18px 0 0;
	padding: 0 0 0 18px;
	color: var(--wp--preset--color--tinta-suave);
	font-size: 0.97rem;
	line-height: 1.6;
}

.pp-planea-lista li {
	margin-bottom: 10px;
}

.pp-planea-lista strong {
	color: var(--wp--preset--color--tinta);
}

.pp-planea-acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 22px;
}

.pp-planea-mapa {
	background: #fff;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 16px;
	padding: 12px;
}

.pp-planea-mapa img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.pp-planea-pie {
	margin: 10px 4px 2px;
	font-size: 0.82rem;
	color: var(--wp--preset--color--tinta-suave);
}

/* Portada: preguntas frecuentes ------------------------------------------ */
.pp-faq-inicio {
	background: var(--wp--preset--color--fondo);
}

.pp-faq-inicio .pp-faq-item {
	margin-top: 12px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 14px;
	padding: 0 20px;
}

.pp-faq-inicio .pp-faq-item summary {
	cursor: pointer;
	padding: 18px 0;
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--wp--preset--color--tinta);
	list-style: none;
}

.pp-faq-inicio .pp-faq-item summary::-webkit-details-marker {
	display: none;
}

.pp-faq-inicio .pp-faq-item summary::after {
	content: "+";
	float: right;
	position: static;
	width: auto;
	height: auto;
	border: 0;
	transform: none;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--wp--preset--color--violeta);
}

.pp-faq-inicio .pp-faq-item[open] summary::after {
	content: "–";
}

.pp-faq-inicio .pp-faq-item p {
	margin: 0 0 18px;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--wp--preset--color--tinta-suave);
}

/* Portada: cierre --------------------------------------------------------- */
.pp-cierre {
	padding: 64px 0;
	background: linear-gradient(180deg, var(--wp--preset--color--violeta) 0%, var(--wp--preset--color--violeta-oscuro) 100%);
	color: #fff;
}

.pp-cierre-cuerpo {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 40px;
	align-items: center;
}

.pp-cierre-titulo {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	color: #fff;
}

.pp-cierre-texto {
	margin: 0;
	max-width: 46ch;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.86);
}

.pp-cierre-boletin .pp-nl {
	background: #fff;
}

/* Portada: adaptación ----------------------------------------------------- */
@media (max-width: 1024px) {
	.pp-motivos-lista,
	.pp-animales-rejilla {
		grid-template-columns: repeat(2, 1fr);
	}

	.pp-planea-cuerpo,
	.pp-cierre-cuerpo {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* Los chips del FAQ son enlaces dentro del contenido, así que heredaban el turquesa de
   `.wp-block-post-content a` (1,06:1 sobre el violeta del hero). Se fuerzan a blanco con
   especificidad suficiente; el turquesa se queda para los enlaces de texto. */
.pp-faq-hero .pp-faq-chips a.pp-faq-chip:not(.wp-block-button__link) {
	color: #fff;
	text-decoration: none;
}

.pp-faq-hero .pp-faq-chips a.pp-faq-chip:not(.wp-block-button__link):hover,
.pp-faq-hero .pp-faq-chips a.pp-faq-chip:not(.wp-block-button__link):focus-visible {
	color: #fff;
}

/* El lienzo de la firma ahora recibe foco: necesita anillo visible sobre el papel blanco. */
.pp-exon-lienzo:focus-visible {
	outline: 3px solid #493d6d;
	outline-offset: 3px;
}

/* ==========================================================================
   Sistema visual: una sola escala para botones, titulares y rejillas
   --------------------------------------------------------------------------
   Medido el 23-oct-2026 antes de este bloque: 9 alturas de botón entre 38 y 60 px,
   4 tamaños de H1 (40, 42, 44, 46 y 56) y 6 de H2 de sección, y huecos de rejilla
   de 16, 18 y 22 px en vez de los 20 del sistema.
   ========================================================================== */

:root {
	--pp-h1: clamp(30px, 4.2vw, 48px);
	--pp-h2: clamp(24px, 2.6vw, 32px);
	--pp-boton-alto: 48px;
	--pp-boton-alto-min: 48px; /* una sola altura: la variante pequeña solo cambia el ancho */
}

/* Botones: una sola altura en todo el sitio. */
.wp-block-button__link,
.wp-element-button,
.pp-boton,
.single_add_to_cart_button,
.wc-block-components-button:not(.wc-block-mini-cart__shopping-button):not(.wc-block-components-drawer__close),
button[type="submit"].button,
.woocommerce button.button,
.pp-form-boton,
.pp-nl-boton {
	box-sizing: border-box;
	min-height: var(--pp-boton-alto);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pp-boton--sm,
.pp-boton--texto,
.wc-block-product-search__button,
.wp-block-search__button {
	min-height: var(--pp-boton-alto-min);
}

/* Titulares: un tamaño de H1 y uno de H2 de sección en todas las plantillas. */
h1,
.pp-hero-titulo,
.pp-post-hero .wp-block-post-title,
.pp-blog-hero .wp-block-query-title,
.pp-tienda-hero .wp-block-query-title,
.pp-archivo .wp-block-query-title,
.pp-contacto-titulo,
.pp-ficha-titulo,
.pp-blog-titulo {
	font-size: var(--pp-h1);
	line-height: 1.08;
}

.pp-titulo-seccion,
.pp-cierre-titulo,
.pp-enc-titulo,
.pp-blog-seccion-titulo,
.pp-tienda-seccion-titulo,
.pp-faq-titulo {
	font-size: var(--pp-h2);
	line-height: 1.18;
}

/* Rejillas de tarjetas: 20 px de hueco, como el resto del sistema. */
.pp-animales-rejilla,
.pp-aventura,
.pp-pasos,
.wc-block-product-template__responsive,
.wp-block-woocommerce-product-template {
	gap: 20px;
}

/* Los titulares de portada de cada plantilla tienen reglas más específicas que las de
   arriba; se igualan acá para que las cuatro usen la misma escala. */
.pp-blog-hero .pp-blog-titulo,
.pp-faq-hero .pp-faq-titulo,
.pp-planea-hero .pp-planea-titulo,
.pp-blog-hero .wp-block-post-title {
	font-size: var(--pp-h1);
}

/* H2 de sección dentro del contenido de artículos y de las categorías del FAQ. */
.pp-post-contenido h2.wp-block-heading,
.pp-faq-cat-cabeza h2.wp-block-heading {
	font-size: var(--pp-h2);
	line-height: 1.18;
}

/* Botones del cajón del carrito: venían con 59-60 px por su padding propio. */
.wc-block-mini-cart__drawer .wc-block-components-button:not(.wc-block-components-drawer__close) {
	padding-top: 0;
	padding-bottom: 0;
	min-height: var(--pp-boton-alto);
}

/* WooCommerce fija el hueco de la rejilla de productos con una regla de columnas que gana
   por orden; se fuerza a los 20 px del sistema. */
.wc-block-product-template__responsive {
	column-gap: 20px !important;
	row-gap: 20px !important;
}

/* Altura exacta de 48 px en TODOS los botones.
   El relleno vertical (12 px arriba y abajo) sumaba medio píxel al borde y algunos botones
   medían 48,5-49 px. Con el relleno vertical en cero, la altura la fija `min-height` y el
   texto se centra con flex. Las variantes pequeñas quedan en 44 px. */
.wp-block-button__link,
.pp-boton,
.single_add_to_cart_button,
.woocommerce button.button,
.wc-block-components-button:not(.wc-block-components-drawer__close),
button[type="submit"].button,
.pp-form-boton,
.pp-nl-boton {
	padding-top: 0;
	padding-bottom: 0;
	line-height: 1.15;
	min-height: var(--pp-boton-alto);
}

.pp-boton--sm,
.pp-boton--texto,
.wc-block-product-search__button,
.wp-block-search__button {
	min-height: var(--pp-boton-alto-min);
}

/* Los botones del cajón del carrito venían con 60 px por su propio relleno. */
.wc-block-mini-cart__drawer .wc-block-components-button:not(.wc-block-components-drawer__close),
.wc-block-mini-cart__drawer .wc-block-components-button.wc-block-mini-cart__shopping-button {
	min-height: var(--pp-boton-alto);
	padding-top: 0;
	padding-bottom: 0;
}

/* El botón de cerrar del cajón del carrito medía 60 px por su relleno de 18 px. */
.wc-block-components-drawer__close.contained {
	padding: 12px;
}

/* Uniformidad final: cualquier botón que quedara en 44 px por una regla vieja se sube a 48.
   Es `!important` a propósito: hay una decena de reglas sueltas con 44 y 40 repartidas por el
   archivo, y esto es una decisión de sistema, no un ajuste puntual. */
.pp-boton,
.pp-boton--sm,
.pp-boton--texto,
.wp-block-button__link,
.wp-element-button,
button[type="submit"],
.single_add_to_cart_button,
.pp-form-boton,
.pp-nl-boton,
.wp-block-search__button,
.wc-block-product-search__button {
	min-height: 48px !important;
}

/* El botón de cerrar del cajón del carrito tenía 60 px fijos. */
.wc-block-components-drawer__close.contained,
.wc-block-mini-cart__drawer .wc-block-components-button {
	height: 48px;
	min-height: 48px;
}

/* El `main` del sitio arrastra un margen superior de 1,2rem (19,2 px) que en la portada
   dejaba una franja muerta entre la cabecera y el hero. Medido: cabecera hasta 74 px y hero
   empezando en 93. */
body main.pp-inicio,
.wp-block-post-content:has(> main.pp-inicio) {
	margin-block-start: 0;
}

/* La foto del hero va en un <picture> con srcset: el navegador baja solo el tamaño que
   necesita (la de escritorio es 2,2:1 y la de móvil 4:5, con la jirafa a la derecha para
   que el texto caiga sobre cielo y sabana). */
.pp-hero-fondo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

@media (max-width: 782px) {
	.pp-hero-fondo img {
		object-position: center center;
	}
}

/* Portada: franjas alternadas. El hero va con imagen y el cierre es la banda violeta de
   marca; el resto alterna blanco y gris para que cada sección se lea por separado. */
.pp-dia {
	background: var(--wp--preset--color--fondo);
}

.pp-animales {
	background: #fff;
}

/* El hero es de bloques: el grupo pone las clases en el contenedor y el enlace queda dentro,
   así que el botón nativo se viste aquí con los mismos valores que .pp-boton--amarillo. */
.pp-hero-acciones {
	align-items: center;
}

.pp-hero-acciones .wp-block-button {
	margin: 0;
}

/* En móvil el botón ocupa todo el ancho: la regla vieja apuntaba a .pp-boton, que ahora vive
   en el enlace del bloque, así que se replica aquí. */
@media (max-width: 600px) {
	.pp-hero-acciones .wp-block-button {
		flex: 1 1 100%;
	}

	.pp-hero-acciones .wp-block-button__link {
		width: 100%;
	}
}

.pp-hero-acciones .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	background: var(--wp--preset--color--amarillo);
	color: #2a2440;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.pp-hero-acciones .wp-block-button__link:hover {
	background: #f5cc12;
	transform: translateY(-1px);
}

/* El hero usa un bloque de imagen nativo (como Bachillerato): un solo archivo, sin <picture>.
   En móvil la caja es vertical y la imagen horizontal, así que el navegador recorta por los
   lados; este desplazamiento deja la cabeza de la jirafa dentro del cuadro. */
@media (max-width: 782px) {
	.pp-hero-fondo img {
		object-position: 86% 50%;
	}
}

/* Tarjetas de experiencias en bloques: la figura y el pie necesitan los mismos valores que
   tenían las etiquetas escritas a mano. */
.pp-exp-foto {
	margin: 0;
}

.pp-exp-foto a {
	display: block;
	height: 100%;
}

.pp-exp-card,
.pp-exp-cuerpo {
	width: 100%;
}

.pp-exp-boton {
	margin: 0;
}

.pp-exp-pie .wp-block-buttons {
	margin: 0;
}

.pp-exp-pie .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	background: var(--wp--preset--color--amarillo);
	color: #2a2440;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.pp-exp-pie .wp-block-button__link:hover {
	background: #f5cc12;
	transform: translateY(-1px);
}

/* Los grupos de bloque meten el hueco global de 19,2 px entre hijos; en estas tarjetas el
   espaciado ya lo ponen los márgenes propios, así que se anula. */
.pp-exp-card > * + *,
.pp-exp-cuerpo > * + *,
.pp-exp-pie > * + * {
	margin-block-start: 0;
}

.pp-exp-pie .wp-block-buttons {
	display: flex;
	align-items: center;
}

.pp-exp-rejilla > * + * {
	margin-block-start: 0;
}

/* La portada está dentro de `.wp-block-post-content`, donde todo enlace se pinta de agua y
   subrayado. Sus enlaces son de tarjeta: se reafirma el estilo del diseño con la clase del
   body por delante para ganar en especificidad. */
body.home .wp-block-post-content .pp-exp-nombre a {
	color: var(--wp--preset--color--violeta);
	text-decoration: none;
}

body.home .wp-block-post-content .pp-exp-nombre a:hover {
	text-decoration: underline;
}

body.home .wp-block-post-content .pp-animal {
	color: #fff;
	text-decoration: none;
}

/* --- Jerarquía del menú: tres niveles ---------------------------------------
   Menú siempre desplegado y sin botones de plegado: la jerarquía se marca solo con
   sangría y tamaño de letra, sin cajas ni fondos. Más aire entre ramas en vez de
   contenedores. */
.pp-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	flex-direction: column;
	align-items: stretch;
	padding: 0 0 6px 16px;
	margin: 0;
	gap: 0;
	box-shadow: none;
	background: none;
	border: 0;
}

.pp-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li {
	width: 100%;
}

.pp-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 15.5px;
	font-weight: 400;
	padding: 6px 0;
	color: rgba(255, 255, 255, 0.9);
}

.pp-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	padding: 0 0 4px 18px;
	margin: 0;
}

.pp-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 14.5px;
	padding: 5px 0;
	color: rgba(255, 255, 255, 0.74);
}

/* Sin botón de desplegar/colapsar: todo visible de entrada. */
.pp-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle,
.pp-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	display: none;
}

.pp-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	display: block;
}

.pp-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation__submenu-container {
	grid-column: auto;
}

.pp-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	display: block;
}

.pp-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	width: auto;
}

/* Ajuste fino para que los 17 ítems entren casi completos en un móvil de 844 px. */
.pp-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding-top: 11px;
	padding-bottom: 11px;
	font-size: 17.5px;
}

/* Afinado para que las 17 filas entren en un móvil de 844 px sin scroll: menos aire entre
   filas y la letra del primer nivel justa para que los dos rótulos largos vayan en una línea. */
.pp-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 4px;
}

.pp-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 56px;
}

.pp-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: 16.5px;
	padding-top: 10px;
	padding-bottom: 10px;
	line-height: 1.35;
}

/* Entradilla de páginas institucionales: el primer párrafo va un punto más grande para
   que se distinga del cuerpo, sin llegar a competir con el H1. */
.pp-entrada-lead {
	font-size: 20px;
	line-height: 1.55;
	color: var(--wp--preset--color--tinta, #1e293b);
}

@media (max-width: 782px) {
	.pp-entrada-lead {
		font-size: 16.5px;
		line-height: 1.5;
	}
}

/* --- Página «Acerca de Ponderosa» ------------------------------------------
   El resto del sitio pone el H1 a 1120 px y el texto corrido dentro de una tarjeta
   blanca de 780 px alineada al mismo borde izquierdo que el título. Se replica el
   mismo patrón para que la línea visual no cambie al entrar a esta página. */
body.pp-pagina-acerca {
	--wp--style--global--content-size: 1120px;
}

body.pp-pagina-acerca .pp-bloque-pagina {
	max-width: 780px;
	margin-left: 0;
	margin-right: auto;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 40px 40px 34px;
}

@media (max-width: 782px) {
	body.pp-pagina-acerca .pp-bloque-pagina {
		max-width: none;
		padding: 22px 18px;
		border-radius: 12px;
	}
}

/* --- Barra lateral de la página «Acerca de Ponderosa» -----------------------
   Reutiliza las tarjetas del blog (`.pp-side-bloque`, `.pp-side-cta`) y sólo agrega
   la lista de datos y el botón secundario de contacto. */
.pp-side-datos {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14.5px;
}

.pp-side-datos li {
	padding-block: 8px;
	border-bottom: 1px solid #f1f5f9;
	color: var(--wp--preset--color--tinta-suave, #334155);
	line-height: 1.45;
}

.pp-side-datos li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.pp-side-datos strong {
	color: var(--wp--preset--color--tinta, #1e293b);
	font-weight: 700;
}

.pp-side-cta .wp-block-buttons {
	display: grid;
	gap: 8px;
	margin: 0;
}

.pp-side-cta-boton--linea .wp-block-button__link {
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--violeta, #493d6d);
	color: var(--wp--preset--color--violeta, #493d6d);
	padding: 9px 18px;
}

.pp-side-cta-boton--linea .wp-block-button__link:hover {
	background-color: #f4f1f9;
}

.pp-side-cta-tel {
	margin: 12px 0 0;
	font-size: 14px;
	font-family: var(--wp--preset--font-family--roboto);
}

.pp-side-cta-tel a {
	color: var(--wp--preset--color--agua, #0a7280);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* La barra de «Acerca» es corta y la página es larga: se pega al hacer scroll, igual que
   las tarjetas del artículo del blog. El margen del contenedor genérico se anula para que
   la primera tarjeta arranque a la misma altura que el contenido. */
.pp-blog-side > .pp-lateral-acerca {
	margin-top: 0;
}

/* Con tres tarjetas la barra de «Acerca» mide más que la ventana y el contenedor pegajoso
   obligaba a hacer scroll dentro de la barra. Se compacta el conjunto (sin tocar la barra
   del blog, que usa sus propias clases) hasta que entra completa. */
/* La barra se comporta como el resto de la página: sin contenedor pegajoso ni scroll
   propio. Sólo el bloque del boletín se pega, y únicamente cuando hay altura de sobra. */
.pp-lateral-acerca > * {
	margin-block: 0 8px;
}

.pp-lateral-acerca > *:last-child {
	margin-block-end: 0;
}

.pp-lateral-acerca .pp-side-bloque,
.pp-lateral-acerca .pp-side-cta {
	/* Más aire arriba y abajo: con 14 px el contenido quedaba pegado al borde. */
	padding: 20px 16px;
}

.pp-lateral-acerca .pp-side-titulo,
.pp-lateral-acerca .pp-side-cta-titulo {
	margin-bottom: 8px;
	padding-bottom: 9px;
	font-size: 16.5px;
}

.pp-lateral-acerca .pp-side-datos li {
	padding-block: 4px;
}

.pp-lateral-acerca .pp-side-cta-texto {
	margin-bottom: 10px;
}

.pp-lateral-acerca .pp-side-cta-tel {
	margin-top: 6px;
	font-size: 13.5px;
}

/* El contenedor pegajoso del blog deja 38 px de aire abajo; con las tres tarjetas eso hacía
   que en una ventana de 900 px faltaran 2 px y apareciera una barra interna. Se dejan 24. */
@media (min-width: 1025px) {
	.pp-lateral-acerca > .pp-lateral-pegajoso {
		position: sticky;
		top: calc(var(--pp-cabecera) + 20px);
	}
}

/* El formulario del boletín vuelve a su ancla después de enviarse; sin margen de desplazamiento
   el título quedaba debajo de la cabecera fija. */
#boletin {
	scroll-margin-top: calc(var(--pp-cabecera) + 16px);
}

/* La tarjeta del boletín cierra con el texto legal, así que el borde inferior quedaba más
   cerca que el resto de tarjetas. */
.pp-lateral-acerca .pp-side-boletin {
	padding-bottom: 24px;
}

/* Simetría del título: arriba quedan 28 px (16 de margen del main + 12 de relleno del
   bloque del título). Abajo había 4 + 19,2 de margen de bloque + 42 de relleno de la
   rejilla = 65. Se anula el margen de bloque y la rejilla baja a 24: 4 + 24 = 28. */
.pp-pagina-side .pp-pagina-cuerpo {
	margin-block-start: 0;
}

.pp-pagina-side .pp-blog-cuerpo {
	padding-block-start: 24px;
}

/* ==========================================================================
   Landing de redes sociales (/enlaces/)
   Una sola columna, pensada primero para el teléfono: el enlace que va en la
   biografía de Instagram y TikTok. Sin cabecera ni pie del sitio: la página
   es el destino, no un tramo de navegación.
   ========================================================================== */

body.pp-bio-pagina {
	background-color: #241d38;
}

.pp-bio {
	min-height: 100vh;
	padding: 30px 18px calc(40px + env(safe-area-inset-bottom, 0px));
	background:
		radial-gradient(120% 70% at 50% 0%, rgba(10, 114, 128, 0.38), transparent 62%),
		linear-gradient(170deg, #241d38 0%, #3a2f5c 46%, #0a7280 132%);
	color: #ffffff;
}

.pp-bio-envoltura {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 560px;
	margin: 0 auto;
}

/* --- marca y encabezado --- */

.pp-bio-logo {
	margin: 0 auto 2px;
}

.pp-bio-logo img {
	width: 148px;
	height: auto;
	display: block;
}

.pp-bio-titulo {
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: clamp(27px, 7.2vw, 36px);
	line-height: 1.12;
	margin: 0;
	text-align: center;
	color: #ffffff;
}

.pp-bio-bajada {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 15.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.86);
	text-align: center;
	max-width: 46ch;
	margin: 0 auto;
}

.pp-bio-lugar {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 11.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
	margin: 0 0 4px;
}

/* --- tarjetas de producto --- */

.pp-bio-tarjeta {
	background: #ffffff;
	border-radius: 22px;
	overflow: hidden;
	color: var(--wp--preset--color--tinta, #1e293b);
	box-shadow: 0 18px 44px rgba(15, 10, 30, 0.32);
}

.pp-bio-foto {
	margin: 0;
	aspect-ratio: 16 / 10;
	background: #f4f1f9;
}

.pp-bio-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pp-bio-cuerpo {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 20px 22px;
}

.pp-bio-etiqueta {
	margin: 0;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--agua, #0a7280);
}

.pp-bio-nombre {
	margin: 0;
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 24px;
	line-height: 1.18;
	color: var(--wp--preset--color--tinta, #1e293b);
}

.pp-bio-desc {
	margin: 0;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--wp--preset--color--tinta-suave, #334155);
}

.pp-bio-precio {
	margin: 2px 0 4px;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 20px;
	font-weight: 700;
	color: var(--wp--preset--color--violeta, #493d6d);
}

.pp-bio-desde {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #64748b;
	margin-right: 6px;
}

/* --- botones --- */

.pp-bio-botones {
	margin: 0;
}

.pp-bio-botones .wp-block-button,
.pp-bio-botones .wp-block-button__link {
	width: 100%;
}

.pp-bio-botones .wp-block-button__link {
	display: block;
	border-radius: 999px;
	padding: 14px 20px;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.pp-bio-boton--amarillo .wp-block-button__link {
	background-color: #fdd72e;
	border: 2px solid #fdd72e;
	color: #241d38;
}

.pp-bio-boton--amarillo .wp-block-button__link:hover {
	background-color: #f0c81a;
	border-color: #f0c81a;
}

.pp-bio-boton--linea .wp-block-button__link {
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--violeta, #493d6d);
	color: var(--wp--preset--color--violeta, #493d6d);
}

.pp-bio-boton--linea .wp-block-button__link:hover {
	background-color: #f4f1f9;
}

/* --- promoción (la imprime el shortcode cuando hay campaña vigente) --- */

.pp-bio-promo {
	border-radius: 22px;
	padding: 22px 20px;
	background: linear-gradient(135deg, #fdd72e 0%, #f0b429 100%);
	color: #241d38;
	text-align: center;
	box-shadow: 0 16px 36px rgba(15, 10, 30, 0.26);
}

.pp-bio-promo-rotulo {
	margin: 0 0 4px;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.88;
}

.pp-bio-promo-titulo {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 22px;
	line-height: 1.2;
}

.pp-bio-promo-texto {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14.5px;
	line-height: 1.5;
}

.pp-bio-promo-vigencia {
	margin: 0 0 14px;
	font-size: 12.5px;
	font-weight: 600;
	opacity: 0.8;
}

.pp-bio-promo .pp-bio-boton--amarillo .wp-block-button__link {
	background-color: #241d38;
	border-color: #241d38;
	color: #ffffff;
}

.pp-bio-promo .pp-bio-boton--amarillo .wp-block-button__link:hover {
	background-color: #3a2f5c;
	border-color: #3a2f5c;
}

.pp-bio-promo .pp-bio-botones .wp-block-button__link {
	background-color: #241d38;
	border: 2px solid #241d38;
	color: #ffffff;
}

/* --- contacto --- */

.pp-bio-contacto {
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.07);
	padding: 22px 20px;
	text-align: center;
}

.pp-bio-contacto-titulo {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--roboto-slab);
	font-size: 21px;
	line-height: 1.2;
	color: #ffffff;
}

.pp-bio-contacto-texto {
	margin: 0 0 16px;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.76);
}

.pp-bio-contacto .pp-bio-boton--linea .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.55);
	color: #ffffff;
}

.pp-bio-contacto .pp-bio-boton--linea .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.14);
}

/* --- redes --- */

.pp-bio-social {
	text-align: center;
	padding-top: 6px;
}

.pp-bio-social-rotulo {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.pp-bio-social-lista {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin: 0;
}

/* El icono quedaba pegado arriba a la izquierda del círculo: el ancla del bloque trae
   relleno propio y el li del tema no era flex. Se fija el tamaño del ancla y se centra
   en los dos ejes. */
.pp-bio .pp-bio-social-lista .wp-social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.34);
	background-color: rgba(255, 255, 255, 0.16);
	color: #ffffff;
	box-sizing: border-box;
	transition: background-color 160ms ease;
}

.pp-bio .pp-bio-social-lista .wp-social-link a.wp-block-social-link-anchor {
	display: flex;
	align-items: center;
	justify-content: center;
	/* El ancla ocupa todo el círculo: así el enlace es el conjunto y no solo el icono. */
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border-radius: 50%;
}

.pp-bio-social-lista .wp-social-link:hover {
	background-color: rgba(255, 255, 255, 0.22);
	border-color: rgba(253, 215, 46, 0.55);
}

/* Al pasar el mouse el tema teñía el enlace de violeta y el icono se perdía sobre el
   degradado. Se fija el amarillo de marca en hover, foco y clic. */
.pp-bio .pp-bio-social-lista .wp-social-link:hover a.wp-block-social-link-anchor,
.pp-bio .pp-bio-social-lista .wp-social-link a.wp-block-social-link-anchor:hover,
.pp-bio .pp-bio-social-lista .wp-social-link a.wp-block-social-link-anchor:focus-visible,
.pp-bio .pp-bio-social-lista .wp-social-link a.wp-block-social-link-anchor:active {
	color: #fdd72e;
}

.pp-bio .pp-bio-social-lista .wp-social-link:hover svg,
.pp-bio .pp-bio-social-lista .wp-social-link a.wp-block-social-link-anchor:hover svg,
.pp-bio .pp-bio-social-lista .wp-social-link a.wp-block-social-link-anchor:focus-visible svg,
.pp-bio .pp-bio-social-lista .wp-social-link a.wp-block-social-link-anchor:active svg {
	fill: #fdd72e;
}

.pp-bio .pp-bio-social-lista .wp-social-link a.wp-block-social-link-anchor:focus-visible {
	outline: 2px solid #fdd72e;
	outline-offset: 3px;
}

/* El enlace interno del icono hereda el color de los enlaces del tema (agua), así que el
   icono salía teal sobre el violeta oscuro. Se fuerza blanco en el ancla y en el svg. */
.pp-bio .pp-bio-social-lista .wp-social-link a.wp-block-social-link-anchor {
	color: #ffffff;
}

.pp-bio .pp-bio-social-lista .wp-social-link svg {
	fill: #ffffff;
	width: 24px;
	height: 24px;
}

/* --- pie mínimo --- */

.pp-bio-pie {
	margin: 6px 0 0;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 12.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
	text-align: center;
}

/* Los enlaces del pie heredaban el color de enlace del tema (agua) y no se leían sobre
   el fondo violeta. Se fuerzan en blanco con especificidad suficiente para ganarle a
   `.wp-block-post-content a:not(...)`. */
.pp-bio .pp-bio-envoltura .pp-bio-pie a:not(.wp-block-button__link):not(.wp-element-button) {
	color: #ffffff;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.pp-bio .pp-bio-envoltura .pp-bio-pie a:not(.wp-block-button__link):not(.wp-element-button):hover {
	color: #fdd72e;
}

/* --- pantallas grandes: dos columnas para las dos experiencias --- */

@media (min-width: 1024px) {
	.pp-bio {
		padding: 56px 24px 64px;
	}

	.pp-bio-envoltura {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 22px;
		max-width: 960px;
	}

	.pp-bio-envoltura > * {
		grid-column: 1 / -1;
	}

	.pp-bio-envoltura > .pp-bio-tarjeta {
		grid-column: auto;
	}

	.pp-bio-tarjeta--premium .pp-bio-foto,
	.pp-bio-envoltura > .pp-bio-tarjeta .pp-bio-foto {
		aspect-ratio: 4 / 3;
	}

	.pp-bio-cuerpo {
		padding: 24px 24px 26px;
	}

	.pp-bio-nombre {
		font-size: 26px;
	}
}

/* El botón de la promoción no viene de un bloque, así que no lleva `.wp-block-button__link`. */
.pp-bio .pp-bio-promo .pp-bio-botones a.pp-bio-boton {
	display: block;
	box-sizing: border-box;
	width: 100%;
	border-radius: 999px;
	padding: 14px 20px;
	background-color: #241d38;
	color: #ffffff;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.pp-bio .pp-bio-promo .pp-bio-botones a.pp-bio-boton:hover {
	background-color: #3a2f5c;
}

/* En pantallas anchas el botón de la promoción a todo el ancho pesaba más que los botones
   de reserva. Se acota y se centra. */
@media (min-width: 768px) {
	.pp-bio .pp-bio-promo .pp-bio-botones a.pp-bio-boton {
		max-width: 320px;
		margin-inline: auto;
	}
}

/* Las dos tarjetas del cierre usan el mismo componente que las experiencias de la portada
   (`.pp-exp-card`), en rejilla de dos. */
.pp-faq-rejilla {
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: clamp(20px, 3vw, 30px);
}

@media (max-width: 1199px) {
	.pp-faq-rejilla {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 782px) {
	.pp-faq-rejilla {
		grid-template-columns: 1fr;
	}
}

/* Con cuatro tarjetas el cuerpo se aprieta: se reduce el aire interno y la tipografía
   para que la tarjeta no se vea desproporcionada. */
.pp-faq-rejilla .pp-exp-cuerpo {
	padding: 16px 16px 18px;
	gap: 6px;
}

.pp-faq-rejilla .pp-exp-nombre {
	font-size: 1.05rem;
	line-height: 1.25;
}

.pp-faq-rejilla .pp-exp-texto {
	font-size: 0.86rem;
	line-height: 1.45;
}

.pp-faq-rejilla .pp-exp-precio {
	font-size: 1rem;
}

.pp-faq-rejilla .pp-exp-boton .wp-block-button__link {
	padding: 10px 16px;
	font-size: 0.85rem;
}

/* ---------------------------------------------------------------------------
   ESTÁNDAR DE HOVER DE TARJETAS — una sola definición para todo el sitio.
   Borde al lila del estado abierto (#C4B8DE) + sombra suave, 0,15 s.
   Se aplica a: experiencias, entradas del blog, acordeones de la FAQ, tarjetas
   de producto (tienda y relacionados) y tarjetas de animales.
   No aplica a contenedores que no reaccionan al cursor (filtros, sidebars,
   cajas de formulario, bloques de página).
   --------------------------------------------------------------------------- */
.wc-block-product,
.pp-animal,
.pp-dia-pasos li {
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wc-block-product:hover,
/* Los relacionados de la ficha declaran el borde con `border` y 0,3,2
   (`.pp-relacionados ul.is-flex-container li…`): el selector se replica entero
   para ganarle por especificidad y no depender del orden. */
.pp-relacionados ul.is-flex-container li.wc-block-product:hover,
.pp-animal:hover,
.pp-exp-card:hover,
.pp-articulo:hover,
.pp-faq-item:hover,
.pp-dia-pasos li:hover {
	border-color: #C4B8DE;
	box-shadow: 0 10px 26px rgba(73, 61, 109, 0.12);
}

/* ---------------------------------------------------------------------------
   Tarjetas de producto de la barra lateral del blog (single).
   Pedido: 25 % más compactas porque las dos juntas no entraban en pantalla.
   Se recorta alto: imagen 21:9, rellenos y ritmo vertical más cortos, tipografía
   una escala abajo. El botón conserva su altura estándar.
   --------------------------------------------------------------------------- */
.pp-side-producto {
	padding: 11px;
}

.pp-side-prod-foto {
	margin: 0 0 8px;
}

.pp-side-prod-foto img {
	aspect-ratio: 2.3 / 1;
}

.pp-side-prod-eyebrow {
	margin: 0 0 3px;
	font-size: 10px;
}

.pp-side-prod-nombre {
	margin: 0 0 4px;
	font-size: 15px;
	line-height: 1.2;
}

.pp-side-prod-linea {
	margin: 0 0 7px;
	font-size: 12px;
	line-height: 1.4;
}

.pp-side-prod-precio {
	margin: 0 0 7px;
	font-size: 15px;
}

.pp-side-prod-boton .wp-block-button__link {
	font-size: 13.5px;
}

@media (max-width: 900px) {
	.pp-side-producto {
		padding: 10px;
	}

	.pp-side-prod-foto {
		margin-bottom: 8px;
	}
}

/* ---------------------------------------------------------------------------
   Bloque de filtros de la tienda (/tienda/ y categorías de producto).
   --------------------------------------------------------------------------- */

/* 1. Sin contadores junto a las casillas: ni categorías, ni atributos, ni etiquetas. */
.pp-filtros .wc-block-product-filter-checkbox-list__count,
.pp-filtros .wc-block-product-filter-attribute-item__count,
.pp-filtros .wc-block-product-categories-list-item-count,
.pp-filtros .wc-block-product-filter-chips__item-count,
.pp-filtros .count {
	display: none;
}

/* 2. Deslizador de precio en el teal del sitio, no en violeta.
   WooCommerce pinta el riel y el tramo recorrido con `--range-color`, que sale de
   `--wc-product-filter-price-slider` (cae a `currentColor`). Se cambia ahí. */
.pp-filtros,
.pp-filtros .wc-block-product-filter-price-slider__range {
	--wc-product-filter-price-slider: var(--wp--preset--color--agua, #0A7280);
	--range-color: var(--wp--preset--color--agua, #0A7280);
}

.pp-filtros .wc-block-product-filter-price-slider__range input[type="range"] {
	accent-color: var(--wp--preset--color--agua, #0A7280);
}

.pp-filtros .wc-block-product-filter-price-slider__range input[type="range"]::-webkit-slider-thumb {
	background-color: var(--wp--preset--color--agua, #0A7280);
}

.pp-filtros .wc-block-product-filter-price-slider__range input[type="range"]::-moz-range-thumb {
	background-color: var(--wp--preset--color--agua, #0A7280);
	border: 0;
}

/* 3. Buscador: campo y botón a la misma altura (el campo medía 56 px y el botón 48,
   con 8 px de margen arriba) y botón en teal. */
.pp-filtros .wc-block-product-search__fields {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.pp-filtros .wp-block-search__input,
.pp-filtros input[type="search"],
.pp-filtros .wc-block-product-search__field {
	height: 48px;
	padding: 0 12px;
	box-sizing: border-box;
}

.pp-filtros .wc-block-product-search__button,
.pp-filtros .wp-block-search__button {
	height: 48px;
	min-height: 48px;
	margin-top: 0;
	padding: 0 14px;
	background-color: var(--wp--preset--color--agua, #0A7280);
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pp-filtros .wc-block-product-search__button:hover,
.pp-filtros .wp-block-search__button:hover {
	background-color: var(--wp--preset--color--agua-oscuro, #084F58);
}

/* CTAs de la rejilla de la tienda anclados al pie de cada tarjeta: con o sin
   estrellas, el precio y el botón quedan a la misma altura en toda la fila.
   El hueco sobrante se va arriba del precio (`margin-top: auto`), no entre el
   precio y el botón. */
:is(.pp-archivo, .pp-relacionados, .page-id-398) li.wc-block-product .wp-block-woocommerce-product-price {
	margin-top: auto;
}

/* ---------------------------------------------------------------------------
   Aire entre bloques de la ficha de producto — estándar único.
   Referencia: el hueco entre las tarjetas de relacionados y el pie (19 px).
   Antes convivían tres valores distintos: 24, 32 y 19.
   --------------------------------------------------------------------------- */
body.single-product {
	--pp-aire-bloque: 19px;
}

body.single-product .pp-ficha-hero + .wp-block-woocommerce-product-details {
	margin-block-start: var(--pp-aire-bloque) !important;
}

body.single-product .pp-ficha-detalle + .pp-relacionados {
	margin-block-start: var(--pp-aire-bloque) !important;
}

body.single-product .pp-relacionados {
	padding-block-start: var(--pp-aire-bloque);
}

/* ---------------------------------------------------------------------------
   Planeá tu visita: se alinea con la página de FAQ, que es la referencia.
   Antes el contenido entero vivía sobre una franja gris a todo lo ancho, sin
   bloques. Ahora cada sección es un bloque blanco de 1.172 px con radio 18 y
   relleno 26, separados 26 px — igual que las categorías de la FAQ.
   --------------------------------------------------------------------------- */
.page-id-92 .pp-planea {
	background: transparent !important;
	padding: 0 clamp(16px, 2vw, 30px);
}

.page-id-92 .pp-planea > .pp-planea-seccion {
	box-sizing: border-box;
	max-width: 1172px;
	margin: 26px auto 0 !important;
	padding: clamp(16px, 2vw, 26px);
	background: #fff;
	border: 1px solid var(--wp--preset--color--linea, #E2E8F0);
	border-radius: 18px;
}

/* Dentro del bloque blanco, las piezas van en el lila de tarjeta del sitio —el
   mismo contraste que las preguntas dentro de cada bloque de la FAQ—. */
.pp-planea .pp-paso,
.pp-planea .pp-aventura-card,
.pp-planea .pp-datos,
.pp-planea .pp-faq-item {
	background: var(--wp--preset--color--tarjeta, #F4F1F9);
	border-color: #E6E0F1;
}

/* El acordeón de Planeá tu visita es el mismo de la FAQ: mismo radio y el mismo
   chevron a la derecha (antes le faltaba porque el icono solo estaba declarado
   dentro de `.pp-faq-cat`). */
.pp-planea .pp-faq-item {
	border-radius: 14px;
}

.pp-planea .pp-faq-item summary::after {
	content: "";
	position: absolute;
	right: 22px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--wp--preset--color--violeta, #493D6D);
	border-bottom: 2px solid var(--wp--preset--color--violeta, #493D6D);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.18s ease;
}

.pp-planea .pp-faq-item[open] summary::after {
	transform: translateY(-30%) rotate(-135deg);
}

@media (max-width: 782px) {
	.page-id-92 .pp-planea > .pp-planea-seccion {
		max-width: calc(100% - 0px);
		padding: 16px;
		margin-top: 16px !important;
	}
}

/* «Por qué Ponderosa» declaraba cinco columnas pero se renderizaba en bloque: los
   cinco sellos se apilaban en la mitad izquierda y la derecha quedaba vacía. */
.pp-planea .pp-sellos {
	/* El grupo venía con `max-width` de 599 px heredado del layout restringido:
	   por eso los sellos se apilaban en la mitad izquierda. */
	max-width: 100% !important;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
}

/* Cinco sellos: si la rejilla baja a tres columnas sobran dos huecos en la
   segunda fila, así que se pasa a 3 → 2 → 1 solo cuando ya no caben cinco. */
@media (max-width: 1100px) {
	.pp-planea .pp-sellos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}
}

@media (max-width: 900px) {
	.pp-planea .pp-sellos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.pp-planea .pp-sellos {
		grid-template-columns: 1fr;
	}
}

/* Tarjeta destacada de «Elegí tu aventura» (Teekisia VIP): énfasis en el teal del
   sitio —fondo agua claro, borde y etiqueta en teal— para separarla de la clásica. */
.pp-planea .pp-aventura-card--destacada {
	background: var(--wp--preset--color--agua-claro, #E7F4F6);
	border-color: var(--wp--preset--color--agua, #0A7280);
	box-shadow: 0 12px 30px rgba(10, 114, 128, 0.14);
}

.pp-planea .pp-aventura-card--destacada .pp-aventura-badge {
	background: var(--wp--preset--color--agua, #0A7280);
}

.pp-planea .pp-aventura-card--destacada .pp-aventura-accion .wp-block-button__link {
	background-color: var(--wp--preset--color--agua, #0A7280);
}

.pp-planea .pp-aventura-card--destacada .pp-aventura-accion .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--agua-oscuro, #084F58);
}

/* ---------------------------------------------------------------------------
   Sin franja entre la cabecera y el primer bloque.
   WordPress da 19,2 px de margen superior a los hijos de `.wp-site-blocks`, y las
   plantillas `page.html` y `page-con-sidebar.html` traen 24 y 16 px en línea: se
   veía una banda del color de la página entre el header y el hero de cada plantilla.
   --------------------------------------------------------------------------- */
main,
main.wp-block-group {
	margin-block-start: 0 !important;
}

/* La ficha de producto traía 20 px en el bloque del hero y otros 19,2 px en el
   grupo `.woocommerce.product` que envuelve al `main`. */
body.single-product .pp-ficha-hero {
	margin-block-start: 0 !important;
}

body.single-product .wp-block-group.woocommerce.product {
	margin-block-start: 0 !important;
}

/* Archivos de producto, búsqueda y carrito: el `main` traía 30 px de relleno
   superior y dejaba la misma banda gris bajo la cabecera. */
main.pp-archivo {
	padding-block-start: 0 !important;
}

/* ---------------------------------------------------------------------------
   /promociones/ — hub de precios y promociones.
   Las tarjetas de producto usan la anatomía del catálogo (se amplió el `:is()`
   de arriba para incluir esta página). Aquí solo van la rejilla y el texto.
   --------------------------------------------------------------------------- */
.page-id-398 ul.wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	list-style: none;
	padding: 0;
	margin: 22px 0 0;
}

@media (max-width: 1100px) {
	.page-id-398 ul.wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.page-id-398 ul.wc-block-product-template {
		grid-template-columns: 1fr;
	}
}

.page-id-398 .pp-promos-intro {
	max-width: 760px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--wp--preset--color--tinta-suave, #334155);
}

.page-id-398 .pp-promos-h2 {
	margin: 44px 0 0;
	font-size: 30px;
}

.page-id-398 .pp-promos-dosx1 {
	max-width: 1120px;
	margin-top: 44px;
	padding: 26px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--linea, #E2E8F0);
	border-radius: 18px;
}

.page-id-398 .pp-promos-dosx1 .pp-promos-h2 {
	margin-top: 0;
}

.page-id-398 .pp-promos-nota {
	font-size: 14px;
	color: var(--wp--preset--color--tinta-suave, #334155);
	opacity: 0.85;
}

/* El bloque de promoción vigente viene estilado para la landing violeta; aquí va
   sobre la página clara, así que se le da el mismo trato de tarjeta del sitio. */
.page-id-398 .pp-bio-promo {
	max-width: 100%;
	margin: 22px 0 0;
	padding: 22px;
	background: var(--wp--preset--color--tarjeta, #F4F1F9);
	border: 1px solid #E6E0F1;
	border-radius: 16px;
}

.page-id-398 .pp-bio-promo-rotulo {
	margin: 0 0 6px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--agua, #0A7280);
}

.page-id-398 .pp-bio-promo-titulo {
	margin: 0 0 8px;
	font-size: 22px;
	color: var(--wp--preset--color--tinta, #1E293B);
}

.page-id-398 .pp-bio-promo-texto,
.page-id-398 .pp-bio-promo-vigencia {
	margin: 0 0 10px;
	font-size: 15px;
	color: var(--wp--preset--color--tinta-suave, #334155);
}

/* ---------------------------------------------------------------------------
   Puntos de venta de la ficha de producto.
   Pedido 27-oct-2026: debajo de la entrada corta van tres puntos concretos, con
   el mismo lenguaje visual que los sellos de la columna izquierda (icono de
   check en turquesa), para que la decisión de compra tenga datos a la vista.
   --------------------------------------------------------------------------- */
.pp-ficha-puntos {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: grid;
	gap: 7px;
}

.pp-ficha-puntos li {
	position: relative;
	margin: 0;
	padding-left: 26px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--wp--preset--color--tinta, #1E293B);
}

.pp-ficha-puntos li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--wp--preset--color--agua-claro, #E7F4F6);
	box-shadow: inset 0 0 0 1px rgba(10, 114, 128, 0.25);
}

/* La marca del check, dibujada con bordes: no hay fuente de iconos en el sitio. */
.pp-ficha-puntos li::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 6px;
	width: 7px;
	height: 4px;
	border-left: 1.6px solid var(--wp--preset--color--agua, #0A7280);
	border-bottom: 1.6px solid var(--wp--preset--color--agua, #0A7280);
	transform: rotate(-45deg);
	transform-origin: center;
}

@media (max-width: 600px) {
	.pp-ficha-puntos {
		gap: 6px;
	}

	.pp-ficha-puntos li {
		font-size: 14.5px;
	}
}

/* ---------------------------------------------------------------------------
   Sellos de pago (ficha de producto y checkout).
   Pedido 27-oct-2026: los sellos de confianza salen del pie y van donde se
   decide y se cierra la compra. Los iconos son SVG en línea: no hay fuente de
   iconos ni archivo externo. En la ficha la columna es estrecha y se apilan;
   en el checkout, que es ancho, van en tres columnas.
   --------------------------------------------------------------------------- */
.pp-sellos-pago {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 20px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--wp--preset--color--linea, #E2E8F0);
}

.pp-sello-pago {
	display: grid;
	grid-template-columns: 30px 1fr;
	column-gap: 10px;
	align-content: start;
}

.pp-sello-pago-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--wp--preset--color--agua-claro, #E7F4F6);
	color: var(--wp--preset--color--agua, #0A7280);
}

.pp-sello-pago-icono svg {
	width: 17px;
	height: 17px;
	display: block;
}

.pp-sello-pago-titulo {
	margin: 0;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--tinta, #1E293B);
}

.pp-sello-pago-desc {
	margin: 1px 0 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--wp--preset--color--tinta-suave, #334155);
}

/* Checkout: el contenedor es ancho, así que los tres caben en una fila. */
.woocommerce-checkout .pp-sellos-pago {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px 24px;
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 782px) {
	.woocommerce-checkout .pp-sellos-pago {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   Aviso de estado de la promoción (ficha de promoción).
   Modelo 27-oct-2026: cada promoción es una ficha propia con fecha de vigencia.
   Cuando no está vigente la ficha sigue publicada —conserva enlaces y lo ganado
   en buscadores— pero no se puede comprar y ofrece alternativas concretas.
   --------------------------------------------------------------------------- */
.pp-promo-estado {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.45;
}

.pp-promo-estado p {
	margin: 0;
}

.pp-promo-estado--activa {
	background: var(--wp--preset--color--agua-claro, #E7F4F6);
	border: 1px solid rgba(10, 114, 128, 0.28);
	color: #0A4F58;
	font-weight: 600;
}

.pp-promo-estado--activa .pp-promo-estado-icono {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--wp--preset--color--agua, #0A7280);
	position: relative;
}

.pp-promo-estado--activa .pp-promo-estado-icono::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 5px;
	width: 7px;
	height: 4px;
	border-left: 1.6px solid #fff;
	border-bottom: 1.6px solid #fff;
	transform: rotate(-45deg);
}

.pp-promo-estado--inactiva {
	display: block;
	background: var(--wp--preset--color--tarjeta, #F4F1F9);
	border: 1px solid #E6E0F1;
	color: var(--wp--preset--color--tinta, #1E293B);
}

.pp-promo-estado-titulo {
	font-weight: 700;
	color: var(--wp--preset--color--violeta, #493D6D);
}

.pp-promo-estado-texto {
	margin-top: 3px !important;
	color: var(--wp--preset--color--tinta-suave, #334155);
}

.pp-promo-estado-texto a {
	color: var(--wp--preset--color--agua, #0A7280);
	font-weight: 600;
}
/* Promo apagada: sin caja de compra. El aviso de estado ya ofrece las salidas. */
body.pp-promo-apagada .pp-ficha-caja {
	display: none;
}
/* Promociones vigentes en el hub: filas de ruteo, no tarjetas. */
.pp-promos-vigentes {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.pp-promo-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 14px 16px;
	background: var(--wp--preset--color--tarjeta, #F4F1F9);
	border: 1px solid #E6E0F1;
	border-radius: 14px;
}

.pp-promo-item-nombre {
	margin: 0;
	font-weight: 700;
	font-size: 16px;
}

.pp-promo-item-nombre a {
	color: var(--wp--preset--color--violeta, #493D6D);
	text-decoration: none;
}

.pp-promo-item-detalle {
	margin: 3px 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--wp--preset--color--tinta-suave, #334155);
}

.pp-promo-item-cierre {
	display: flex;
	align-items: center;
	gap: 14px;
}

.pp-promo-item-hasta {
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--agua, #0A7280);
}

.pp-promo-item-cta {
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--violeta, #493D6D);
	text-decoration: none;
	white-space: nowrap;
}

/* Archivo de promociones cerradas: bloque propio, al final y en tono menor.
   Antes vivían dentro del aviso de las abiertas y hacían dudar de cuál se
   podía comprar. */
.pp-promos > .pp-promos-seccion--archivo .pp-promos-h2 {
	font-size: clamp(19px, 2vw, 22px);
	color: var(--wp--preset--color--tinta-suave, #334155);
}

.pp-promos-vigentes--cerradas {
	gap: 10px;
	margin-top: 16px;
}

.pp-promos-vacio {
	margin: 18px 0 0;
	font-size: 15px;
	color: var(--wp--preset--color--tinta-suave, #334155);
}
/* Tabla de precios del hub: referencia, no listado comercial. */
.pp-tabla-precios-caja {
	/* Mismo ancho que el bloque de promociones: si la tabla quedaba a 800 y la
	   tarjeta a 1.120, la página se leía como dos columnas distintas. */
	max-width: 1120px;
	margin: 22px auto 0;
	overflow-x: auto;
}

.pp-tabla-precios {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.pp-tabla-precios thead th {
	text-align: left;
	padding: 10px 12px;
	font-size: 12.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tinta-suave, #334155);
	border-bottom: 1px solid var(--wp--preset--color--linea, #E2E8F0);
}

.pp-tabla-precios tbody th,
.pp-tabla-precios tbody td {
	padding: 12px;
	border-bottom: 1px solid #EEF2F7;
	vertical-align: top;
	font-weight: 400;
	text-align: left;
	color: var(--wp--preset--color--tinta-suave, #334155);
	line-height: 1.45;
}

.pp-tabla-precios tbody th a {
	font-weight: 700;
	color: var(--wp--preset--color--violeta, #493D6D);
	text-decoration: none;
}

.pp-tabla-precios tbody th a:hover {
	text-decoration: underline;
}

.pp-tabla-precios .pp-tabla-precio {
	white-space: nowrap;
	font-weight: 700;
	color: var(--wp--preset--color--tinta, #1E293B);
}

@media (max-width: 700px) {
	.pp-tabla-precios {
		min-width: 560px;
		font-size: 14px;
	}
}

/* ---------------------------------------------------------------------------
   /promociones/: se alinea con las demás páginas interiores.
   Antes la página arrancaba con un párrafo suelto sobre el gris y la tabla y las
   listas vivían fuera de tarjeta: se sentía como otra web. Ahora lleva el mismo
   héroe que FAQ, planeá y contacto, y cada bloque es una tarjeta blanca de
   1.172 px con radio 18 y relleno 26, separadas 26 px.
   --------------------------------------------------------------------------- */
.pp-promos > .pp-promos-seccion {
	box-sizing: border-box;
	max-width: 1172px;
	margin: 26px auto 0 !important;
	padding: clamp(16px, 2vw, 26px);
	background: #fff;
	border: 1px solid var(--wp--preset--color--linea, #E2E8F0);
	border-radius: 18px;
}

.pp-promos-h2 {
	margin: 0 0 8px;
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.2;
	color: var(--wp--preset--color--tinta, #1E293B);
}

.pp-promos-intro {
	margin: 0 0 4px;
	max-width: 64ch;
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--tinta-suave, #334155);
}

.pp-promos-cierre {
	margin: 18px 0 0;
	font-size: 15px;
}

.pp-promos-cierre a {
	color: var(--wp--preset--color--agua, #0A7280);
	font-weight: 600;
}

@media (max-width: 782px) {
	.pp-promos > .pp-promos-seccion {
		margin-top: 16px !important;
		padding: 16px;
	}
}

/* ---------------------------------------------------------------------------
   Promociones del hub /promociones/ (28-oct-2026).
   La sección es una banda de aviso —fondo turquesa claro y filo izquierdo
   turquesa oscuro— y dentro va la promoción como tarjeta blanca horizontal:
   texto a la izquierda, precio y botón después, foto a la derecha. El orden
   sigue la lectura natural de izquierda a derecha y deja el botón amarillo al
   final del recorrido, que es donde se decide la compra.
   Contraste: tinta #1E293B sobre #E7F4F6 = 13,1:1; turquesa #0A7280 sobre
   #E7F4F6 = 5,6:1; tinta sobre el amarillo del botón = 12,3:1.
   --------------------------------------------------------------------------- */
.pp-promos > .pp-promos-seccion--destacada {
	background: var(--wp--preset--color--agua-claro, #E7F4F6);
	border: 1px solid #CFE6EA;
	border-left: 5px solid var(--wp--preset--color--agua, #0A7280);
	border-radius: 16px;
	color: var(--wp--preset--color--tinta, #1E293B);
}

.pp-promos > .pp-promos-seccion--destacada .pp-promos-h2 {
	color: var(--wp--preset--color--agua, #0A7280);
}

.pp-promos > .pp-promos-seccion--destacada .pp-promos-intro {
	max-width: 68ch;
	color: var(--wp--preset--color--tinta-suave, #334155);
}

/* Lista de tarjetas */
.pp-promos-vigentes {
	display: grid;
	gap: 14px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.pp-promos-subtitulo {
	margin: 26px 0 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--agua, #0A7280);
}

/* Tarjeta horizontal: texto → precio y botón → foto */
.pp-promo-card {
	display: flex;
	align-items: stretch;
	min-height: 236px;
	gap: 20px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--linea, #E2E8F0);
	border-radius: 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pp-promo-card:hover {
	border-color: #C4B8DE;
	box-shadow: 0 10px 26px rgba(73, 61, 109, 0.12);
}

.pp-promo-card-cuerpo {
	order: 1;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
}

.pp-promo-card-accion {
	order: 2;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 9px;
}

.pp-promo-card-foto {
	order: 3;
	flex: 0 0 250px;
	max-width: 250px;
	display: block;
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--tarjeta, #F4F1F9);
}

.pp-promo-card-foto img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 150px;
	object-fit: cover;
}

.pp-promo-card-nombre {
	margin: 0;
	font-size: 20px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--violeta, #493D6D);
}

.pp-promo-card-nombre a {
	color: inherit;
	text-decoration: none;
}

.pp-promo-card-nombre a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pp-promo-card-detalle {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--wp--preset--color--tinta-suave, #334155);
}

.pp-promo-card-vigencia {
	margin: 2px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--agua, #0A7280);
}

.pp-promo-card-precio {
	margin: 0;
	font-size: 23px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--wp--preset--color--violeta, #493D6D);
	white-space: nowrap;
}

/* Botón de compra: amarillo de marca con tinta oscura. */
body .pp-promos > .pp-promos-seccion--destacada .pp-promo-card .pp-promo-card-cta,
body .pp-promos > .pp-promos-seccion--destacada .pp-promo-card .pp-promo-card-cta:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	background: #FDD72E;
	border-radius: 999px;
	color: #1E293B;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

body .pp-promos > .pp-promos-seccion--destacada .pp-promo-card .pp-promo-card-cta:hover {
	background: #F5C400;
	color: #1E293B;
}

/* Promociones cerradas: misma tarjeta, apagada y sin precio. */
.pp-promo-card--apagada {
	min-height: 0;
	border-style: dashed;
}

.pp-promo-card--apagada .pp-promo-card-nombre,
body .pp-promos > .pp-promos-seccion--destacada .pp-promo-card--apagada .pp-promo-card-nombre a {
	color: var(--wp--preset--color--tinta-suave, #334155);
}

.pp-promo-card--apagada .pp-promo-card-foto img {
	filter: grayscale(1);
	opacity: 0.75;
}

.pp-promo-card-vigencia--cerrada {
	color: #64748B;
}

.pp-promo-card--apagada .pp-promo-card-cta--fantasma,
body .pp-promos > .pp-promos-seccion--destacada .pp-promo-card--apagada .pp-promo-card-cta--fantasma {
	background: transparent;
	border: 1px solid #CBD5E1;
	color: var(--wp--preset--color--violeta, #493D6D);
}

.pp-promo-card--apagada .pp-promo-card-cta--fantasma:hover,
body .pp-promos > .pp-promos-seccion--destacada .pp-promo-card--apagada .pp-promo-card-cta--fantasma:hover {
	background: var(--wp--preset--color--tarjeta, #F4F1F9);
	border-color: #C4B8DE;
}

.pp-promos-vacio {
	margin: 18px 0 0;
	font-size: 15px;
	color: var(--wp--preset--color--tinta-suave, #334155);
}

@media (max-width: 900px) {
	.pp-promo-card {
		flex-wrap: wrap;
		gap: 12px;
		padding: 14px;
	}

	.pp-promo-card-foto {
		order: 0;
		flex: 1 1 100%;
		max-width: none;
	}

	.pp-promo-card-foto img {
		height: 170px;
		min-height: 0;
	}

	.pp-promo-card-cuerpo {
		order: 1;
		flex: 1 1 100%;
	}

	.pp-promo-card-accion {
		order: 2;
		flex: 1 1 100%;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	body .pp-promos > .pp-promos-seccion--destacada .pp-promo-card .pp-promo-card-cta {
		padding: 0 18px;
	}
}

/* Archivo de promociones cerradas (28-oct-2026).
   Bloque propio al final de la página, en tono menor: antes vivían dentro del
   aviso de las abiertas y hacían dudar de cuál se podía comprar. */
.pp-promos > .pp-promos-seccion--archivo .pp-promos-h2 {
	font-size: clamp(19px, 2vw, 22px);
	color: var(--wp--preset--color--tinta-suave, #334155);
}

.pp-promos-vigentes--cerradas {
	gap: 10px;
	margin-top: 16px;
}

/* Tres puntos de venta en el hero de promociones (28-oct-2026).
   Van como fila de apoyos bajo la bajada, con check en círculo para que se
   lean como lista y no como un párrafo cortado. Blanco sobre violeta = 9,6:1. */
.pp-promos-puntos {
	margin-top: 18px;
	gap: 9px 22px;
}

.pp-promos-puntos .pp-promos-punto {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.35;
	font-weight: 500;
	color: #fff;
}

.pp-promos-puntos .pp-promos-punto::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
}

@media (max-width: 782px) {
	.pp-promos-puntos {
		flex-direction: column;
		gap: 8px;
		margin-top: 16px;
	}
}

/* Aire entre la cabecera y la ficha (28-oct-2026).
   La ficha arrancaba a 23 px del header —lo que dejaba el margen del bloque de
   galería—, mientras el resto del sitio deja 40 px en las entradas y 32-46 en
   los heroes. Se iguala al de las entradas para que la ficha no se sienta pegada. */
.pp-es-ficha .pp-producto {
	/* La galería ya trae 23 px de margen propio: acá se suman 17 para dejar 40 px
	   entre la cabecera y el primer bloque, que es lo que miden las entradas. */
	padding-top: 17px;
}