/*!
 * Pan y Miel — "Mosaico de Oro" front-end system.
 *
 * DIRECTION CONTRACT
 * THESIS: the bakery's own gold-mosaic wall becomes the site — honey gold and
 *   cobalt carry whole regions; real bread photography persuades. Refuses the
 *   category default (cream + serif + terracotta + stock wheat).
 * OWN-WORLD: crema paper ground; committed miel and noche full-bleed bands;
 *   cobalto as the only interactive color; chunky rounded Baloo 2 display
 *   echoing the wordmark; pill buttons; sparse hexagon/bee hairline motifs.
 * STORY: a hungry visitor sees today's real bread, understands "el arte del
 *   día", learns when to come, and reserves for pickup.
 * FIRST VIEWPORT: split editorial hero — copy left on crema (kicker, display
 *   h1, lede, two pill CTAs, hours/address meta), full-height portrait photo
 *   right with slow Ken Burns and a miel edge bridging the columns.
 * FORM: single-scroll editorial homepage over seeded WordPress patterns; the
 *   scroll is paced photo → gold → paper → dark → paper → cobalt reserve →
 *   noche footer (the cobalt close reads as the bakery's navy fluted bar).
 *
 * Rules: every colour, size, space, radius, duration and easing is a
 * theme.json preset/custom var. No hardcoded hex outside rgba() overlays on
 * photography. Band tokens (--pm-*) let one component vocabulary survive
 * crema, dark, gold and cobalt grounds — switch the band class, never restyle
 * the component.
 *
 * @package PanYMiel
 */

/* ==========================================================================
   0. Base niceties
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--miel);
	color: var(--wp--preset--color--espresso);
}

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

/* Content links: honey underline that thickens on hover. */
.pm-content p a:not(.wp-block-button__link),
.pm-footer p a,
.pm-visita__notas a,
.pm-terraza__ig a,
.pm-vitrina__more a {
	color: var(--wp--preset--color--cobalto);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--miel);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: text-decoration-thickness var(--wp--custom--duration--fast) var(--wp--custom--easing--standard), color var(--wp--custom--duration--fast) var(--wp--custom--easing--standard);
}

.pm-content p a:not(.wp-block-button__link):hover,
.pm-footer p a:hover,
.pm-visita__notas a:hover,
.pm-terraza__ig a:hover,
.pm-vitrina__more a:hover {
	color: var(--wp--preset--color--cobalto-deep);
	text-decoration-thickness: 4px;
}

/* ==========================================================================
   1. Band tokens — one vocabulary on every ground
   --------------------------------------------------------------------------
   Contrast receipts (WCAG, against each band's ground):
   crema ground: espresso 15.9 · espresso-soft 9.0 · piedra 5.2 · cobalto 8.7
   noche ground: crema 17.6 · miel 9.3
   miel ground:  espresso 8.4 · cobalto-deep ≥ 6 (never light text on gold)
   cobalto ground: crema 8.7 · miel ≥ 4.6
   ========================================================================== */

:root {
	--pm-hairline: rgba(34, 26, 16, 0.14);
	--pm-accent: var(--wp--preset--color--cobalto);
	--pm-muted: var(--wp--preset--color--piedra);
	--pm-strong: var(--wp--preset--color--espresso);
}

.pm-band--dark {
	--pm-hairline: rgba(251, 246, 236, 0.18);
	--pm-accent: var(--wp--preset--color--miel);
	--pm-muted: rgba(251, 246, 236, 0.72);
	--pm-strong: var(--wp--preset--color--crema);
}

.pm-band--miel {
	--pm-hairline: rgba(34, 26, 16, 0.22);
	--pm-accent: var(--wp--preset--color--cobalto-deep);
	--pm-muted: rgba(34, 26, 16, 0.72);
	--pm-strong: var(--wp--preset--color--espresso);
}

.pm-band--cobalto {
	--pm-hairline: rgba(251, 246, 236, 0.22);
	--pm-accent: var(--wp--preset--color--miel);
	--pm-muted: rgba(251, 246, 236, 0.78);
	--pm-strong: var(--wp--preset--color--crema);
}

.pm-band--dark h2, .pm-band--dark h3,
.pm-band--cobalto h2, .pm-band--cobalto h3 {
	color: var(--pm-strong);
}

/* ==========================================================================
   2. Skip link, focus, kicker, lede
   ========================================================================== */

.pm-skip-link {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -150%);
	z-index: 100;
	padding: 0.6rem 1.4rem;
	background: var(--wp--preset--color--cobalto);
	color: var(--wp--preset--color--crema);
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	transition: transform var(--wp--custom--duration--fast) var(--wp--custom--easing--standard);
}

.pm-skip-link:focus {
	transform: translate(-50%, 0.6rem);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--pm-accent);
	outline-offset: 3px;
	border-radius: var(--wp--custom--radius--sm);
}

.pm-kicker {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pm-accent);
	margin-bottom: var(--wp--preset--spacing--xxs);
}

.pm-lede {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.55;
	max-width: 44ch;
	color: var(--pm-muted);
}

.pm-hex-rule {
	color: var(--wp--preset--color--miel);
	margin-top: var(--wp--preset--spacing--xs);
}

/* ==========================================================================
   3. Header — sticky, transparent-over-hero variant, mobile overlay
   ========================================================================== */

.pm-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--wp--preset--color--crema);
	transition: background var(--wp--custom--duration--base) var(--wp--custom--easing--standard), box-shadow var(--wp--custom--duration--base) var(--wp--custom--easing--standard);
}

.pm-header--transparent {
	background: transparent;
}

.pm-header.is-scrolled {
	background: color-mix(in srgb, var(--wp--preset--color--crema) 92%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: var(--wp--preset--shadow--soft);
}

.pm-header__brand {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.pm-header__brand img {
	width: 76px;
	height: auto;
	transition: transform var(--wp--custom--duration--fast) var(--wp--custom--easing--standard);
}

.pm-header__brand:hover img {
	transform: scale(1.05) rotate(-1.5deg);
}

.pm-nav a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	color: var(--wp--preset--color--espresso);
}

.pm-nav a:hover {
	color: var(--wp--preset--color--cobalto);
}

/* Mobile hamburger inherits ink so it never vanishes on light ground. */
.pm-nav .wp-block-navigation__responsive-container-open,
.pm-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--espresso);
}

.pm-nav .wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--wp--preset--color--crema);
	font-size: var(--wp--preset--font-size--lg);
}

.pm-header__cta .pm-lang-switch .wp-block-button__link {
	padding: 0.45rem 0.95rem 0.5rem;
	font-size: var(--wp--preset--font-size--sm);
}

.pm-header__cta .wp-block-button:not(.pm-lang-switch) .wp-block-button__link {
	padding: 0.55rem 1.3rem 0.65rem;
	font-size: var(--wp--preset--font-size--sm);
}

/* WooCommerce block-hook icons (mini-cart, account) on light header. */
.pm-header .wc-block-mini-cart__button,
.pm-header .wp-block-woocommerce-customer-account a {
	color: var(--wp--preset--color--espresso);
}

.pm-header svg {
	fill: currentColor;
}

.pm-header__cta .wp-block-button__link {
	white-space: nowrap;
}

/* Small screens: the overlay menu already carries "Menú"; drop the duplicate
   CTA and the account icon so the bar never wraps. */
@media (max-width: 660px) {
	.pm-header__cta .wp-block-button:not(.pm-lang-switch),
	.pm-header .wp-block-woocommerce-customer-account {
		display: none;
	}
}

/* ==========================================================================
   4. Buttons — pills in three inks
   ========================================================================== */

.wp-block-button__link {
	transition: background var(--wp--custom--duration--fast) var(--wp--custom--easing--standard), color var(--wp--custom--duration--fast) var(--wp--custom--easing--standard), transform var(--wp--custom--duration--fast) var(--wp--custom--easing--standard), box-shadow var(--wp--custom--duration--fast) var(--wp--custom--easing--standard);
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--soft);
}

.wp-block-button__link:active {
	transform: translateY(0);
}

.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--pm-strong);
	box-shadow: inset 0 0 0 2px var(--pm-hairline);
}

.is-style-ghost .wp-block-button__link:hover {
	box-shadow: inset 0 0 0 2px var(--pm-accent);
	color: var(--pm-accent);
}

.is-style-ink .wp-block-button__link {
	background: var(--wp--preset--color--espresso);
	color: var(--wp--preset--color--crema);
}

.is-style-ink .wp-block-button__link:hover {
	background: var(--wp--preset--color--noche);
	color: var(--wp--preset--color--crema);
}

.is-style-miel .wp-block-button__link {
	background: var(--wp--preset--color--miel);
	color: var(--wp--preset--color--espresso);
}

.is-style-miel .wp-block-button__link:hover {
	background: var(--wp--preset--color--crema);
	color: var(--wp--preset--color--espresso);
}

/* ==========================================================================
   5. Hero — split editorial, Ken Burns on the photo
   ========================================================================== */

.pm-hero {
	overflow: clip;
}

.pm-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) min(46vw, 720px);
	min-height: 100svh;
}

.pm-hero__copy {
	align-self: center;
	padding: clamp(5.5rem, 11svh, 7rem) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--lg) max(var(--wp--preset--spacing--md), calc((100vw - var(--wp--style--global--wide-size)) / 2));
	max-width: 640px;
}

.pm-hero__copy h1 {
	letter-spacing: -0.015em;
	max-width: 13ch;
	margin-bottom: var(--wp--preset--spacing--sm);
}

.pm-hero__copy .pm-lede {
	margin-bottom: var(--wp--preset--spacing--md);
}

.pm-hero__actions {
	gap: var(--wp--preset--spacing--xs);
	margin-bottom: var(--wp--preset--spacing--lg);
}

.pm-hero__meta {
	color: var(--wp--preset--color--piedra);
	border-top: 1px solid var(--pm-hairline);
	padding-top: var(--wp--preset--spacing--sm);
	max-width: 46ch;
}

.pm-hero__meta p {
	margin: 0;
	line-height: 1.5;
}

.pm-hero__media {
	position: relative;
	margin: 0;
	overflow: clip;
}

.pm-hero__media::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 10px;
	background: var(--wp--preset--gradient--mosaico);
	z-index: 2;
}

.pm-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	animation: pm-kenburns 16s var(--wp--custom--easing--standard) both;
	transform-origin: 62% 38%;
}

@keyframes pm-kenburns {
	from { transform: scale(1.1); }
	to   { transform: scale(1); }
}

@media (max-width: 781px) {
	.pm-hero__inner {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.pm-hero__copy {
		padding: 5rem var(--wp--preset--spacing--md) var(--wp--preset--spacing--md);
		max-width: none;
	}

	.pm-hero__copy .pm-lede {
		margin-bottom: var(--wp--preset--spacing--sm);
	}

	.pm-hero__actions {
		margin-bottom: var(--wp--preset--spacing--md);
	}

	.pm-hero__media {
		height: 56svh;
	}

	.pm-hero__media::before {
		inset: 0 0 auto 0;
		width: auto;
		height: 8px;
	}
}

/* ==========================================================================
   6. Signature band — the gold mosaic wall as a surface
   ========================================================================== */

.pm-signature {
	position: relative;
	background-image:
		repeating-linear-gradient(0deg, rgba(251, 246, 236, 0.05) 0 1px, transparent 1px 14px),
		repeating-linear-gradient(90deg, rgba(34, 26, 16, 0.05) 0 1px, transparent 1px 14px),
		var(--wp--preset--gradient--mosaico);
	overflow: clip;
}

.pm-signature::before {
	content: "";
	position: absolute;
	inset: -40% -20%;
	background: linear-gradient(105deg, transparent 42%, rgba(251, 246, 236, 0.16) 50%, transparent 58%);
	animation: pm-shimmer 9s var(--wp--custom--easing--standard) infinite;
	pointer-events: none;
}

@keyframes pm-shimmer {
	0%, 55%  { transform: translateX(-45%); }
	85%, 100% { transform: translateX(45%); }
}

.pm-signature > * {
	position: relative;
}

.pm-signature__label {
	display: table;
	margin-inline: auto;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--espresso);
	border: 1px solid var(--pm-hairline);
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.35rem 1.1rem;
}

.pm-signature__title {
	color: var(--wp--preset--color--cobalto-deep);
	max-width: 18ch;
	margin-inline: auto;
}

.pm-signature__sub {
	color: var(--pm-muted);
	max-width: 52ch;
	margin-inline: auto;
}

/* ==========================================================================
   7. Vitrina — featured pieces, alternating editorial rhythm
   ========================================================================== */

.pm-vitrina__head {
	margin-bottom: var(--wp--preset--spacing--lg);
}

.pm-vitrina__more a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
}

.pm-vitrina__row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--md);
	align-items: start;
}

.pm-pieza {
	margin: 0;
}

.pm-pieza:nth-child(even) {
	transform: translateY(var(--wp--preset--spacing--lg));
}

.pm-pieza__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.pm-pieza picture {
	display: block;
	aspect-ratio: var(--pm-ratio, 3/4);
	overflow: clip;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--soft);
	transition: box-shadow var(--wp--custom--duration--base) var(--wp--custom--easing--standard);
}

.pm-pieza img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--duration--slow) var(--wp--custom--easing--standard);
}

.pm-pieza__link:hover picture {
	box-shadow: var(--wp--preset--shadow--lift);
}

.pm-pieza__link:hover img {
	transform: scale(1.04);
}

.pm-pieza figcaption {
	padding-top: var(--wp--preset--spacing--xs);
}

.pm-pieza__name {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md);
	color: var(--pm-strong);
}

.pm-pieza__note {
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--pm-muted);
	max-width: 30ch;
}

@media (max-width: 781px) {
	.pm-vitrina__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.pm-vitrina__row {
		grid-template-columns: 1fr;
	}

	.pm-pieza:nth-child(even) {
		transform: none;
	}
}

/* ==========================================================================
   8. Índice del menú — hairline rows with display names
   ========================================================================== */

.pm-index__title {
	margin-bottom: var(--wp--preset--spacing--md);
}

.pm-index {
	border-top: 1px solid var(--pm-hairline);
}

.pm-index__row {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto;
	align-items: baseline;
	gap: var(--wp--preset--spacing--md);
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xs);
	border-bottom: 1px solid var(--pm-hairline);
	text-decoration: none;
	color: inherit;
	transition: background var(--wp--custom--duration--fast) var(--wp--custom--easing--standard);
}

.pm-index__row::after {
	content: "→";
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	color: var(--pm-accent);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity var(--wp--custom--duration--fast) var(--wp--custom--easing--standard), transform var(--wp--custom--duration--fast) var(--wp--custom--easing--standard);
}

.pm-index__row:hover {
	background: var(--wp--preset--color--crema);
}

.pm-index__row:hover::after {
	opacity: 1;
	transform: translateX(0);
}

.pm-index__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xl);
	color: var(--pm-strong);
	line-height: 1.1;
	transition: transform var(--wp--custom--duration--fast) var(--wp--custom--easing--standard);
}

.pm-index__row:hover .pm-index__name {
	transform: translateX(8px);
}

.pm-index__note {
	color: var(--pm-muted);
}

@media (max-width: 600px) {
	.pm-index__row {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--xxs);
	}

	.pm-index__row::after {
		display: none;
	}
}

/* ==========================================================================
   9. Craft — dark band, photo flush left
   ========================================================================== */

.pm-craft__grid {
	display: grid;
	grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
}

.pm-craft__media {
	margin: 0;
}

.pm-craft__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pm-craft__copy {
	align-self: center;
	padding: var(--wp--preset--spacing--xxl) max(var(--wp--preset--spacing--md), calc((100vw - var(--wp--style--global--wide-size)) / 2)) var(--wp--preset--spacing--xxl) var(--wp--preset--spacing--xl);
	max-width: 720px;
}

.pm-craft__copy .pm-lede {
	margin-bottom: var(--wp--preset--spacing--md);
}

.pm-craft__facts {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--lg);
	padding: 0;
}

.pm-craft__facts li {
	padding: var(--wp--preset--spacing--sm) 0;
	border-top: 1px solid var(--pm-hairline);
	color: var(--pm-muted);
	max-width: 52ch;
}

.pm-craft__facts li:last-child {
	border-bottom: 1px solid var(--pm-hairline);
}

.pm-craft__facts strong {
	color: var(--pm-strong);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
}

@media (max-width: 781px) {
	.pm-craft__grid {
		grid-template-columns: 1fr;
	}

	.pm-craft__media {
		max-height: 52svh;
		overflow: clip;
	}

	.pm-craft__copy {
		padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--md);
	}
}

/* ==========================================================================
   10. Terraza
   ========================================================================== */

.pm-terraza__media {
	margin: 0;
	border-radius: var(--wp--custom--radius--lg);
	overflow: clip;
	box-shadow: var(--wp--preset--shadow--lift);
}

.pm-terraza__media img {
	display: block;
	width: 100%;
	height: auto;
}

.pm-facts--inline {
	margin: var(--wp--preset--spacing--md) 0;
}

.pm-facts__row {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--md);
	padding: var(--wp--preset--spacing--xs) 0;
	border-top: 1px solid var(--pm-hairline);
	max-width: 34ch;
}

.pm-facts__row:last-child {
	border-bottom: 1px solid var(--pm-hairline);
}

.pm-facts__row dt {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	color: var(--pm-strong);
}

.pm-facts__row dd {
	margin: 0;
	color: var(--pm-muted);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   11. Gallery — masonry columns + native lightbox
   ========================================================================== */

.pm-galeria__head {
	margin-bottom: var(--wp--preset--spacing--md);
}

.pm-galeria__hint {
	color: var(--pm-muted);
}

.pm-galeria__grid {
	columns: 3;
	column-gap: var(--wp--preset--spacing--sm);
}

.pm-galeria__item {
	margin: 0 0 var(--wp--preset--spacing--sm);
	break-inside: avoid;
	border-radius: var(--wp--custom--radius--lg);
	overflow: clip;
}

.pm-galeria__item img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform var(--wp--custom--duration--slow) var(--wp--custom--easing--standard);
}

.pm-galeria__item:hover img {
	transform: scale(1.025);
}

@media (max-width: 781px) {
	.pm-galeria__grid {
		columns: 2;
	}
}

/* ==========================================================================
   12. Quotes — attributed, giant honey guillemets
   ========================================================================== */

.pm-quotes__title {
	margin-bottom: 0;
}

.pm-quotes__note {
	color: var(--pm-muted);
	margin-bottom: var(--wp--preset--spacing--lg);
}

.pm-quotes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--wp--preset--spacing--lg);
}

.pm-quote {
	margin: 0;
	padding-top: var(--wp--preset--spacing--md);
	border-top: 1px solid var(--pm-hairline);
	position: relative;
}

.pm-quote::before {
	content: "«";
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 0.6;
	color: var(--wp--preset--color--miel);
	margin-bottom: var(--wp--preset--spacing--xs);
}

.pm-quote p {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.5;
	color: var(--pm-strong);
}

.pm-quote cite {
	font-style: normal;
}

.pm-quote cite strong {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	color: var(--pm-strong);
	display: block;
}

.pm-quote cite span {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--pm-muted);
}

/* ==========================================================================
   13. Visítanos — facts grid + map facade
   ========================================================================== */

.pm-facts-grid {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--md);
	row-gap: var(--wp--preset--spacing--xs);
	margin: var(--wp--preset--spacing--md) 0;
}

.pm-fact {
	margin: 0;
}

.pm-fact--label {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pm-muted);
	padding-top: 0.2em;
}

.pm-visita__notas {
	color: var(--pm-muted);
	max-width: 52ch;
	margin-bottom: var(--wp--preset--spacing--md);
}

.pm-map {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--wp--custom--radius--lg);
	overflow: clip;
	box-shadow: var(--wp--preset--shadow--soft);
}

.pm-map__facade {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: var(--wp--preset--spacing--sm);
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 30% 30%, rgba(240, 172, 56, 0.14), transparent 55%),
		repeating-linear-gradient(45deg, rgba(34, 26, 16, 0.03) 0 2px, transparent 2px 18px),
		var(--wp--preset--color--crema-soft);
	transition: background-color var(--wp--custom--duration--base) var(--wp--custom--easing--standard);
}

.pm-map__facade:hover .pm-map__pin {
	transform: translateY(-6px);
}

.pm-map__pin {
	color: var(--wp--preset--color--cobalto);
	transition: transform var(--wp--custom--duration--base) var(--wp--custom--easing--standard);
}

.pm-map__label {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--espresso);
	text-align: center;
}

.pm-map__label small {
	display: block;
	font-weight: 400;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--pm-muted);
	margin-top: 0.2rem;
}

.pm-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ==========================================================================
   14. Timeline — hexagon markers
   ========================================================================== */

.pm-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 1px solid var(--pm-hairline);
}

.pm-timeline__item {
	position: relative;
	padding: 0 0 var(--wp--preset--spacing--lg) var(--wp--preset--spacing--lg);
}

.pm-timeline__item:last-child {
	padding-bottom: 0;
}

.pm-timeline__item::before {
	content: "";
	position: absolute;
	left: -8px;
	top: 0.45em;
	width: 15px;
	height: 17px;
	background: var(--wp--preset--color--miel);
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.pm-timeline__key {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pm-accent);
	margin: 0 0 var(--wp--preset--spacing--xxs);
}

.pm-timeline__item h3 {
	margin: 0 0 var(--wp--preset--spacing--xxs);
}

.pm-timeline__item p:last-child {
	color: var(--pm-muted);
	max-width: 56ch;
	margin: 0;
}

/* ==========================================================================
   15. Temporada list & pasos
   ========================================================================== */

.pm-temporada__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--lg);
	margin: var(--wp--preset--spacing--lg) 0;
}

.pm-temporada__item {
	border-top: 2px solid var(--wp--preset--color--miel);
	padding-top: var(--wp--preset--spacing--sm);
}

.pm-temporada__item h3 {
	margin: 0 0 var(--wp--preset--spacing--xxs);
}

.pm-temporada__item p {
	color: var(--pm-muted);
}

.pm-temporada__meta {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--miel-deep);
}

.pm-pasos__list {
	list-style: none;
	counter-reset: pm-paso;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--lg);
}

.pm-pasos__list li {
	counter-increment: pm-paso;
	border-top: 1px solid var(--pm-hairline);
	padding-top: var(--wp--preset--spacing--sm);
	color: var(--pm-muted);
}

.pm-pasos__list li::before {
	content: counter(pm-paso, decimal-leading-zero);
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--miel);
	line-height: 1;
	margin-bottom: var(--wp--preset--spacing--xxs);
}

.pm-pasos__list strong {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	color: var(--pm-strong);
}

/* ==========================================================================
   16. FAQ — native details/summary
   ========================================================================== */

.pm-faq {
	border-top: 1px solid var(--pm-hairline);
}

.pm-faq__item {
	border-bottom: 1px solid var(--pm-hairline);
}

.pm-faq__item summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--wp--preset--spacing--md);
	padding: var(--wp--preset--spacing--sm) 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md);
	color: var(--pm-strong);
}

.pm-faq__item summary::-webkit-details-marker {
	display: none;
}

.pm-faq__item summary::after {
	content: "+";
	font-weight: 800;
	color: var(--wp--preset--color--miel-deep);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1;
	transition: transform var(--wp--custom--duration--fast) var(--wp--custom--easing--standard);
}

.pm-faq__item[open] summary::after {
	transform: rotate(45deg);
}

.pm-faq__item p {
	padding: 0 0 var(--wp--preset--spacing--sm);
	margin: 0;
	color: var(--pm-muted);
	max-width: 62ch;
}

/* ==========================================================================
   17. Footer
   ========================================================================== */

.pm-footer a {
	color: var(--wp--preset--color--crema);
}

.pm-footer__brand {
	display: inline-block;
	line-height: 0;
	margin-bottom: var(--wp--preset--spacing--sm);
}

.pm-footer__tagline {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	margin-bottom: var(--wp--preset--spacing--xxs);
}

.pm-footer__note {
	color: rgba(251, 246, 236, 0.72);
	max-width: 34ch;
}

.pm-footer__title {
	font-size: var(--wp--preset--font-size--base);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--miel);
	margin-bottom: var(--wp--preset--spacing--sm);
}

.pm-footer__fact {
	color: rgba(251, 246, 236, 0.85);
	margin-bottom: var(--wp--preset--spacing--xxs);
}

.pm-footer__social {
	margin-top: var(--wp--preset--spacing--sm);
}

.pm-footer__nav a {
	text-decoration: none;
}

.pm-footer__nav a:hover {
	color: var(--wp--preset--color--miel);
}

.pm-footer__base {
	border-top: 1px solid rgba(251, 246, 236, 0.18);
	margin-top: var(--wp--preset--spacing--lg);
	color: rgba(251, 246, 236, 0.72);
	font-size: var(--wp--preset--font-size--sm);
}

.pm-footer__legal {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.pm-bee {
	color: var(--wp--preset--color--miel);
	flex: none;
}

.pm-footer__legal-nav a {
	font-size: var(--wp--preset--font-size--sm);
	color: rgba(251, 246, 236, 0.72);
}

.pm-footer__legal-nav a:hover {
	color: var(--wp--preset--color--crema);
}

/* ==========================================================================
   18. Page head (interior) & prose
   ========================================================================== */

.pm-page-head .wp-block-post-title {
	max-width: 16ch;
}

.pm-legal-note {
	border-radius: var(--wp--custom--radius--md);
	margin-bottom: var(--wp--preset--spacing--md);
}

/* ==========================================================================
   19. Block styles kept from the system
   ========================================================================== */

.is-style-card {
	background: var(--wp--preset--color--crema-soft);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--soft);
	padding: var(--wp--preset--spacing--md);
	transition: box-shadow var(--wp--custom--duration--base) var(--wp--custom--easing--standard), transform var(--wp--custom--duration--base) var(--wp--custom--easing--standard);
}

.is-style-card:hover {
	box-shadow: var(--wp--preset--shadow--lift);
	transform: translateY(-3px);
}

.is-style-hairline {
	border: 1px solid var(--pm-hairline);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--md);
}

.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pm-accent);
}

.is-style-checkmarks {
	list-style: none;
	padding-left: 0;
}

.is-style-checkmarks li {
	position: relative;
	padding-left: 1.6em;
}

.is-style-checkmarks li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--miel-deep);
	font-weight: 700;
}

.is-style-link-underline .wp-block-button__link {
	background: transparent;
	color: var(--pm-accent);
	padding-left: 0;
	padding-right: 0;
	border-radius: 0;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--miel);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.is-style-link-underline .wp-block-button__link:hover {
	box-shadow: none;
	transform: none;
	text-decoration-thickness: 4px;
}

/* ==========================================================================
   20. Figures
   ========================================================================== */

.pm-figure {
	margin: 0;
	border-radius: var(--wp--custom--radius--lg);
	overflow: clip;
	box-shadow: var(--wp--preset--shadow--soft);
}

.pm-figure img {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   21. Scroll reveal — gated on .pm-js so no-JS visitors see everything
   ========================================================================== */

.pm-js .pm-reveal,
.pm-js .pm-reveal-group > * {
	opacity: 0;
	transform: translateY(18px);
}

.pm-js .pm-reveal.is-inview,
.pm-js .pm-reveal-group.is-inview > * {
	animation: pm-fade-up var(--wp--custom--duration--slow) var(--wp--custom--easing--standard) both;
}

.pm-js .pm-reveal-group.is-inview > *:nth-child(2) { animation-delay: 90ms; }
.pm-js .pm-reveal-group.is-inview > *:nth-child(3) { animation-delay: 180ms; }
.pm-js .pm-reveal-group.is-inview > *:nth-child(4) { animation-delay: 270ms; }
.pm-js .pm-reveal-group.is-inview > *:nth-child(5) { animation-delay: 360ms; }
.pm-js .pm-reveal-group.is-inview > *:nth-child(n+6) { animation-delay: 440ms; }

@keyframes pm-fade-up {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   22. Reduced motion — kill every non-essential animation
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.pm-js .pm-reveal,
	.pm-js .pm-reveal-group > * {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.pm-hero__media img {
		animation: none;
	}

	.pm-signature::before {
		animation: none;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}