/* ==========================================================================
   PI Theme — main.css
   Orden: 1 reset · 2 base · 3 layout · 4 tipografía de sección · 5 botones
          6 header · 7 secciones · 8 blog · 9 Gutenberg · 10 CF7
          11 flotantes · 12 footer · 13 utilidades · 14 responsive · 15 print
   ========================================================================== */

/* ==========================================================================
   1. Reset
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* clip y no hidden: recorta el drawer cerrado (translateX(100%)) sin
	   crear un contenedor de scroll, así position:sticky sigue funcionando. */
	overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	font-family: var(--pi-font-body);
	font-size: var(--pi-body);
	line-height: var(--pi-lh-body);
	color: var(--pi-text);
	background: var(--pi-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
picture,
video,
svg { max-width: 100%; height: auto; display: block; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

a { color: var(--pi-primary); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--pi-accent); }

/* Foco visible y consistente en todo el sitio */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--pi-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ==========================================================================
   2. Base tipográfica
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--pi-font-display);
	font-weight: 500;
	line-height: var(--pi-lh-display);
	color: var(--pi-ink);
	margin: 0 0 0.5em;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

h1 { font-size: var(--pi-h1); letter-spacing: -0.025em; }
h2 { font-size: var(--pi-h2); letter-spacing: -0.022em; }
h3 { font-size: var(--pi-h3); }
h4 { font-size: var(--pi-h4); }
h5 { font-size: var(--pi-h5); }
h6 { font-size: var(--pi-h6); }

p { margin: 0 0 1.25em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; color: var(--pi-ink); }

blockquote {
	margin: 2em 0;
	padding: 0 0 0 1.5em;
	border-left: 3px solid var(--pi-primary);
	font-family: var(--pi-font-display);
	font-size: var(--pi-lead);
	line-height: 1.45;
	color: var(--pi-ink);
}

ul, ol { margin: 0 0 1.25em; padding-left: 1.35em; }
li { margin-bottom: 0.4em; }

hr { border: 0; border-top: 1px solid var(--pi-border); margin: var(--pi-section-y-sm) 0; }

table { width: 100%; border-collapse: collapse; margin-bottom: 1.5em; }
th, td { padding: 0.75em 1em; border-bottom: 1px solid var(--pi-border); text-align: left; }
th { font-weight: 600; color: var(--pi-ink); }

code, pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}
code { background: var(--pi-surface); padding: 0.15em 0.4em; }
pre { background: var(--pi-ink); color: var(--pi-on-dark); padding: 1.25em; overflow-x: auto; }
pre code { background: none; padding: 0; }

/* ==========================================================================
   3. Layout
   ========================================================================== */

.pi-container {
	width: 100%;
	max-width: calc(var(--pi-page-width) + var(--pi-gutter-lg) * 2);
	margin-inline: auto;
	padding-inline: var(--pi-gutter);
}

.pi-container--narrow { max-width: calc(var(--pi-narrow-width) + var(--pi-gutter-lg) * 2); }

@media (min-width: 768px) {
	.pi-container { padding-inline: var(--pi-gutter-lg); }
}

.pi-section { padding-block: var(--pi-section-y); position: relative; }
.pi-section--tight { padding-block: var(--pi-section-y-sm); }
.pi-section--surface { background: var(--pi-surface); }
.pi-section--tinted { background: var(--pi-primary-050); }

.pi-section--dark {
	background: var(--pi-ink);
	color: var(--pi-on-dark-muted);
}
.pi-section--dark h1,
.pi-section--dark h2,
.pi-section--dark h3,
.pi-section--dark h4,
.pi-section--dark h5,
.pi-section--dark h6,
.pi-section--dark strong { color: var(--pi-white); }

/* Los ítems de grilla traen min-width:auto, así que cualquier contenido que
   no pueda encogerse (una URL larga, un badge sin wrap) estira el track y
   desborda el layout. Este guard lo evita en todas las grillas del theme. */
.pi-grid > *,
.pi-valor__layout > *,
.pi-lugar__layout > *,
.pi-entradas__layout > *,
.pi-agenda__layout > *,
.pi-corp__layout > *,
.pi-eje > *,
.pi-oradores__grid > *,
.pi-galeria > *,
.pi-stats > *,
.pi-posts > *,
.pi-post-nav > *,
.pi-footer__main > *,
.pi-section-head--split > * { min-width: 0; }

.pi-grid { display: grid; gap: var(--pi-grid-gap); }
.pi-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pi-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pi-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Salto de línea de página completa dentro de un contenedor */
.pi-fullbleed {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--pi-primary);
	color: #fff;
	padding: 0.75em 1.25em;
	text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

/* ==========================================================================
   4. Encabezados de sección
   ========================================================================== */

.pi-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	font-family: var(--pi-font-body);
	font-size: var(--pi-eyebrow);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pi-secondary);
	margin: 0 0 1.1em;
}
.pi-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--pi-primary);
	flex: none;
}
.pi-section--dark .pi-eyebrow { color: var(--pi-secondary-300); }
.pi-section--dark .pi-eyebrow::before { background: var(--pi-secondary-300); }

.pi-section-head { max-width: 46rem; margin-bottom: clamp(36px, 4vw, 64px); }
.pi-section-head--center { margin-inline: auto; text-align: center; }
.pi-section-head--center .pi-eyebrow::before { display: none; }
.pi-section-head > h2 { margin-bottom: 0.35em; }

.pi-lead {
	font-size: var(--pi-lead);
	line-height: 1.5;
	color: var(--pi-text);
}
.pi-section--dark .pi-lead { color: var(--pi-on-dark-muted); }

/* Cabecera de sección con título a la izquierda y texto a la derecha */
.pi-section-head--split {
	max-width: none;
	display: grid;
	gap: var(--pi-grid-gap);
	align-items: end;
}
@media (min-width: 1024px) {
	.pi-section-head--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

/* El lead de Ejes temáticos va un escalón más grande que el resto de los leads:
   el cliente lo pidió agrandado y acá el texto compite con un h2 al lado, no
   debajo. Va scopeado a #ejes para no arrastrar los leads de las otras
   secciones, que están bien como están. */
#ejes .pi-section-head .pi-lead { font-size: var(--pi-h5); }

/* ==========================================================================
   5. Botones
   ========================================================================== */

.pi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	font-family: var(--pi-font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	padding: 1rem 2.25rem;
	border: 1px solid transparent;
	border-radius: var(--pi-radius-pill);
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--pi-dur) var(--pi-ease),
	            color var(--pi-dur) var(--pi-ease),
	            border-color var(--pi-dur) var(--pi-ease),
	            transform var(--pi-dur) var(--pi-ease);
}
.pi-btn:hover { transform: translateY(-2px); }
.pi-btn:active { transform: translateY(0); }

.pi-btn--primary { background: var(--pi-primary); color: #fff; }
.pi-btn--primary:hover { background: var(--pi-accent); color: #fff; }

.pi-btn--outline {
	background: transparent;
	color: var(--pi-primary);
	border-color: var(--pi-primary);
}
.pi-btn--outline:hover { background: var(--pi-primary); color: #fff; }

.pi-btn--light { background: #fff; color: var(--pi-primary); }
.pi-btn--light:hover { background: var(--pi-primary-100); color: var(--pi-primary-900); }

.pi-btn--on-dark {
	background: transparent;
	color: #fff;
	border-color: var(--pi-on-dark-border);
}
.pi-btn--on-dark:hover { background: #fff; color: var(--pi-ink); border-color: #fff; }

.pi-btn--sm { padding: 0.7rem 1.5rem; font-size: 0.9375rem; }
.pi-btn--block { display: flex; width: 100%; }

.pi-btn__icon { width: 1.1em; height: 1.1em; flex: none; }

/* Enlace con flecha */
.pi-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 600;
	text-decoration: none;
	color: var(--pi-primary);
}
.pi-link-arrow svg { transition: transform var(--pi-dur) var(--pi-ease); }
.pi-link-arrow:hover svg { transform: translateX(4px); }

/* ==========================================================================
   6. Header
   ========================================================================== */

.pi-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: var(--pi-z-header);
	background: transparent;
	transition: background-color var(--pi-dur) var(--pi-ease),
	            box-shadow var(--pi-dur) var(--pi-ease);
}

/* Estado sólido: al hacer scroll, o cuando la página no tiene hero oscuro */
.pi-header.is-solid,
body:not(.pi-has-hero) .pi-header {
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: saturate(1.6) blur(12px);
	box-shadow: 0 1px 0 var(--pi-border);
}

.pi-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pi-grid-gap);
	min-height: 76px;
	padding-block: 0.75rem;
}

.pi-brand { display: flex; align-items: center; text-decoration: none; flex: none; }
/* Los archivos del logo están recortados al dibujo, sin el marco que traía el
   original: el alto que pide el CSS es el alto real del logo, no el de una caja
   con aire alrededor. Por eso el número acá rinde bastante más que en la
   versión vieja del archivo, donde el dibujo ocupaba el 78% del alto.
   El logo es 4,1:1, así que 46px de alto son ~187px de ancho. Verificado sobre
   el sitio: entra en la barra de 76px y ningún ítem del menú se parte en dos
   líneas. Solo aplica a desktop; abajo de 1024px manda la regla del media query.

   Si hay que volver a bajarlo, el piso útil es ~32px: por debajo la bajada
   "Una nueva oportunidad" deja de leerse.

   OJO si esto "no hace nada": el CSS adicional del Customizer se imprime inline
   después de esta hoja y con estos mismos selectores, así que le gana. Ya pasó
   una vez —un `height: 100px` cargado ahí—. Antes de tocar este número,
   verificá Apariencia → Personalizar → CSS adicional. */
.pi-brand img,
.pi-brand .custom-logo { height: 46px; width: auto; }

/* Cuatro variantes del logo, generadas del mismo original: horizontal a color y
   en blanco, e isotipo a color y en blanco.

   Son cuatro ARCHIVOS y no un filtro CSS sobre uno solo. El filtro se veía más
   limpio, pero el original traía un perfil ICC embebido y varios decodificadores
   de WebP, ante eso, componen la imagen sobre blanco: el logo aparecía como un
   cuadrado blanco en el header y en el footer. Los archivos se reexportaron sin
   ICC y la versión blanca se calcula al generarlos, no en el navegador. */
.pi-brand__mark--light,
.pi-brand__iso {
	display: none;
}

/* Sobre el hero oscuro, la versión blanca. */
body.pi-has-hero .pi-header:not(.is-solid) .pi-brand__mark--dark { display: none; }
body.pi-has-hero .pi-header:not(.is-solid) .pi-brand__mark--light { display: block; }

.pi-brand__text {
	font-family: var(--pi-font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--pi-ink);
	letter-spacing: -0.02em;
}
body.pi-has-hero .pi-header:not(.is-solid) .pi-brand__text { color: #fff; }

/* --- Navegación desktop --- */
.pi-nav { display: none; }

.pi-nav ul {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2vw, 34px);
	list-style: none;
	margin: 0;
	padding: 0;
}
.pi-nav li { margin: 0; }

.pi-nav a {
	position: relative;
	display: block;
	padding: 0.4em 0;
	font-size: 1rem;
	font-weight: 500;
	color: var(--pi-ink);
	text-decoration: none;
	transition: color var(--pi-dur) var(--pi-ease);
}
.pi-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--pi-primary);
	transition: width var(--pi-dur) var(--pi-ease);
}
.pi-nav a:hover::after,
.pi-nav .is-current > a::after,
.pi-nav .current-menu-item > a::after { width: 100%; }

body.pi-has-hero .pi-header:not(.is-solid) .pi-nav a { color: rgba(255, 255, 255, 0.92); }
body.pi-has-hero .pi-header:not(.is-solid) .pi-nav a::after { background: #fff; }

.pi-header__actions { display: flex; align-items: center; gap: 0.75rem; }

/* --- Botón hamburguesa --- */
.pi-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 10px;
	background: none;
	border: 0;
}
/* Las barras llevan clase propia: un selector `.pi-burger span` también
   alcanzaría al <span class="screen-reader-text"> del botón y lo estiraría
   a 100%, rompiendo el ancho de la página en mobile. */
.pi-burger__bar {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--pi-ink);
	transition: transform var(--pi-dur) var(--pi-ease),
	            opacity var(--pi-dur) var(--pi-ease);
}
body.pi-has-hero .pi-header:not(.is-solid) .pi-burger__bar { background: #fff; }
.pi-burger[aria-expanded="true"] .pi-burger__bar { background: var(--pi-ink); }
.pi-burger[aria-expanded="true"] .pi-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pi-burger[aria-expanded="true"] .pi-burger__bar:nth-child(2) { opacity: 0; }
.pi-burger[aria-expanded="true"] .pi-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Drawer mobile ---
   Ocupa la pantalla completa (`inset: 0`, sin ancho máximo): un panel a medias
   deja ver el contenido de atrás y compite con el menú por la atención.

   La animación combina desplazamiento y opacidad, y los ítems entran
   escalonados detrás del panel. El escalonado no es decoración: le da al ojo un
   orden de lectura en lugar de aparecer todo de golpe. */
.pi-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--pi-z-drawer);
	display: grid;
	grid-template-rows: auto 1fr;
	background: var(--pi-white);
	transform: translateX(100%);
	opacity: 0;
	visibility: hidden;
	transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
	            opacity 0.28s ease,
	            visibility 0.42s;
}
.pi-drawer.is-open {
	transform: translateX(0);
	opacity: 1;
	visibility: visible;
}

/* Entrada escalonada de los ítems del menú. */
.pi-drawer nav li,
.pi-drawer__meta,
.pi-drawer .pi-btn {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pi-drawer.is-open nav li,
.pi-drawer.is-open .pi-drawer__meta,
.pi-drawer.is-open .pi-btn {
	opacity: 1;
	transform: none;
}
.pi-drawer.is-open nav li:nth-child(1) { transition-delay: 0.10s; }
.pi-drawer.is-open nav li:nth-child(2) { transition-delay: 0.15s; }
.pi-drawer.is-open nav li:nth-child(3) { transition-delay: 0.20s; }
.pi-drawer.is-open nav li:nth-child(4) { transition-delay: 0.25s; }
.pi-drawer.is-open nav li:nth-child(5) { transition-delay: 0.30s; }
.pi-drawer.is-open nav li:nth-child(6) { transition-delay: 0.35s; }
.pi-drawer.is-open nav li:nth-child(n + 7) { transition-delay: 0.40s; }
.pi-drawer.is-open .pi-btn { transition-delay: 0.42s; }
.pi-drawer.is-open .pi-drawer__meta { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
	.pi-drawer,
	.pi-drawer nav li,
	.pi-drawer__meta,
	.pi-drawer .pi-btn {
		transition-duration: 0.01ms;
		transition-delay: 0ms;
	}
}

.pi-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 62px;
	padding-block: 0.75rem;
	border-bottom: 1px solid var(--pi-border);
}

/* El botón de cerrar siempre es una X, esté como esté el `aria-expanded`. Las
   barras las dibuja `.pi-burger__bar`; sin esa clase el botón se ve vacío. */
.pi-drawer__close .pi-burger__bar { background: var(--pi-ink); }
.pi-drawer__close .pi-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pi-drawer__close .pi-burger__bar:nth-child(2) { opacity: 0; }
.pi-drawer__close .pi-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.pi-drawer__head .pi-brand img { height: 34px; }

.pi-drawer__body {
	overflow-y: auto;
	padding-block: 2rem 3rem;
	display: flex;
	flex-direction: column;
}

.pi-drawer nav ul { list-style: none; margin: 0 0 2rem; padding: 0; }
.pi-drawer nav li { margin: 0; border-bottom: 1px solid var(--pi-border); }
.pi-drawer nav a {
	display: block;
	padding: 1rem 0;
	font-family: var(--pi-font-display);
	font-size: 1.375rem;
	font-weight: 500;
	color: var(--pi-ink);
	text-decoration: none;
}
.pi-drawer nav a:hover { color: var(--pi-primary); }

.pi-drawer__meta { margin-top: auto; font-size: var(--pi-small); color: var(--pi-muted); }
.pi-drawer__meta a { color: var(--pi-primary); }

body.pi-drawer-open { overflow: hidden; }

@media (min-width: 1024px) {
	.pi-nav { display: block; }
	.pi-burger { display: none; }
}

/* ==========================================================================
   7. Secciones de la landing
   ========================================================================== */

/* --- 7.1 Hero --------------------------------------------------------- */

.pi-hero {
	position: relative;
	/* Columna: el contenido empuja hacia abajo y el riel de anclas queda al
	   pie ocupando el ancho completo. */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: min(100svh, 940px);
	padding-top: 140px;
	padding-bottom: 0;
	color: #fff;
	background: var(--pi-ink);
	overflow: hidden;
}

/* El <strong> global es tinta oscura; sobre el hero tiene que ser blanco. */
.pi-hero strong { color: #fff; }

.pi-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.pi-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}
.pi-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(13, 16, 23, 0.94) 0%, rgba(13, 16, 23, 0.62) 42%, rgba(13, 16, 23, 0.30) 72%, rgba(13, 16, 23, 0.55) 100%),
		linear-gradient(to right, rgba(51, 50, 125, 0.42) 0%, rgba(51, 50, 125, 0) 62%);
}

/* --- Mapa de Córdoba ---------------------------------------------------
   Va después de .pi-hero__media en el DOM y comparte su z-index: 0. Así queda
   POR ENCIMA del degradado que oscurece la foto —abajo se lo comería— y por
   debajo de .pi-hero__inner, que es z-index 1 y tiene que ganar siempre: el
   titular no negocia legibilidad con un elemento decorativo.

   El tamaño bajó a la mitad en la 1.11.0. A 520px competía con el titular por
   la atención en vez de acompañarlo: es un elemento decorativo y tiene que
   pesar como tal.

   Y desde que es chico dejó de salirse por el borde. Recortado contra el
   margen se leía como textura cuando ocupaba media pantalla; a este tamaño
   solo parecía mal puesto. Ahora respeta el mismo margen lateral que el
   contenido —`clamp(24px, 5vw, 72px)` acompaña al padding del contenedor— y
   queda alineado con la columna de texto en vez de pegado al filo. */
.pi-hero__mapa {
	position: absolute;
	z-index: 0;
	top: 50%;
	right: clamp(24px, 5vw, 72px);
	width: clamp(150px, 17vw, 260px);
	transform: translateY(-50%);
	color: var(--pi-secondary-300);
	pointer-events: none;
	/* La foto del hero va de cielo claro arriba a silueta negra abajo, y un
	   trazo de un solo color no puede leerse bien en las dos mitades. La
	   sombra le da el borde que le falta contra el cielo, y contra la silueta
	   no se nota. */
	filter: drop-shadow(0 1px 2px rgba(13, 16, 23, 0.55));
}

.pi-hero__mapa-svg {
	display: block;
	width: 100%;
	height: auto;
	/* Los trazos de los departamentos del borde se salen del viewBox. */
	overflow: visible;
}

.pi-hero__mapa-svg path {
	fill: none;
	stroke: currentColor;
	/* `non-scaling-stroke` mantiene el grosor en píxeles aunque el SVG escale,
	   así que al achicar el mapa a la mitad los 27 departamentos quedaban
	   apretados contra trazos del mismo grosor y el dibujo se empastaba. Un
	   trazo más fino y un poco más de opacidad: mismo peso visual, contornos
	   que se siguen distinguiendo. */
	stroke-width: 1;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	opacity: 0.62;

	/* `pathLength="1"` en el markup normaliza todos los contornos, así que
	   este 1 vale igual para el departamento más grande y el más chico: todos
	   tardan lo mismo en dibujarse. Sin eso, Pocho tarda el triple que
	   Capital y el dibujado se ve desparejo. */
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: pi-mapa-trazo 1.4s cubic-bezier(0.55, 0.15, 0.3, 1) forwards;
	animation-delay: calc(var(--i) * 35ms);
}

@keyframes pi-mapa-trazo {
	to { stroke-dashoffset: 0; }
}

.pi-hero__inner { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(40px, 5vw, 72px); }

.pi-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 1.75rem;
}

.pi-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.5em 1.1em;
	border: 1px solid var(--pi-on-dark-border);
	border-radius: var(--pi-radius-pill);
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(8px);
	font-size: var(--pi-small);
	font-weight: 500;
	color: #fff;
	white-space: nowrap;
}
.pi-badge svg { width: 1em; height: 1em; flex: none; opacity: 0.85; }

.pi-badge--solid {
	background: var(--pi-primary);
	border-color: var(--pi-primary);
}

.pi-hero h1 {
	color: #fff;
	max-width: 16ch;
	margin-bottom: 0.4em;
}

.pi-hero__sub {
	font-family: var(--pi-font-display);
	font-size: var(--pi-h5);
	font-weight: 400;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.88);
	max-width: 34ch;
	margin: 0 0 2rem;
}

.pi-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-bottom: 0.9rem;
}

.pi-hero__note {
	font-size: var(--pi-small);
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
}

/* Riel de anclas a los ejes temáticos, al pie del hero */
.pi-hero__rail {
	position: relative;
	z-index: 1;
	border-top: 1px solid var(--pi-on-dark-border);
	background: rgba(13, 16, 23, 0.42);
	backdrop-filter: blur(10px);
}
.pi-hero__rail ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
.pi-hero__rail li { margin: 0; flex: 1 1 auto; }
.pi-hero__rail li + li { border-left: 1px solid var(--pi-on-dark-border); }
.pi-hero__rail a {
	display: flex;
	align-items: center;
	gap: 0.7em;
	padding: 1.15rem 1.35rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--pi-dur) var(--pi-ease), color var(--pi-dur) var(--pi-ease);
}
.pi-hero__rail a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.pi-hero__rail .pi-num {
	font-family: var(--pi-font-display);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--pi-secondary-300);
}

/* --- 7.2 Propuesta de valor ------------------------------------------- */

.pi-valor__layout {
	display: grid;
	gap: clamp(36px, 5vw, 72px);
	align-items: center;
}
@media (min-width: 1024px) {
	.pi-valor__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

.pi-valor__media { position: relative; }
.pi-valor__media img { width: 100%; }

/* Placa índigo que sobresale de la imagen */
.pi-valor__plaque {
	background: var(--pi-primary-100);
	color: var(--pi-primary);
	padding: 1.5rem 1.75rem;
	max-width: 340px;
}
@media (min-width: 768px) {
	.pi-valor__plaque {
		position: absolute;
		right: -24px;
		bottom: -32px;
	}
}
.pi-valor__plaque .pi-plaque__title {
	display: block;
	font-family: var(--pi-font-display);
	font-size: var(--pi-h6);
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 0.9em;
}
.pi-valor__plaque p { font-size: var(--pi-small); color: rgba(255, 255, 255, 0.85); margin: 0; }

/* Las dos modalidades: icono a la izquierda, texto colgando de una sangría
   fija para que las dos líneas arranquen alineadas aunque el texto varíe. */
.pi-plaque__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.pi-plaque__list li {
	margin: 0;
	padding-left: 1.75rem;
	position: relative;
	font-size: var(--pi-small);
	line-height: 1.45;
	/*color: rgba(255, 255, 255, 0.9);*/
}
.pi-plaque__list svg {
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 16px;
	height: 16px;
	color: #33327D;
}
/* La regla global `strong, b { color: var(--pi-ink) }` de la línea 93 pinta de
   tinta oscura cualquier <strong>, y acá el fondo es índigo. Se cubre toda la
   placa de una —el título también es un <strong>— en vez de ir parche por
   parche. */
.pi-valor__plaque strong { color: #33327D; }

/* Lista de ideas fuerza */
.pi-features { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 600px) { .pi-features { grid-template-columns: 1fr 1fr; gap: 1.75rem var(--pi-grid-gap); } }

.pi-features li { margin: 0; padding-left: 3.25rem; position: relative; }
.pi-features__icon {
	position: absolute;
	left: 0;
	top: 2px;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	background: var(--pi-primary-100);
	color: var(--pi-primary);
}
.pi-features__icon svg { width: 18px; height: 18px; }
.pi-features h4 { font-size: var(--pi-h6); margin-bottom: 0.25em; }
.pi-features p { font-size: var(--pi-small); margin: 0; }

/* Encabezado que agrupa las tarjetas. Existe desde que las tres primeras
   dejaron de ser ideas sueltas y pasaron a ser los ejes de trabajo: sin un
   título arriba, la enumeración quedaba sin sujeto. */
.pi-features__head { font-size: var(--pi-h5); margin: 2.25rem 0 0; }
.pi-features__head + .pi-features { margin-top: 1.25rem; }

/* --- 7.3 Ejes temáticos (cards numeradas) ------------------------------ */

/* Tres columnas en desktop, una debajo de otra en mobile.

   Antes era una fila por eje con la imagen alternando de lado. Se leía bien,
   pero los tres paneles ocupaban tres pantallas de scroll y dejaban la sección
   llena de aire. Como card entran los tres juntos y se comparan de un vistazo,
   que es a lo que alguien viene a esta sección: elegir a cuál panel le
   interesa ir. */
.pi-ejes__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pi-grid-gap);
}

/* Dos columnas antes que tres: a 720px, tres cards dejan los títulos partidos
   en cuatro líneas. */
@media (min-width: 720px) {
	.pi-ejes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	.pi-ejes__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pi-eje {
	display: flex;
	flex-direction: column;
	background: var(--pi-white);
	border: 1px solid var(--pi-border);
	transition:
		border-color 0.3s var(--pi-ease),
		box-shadow 0.3s var(--pi-ease),
		transform 0.3s var(--pi-ease);
}

.pi-eje:hover {
	border-color: var(--pi-primary-300);
	box-shadow: var(--pi-shadow-md);
	transform: translateY(-4px);
}

/* La proporción la fija la card, no la imagen: las tres tienen que recortar
   igual para que la grilla no quede escalonada. */
.pi-eje__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.pi-eje__media picture { display: block; height: 100%; }
.pi-eje__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--pi-ease);
}
.pi-eje:hover .pi-eje__media img { transform: scale(1.04); }

.pi-eje__num {
	position: absolute;
	top: 0;
	left: 0;
	background: var(--pi-primary);
	color: #fff;
	font-family: var(--pi-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.7rem 1.1rem;
	line-height: 1;
}

/* Flex en columna para que las chips queden pegadas al pie de la card con
   `margin-top: auto`. El panel 1 no tiene chips: sin esto, las de los otros
   dos quedarían a distinta altura y la fila se vería desprolija. */
.pi-eje__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: clamp(1.25rem, 2vw, 1.75rem);
}
.pi-eje__kicker {
	font-size: var(--pi-eyebrow);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pi-secondary);
	margin-bottom: 0.9em;
}
.pi-eje__body h3 {
	/* Un escalón menos que en el layout de dos columnas: en una card de un
	   tercio de ancho, el h3 original partía los títulos en cuatro líneas. */
	font-size: var(--pi-h5);
	margin-bottom: 0.4em;
}
.pi-eje__body > p:last-of-type { margin-bottom: 0; }

/* --- 7.4 Agenda / timeline --------------------------------------------- */

.pi-agenda__layout { display: grid; gap: clamp(36px, 5vw, 72px); align-items: start; }
@media (min-width: 1024px) {
	.pi-agenda__layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.pi-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.pi-timeline::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 12px;
	bottom: 12px;
	width: 1px;
	background: var(--pi-border);
}

.pi-timeline li {
	position: relative;
	margin: 0;
	padding: 0 0 2rem 2.5rem;
}
.pi-timeline li:last-child { padding-bottom: 0; }

.pi-timeline li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--pi-white);
	border: 2px solid var(--pi-secondary-300);
	transition: border-color var(--pi-dur) var(--pi-ease), background-color var(--pi-dur) var(--pi-ease);
}
.pi-timeline li.is-key::before { background: var(--pi-primary); border-color: var(--pi-primary); }

.pi-timeline__time {
	display: block;
	font-family: var(--pi-font-display);
	font-size: var(--pi-h6);
	font-weight: 700;
	color: var(--pi-primary);
	letter-spacing: 0.01em;
	margin-bottom: 0.1em;
}
.pi-timeline__title {
	display: block;
	font-family: var(--pi-font-display);
	font-size: var(--pi-h5);
	font-weight: 500;
	color: var(--pi-ink);
	line-height: 1.2;
	margin-bottom: 0.25em;
}
.pi-timeline p { font-size: var(--pi-small); margin: 0; }

.pi-agenda__aside { position: relative; }
.pi-agenda__aside img { width: 100%; margin-bottom: var(--pi-grid-gap); }

.pi-note {
	border-left: 3px solid var(--pi-primary);
	background: var(--pi-primary-050);
	padding: 1.25rem 1.5rem;
	font-size: var(--pi-small);
}
.pi-note p { margin: 0; }
.pi-note strong { display: block; margin-bottom: 0.3em; }

/* --- 7.5 Oradores ------------------------------------------------------ */

.pi-oradores__grid { display: grid; gap: var(--pi-grid-gap); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .pi-oradores__grid { grid-template-columns: repeat(4, 1fr); } }

.pi-orador { text-align: center; }

.pi-orador__photo {
	position: relative;
	aspect-ratio: 3 / 4;
	background: var(--pi-surface);
	border: 1px solid var(--pi-border);
	display: grid;
	place-items: center;
	margin-bottom: 1rem;
	overflow: hidden;
}
.pi-orador__photo img { width: 100%; height: 100%; object-fit: cover; }

.pi-orador h3 { font-size: var(--pi-h6); margin-bottom: 0.15em; }
.pi-orador p { font-size: var(--pi-small); color: var(--pi-muted); margin: 0; }

/* --- Orador todavía sin confirmar ---------------------------------------
   Hasta la 1.10.0 esto era un recuadro punteado con un cartel de PENDIENTE
   adentro: le contaba al visitante que la página está a medio hacer. El dato
   es el mismo —todavía no hay nombres— pero dicho como anticipo: fondo con el
   índigo de la marca, el número del lugar reservado en grande y muy tenue,
   la silueta como marca de agua y un barrido de luz que insinúa que ahí va a
   aparecer alguien. */
.pi-orador--proximo .pi-orador__photo {
	/* Un poco menos alta que la card con foto: sin retrato adentro, el 3/4
	   dejaba un rectángulo enorme con un ícono chiquito flotando al medio. */
	aspect-ratio: 4 / 5;
	background:
		radial-gradient(120% 85% at 50% 0%, var(--pi-primary-100) 0%, rgba(230, 230, 242, 0) 64%),
		linear-gradient(168deg, var(--pi-primary-050) 0%, var(--pi-surface) 100%);
	border-color: var(--pi-primary-100);
}

/* Abajo a la derecha y saliéndose por el borde, no centrado: centrado quedaba
   justo abajo de la silueta y las dos formas se comían entre sí. */
.pi-orador__num {
	position: absolute;
	right: 0.12em;
	bottom: -0.24em;
	font-family: var(--pi-font-display);
	font-size: clamp(3.5rem, 7vw, 5.25rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.05em;
	color: var(--pi-primary);
	opacity: 0.09;
}

.pi-orador__silueta {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 86px;
	height: 86px;
	border-radius: var(--pi-radius-pill);
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid var(--pi-primary-100);
	color: var(--pi-primary-300);
	box-shadow: var(--pi-shadow-sm);
}
.pi-orador__silueta svg { width: 38px; height: 38px; }

/* El barrido va en un pseudo-elemento propio, y no como background animado de
   la card, para que `prefers-reduced-motion` lo apague con una sola regla. */
.pi-orador--proximo .pi-orador__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(105deg, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 56%);
	transform: translateX(-130%);
	animation: pi-orador-brillo 5s var(--pi-ease) infinite;
}

/* Escalonado por posición en la grilla: las cuatro cards son idénticas y un
   barrido sincronizado se lee como un parpadeo de la página entera. */
.pi-oradores__grid > :nth-child(2) .pi-orador__photo::after { animation-delay: 0.5s; }
.pi-oradores__grid > :nth-child(3) .pi-orador__photo::after { animation-delay: 1s; }
.pi-oradores__grid > :nth-child(4) .pi-orador__photo::after { animation-delay: 1.5s; }

@keyframes pi-orador-brillo {
	0%        { transform: translateX(-130%); }
	55%, 100% { transform: translateX(130%); }
}

/* Más específico que `.pi-orador p`, que pinta el cargo del orador. */
.pi-orador .pi-orador__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	margin: 0;
	padding: 0.45em 1.05em;
	border: 1px solid var(--pi-primary-100);
	border-radius: var(--pi-radius-pill);
	background: var(--pi-primary-050);
	color: var(--pi-primary-700);
	font-size: var(--pi-eyebrow);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.pi-orador__punto {
	width: 6px;
	height: 6px;
	border-radius: var(--pi-radius-pill);
	background: var(--pi-accent);
	animation: pi-orador-latido 2.4s ease-in-out infinite;
}

@keyframes pi-orador-latido {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.3; transform: scale(0.7); }
}

.pi-aval {
	margin-top: clamp(36px, 4vw, 56px);
	padding-top: clamp(28px, 3vw, 40px);
	border-top: 1px solid var(--pi-border);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1.5rem;
	text-align: center;
	font-size: var(--pi-small);
	color: var(--pi-muted);
}

/* --- 7.6 Lugar --------------------------------------------------------- */

.pi-lugar__layout { display: grid; gap: clamp(36px, 5vw, 64px); align-items: start; }
@media (min-width: 1024px) { .pi-lugar__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }

.pi-datalist { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--pi-border); }
.pi-datalist li {
	margin: 0;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--pi-border);
	display: grid;
	gap: 0.15rem 1.5rem;
}
@media (min-width: 600px) { .pi-datalist li { grid-template-columns: 9.5rem 1fr; align-items: baseline; } }

.pi-datalist dt,
.pi-datalist__label {
	font-size: var(--pi-eyebrow);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pi-secondary);
}
.pi-datalist__value { color: var(--pi-ink); }
.pi-datalist__value strong { font-weight: 600; }

.pi-map {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--pi-surface);
	border: 1px solid var(--pi-border);
	overflow: hidden;
}
.pi-map iframe { width: 100%; height: 100%; border: 0; display: block; }

.pi-placeholder {
	display: grid;
	place-items: center;
	gap: 0.75rem;
	height: 100%;
	padding: 2rem;
	text-align: center;
	background: var(--pi-surface);
	border: 1px dashed var(--pi-secondary-300);
	color: var(--pi-secondary);
	font-size: var(--pi-small);
}
.pi-placeholder svg { width: 34px; height: 34px; opacity: 0.5; }
.pi-placeholder code {
	background: var(--pi-white);
	border: 1px solid var(--pi-border);
	font-size: 0.8125rem;
}

/* --- 7.7 Galería ------------------------------------------------------- */

/* minmax(0,1fr) y no 1fr: si no, una imagen ancha impide que su columna
   se encoja y las 5 quedan desparejas. */
.pi-galeria {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) { .pi-galeria { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.pi-galeria figure { margin: 0; overflow: hidden; }
.pi-galeria img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.6s var(--pi-ease), filter var(--pi-dur) var(--pi-ease);
	filter: saturate(0.9);
}
.pi-galeria figure:hover img { transform: scale(1.05); filter: saturate(1.05); }

/* --- 7.8 Entradas / formulario ----------------------------------------- */

.pi-entradas__layout { display: grid; gap: clamp(36px, 5vw, 64px); align-items: start; }
@media (min-width: 1024px) { .pi-entradas__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }

/* Apilado, no en fila. Con `flex` + `align-items: baseline`, "por entrada"
   quedaba pegado al costado del número y se leía como parte de la cifra. */
.pi-price {
	display: grid;
	justify-items: start;
	gap: 0.1rem;
	margin: 1.75rem 0 1rem;
}
.pi-price__amount {
	font-family: var(--pi-font-display);
	font-size: clamp(2.5rem, 1.6rem + 3.5vw, 3.75rem);
	font-weight: 700;
	line-height: 1;
	color: var(--pi-ink);
	letter-spacing: -0.03em;
}
.pi-price__meta {
	font-size: var(--pi-small);
	color: var(--pi-muted);
}

/* El segundo precio, el de tarjeta. Va más chico que el de transferencia
   —que es el que manda— pero con el color del texto y en seminegrita: es un
   precio, no una nota al pie, y quien paga con tarjeta lo tiene que encontrar
   sin buscarlo. */
.pi-price__tarjeta {
	margin-top: 0.85rem;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--pi-ink);
}

/* La leyenda de cuotas, separada del bloque del precio. */
.pi-price__cuotas {
	margin-top: 0.45rem;
	font-size: var(--pi-small);
	color: var(--pi-muted);
}

/* Pegada al precio de tarjeta, que es de lo que habla. */
.pi-price__tarjeta + .pi-price__cuotas {
	margin-top: 0.15rem;
}

.pi-includes { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.pi-includes li { margin: 0; padding-left: 1.9rem; position: relative; font-size: 0.9375rem; }
.pi-includes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 1rem;
	height: 0.55rem;
	border-left: 2px solid var(--pi-primary);
	border-bottom: 2px solid var(--pi-primary);
	transform: rotate(-45deg);
}

.pi-form-card {
	background: var(--pi-white);
	border: 1px solid var(--pi-border);
	box-shadow: var(--pi-shadow-md);
	padding: clamp(24px, 3vw, 40px);
}
.pi-section--surface .pi-form-card,
.pi-section--tinted .pi-form-card { box-shadow: var(--pi-shadow-lg); }

.pi-form-card__head { margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--pi-border); }
.pi-form-card__head h3 { margin-bottom: 0.2em; }
.pi-form-card__head p { font-size: var(--pi-small); color: var(--pi-muted); margin: 0; }

.pi-fineprint {
	margin-top: 1.5rem;
	padding: 1.1rem 1.25rem;
	background: var(--pi-surface);
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--pi-muted);
}
.pi-fineprint p { margin: 0; }
.pi-fineprint p + p { margin-top: 0.6em; }

.pi-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-top: 1.25rem;
	font-size: 0.8125rem;
	color: var(--pi-muted);
}
.pi-trust span { display: inline-flex; align-items: center; gap: 0.45em; }
.pi-trust svg { width: 15px; height: 15px; opacity: 0.7; }

/* Tarjeta de compra con WooCommerce.
   Reemplaza al formulario de CF7 cuando hay un producto de entrada
   configurado: los datos del asistente los pide el checkout. */
.pi-compra__form { display: grid; gap: 1.25rem; }
.pi-compra__campo { display: grid; gap: 0.4rem; }

.pi-compra__nota {
	margin: 0.15rem 0 0;
	font-size: 0.8125rem;
	color: var(--pi-muted);
}

.pi-compra__stock {
	margin: 1rem 0 0;
	padding: 0.7rem 0.9rem;
	background: var(--pi-primary-050);
	border-left: 3px solid var(--pi-primary);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--pi-primary-900);
}

/* Los tres pasos de la compra. Saber cuánto falta antes de empezar es la
   diferencia entre completar el checkout y abandonarlo en el segundo campo. */
.pi-compra__pasos {
	list-style: none;
	counter-reset: pi-paso;
	margin: 1.75rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--pi-border);
	display: grid;
	gap: 0.75rem;
}
.pi-compra__pasos li {
	counter-increment: pi-paso;
	margin: 0;
	padding-left: 2.1rem;
	position: relative;
	font-size: 0.875rem;
	color: var(--pi-text);
}
.pi-compra__pasos li::before {
	content: counter(pi-paso);
	position: absolute;
	left: 0;
	top: -0.1em;
	width: 1.5rem;
	height: 1.5rem;
	display: grid;
	place-items: center;
	border: 1px solid var(--pi-primary);
	border-radius: 50%;
	font-family: var(--pi-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--pi-primary);
}

/* --- 7.9 Compra corporativa (banda oscura) ------------------------------ */

.pi-corp__layout {
	display: grid;
	gap: clamp(24px, 3vw, 48px);
	align-items: center;
}
@media (min-width: 900px) {
	.pi-corp__layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
.pi-corp h2 { margin-bottom: 0.35em; max-width: 22ch; }
.pi-corp p { max-width: 56ch; margin: 0; }
.pi-corp__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
@media (min-width: 900px) { .pi-corp__actions { justify-content: flex-end; } }

/* --- 7.10 FAQ ---------------------------------------------------------- */

.pi-faq { max-width: 56rem; margin-inline: auto; border-top: 1px solid var(--pi-border); }

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

.pi-faq__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	padding: 1.5rem 0;
	background: none;
	border: 0;
	text-align: left;
	font-family: var(--pi-font-display);
	font-size: var(--pi-h5);
	font-weight: 500;
	line-height: 1.28;
	color: var(--pi-ink);
	transition: color var(--pi-dur) var(--pi-ease);
}
.pi-faq__q:hover { color: var(--pi-primary); }

.pi-faq__sign {
	position: relative;
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 0.3em;
}
.pi-faq__sign::before,
.pi-faq__sign::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background: var(--pi-primary);
	transform: translate(-50%, -50%);
	transition: transform var(--pi-dur) var(--pi-ease), opacity var(--pi-dur) var(--pi-ease);
}
.pi-faq__sign::before { width: 100%; height: 2px; }
.pi-faq__sign::after { width: 2px; height: 100%; }
.pi-faq__q[aria-expanded="true"] .pi-faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.pi-faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.32s var(--pi-ease);
}
.pi-faq__a > div { overflow: hidden; }
.pi-faq__item.is-open .pi-faq__a { grid-template-rows: 1fr; }
.pi-faq__a p { padding-bottom: 1.6rem; max-width: 62ch; margin: 0; }

/* --- 7.11 Cifras / stats ------------------------------------------------ */

.pi-stats { display: grid; gap: var(--pi-grid-gap); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .pi-stats { grid-template-columns: repeat(4, 1fr); } }

.pi-stat { border-top: 2px solid var(--pi-primary); padding-top: 1.25rem; }
.pi-section--dark .pi-stat { border-top-color: var(--pi-secondary-300); }

.pi-stat__num {
	display: block;
	font-family: var(--pi-font-display);
	font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem);
	font-weight: 700;
	line-height: 1;
	color: var(--pi-ink);
	letter-spacing: -0.03em;
	margin-bottom: 0.25em;
}
.pi-section--dark .pi-stat__num { color: #fff; }
.pi-stat__label { font-size: var(--pi-small); color: var(--pi-muted); }
.pi-section--dark .pi-stat__label { color: var(--pi-on-dark-muted); }

/* ==========================================================================
   8. Blog (oculto del menú, listo para activar)
   ========================================================================== */

.pi-page-hero {
	background: var(--pi-primary-050);
	border-bottom: 1px solid var(--pi-border);
	padding-block: clamp(120px, 10vw, 180px) clamp(48px, 5vw, 72px);
}
.pi-page-hero h1 { margin-bottom: 0.25em; }
.pi-page-hero p { color: var(--pi-muted); margin: 0; }

.pi-posts { display: grid; gap: clamp(32px, 4vw, 48px) var(--pi-grid-gap); }
@media (min-width: 700px) { .pi-posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pi-posts { grid-template-columns: repeat(3, 1fr); } }

.pi-post-card { display: flex; flex-direction: column; }
.pi-post-card__media { overflow: hidden; margin-bottom: 1.25rem; background: var(--pi-surface); }
.pi-post-card__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.6s var(--pi-ease);
}
.pi-post-card:hover .pi-post-card__media img { transform: scale(1.04); }

.pi-post-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	font-size: var(--pi-eyebrow);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pi-secondary);
	margin-bottom: 0.7rem;
}
.pi-post-card h2,
.pi-post-card h3 { font-size: var(--pi-h5); margin-bottom: 0.4em; }
.pi-post-card h2 a,
.pi-post-card h3 a { color: inherit; text-decoration: none; }
.pi-post-card h2 a:hover,
.pi-post-card h3 a:hover { color: var(--pi-primary); }
.pi-post-card p { font-size: 0.9375rem; margin-bottom: 1.1rem; }
.pi-post-card .pi-link-arrow { margin-top: auto; }

.pi-entry { max-width: var(--pi-narrow-width); margin-inline: auto; }
.pi-entry__media { margin-bottom: clamp(32px, 4vw, 52px); }
.pi-entry__content > * { margin-bottom: 1.25em; }
.pi-entry__content h2 { margin-top: 1.6em; }
.pi-entry__content h3 { margin-top: 1.4em; }

.pi-pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: clamp(48px, 5vw, 72px); }
.pi-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 0.75rem;
	border: 1px solid var(--pi-border);
	border-radius: 50%;
	text-decoration: none;
	color: var(--pi-ink);
	font-size: 0.9375rem;
	transition: all var(--pi-dur) var(--pi-ease);
}
.pi-pagination .page-numbers:hover,
.pi-pagination .page-numbers.current {
	background: var(--pi-primary);
	border-color: var(--pi-primary);
	color: #fff;
}

.pi-post-nav {
	display: grid;
	gap: var(--pi-grid-gap);
	margin-top: clamp(48px, 5vw, 72px);
	padding-top: clamp(32px, 4vw, 48px);
	border-top: 1px solid var(--pi-border);
}
@media (min-width: 700px) { .pi-post-nav { grid-template-columns: 1fr 1fr; } }
.pi-post-nav a { text-decoration: none; }
.pi-post-nav span {
	display: block;
	font-size: var(--pi-eyebrow);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pi-secondary);
	margin-bottom: 0.4em;
}
.pi-post-nav strong { font-family: var(--pi-font-display); font-weight: 500; font-size: var(--pi-h6); }
.pi-post-nav .is-next { text-align: right; }

/* ==========================================================================
   9. Bloques de Gutenberg
   ========================================================================== */

.pi-blocks > * {
	max-width: var(--pi-page-width);
	margin-inline: auto;
	padding-inline: var(--pi-gutter);
}
@media (min-width: 768px) { .pi-blocks > * { padding-inline: var(--pi-gutter-lg); } }

.pi-blocks > .alignwide { max-width: var(--pi-page-width); }
.pi-blocks > .alignfull { max-width: none; padding-inline: 0; }

.wp-block-image img { display: block; }
.wp-block-image figcaption,
.wp-block-embed figcaption {
	font-size: var(--pi-small);
	color: var(--pi-muted);
	text-align: center;
	margin-top: 0.75em;
}

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 2.25rem;
	border-radius: var(--pi-radius-pill);
	background: var(--pi-primary);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--pi-dur) var(--pi-ease);
}
.wp-block-button__link:hover { background: var(--pi-accent); color: #fff; }
.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--pi-primary);
	border: 1px solid var(--pi-primary);
}
.is-style-outline .wp-block-button__link:hover { background: var(--pi-primary); color: #fff; }

.wp-block-separator { border-top: 1px solid var(--pi-border); border-bottom: 0; opacity: 1; }
.wp-block-pullquote { border-top: 2px solid var(--pi-primary); border-bottom: 2px solid var(--pi-primary); }

.wp-block-cover { min-height: 420px; }
.wp-block-cover .wp-block-cover__inner-container { max-width: var(--pi-page-width); }

/* Bloques de columnas: apilar en mobile aunque el core no lo haga */
@media (max-width: 599px) {
	.wp-block-columns { gap: 1.5rem; }
}

/* ==========================================================================
   10. Contact Form 7 — estilos nativos, sin plugin de estilos extra
   ========================================================================== */

.wpcf7 { margin: 0; }
.wpcf7-form { display: grid; gap: 1.1rem; }

.wpcf7-form p { margin: 0; }

.pi-field { display: grid; gap: 0.4rem; }
.pi-field--half { grid-column: span 1; }

/* Cuando CF7 se maqueta con la grilla de dos columnas del theme */
.pi-form-grid {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: 1fr;
}
@media (min-width: 560px) { .pi-form-grid { grid-template-columns: 1fr 1fr; } }
.pi-form-grid .pi-span-2 { grid-column: 1 / -1; }

.wpcf7-form label,
.pi-label {
	display: block;
	font-size: var(--pi-small);
	font-weight: 600;
	color: var(--pi-ink);
	margin-bottom: 0.4rem;
}
.wpcf7-form label .pi-req,
.pi-label .pi-req { color: var(--pi-primary); }

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea,
.pi-input {
	width: 100%;
	padding: 0.85rem 1rem;
	background: var(--pi-white);
	border: 1px solid var(--pi-border);
	border-radius: 0;
	font-family: var(--pi-font-body);
	font-size: 1rem;
	color: var(--pi-ink);
	transition: border-color var(--pi-dur) var(--pi-ease), box-shadow var(--pi-dur) var(--pi-ease);
	-webkit-appearance: none;
	appearance: none;
}
.wpcf7-form textarea,
textarea.pi-input { min-height: 130px; resize: vertical; }

.wpcf7-form select,
select.pi-input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b8290' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 12px;
	padding-right: 2.5rem;
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus,
.pi-input:focus {
	outline: 0;
	border-color: var(--pi-primary);
	box-shadow: 0 0 0 3px var(--pi-primary-100);
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder,
.pi-input::placeholder { color: var(--pi-muted); opacity: 1; }

/* Checkbox / radio */
.wpcf7-acceptance .wpcf7-list-item,
.wpcf7-checkbox .wpcf7-list-item,
.wpcf7-radio .wpcf7-list-item { display: block; margin: 0 0 0.5rem; }

.wpcf7-list-item-label { font-size: 0.9375rem; font-weight: 400; color: var(--pi-text); }

.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
	width: 1.1em;
	height: 1.1em;
	margin-right: 0.6em;
	accent-color: var(--pi-primary);
	vertical-align: -0.15em;
}

.pi-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--pi-text);
}
.pi-consent input { margin-top: 0.25em; flex: none; }

/* Botón submit */
.wpcf7-form input[type="submit"],
.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 1rem 2.25rem;
	background: var(--pi-primary);
	color: #fff;
	border: 0;
	border-radius: var(--pi-radius-pill);
	font-family: var(--pi-font-body);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--pi-dur) var(--pi-ease);
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-submit:hover { background: var(--pi-accent); }

/* Mensajes y validación */
.wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.8125rem;
	color: #b3261e;
}
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid { border-color: #b3261e; }

.wpcf7-response-output {
	margin: 1.25rem 0 0 !important;
	padding: 0.9rem 1.1rem !important;
	border: 1px solid var(--pi-border) !important;
	border-left-width: 3px !important;
	border-radius: 0 !important;
	font-size: 0.9375rem;
	background: var(--pi-surface);
}
.wpcf7 form.sent .wpcf7-response-output { border-left-color: #1f7a4d !important; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-left-color: #b3261e !important; }

.wpcf7-spinner { margin: 0 0 0 0.75rem; }

/* ==========================================================================
   11. Botones flotantes
   ========================================================================== */

.pi-floats {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--pi-z-float);
	pointer-events: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.75rem;
	padding: 0 clamp(16px, 3vw, 28px) clamp(16px, 3vw, 28px);
}
.pi-floats > * { pointer-events: auto; }

/* WhatsApp */
.pi-float-wa {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: 0 6px 20px -6px rgba(37, 211, 102, 0.7);
	text-decoration: none;
	transition: transform var(--pi-dur) var(--pi-ease), box-shadow var(--pi-dur) var(--pi-ease);
}
.pi-float-wa:hover {
	transform: scale(1.07);
	color: #fff;
	box-shadow: 0 10px 26px -6px rgba(37, 211, 102, 0.85);
}
.pi-float-wa svg { width: 28px; height: 28px; fill: currentColor; }

/* CTA de compra */
.pi-float-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	padding: 0.95rem 1.6rem;
	background: var(--pi-primary);
	color: #fff;
	border-radius: var(--pi-radius-pill);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	box-shadow: var(--pi-shadow-lg);
	transition: background-color var(--pi-dur) var(--pi-ease), transform var(--pi-dur) var(--pi-ease);
}
.pi-float-cta:hover { background: var(--pi-accent); color: #fff; transform: translateY(-2px); }
.pi-float-cta svg { width: 1.05em; height: 1.05em; flex: none; }

/* Los flotantes aparecen recién después del hero y se ocultan sobre el
   formulario y el footer, para no tapar los CTA que ya están en pantalla. */
.pi-floats { opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity var(--pi-dur) var(--pi-ease), transform var(--pi-dur) var(--pi-ease), visibility var(--pi-dur); }
.pi-floats.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* En mobile ambos flotantes son círculos alineados a la derecha (tipo WhatsApp) */
@media (max-width: 599px) {
	.pi-floats { gap: 0.6rem; }
	.pi-float-cta {
		width: 56px;
		height: 56px;
		padding: 0;
		gap: 0;
		border-radius: 50%;
		box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.45);
	}
	.pi-float-cta span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
	.pi-float-cta svg { width: 26px; height: 26px; }
	.pi-float-wa { width: 56px; height: 56px; }
	.pi-float-wa svg { width: 26px; height: 26px; }
}

/* Deja aire al pie para que el CTA flotante no tape el final del footer */
body.pi-has-float-cta .pi-footer__bottom { padding-bottom: 5.5rem; }
@media (min-width: 600px) { body.pi-has-float-cta .pi-footer__bottom { padding-bottom: 2rem; } }

/* ==========================================================================
   12. Footer
   ========================================================================== */

.pi-footer { background: var(--pi-ink); color: var(--pi-on-dark-muted); }

.pi-footer__main {
	padding-block: clamp(56px, 6vw, 88px);
	display: grid;
	gap: clamp(36px, 4vw, 56px) var(--pi-grid-gap);
}
@media (min-width: 700px) { .pi-footer__main { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pi-footer__main { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

.pi-footer__brand img { height: 44px; width: auto; margin-bottom: 1.75rem; }
.pi-footer__brand p { font-size: 0.9375rem; max-width: 42ch; }

.pi-footer h2,
.pi-footer h3,
.pi-footer__title {
	font-family: var(--pi-font-body);
	font-size: var(--pi-eyebrow);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pi-secondary-300);
	margin: 0 0 1.25rem;
}

.pi-footer ul { list-style: none; margin: 0; padding: 0; }
.pi-footer li { margin: 0 0 0.7rem; }
.pi-footer a { color: var(--pi-on-dark-muted); text-decoration: none; transition: color var(--pi-dur) var(--pi-ease); }
.pi-footer a:hover { color: #fff; }

.pi-social { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.pi-social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--pi-on-dark-border);
	border-radius: 50%;
	transition: background-color var(--pi-dur) var(--pi-ease), border-color var(--pi-dur) var(--pi-ease);
}
.pi-social a:hover { background: #fff; border-color: #fff; color: var(--pi-ink); }
.pi-social svg { width: 17px; height: 17px; fill: currentColor; }

.pi-footer__bottom {
	border-top: 1px solid var(--pi-on-dark-border);
	padding-block: 1.75rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	font-size: 0.8125rem;
}
.pi-footer__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.pi-legal-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.pi-legal-list li { margin: 0; }

/* ==========================================================================
   13. Utilidades
   ========================================================================== */

.pi-mt-0 { margin-top: 0 !important; }
.pi-mb-0 { margin-bottom: 0 !important; }
.pi-text-center { text-align: center; }
.pi-nowrap { white-space: nowrap; }
.pi-hl { color: var(--pi-primary); font-weight: 600; }
.pi-section--dark .pi-hl { color: #fff; }

/* Aparición al hacer scroll.
   El estado por defecto es VISIBLE. Solo se oculta cuando el JS confirmó que
   puede animarlo (clase .pi-anim en <html>), así un fallo de JS o de
   IntersectionObserver nunca deja contenido invisible. */
.pi-reveal { opacity: 1; transform: none; }

.pi-anim .pi-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s var(--pi-ease), transform 0.6s var(--pi-ease);
}
.pi-anim .pi-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.pi-anim .pi-reveal { opacity: 1; transform: none; }

	/* El mapa queda dibujado entero, sin el trazo. */
	.pi-hero__mapa-svg path {
		animation: none;
		stroke-dashoffset: 0;
	}

	/* El placeholder de orador se queda quieto: sin barrido y sin latido. */
	.pi-orador--proximo .pi-orador__photo::after { display: none; }
	.pi-orador__punto { animation: none; }
}

/* ==========================================================================
   14. Ajustes responsive puntuales
   ========================================================================== */

@media (max-width: 767px) {
	.pi-hero { min-height: auto; padding-top: 120px; }
	.pi-hero__inner { padding-bottom: 40px; }
	.pi-hero__rail a { padding: 0.9rem 1rem; font-size: 0.875rem; }
	.pi-hero__actions .pi-btn { width: 100%; }
	/* En mobile el mapa medía casi el ancho de la pantalla y se salía 34vw por
	   la derecha: quedaba media provincia cortada, atrás del titular y sin
	   forma reconocible. Ahora es chico y entra entero arriba a la derecha
	   —donde el hero solo tiene la fila de badges—, así se lee como lo que es:
	   Córdoba. */
	.pi-hero__mapa {
		top: 84px;
		right: var(--pi-gutter);
		width: min(38vw, 156px);
		opacity: 0.5;
		transform: none;
	}
	.pi-grid--3,
	.pi-grid--4 { grid-template-columns: 1fr; }
}

@media (max-width: 479px) {
	.pi-oradores__grid { grid-template-columns: repeat(2, 1fr); }
	.pi-hero__rail ul { flex-direction: column; }
	.pi-hero__rail li + li { border-left: 0; border-top: 1px solid var(--pi-on-dark-border); }
	.pi-galeria { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1680px) {
	:root { --pi-gutter-lg: 80px; }
}

/* ==========================================================================
   15. Print
   ========================================================================== */

@media print {
	.pi-header,
	.pi-floats,
	.pi-hero__rail,
	.pi-drawer,
	.pi-footer__main { display: none !important; }
	body { color: #000; }
	.pi-hero { min-height: auto; color: #000; background: none; }
	.pi-hero__media,
	.pi-hero__mapa { display: none; }
	.pi-hero h1 { color: #000; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* ==========================================================================
   16. Selector de cantidad
   --------------------------------------------------------------------------
   Componente compartido: lo usan la tarjeta "Comprar ahora" de la home y la
   tarjeta de cantidad del checkout. Vive acá y no en woocommerce.css porque
   esa hoja solo se encola en las páginas de la tienda, y la home no es una.

   Los botones son de 44px para que se puedan tocar con el pulgar sin apuntar.
   ========================================================================== */

.pi-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--pi-border);
	background: var(--pi-white);
}

.pi-qty__btn {
	width: 44px;
	min-height: 44px;
	display: grid;
	place-items: center;
	background: var(--pi-white);
	border: 0;
	font-size: 1.15rem;
	line-height: 1;
	color: var(--pi-primary);
	cursor: pointer;
	transition: background-color var(--pi-dur) var(--pi-ease), color var(--pi-dur) var(--pi-ease);
}
.pi-qty__btn:hover:not(:disabled) {
	background: var(--pi-primary);
	color: #fff;
}
.pi-qty__btn:disabled {
	color: var(--pi-border);
	cursor: not-allowed;
}
.pi-qty__btn:focus-visible {
	outline: 2px solid var(--pi-accent);
	outline-offset: 2px;
}
.pi-qty__btn[hidden] {
	display: none;
}

.pi-qty__input {
	width: 60px;
	min-height: 44px;
	padding: 0 0.25rem;
	border: 0;
	border-inline: 1px solid var(--pi-border);
	background: transparent;
	font-family: var(--pi-font-body);
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	color: var(--pi-ink);
}
.pi-qty__input:focus {
	outline: 2px solid var(--pi-primary);
	outline-offset: -2px;
}

/* Las flechitas nativas se esconden SOLO cuando los botones − y + están en
   pantalla, es decir cuando el JS ya corrió. Si el script no carga, el
   visitante conserva la única forma que le queda de cambiar la cantidad. */
.pi-qty:has(.pi-qty__btn:not([hidden])) .pi-qty__input {
	-moz-appearance: textfield;
	appearance: textfield;
}
.pi-qty:has(.pi-qty__btn:not([hidden])) .pi-qty__input::-webkit-outer-spin-button,
.pi-qty:has(.pi-qty__btn:not([hidden])) .pi-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.pi-qty__btn {
		transition: none;
	}
}

/* --- Foto del Aula Magna --------------------------------------------------
   La única foto disponible del aula es chica y de baja definición. En vez de
   disimularlo, se la trata como una imagen de marca: duotono en el índigo del
   sitio, con la fotografía funcionando de textura y no de documento.

   El truco es `mix-blend-mode`. La capa de color se multiplica sobre la foto
   —hunde los grises hacia el índigo— y una segunda capa en `screen` levanta las
   luces, que es lo que evita que quede un manchón oscuro. El grano y la falta
   de nitidez dejan de leerse como un defecto porque la imagen ya no pretende
   ser una foto nítida.

   Al pasar el mouse el color se retira: quien quiera ver el aula de verdad,
   puede. En touch no hay hover, así que la leyenda de abajo dice lo que la foto
   muestra. */
.pi-lugar__foto {
	position: relative;
	margin: 1.25rem 0 0;
	overflow: hidden;
	background: var(--pi-primary-900);
	isolation: isolate;
}

.pi-lugar__foto img {
	display: block;
	width: 100%;
	height: auto;
	filter: grayscale(1) contrast(1.18) brightness(1.04);
	transition: filter 0.5s var(--pi-ease), transform 0.6s var(--pi-ease);
}

.pi-lugar__foto::before,
.pi-lugar__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	transition: opacity 0.5s var(--pi-ease);
}

/* Capa de color: multiplica y tiñe. */
.pi-lugar__foto::before {
	background: linear-gradient(150deg, var(--pi-primary) 0%, var(--pi-primary-900) 100%);
	mix-blend-mode: multiply;
}

/* Capa de luces: devuelve el rango alto para que no quede plano. */
.pi-lugar__foto::after {
	background: linear-gradient(150deg, var(--pi-secondary-300) 0%, transparent 55%);
	mix-blend-mode: screen;
	opacity: 0.55;
}

.pi-lugar__foto:hover img,
.pi-lugar__foto:focus-within img {
	filter: grayscale(0) contrast(1) brightness(1);
	transform: scale(1.02);
}

.pi-lugar__foto:hover::before,
.pi-lugar__foto:focus-within::before {
	opacity: 0.15;
}

.pi-lugar__foto:hover::after,
.pi-lugar__foto:focus-within::after {
	opacity: 0;
}

.pi-lugar__foto figcaption {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	padding: 2.5rem 1.15rem 0.9rem;
	background: linear-gradient(to top, rgba(13, 16, 23, 0.75), transparent);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
	.pi-lugar__foto img,
	.pi-lugar__foto::before,
	.pi-lugar__foto::after {
		transition: none;
	}
	.pi-lugar__foto:hover img {
		transform: none;
	}
}

/* ==========================================================================
   17. Header compacto en mobile
   --------------------------------------------------------------------------
   En un teléfono, el header más el título de la página se comían media pantalla
   antes de que empezara el contenido. Se nota sobre todo en las páginas sin
   hero —"Finalizar compra", "Acreditación"—, donde el header arranca sólido
   desde el primer píxel.

   OJO CON EL `min-height`: bajarlo solo no achica nada. La altura real de la
   barra la fijaba el contenido más alto, que acá son el botón CTA (41px) y el
   botón del menú (44px). Mientras esos no se achiquen, el header no baja de
   ~52px por más que el `min-height` diga 40. Por eso este bloque toca los tres.

   "Sólido" son dos situaciones distintas que se ven igual: el header
   scrolleado (`.is-solid`) y las páginas sin hero, donde nunca es transparente.
   ========================================================================== */

@media (max-width: 1023px) {

	/* --- Estado inicial: ya un poco más bajo que en desktop --- */

	.pi-header__inner {
		min-height: 56px;
		padding-block: 0.4rem;
	}

	.pi-brand img,
	.pi-brand .custom-logo {
		height: 30px;
	}

	/* --- Estado compacto: la mitad del header original --- */

	.pi-header.is-solid .pi-header__inner,
	body:not(.pi-has-hero) .pi-header .pi-header__inner {
		min-height: 38px;
		padding-block: 0.2rem;
	}

	/* Fuera el logo horizontal, entra el isotipo. El logo completo en 360px de
	   ancho ocupa media barra para decir algo que el visitante ya sabe: en qué
	   sitio está. */
	.pi-header.is-solid .pi-brand__mark,
	body:not(.pi-has-hero) .pi-header .pi-brand__mark {
		display: none;
	}

	.pi-header.is-solid .pi-brand__iso--dark,
	body:not(.pi-has-hero) .pi-header .pi-brand__iso--dark {
		display: block;
	}

	.pi-header.is-solid .pi-brand__iso,
	body:not(.pi-has-hero) .pi-header .pi-brand__iso {
		height: 26px;
	}

	/* El burger, achicado: es el que fija el piso de la altura. */
	.pi-header.is-solid .pi-burger,
	body:not(.pi-has-hero) .pi-header .pi-burger {
		width: 34px;
		height: 32px;
		padding: 0 6px;
		gap: 4px;
	}

	.pi-header__actions {
		gap: 0.5rem;
	}
}

/* Menos aire arriba del título: con el header compacto, los 120px originales
   dejaban una franja vacía enorme antes del contenido. */
@media (max-width: 767px) {
	.pi-page-hero {
		padding-block: 68px 24px;
	}
}