/*
 * Base styles and shared components of the PITALUA theme.
 *
 * Exact replica of the approved prototype (pitalua-html-prototype-v2/): every value below is
 * the prototype's, with selectors adapted to the block markup. The prototype class each rule
 * replicates is named in its comment. Page sections live in assets/css/paginas/<slug>.css.
 *
 * Deliberate, non-visual differences: the skip link and a keyboard focus ring (both invisible
 * to a mouse user), and fonts served from the theme instead of Google Fonts.
 */

/* ================================================================ Base */

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var( --ivory );
	color: var( --ink );
	font-family: var( --sans );
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
}

/* Rendered by pitalua/imagen. */
.pitalua-imagen {
	display: block;
}

/* Keyboard focus only: a mouse user never sees it, so it does not alter the replica. */
:focus-visible {
	outline: 2px solid var( --plum );
	outline-offset: 2px;
}

:is( .pitalua-oscuro, .pitalua-superficie-profunda, .pitalua-page-hero, .pitalua-cta, .pitalua-encabezado, .pitalua-pie ) :focus-visible {
	outline-color: var( --gold );
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* Skip link: first focusable element, visible only while it has focus (WCAG 2.4.1). */
.pitalua-saltar {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100;
	padding: 8px 16px;
	background: var( --ivory );
	color: var( --plum );
	font-size: 14px;
	font-weight: 600;
	transform: translateY( -200% );
}

.pitalua-saltar:focus {
	transform: none;
}

/* ========================================================== Typography */

/* .display */
h1,
h2,
.pitalua-display {
	margin: 0;
	font-family: var( --serif );
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.14;
}

/* The prototype's accent <span> is written as <em> (the editor keeps it). Never italic. */
:is( h1, h2, h3 ) em {
	font-style: normal;
}

:is( .pitalua-oscuro, .pitalua-superficie-profunda, .pitalua-page-hero, .pitalua-cta ) :is( h1, h2, h3 ) em {
	color: var( --gold );
}

/* .eyebrow. In a flex column (the CTA) it keeps its own width, as the inline span does. */
.pitalua-eyebrow {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 20px;
	color: var( --gold );
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.pitalua-eyebrow::after {
	content: "";
	width: 44px;
	height: 1px;
	background: currentColor;
	flex-shrink: 0;
}

@media ( max-width: 640px ) {
	.pitalua-eyebrow {
		font-size: 0.65rem;
		letter-spacing: 0.14em;
		gap: 10px;
	}

	.pitalua-eyebrow::after {
		width: 28px;
	}
}

/* .lead */
.pitalua-lead {
	color: var( --muted );
	font-size: clamp( 0.98rem, 1.15vw, 1.12rem );
	line-height: 1.78;
}

/* ==================================================== Layout utilities */

/* .container */
.container,
.pitalua-contenedor {
	width: min( calc( 100% - 40px ), var( --max ) );
	margin: auto;
}

.pitalua-oscuro {
	background: var( --plum );
	color: var( --ivory );
}

.pitalua-superficie-profunda {
	background: var( --plum-deep );
	color: var( --ivory );
}

.pitalua-superficie-hundida {
	background: var( --ivory-deep );
}

/* ========================================================== Components */

/* --- Buttons: .btn and its variants, as core/button block styles ------- */

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Two classes on purpose: core's global styles set button border and radius with
   :root :where(), and this has to win regardless of print order. Labels keep the prototype's
   " →" as text, so it wraps with the words. Only index.html adds nowrap and centring. */
.wp-block-button .wp-block-button__link {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 28px;
	overflow: hidden;
	border: 1.5px solid transparent;
	border-radius: 0;
	background: var( --plum );
	color: var( --ivory );
	font-family: var( --sans );
	font-size: 0.73rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	line-height: 1;
	/* Core centres button text and breaks words anywhere; the prototype's .btn does neither. */
	text-align: start;
	text-decoration: none;
	text-transform: uppercase;
	word-break: normal;
	cursor: pointer;
	box-shadow: none;
	transition: color 0.35s var( --ease ), border-color 0.35s var( --ease );
}

.wp-block-button .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: scaleX( 0 );
	transform-origin: left center;
	transition: transform 0.4s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.wp-block-button .wp-block-button__link:hover::before {
	transform: scaleX( 1 );
}

/* .btn-plum (also the default) */
.wp-block-button .wp-block-button__link,
.is-style-ciruela .wp-block-button__link {
	border-color: var( --plum );
	background: var( --plum );
	color: var( --ivory );
}

.wp-block-button .wp-block-button__link::before,
.is-style-ciruela .wp-block-button__link::before {
	background: var( --gold );
}

.wp-block-button .wp-block-button__link:hover,
.is-style-ciruela .wp-block-button__link:hover {
	border-color: var( --gold );
	color: #fff;
}

/* .btn-gold */
.is-style-dorado .wp-block-button__link {
	border-color: var( --gold );
	background: var( --gold );
	color: #241421;
}

.is-style-dorado .wp-block-button__link::before {
	background: var( --plum );
}

.is-style-dorado .wp-block-button__link:hover {
	border-color: var( --gold );
	color: #fff;
}

/* .btn-outline */
.is-style-contorno .wp-block-button__link {
	border-color: rgba( 249, 241, 233, 0.42 );
	background: transparent;
	color: var( --ivory );
}

.is-style-contorno .wp-block-button__link::before {
	background: var( --gold );
}

.is-style-contorno .wp-block-button__link:hover {
	border-color: var( --gold );
	color: #fff;
}

/* .btn-outline-gold */
.is-style-contorno-dorado .wp-block-button__link {
	border-color: var( --gold );
	background: transparent;
	color: var( --gold );
}

.is-style-contorno-dorado .wp-block-button__link::before {
	background: var( --gold );
}

.is-style-contorno-dorado .wp-block-button__link:hover {
	border-color: var( --gold );
	color: #fff;
}

/* .btn-outline-plum */
.is-style-contorno-ciruela .wp-block-button__link {
	min-height: 44px;
	padding: 0 24px;
	border-color: rgba( 82, 40, 74, 0.4 );
	background: transparent;
	color: var( --plum );
	font-size: 0.71rem;
}

.is-style-contorno-ciruela .wp-block-button__link::before {
	background: var( --plum );
}

.is-style-contorno-ciruela .wp-block-button__link:hover {
	border-color: var( --plum );
	color: #fff;
}

/* .text-link: not a .btn, so none of its line-height or centring. */
.is-style-enlace .wp-block-button__link {
	justify-content: flex-start;
	line-height: inherit;
	gap: 8px;
	min-height: 0;
	padding: 0 0 2px;
	border: 0;
	border-bottom: 1px solid transparent;
	background: transparent;
	color: var( --plum );
	font-size: 0.73rem;
	letter-spacing: 0.12em;
	transition: all 0.25s var( --ease );
}

.is-style-enlace .wp-block-button__link::before {
	display: none;
}

.is-style-enlace .wp-block-button__link::after {
	content: "→" / "";
	display: inline-block;
	margin-left: 0;
	font-size: 0.95rem;
	transition: transform 0.25s var( --ease );
}

.is-style-enlace .wp-block-button__link:hover::after {
	transform: translateX( 5px );
}

.is-style-enlace .wp-block-button__link:hover {
	border-bottom-color: currentColor;
	color: var( --gold );
}

/* --- .page-hero --------------------------------------------------------- */

.pitalua-page-hero {
	position: relative;
	overflow: hidden;
	padding: clamp( 136px, 16vh, 168px ) 0 clamp( 54px, 7vh, 76px );
	background: var( --plum-deep );
	color: var( --ivory );
}

/* .page-hero-pattern */
.pitalua-page-hero::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: clamp( 380px, 54vw, 700px );
	height: 100%;
	background: url( "../img/decor/patron-claro.webp" ) center right / 280px repeat;
	opacity: 0.1;
	-webkit-mask-image: linear-gradient( to left, rgba( 0, 0, 0, 0.92 ) 10%, rgba( 0, 0, 0, 0.35 ) 60%, transparent 100% );
	mask-image: linear-gradient( to left, rgba( 0, 0, 0, 0.92 ) 10%, rgba( 0, 0, 0, 0.35 ) 60%, transparent 100% );
	pointer-events: none;
}

.pitalua-page-hero > * {
	position: relative;
}

.pitalua-page-hero h1 {
	max-width: 840px;
	margin: 0 0 20px;
	font-size: clamp( 2.1rem, 3.4vw, 3.2rem );
	line-height: 1.2;
}

.pitalua-page-hero p:not( .pitalua-eyebrow ) {
	max-width: 700px;
	margin: 0;
	color: #ede3dc;
	font-size: clamp( 1rem, 1.14vw, 1.12rem );
	font-weight: 300;
	line-height: 1.8;
}

@media ( max-width: 640px ) {

	.pitalua-page-hero {
		padding: 116px 0 44px;
	}
}

/* --- .breadcrumb -------------------------------------------------------- */

.pitalua-migas ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin: clamp( 24px, 3.2vw, 38px ) 0 0;
	padding: 0;
	list-style: none;
	color: #d8cad2;
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.pitalua-migas li {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.pitalua-migas a {
	color: var( --gold );
	transition: opacity 0.2s;
}

.pitalua-migas a:hover {
	opacity: 0.8;
}

/* .breadcrumb .current */
.pitalua-migas [aria-current="page"] {
	color: #ede3dc;
	opacity: 0.88;
}

/* --- .legal-wrap: legal documents white sheet on warm canvas ----------- */

.pitalua-legal {
	position: relative;
	padding: clamp( 84px, 8.5vw, 114px ) 0;
	background: #fffaf5;
}

/* .container-narrow */
.pitalua-legal__contenedor {
	width: min( calc( 100% - 40px ), 860px );
	margin: auto;
}

/* .legal-body */
.pitalua-legal__cuerpo {
	padding: clamp( 36px, 5vw, 64px );
	border: 1px solid var( --line );
	border-top: 3px solid var( --gold );
	background: #fff;
	box-shadow: 0 12px 36px rgba( 82, 40, 74, 0.05 );
}

/* .legal-updated */
.pitalua-legal__cuerpo .pitalua-legal__actualizacion {
	display: inline-block;
	margin: 0 0 24px;
	padding-bottom: 4px;
	border-bottom: 1px solid rgba( 195, 155, 76, 0.3 );
	color: var( --gold );
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.6;
	text-transform: uppercase;
}

/* .legal-body h2 (no font-weight in the prototype: the UA bold). */
.pitalua-legal__cuerpo h2 {
	margin: 36px 0 16px;
	padding-top: 20px;
	border-top: 1px solid var( --line );
	color: var( --plum );
	font-family: var( --serif );
	font-size: clamp( 1.35rem, 1.8vw, 1.65rem );
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.3;
}

/* .legal-body h2:first-of-type */
.pitalua-legal__cuerpo h2:first-of-type {
	margin-top: 10px;
	padding-top: 0;
	border-top: none;
}

/* .legal-body p */
.pitalua-legal__cuerpo p {
	margin: 0 0 18px;
	color: #453a44;
	font-size: clamp( 0.92rem, 1.04vw, 0.98rem );
	line-height: 1.82;
}

/* .legal-body ul */
.pitalua-legal__cuerpo ul {
	margin: 0 0 22px;
	padding-left: 24px;
}

/* .legal-body li */
.pitalua-legal__cuerpo li {
	margin-bottom: 10px;
	color: #453a44;
	font-size: 0.9rem;
	line-height: 1.75;
}

/* .legal-body strong */
.pitalua-legal__cuerpo strong {
	color: var( --plum );
	font-weight: 600;
}

/* .legal-body a */
.pitalua-legal__cuerpo a {
	color: var( --plum );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pitalua-legal__cuerpo a:hover {
	color: var( --gold );
}

/* .legal-callout */
.pitalua-legal__cuerpo .pitalua-legal__destacado {
	margin: 28px 0;
	padding: 22px 26px;
	border-left: 3px solid var( --plum );
	background: var( --ivory );
	color: var( --ink );
	font-size: 0.9rem;
	line-height: 1.75;
}

@media ( max-width: 640px ) {

	/* .container-narrow */
	.pitalua-legal__contenedor {
		width: min( calc( 100% - 32px ), var( --max ) );
	}
}

/* --- .cta: closing section of every page ------------------------------- */

.pitalua-cta {
	position: relative;
	overflow: hidden;
	padding: clamp( 76px, 8.5vw, 108px ) 0;
	background: var( --plum );
	color: var( --ivory );
}

/*
 * .cta-inner is a 1.25fr / .75fr grid whose second cell holds the monogram. Here the content
 * column is the container itself and the monogram is its ::after, placed where that cell is.
 */
.pitalua-cta > .pitalua-contenedor {
	--pitalua-cta-gap: clamp( 32px, 5vw, 60px );
	--pitalua-cta-monograma: clamp( 280px, 28vw, 420px );
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: min( 440px, var( --pitalua-cta-monograma ) * 1200 / 1085 );
}

.pitalua-cta > .pitalua-contenedor > * {
	max-width: calc( ( 100% - var( --pitalua-cta-gap ) ) * 0.625 );
}

.pitalua-cta > .pitalua-contenedor::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: var( --pitalua-cta-monograma );
	max-height: 440px;
	aspect-ratio: 1085 / 1200;
	background: url( "../img/decor/monograma-claro.webp" ) center / contain no-repeat;
	opacity: 0.18;
	transform: translateY( -50% );
	pointer-events: none;
}

/*
 * In the prototype the eyebrow is an inline span inside a block, so it sits on a 1.6 line box
 * of the parent's 16px font; here the flex column blockifies it. The margin restores that
 * line box's extra top space.
 */
.pitalua-cta .pitalua-eyebrow {
	margin-top: 5px;
}

.pitalua-cta h2 {
	margin: 16px 0 22px;
	font-size: clamp( 1.85rem, 2.6vw, 2.5rem );
	line-height: 1.22;
}

/* .cta-desc */
.pitalua-cta p:not( .pitalua-eyebrow ) {
	max-width: 620px;
	margin: 0 0 34px;
	color: #ede3dc;
	font-size: clamp( 0.94rem, 1.06vw, 1.02rem );
	line-height: 1.8;
}

@media ( max-width: 980px ) {

	.pitalua-cta > .pitalua-contenedor {
		min-height: 0;
	}

	.pitalua-cta > .pitalua-contenedor > * {
		max-width: none;
	}

	/* The grid collapses to one column: the monogram cell drops below the content. */
	.pitalua-cta > .pitalua-contenedor::after {
		position: static;
		align-self: flex-end;
		height: auto;
		/* The grid gap still applies between the rows (la-firma.html fixes it at 32px). */
		margin-top: var( --pitalua-cta-gap );
		transform: none;
	}
}

/* ============================================================== Header */

/* .header */
.pitalua-encabezado {
	position: fixed;
	top: var( --wp-admin--admin-bar--height, 0 );
	right: 0;
	left: 0;
	z-index: 30;
	border-bottom: 1px solid rgba( 249, 241, 233, 0.1 );
	background: rgba( 63, 30, 57, 0.95 );
	color: var( --ivory );
	-webkit-backdrop-filter: blur( 14px );
	backdrop-filter: blur( 14px );
	transition: 0.35s var( --ease );
}

/* On the front page the header starts transparent over the hero, as in index.html. */
.home .pitalua-encabezado:not( .is-scrolled ) {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.pitalua-encabezado.is-scrolled {
	background: rgba( 63, 30, 57, 0.95 );
	box-shadow: 0 12px 32px rgba( 31, 11, 28, 0.18 );
	-webkit-backdrop-filter: blur( 14px );
	backdrop-filter: blur( 14px );
}

/* .nav */
.pitalua-encabezado__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 82px;
}

/* .logo-wrap */
.pitalua-encabezado__marca {
	display: block;
	width: 205px;
}

.pitalua-encabezado__marca img {
	display: block;
	width: 100%;
	height: auto;
}

/* .links */
.pitalua-nav__lista {
	display: flex;
	align-items: center;
	gap: clamp( 14px, 1.6vw, 26px );
	margin: 0;
	padding: 0;
	color: var( --ivory );
	font-size: 0.67rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	list-style: none;
	text-transform: uppercase;
}

.pitalua-nav__lista a {
	position: relative;
	display: block;
	padding: 10px 0;
}

.pitalua-nav__lista a::after {
	content: "";
	position: absolute;
	right: 100%;
	bottom: 4px;
	left: 0;
	height: 1px;
	background: var( --gold );
	transition: 0.25s;
}

.pitalua-nav__lista a:hover::after,
.pitalua-nav__lista [aria-current="page"]::after,
.pitalua-nav__lista .current-page-ancestor > a::after {
	right: 0;
}

/* .links a.active: the current page, or its section on child pages (practice areas) */
.pitalua-nav__lista [aria-current="page"],
.pitalua-nav__lista .current-page-ancestor > a {
	color: #fff;
}

/* .menu */
.pitalua-encabezado__toggle {
	display: none;
	padding: 0;
	border: 0;
	background: none;
	color: var( --ivory );
	font-size: 1.45rem;
	cursor: pointer;
}

@media ( max-width: 980px ) {

	.pitalua-encabezado__barra {
		height: 74px;
	}

	.pitalua-encabezado--js .pitalua-encabezado__toggle {
		display: block;
	}

	/* .mobile-panel */
	.pitalua-encabezado--js .pitalua-encabezado__panel {
		position: fixed;
		top: calc( 74px + var( --wp-admin--admin-bar--height, 0px ) );
		right: 0;
		left: 0;
		bottom: 0;
		height: calc( 100vh - 74px );
		height: calc( 100dvh - 74px );
		z-index: 29;
		display: none;
		padding: 24px 20px 40px;
		border-top: 1px solid rgba( 249, 241, 233, 0.1 );
		background: #32152d;
		color: var( --ivory );
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		box-shadow: 0 24px 48px rgba( 0, 0, 0, 0.5 );
	}

	.pitalua-encabezado--abierto {
		background: #32152d !important;
	}

	.pitalua-encabezado--abierto .pitalua-encabezado__panel {
		display: block;
	}

	.pitalua-encabezado--js .pitalua-nav__lista {
		display: grid;
		gap: 8px;
		font-size: 0.76rem;
		letter-spacing: 0.12em;
	}

	.pitalua-encabezado--js .pitalua-nav__lista a {
		padding: 10px 0;
		border-bottom: 1px solid rgba( 249, 241, 233, 0.08 );
	}

	.pitalua-encabezado--js .pitalua-nav__lista a::after {
		display: none;
	}

	/* Without JavaScript the list stays visible, stacked under the logo. */
	.pitalua-encabezado:not( .pitalua-encabezado--js ) .pitalua-encabezado__barra {
		flex-wrap: wrap;
		height: auto;
		min-height: 74px;
	}
}

@media ( max-width: 640px ) {

	.pitalua-encabezado__barra {
		height: 68px;
	}

	.pitalua-encabezado--js .pitalua-encabezado__panel {
		top: calc( 68px + var( --wp-admin--admin-bar--height, 0px ) );
		height: calc( 100vh - 68px );
		height: calc( 100dvh - 68px );
	}

	.pitalua-encabezado__marca {
		width: 175px;
	}
}

/* ============================================================== Footer */

/* footer */
.pitalua-pie {
	position: relative;
	overflow: hidden;
	padding: 56px 0 28px;
	background: #32152d;
	color: #cdbbc7;
}

.pitalua-pie::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100px;
	background: url( "../img/decor/patron-ciruela.webp" ) center / 260px repeat;
	opacity: 0.12;
}

/* .footer-top */
.pitalua-pie__cuerpo {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.22fr 0.78fr 1.15fr 0.85fr;
	gap: clamp( 28px, 3vw, 48px );
	padding-bottom: 40px;
}

/* .footer-logo */
.pitalua-pie__marca img {
	display: block;
	width: 210px;
	height: auto;
	margin-bottom: 16px;
}

/* .footer-text */
.pitalua-pie__texto {
	max-width: 390px;
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.7;
}

/* .footer-title */
.pitalua-pie__titulo {
	margin: 0 0 16px;
	color: var( --gold );
	font-family: var( --sans );
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.6;
	text-transform: uppercase;
}

/* .footer-list */
.pitalua-pie__lista {
	display: grid;
	gap: 11px;
	margin: 0;
	padding: 0;
	font-size: 0.82rem;
	list-style: none;
}

.pitalua-pie__lista > li,
.pitalua-pie__lista > li > * {
	display: block;
}

.pitalua-pie__lista a {
	transition: color 0.2s var( --ease );
}

.pitalua-pie__lista a:hover {
	color: var( --gold );
}

/* The current legal document, highlighted inline in aviso-de-privacidad.html. */
.pitalua-pie__actual {
	color: var( --gold );
	font-weight: 600;
}

/* .footer-bottom */
.pitalua-pie__base {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding-top: 24px;
	border-top: 1px solid rgba( 249, 241, 233, 0.12 );
	color: #b29fa9;
	font-size: 0.66rem;
}

.pitalua-pie__base p {
	margin: 0;
}

@media ( max-width: 980px ) {

	.pitalua-pie__cuerpo {
		grid-template-columns: 1fr 1fr;
	}
}

@media ( max-width: 768px ) {

	.pitalua-pie {
		text-align: center;
	}

	.pitalua-pie__cuerpo {
		grid-template-columns: 1fr;
		gap: 36px;
		text-align: center;
	}

	.pitalua-pie__marca {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.pitalua-pie__marca img {
		margin-right: auto;
		margin-left: auto;
	}

	.pitalua-pie__texto {
		max-width: 440px;
		margin-right: auto;
		margin-left: auto;
		text-align: center;
	}

	.pitalua-pie__titulo {
		text-align: center;
	}

	.pitalua-pie__lista {
		justify-items: center;
		text-align: center;
	}

	.pitalua-pie__base {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		text-align: center;
	}

	.pitalua-pie__base p {
		text-align: center;
	}
}

@media ( max-width: 640px ) {

	.pitalua-contenedor {
		width: min( calc( 100% - 32px ), var( --max ) );
	}
}

/* --- Floating WhatsApp Button ------------------------------------------- */

.pitalua-whatsapp {
	position: fixed;
	right: 28px;
	bottom: 28px;
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 9999px;
	background: #25d366;
	color: #fff;
	box-shadow: var( --elevation-floating );
	transition: transform 0.3s var( --ease ), background-color 0.3s var( --ease );
}

.pitalua-whatsapp:hover {
	background: #20ba5a;
	color: #fff;
	transform: scale( 1.08 );
}

.pitalua-whatsapp:focus-visible {
	outline: 2px solid var( --gold );
	outline-offset: 3px;
}

.pitalua-whatsapp svg {
	display: block;
	width: 32px;
	height: 32px;
}

@media ( max-width: 640px ) {

	.pitalua-whatsapp {
		right: 20px;
		bottom: 20px;
		width: 50px;
		height: 50px;
	}

	.pitalua-whatsapp svg {
		width: 28px;
		height: 28px;
	}
}



/* ============================================================== Motion */

/* .reveal: hidden only once aparicion.js has run, so without JS the content is there. */
.pitalua-js-aparicion .pitalua-aparicion {
	opacity: 0;
	transform: translateY( 22px );
	transition: opacity 0.7s var( --ease ), transform 0.7s var( --ease );
}

.pitalua-js-aparicion .pitalua-aparicion.es-visible {
	opacity: 1;
	transform: none;
}

/*
 * The front page hero keeps .pitalua-aparicion in its saved content, but enters with the
 * hero sequence below instead: it is always on screen, so it must not wait for the script.
 */
.pitalua-js-aparicion .pitalua-inicio-hero .pitalua-aparicion {
	opacity: 1;
	transform: none;
	transition: none;
}

/*
 * Hero entrance: each piece of the hero rises into place in document order, from the first
 * paint and without JavaScript. Hung from .pitalua-pagina (the templates' main) so the hero
 * stays still in the block editor, which loads this stylesheet too. The h1 goes second, at
 * 90ms, because it is the likely LCP element.
 */
@media ( prefers-reduced-motion: no-preference ) {

	@keyframes pitalua-entrada {

		from {
			opacity: 0;
			transform: translateY( 14px );
		}
	}

	.pitalua-pagina :is( .pitalua-page-hero > .pitalua-contenedor, .pitalua-inicio-hero__texto, .single-hero .container ) > *,
	.pitalua-pagina .pitalua-inicio-hero__lateral {
		animation: pitalua-entrada 0.8s var( --ease ) calc( var( --pitalua-entrada-orden, 0 ) * 90ms ) backwards;
	}

	.pitalua-pagina :is( .pitalua-page-hero > .pitalua-contenedor, .pitalua-inicio-hero__texto, .single-hero .container ) > :nth-child( 2 ) {
		--pitalua-entrada-orden: 1;
	}

	.pitalua-pagina :is( .pitalua-page-hero > .pitalua-contenedor, .pitalua-inicio-hero__texto, .single-hero .container ) > :nth-child( 3 ) {
		--pitalua-entrada-orden: 2;
	}

	.pitalua-pagina :is( .pitalua-page-hero > .pitalua-contenedor, .pitalua-inicio-hero__texto, .single-hero .container ) > :nth-child( n + 4 ) {
		--pitalua-entrada-orden: 3;
	}

	/* After the four pieces of the text column. */
	.pitalua-pagina .pitalua-inicio-hero__lateral {
		--pitalua-entrada-orden: 4;
	}
}

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

	html {
		scroll-behavior: auto;
	}

	.pitalua-aparicion,
	.pitalua-js-aparicion .pitalua-aparicion {
		opacity: 1;
		transform: none;
		transition: none;
	}
}