/*
 * Sistema de diseño Patia — basado en Patia_Manual_Identidad_Marca_v1.0.
 * Los tokens de color/tipografía/espaciado viven en theme.json (variables --wp--preset--*).
 * Este archivo cubre componentes y utilidades que el editor de bloques no resuelve solo.
 *
 * Paleta: Patia Forest #355E60 (marca/CTA), Patia Teal #098786 (acento digital,
 * nunca como segundo color principal), Green Mist #E8F4F4 (fondos suaves), Slate
 * #64748B (texto secundario), Soft Grey #90A1B9 / Menu Grey #9CA3AF (metadatos y
 * estados inactivos, nunca para texto crítico).
 */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-latin-variable.woff2') format('woff2-variations'), url('../fonts/inter-latin-variable.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-latin-italic-variable.woff2') format('woff2-variations'), url('../fonts/inter-latin-italic-variable.woff2') format('woff2');
}

:root {
	--patia-radius-small: var(--wp--custom--radius--small, 10px);
	--patia-radius-medium: var(--wp--custom--radius--medium, 20px);
	--patia-radius-large: var(--wp--custom--radius--large, 28px);
	--patia-radius-pill: var(--wp--custom--radius--pill, 999px);
	--patia-shadow-soft: var(--wp--custom--shadow--soft);
	--patia-shadow-medium: var(--wp--custom--shadow--medium);
	--patia-focus-ring: 3px solid var(--wp--preset--color--secondary);
}

/* Reduced motion: respetar siempre la preferencia del usuario. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Foco visible consistente en toda la web. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: var(--patia-focus-ring);
	outline-offset: 2px;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--inverse);
	padding: 0.75rem 1.25rem;
	z-index: 100;
	border-radius: 0 0 var(--patia-radius-small) 0;
}

.skip-link:focus {
	left: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--wp--preset--color--background);
}

/* Compensa el header sticky para que los anchors no queden ocultos bajo él. */
#que-encontraras,
#para-profesionales,
#preguntas-frecuentes,
#registro-profesional,
#como-funciona-profesionales,
#preguntas-frecuentes-profesionales {
	scroll-margin-top: 96px;
}

/* El tema aplica margin-block-start al primer bloque de nivel raíz tras la
   cabecera (:where(.wp-site-blocks) > * { margin-block-start: ... }); en la
   home eso deja una franja en blanco entre el header y el hero. El header
   es sticky (no fixed), así que no hace falta ningún offset compensatorio. */
.patia-main--flush {
	margin-block-start: 0;
}

/* --- Cabecera --- */
.patia-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 1px 2px rgba(30, 42, 46, 0.04);
}

/* !important en flex-wrap: WordPress core añade flex-wrap:wrap a todo bloque
   "is-layout-flex" — sin este override, la cabecera (logo + CTA + botón de
   menú) se partía en 2-3 líneas en cualquier móvil por debajo de ~430px en
   vez de mantenerse siempre en una sola fila. */
.patia-header__inner {
	max-width: var(--wp--custom--max-width--wide);
	margin-inline: auto;
	display: flex;
	flex-wrap: nowrap !important;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--300);
	padding: var(--wp--preset--spacing--200) var(--wp--preset--spacing--300);
	min-height: 72px;
}

.patia-header__logo {
	flex-shrink: 0;
}

.patia-header__logo img,
.patia-header__logo svg {
	height: 42px;
	width: auto;
	display: block;
}

/* !important: core's .wp-block-navigation.is-layout-flex sets display:flex at the
   same or higher specificity depending on enqueue order, which otherwise leaves the
   full nav visible next to the mobile toggle at once. This rule must always win. */
.patia-header__nav {
	display: none !important;
}

.patia-header__nav ul {
	display: flex;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.patia-header__nav a {
	display: block;
	position: relative;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.9375rem;
	padding: 0.6rem 0.7rem;
	border-radius: var(--patia-radius-pill);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.patia-header__nav a.wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--primary);
}

/* Estado activo del header: píldora suave (fondo + color de marca), solo
   para el enlace activo — el resto de enlaces se queda sin pastilla, la
   pastilla en hover es un estado transitorio ya existente, no permanente. */
.patia-header__nav a.wp-block-navigation-item__content[aria-current="page"],
.patia-header__nav a.wp-block-navigation-item__content.is-active {
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	padding: 0.875rem 1.375rem;
}

.patia-header__cta .wp-block-button__link {
	padding: 0.6rem 1.15rem;
	font-size: 0.9375rem;
	white-space: nowrap;
}

.patia-header__cta-short {
	display: none;
}

/* Por debajo de este ancho no cabe "Únete a la lista de espera" en una sola
   línea junto al logo y el botón de menú (ver .patia-header__inner arriba):
   se acorta a "Únete" en vez de dejar que la cabecera se parta en varias
   líneas o el botón se salga del viewport. */
@media (max-width: 480px) {
	.patia-header__cta-full {
		display: none;
	}

	.patia-header__cta-short {
		display: inline;
	}
}

.patia-header__actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--wp--preset--spacing--200);
}

.patia-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--patia-radius-small);
	background: var(--wp--preset--color--surface);
	cursor: pointer;
}

.patia-mobile-nav {
	display: none;
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.patia-mobile-nav.is-open {
	display: block;
}

.patia-mobile-nav ul {
	list-style: none;
	margin: 0;
	padding: var(--wp--preset--spacing--200) var(--wp--preset--spacing--300);
}

.patia-mobile-nav li {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.patia-mobile-nav a {
	display: flex;
	align-items: center;
	padding: var(--wp--preset--spacing--200) 0;
	min-height: 44px;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	font-weight: 500;
}

.patia-mobile-nav a:hover,
.patia-mobile-nav a.is-active {
	color: var(--wp--preset--color--primary);
}

.patia-mobile-nav li:last-child {
	border-bottom: none;
}

@media (min-width: 900px) {
	.patia-header__nav {
		display: flex !important;
	}

	.patia-menu-toggle {
		display: none;
	}

	.patia-mobile-nav {
		display: none !important;
	}
}

/* --- Botones --- */
.wp-block-button__link,
.patia-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.75rem 1.5rem;
	border-radius: var(--patia-radius-pill);
	font-weight: 600;
	text-decoration: none;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--inverse);
	border: 2px solid transparent;
	box-shadow: 0 1px 2px rgba(30, 42, 46, 0.12);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.wp-block-button__link:hover,
.patia-button:hover {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--inverse);
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(30, 42, 46, 0.18);
}

.wp-block-button__link:active,
.patia-button:active {
	transform: translateY(0);
	box-shadow: 0 1px 2px rgba(30, 42, 46, 0.12);
}

.patia-button.is-loading {
	opacity: 0.7;
	cursor: default;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	box-shadow: none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--inverse);
}

.patia-button--secondary {
	background: transparent;
	color: var(--wp--preset--color--text);
	border-color: var(--wp--preset--color--text);
}

.patia-button--secondary:hover {
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--inverse);
}

/* --- Tarjetas --- */
.patia-card {
	position: relative;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--patia-radius-medium);
	padding: var(--wp--preset--spacing--400) var(--wp--preset--spacing--300) var(--wp--preset--spacing--300);
	box-shadow: var(--patia-shadow-soft);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.patia-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--secondary));
	opacity: 0;
	transition: opacity 0.2s ease;
}

.patia-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--patia-shadow-medium);
	border-color: var(--wp--preset--color--secondary);
}

.patia-card:hover::before {
	opacity: 1;
}

.patia-card h3 {
	margin-top: 0;
}

/* --- Badges --- */
.patia-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.75rem;
	border-radius: var(--patia-radius-pill);
	background: var(--wp--preset--color--secondary-light);
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* --- Mensajes de estado (formularios) --- */
.patia-form-message {
	border-radius: var(--patia-radius-small);
	padding: var(--wp--preset--spacing--200) var(--wp--preset--spacing--300);
	font-weight: 500;
}

.patia-form-message--success {
	background: #E7F4EC;
	color: var(--wp--preset--color--success);
	border: 1px solid var(--wp--preset--color--success);
}

.patia-form-message--error {
	background: #FBEAE9;
	color: var(--wp--preset--color--error);
	border: 1px solid var(--wp--preset--color--error);
}

/* --- Formularios --- */
.patia-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.patia-form input[type="text"],
.patia-form input[type="email"],
.patia-form input[type="tel"],
.patia-form select,
.patia-form textarea {
	width: 100%;
	min-height: 44px;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--patia-radius-small);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	font-size: 1rem;
	font-family: inherit;
}

.patia-form textarea {
	resize: vertical;
}

.patia-form .patia-field {
	margin-bottom: var(--wp--preset--spacing--300);
}

.patia-form .patia-field-error {
	color: var(--wp--preset--color--error);
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0.35rem;
}

.patia-form .patia-field-hint {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0.35rem;
}

.patia-honeypot-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Secciones / layout --- */
.patia-section {
	padding-block: var(--wp--preset--spacing--600);
}

.patia-section--muted {
	background: var(--wp--preset--color--sand);
}

.patia-section__inner {
	max-width: var(--wp--custom--max-width--wide);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--300);
}

/* !important: el layout "constrained" de WordPress genera su propia regla
   de max-width con más especificidad (o cargada después) sobre el propio
   contenedor, igual que ya pasó con el menú y el hero — sin !important
   esta anchura personalizada queda ignorada. */
.patia-section__inner--wide {
	max-width: 1400px !important;
}

.patia-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--secondary);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--wp--preset--font-size--small);
}

.patia-eyebrow::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 2px;
	background: var(--wp--preset--color--secondary);
}

.patia-section h2 {
	margin-top: 0.5rem;
	margin-bottom: 1rem;
}

/* --- Cómo funciona: pasos --- */
.patia-steps {
	display: grid;
	gap: var(--wp--preset--spacing--300);
	counter-reset: patia-step;
}

@media (min-width: 782px) {
	.patia-steps {
		grid-template-columns: repeat(3, 1fr);
	}
}

.patia-step {
	position: relative;
	padding-top: var(--wp--preset--spacing--400);
}

.patia-step::before {
	counter-increment: patia-step;
	content: counter(patia-step);
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--inverse);
	font-weight: 700;
	box-shadow: 0 2px 6px rgba(53, 94, 96, 0.35);
	margin-bottom: var(--wp--preset--spacing--200);
}

/* La huella como mapa: el conector entre pasos es un rastro de huellas, no una
   línea plana — literaliza "el siguiente paso" en vez de decorar sin motivo. */
@media (min-width: 782px) {
	.patia-step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 6px;
		left: calc(50% + 32px);
		right: calc(-50% + 32px);
		height: 28px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28' fill='none' stroke='%23098786' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M20 20c-3 0-5.5-2-5.5-5s2.2-8 5.5-8 5.5 5 5.5 8-2.5 5-5.5 5z'/%3E%3Cellipse cx='13' cy='8' rx='2.6' ry='3.4'/%3E%3Cellipse cx='27' cy='8' rx='2.6' ry='3.4'/%3E%3Cellipse cx='8' cy='13.5' rx='2.3' ry='3'/%3E%3Cellipse cx='32' cy='13.5' rx='2.3' ry='3'/%3E%3C/svg%3E");
		background-repeat: repeat-x;
		background-size: 34px 24px;
		background-position: left center;
		mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
		opacity: 0.55;
	}
}

.patia-step h3 {
	color: var(--wp--preset--color--primary);
}

/* --- FAQ (home): cabecera + categorías + acordeones agrupados --- */
.patia-faq-section {
	background: var(--wp--preset--color--background);
	padding-block: var(--wp--preset--spacing--600);
}

/* Variante muted (p. ej. FAQ breve de "Para profesionales"): dos clases
   ganan sobre la regla de fondo blanco de arriba sin depender del orden. */
.patia-faq-section.patia-section--muted {
	background: var(--wp--preset--color--sand);
}

.patia-pro-faq {
	margin-top: var(--wp--preset--spacing--400);
}

.patia-faq-header {
	max-width: 620px;
	margin: 0 auto;
	margin-bottom: 64px;
	text-align: center;
}

.patia-faq-header__title {
	margin: 0 0 0.5em;
}

.patia-faq-header__lead {
	margin: 0;
	color: var(--wp--preset--color--text-muted);
	font-size: 1.0625rem;
	line-height: 1.5;
}

/* Categorías: selector de tarjetas que conmutan qué bloque de preguntas se ve. */
.patia-faq-categories {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	margin-bottom: 52px;
}

@media (min-width: 480px) {
	.patia-faq-categories {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.patia-faq-categories {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.patia-faq-category {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--patia-radius-medium);
	padding: var(--wp--preset--spacing--200) var(--wp--preset--spacing--300);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--text);
	text-align: left;
	cursor: pointer;
	box-shadow: var(--patia-shadow-soft);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.patia-faq-category:hover {
	border-color: var(--wp--preset--color--secondary);
	transform: translateY(-2px);
}

.patia-faq-category.is-active {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--sand);
	box-shadow: none;
}

.patia-faq-category__title {
	min-width: 0;
}

.patia-faq-category__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--primary);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.patia-faq-category.is-active .patia-faq-category__icon {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--inverse);
}

/* Bloques de preguntas agrupados por categoría: solo el activo es visible —
   evita renderizar y desplazarse por las seis categorías a la vez. */
.patia-faq-groups {
	display: grid;
}

.patia-faq-group {
	display: none;
}

.patia-faq-group.is-active {
	display: block;
	animation: patia-faq-group-fade 0.18s ease;
}

@keyframes patia-faq-group-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.patia-faq-group__title {
	margin: 0 0 var(--wp--preset--spacing--200);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--primary);
}

.patia-faq {
	display: grid;
	gap: 0.6rem;
}

.patia-faq details {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--patia-radius-small);
	padding: 0 var(--wp--preset--spacing--300);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.patia-faq details[open],
.patia-faq details:hover {
	border-color: var(--wp--preset--color--secondary);
	box-shadow: var(--patia-shadow-soft);
}

.patia-faq summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 0.9375rem;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--200);
	min-height: 42px;
	padding-block: 0.5rem;
}

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

.patia-faq summary::after {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	flex-shrink: 0;
	border-right: 1.75px solid var(--wp--preset--color--primary);
	border-bottom: 1.75px solid var(--wp--preset--color--primary);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.patia-faq details[open] summary::after {
	transform: rotate(-135deg);
}

.patia-faq .patia-faq__answer {
	padding-bottom: 0.9rem;
	color: var(--wp--preset--color--text-muted);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.patia-faq .patia-faq__answer p {
	margin: 0;
}

.patia-faq .patia-faq__pending {
	font-style: italic;
	color: var(--wp--preset--color--text-muted);
}

/* Cierre de conversión al final de la sección. */
.patia-faq-cta {
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--border);
	text-align: center;
}

.patia-faq-cta__text {
	max-width: 480px;
	margin: 0 auto var(--wp--preset--spacing--300);
	color: var(--wp--preset--color--text-muted);
	font-size: 1rem;
}

.patia-faq-cta .wp-block-buttons {
	justify-content: center;
}

[id^="faq-"] {
	scroll-margin-top: 100px;
}

/* --- Breadcrumbs --- */
.patia-breadcrumbs {
	max-width: var(--wp--custom--max-width--wide);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--200) var(--wp--preset--spacing--300) 0;
	font-size: var(--wp--preset--font-size--small);
}

.patia-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--wp--preset--color--text-muted);
}

.patia-breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-left: 0.4rem;
	color: var(--wp--preset--color--border);
}

/* --- Mockup de la app (contenedores reemplazables) --- */
.patia-mockup-frame {
	background: var(--wp--preset--color--surface);
	border: 2px dashed var(--wp--preset--color--secondary);
	border-radius: var(--patia-radius-large);
	box-shadow: var(--patia-shadow-soft);
	padding: var(--wp--preset--spacing--200);
	aspect-ratio: 9 / 16;
	max-width: 320px;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.patia-mockup-frame span::before {
	content: "🐾";
	display: block;
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}

.patia-mockup-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--patia-radius-medium);
}

/* --- Secciones partidas (imagen + texto) --- */
.patia-split {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--500);
}

.patia-split__media,
.patia-split__text {
	flex: 1 1 380px;
	min-width: 0;
}

.patia-split__media img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 440px;
	margin-inline: auto;
}

.patia-split__media--photo img {
	max-width: 480px;
	border-radius: var(--patia-radius-large);
	box-shadow: var(--patia-shadow-medium);
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.patia-split__media--large img {
	max-width: 640px;
}

.patia-split__text {
	text-align: left;
}

.patia-split--reverse {
	flex-direction: row-reverse;
}

/* --- Por qué Patia: problema, propuesta y CTA en una sola fila de 3
   columnas, al estilo Glovo (icono/foto + titular + frase con lo clave
   resaltado), en vez de tres secciones apiladas por separado. --- */
.patia-porque__title {
	font-size: clamp(1.75rem, 2.2vw + 1.2rem, 2.5rem);
	font-weight: 800;
}

.patia-porque {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--600) var(--wp--preset--spacing--500);
	margin-top: var(--wp--preset--spacing--600);
	text-align: center;
	/* El layout "constrained" de WP limita a 720px cualquier hijo directo
	   del contenedor, aunque el contenedor en sí ya sea más ancho. */
	max-width: 100% !important;
}

@media (min-width: 782px) {
	.patia-porque {
		grid-template-columns: repeat(3, 1fr);
		column-gap: var(--wp--preset--spacing--700);
	}
}

.patia-porque__item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.patia-porque__icon {
	width: 240px;
	height: 240px;
	margin-bottom: var(--wp--preset--spacing--300);
}

.patia-porque__item h3 {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--primary);
	font-size: 1.15rem;
}

.patia-porque__item p {
	max-width: 30ch;
	margin: 0;
	color: var(--wp--preset--color--text-muted);
}

.patia-porque__item mark {
	background: var(--wp--preset--color--secondary-light);
	color: var(--wp--preset--color--primary-dark);
	font-weight: 600;
	border-radius: 4px;
	padding: 0.05em 0.3em;
	font-weight: 400;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.patia-porque__cta {
	margin-top: var(--wp--preset--spacing--200);
}

@media (max-width: 781px) {
	.patia-split,
	.patia-split--reverse {
		flex-direction: column;
		text-align: center;
	}

	.patia-split .patia-split__text {
		text-align: center;
	}

	.patia-split .patia-eyebrow {
		justify-content: center;
	}
}

/* --- Para profesionales: composición editorial asimétrica con tarjetas
   flotantes tipo app, en vez del reparto clásico foto/texto 50-50. --- */
.patia-pros__grid {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--600);
	max-width: 1100px !important;
}

.patia-pros__content {
	flex: 1 1 400px;
	max-width: 460px !important;
	text-align: left;
}

.patia-pros__title {
	margin-top: 0;
	margin-bottom: 0.9rem;
	font-size: clamp(2rem, 2.4vw + 1.3rem, 2.75rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.patia-pros__lead {
	max-width: 42ch;
	margin: 0 0 var(--wp--preset--spacing--300);
	color: var(--wp--preset--color--text-muted);
	font-size: 1.0625rem;
	line-height: 1.55;
}

.patia-pros__actions {
	display: flex;
	margin: 0;
}

.patia-pros__actions .wp-block-buttons {
	margin: 0;
}

.patia-pros__secondary-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 30px;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.3;
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

.patia-pros__secondary-link::after {
	content: "\2192";
	display: inline-block;
	line-height: 1;
	transition: transform 0.15s ease;
}

.patia-pros__secondary-link:hover {
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-underline-offset: 3px;
}

.patia-pros__secondary-link:hover::after {
	transform: translateX(3px);
}

.patia-pros__info {
	margin-top: 30px;
}

.patia-pros__trust {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	margin: 0;
	color: var(--wp--preset--color--primary-dark);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
}

.patia-pros__trust-icon {
	display: inline-flex;
	flex: none;
	width: 23px;
	height: 23px;
	color: var(--wp--preset--color--secondary);
}

.patia-pros__trust-icon svg {
	width: 100%;
	height: 100%;
}

.patia-pros__trust-text {
	max-width: 560px;
}

.patia-pros__note {
	margin: 14px 0 0;
	margin-left: calc(23px + 13px);
	color: var(--wp--preset--color--soft-grey);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	font-weight: 400;
}

.patia-pros__visual {
	flex: 1 1 420px;
	min-width: 0;
}

.patia-pros__stage {
	position: relative;
	max-width: 340px;
	margin: 0 auto var(--wp--preset--spacing--400);
	padding: 1.75rem 2rem;
}

@media (min-width: 900px) {
	.patia-pros__stage {
		margin-top: 32px;
	}
}

.patia-pros__photo {
	border-radius: var(--patia-radius-large);
	overflow: hidden;
	box-shadow: var(--patia-shadow-soft);
}

.patia-pros__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.patia-pros__float {
	position: absolute;
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--patia-radius-medium);
	padding: 0.7rem 0.9rem;
	box-shadow: 0 4px 10px rgba(30, 42, 46, 0.04), 0 16px 32px rgba(30, 42, 46, 0.05);
	max-width: calc(100% - 1rem);
}

.patia-pros__float-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: var(--patia-radius-pill);
	background: var(--wp--preset--color--secondary-light);
	color: var(--wp--preset--color--primary);
}

.patia-pros__float-icon--accent {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--inverse);
}

.patia-pros__float-body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	font-size: 0.8125rem;
	line-height: 1.3;
	color: var(--wp--preset--color--text);
}

.patia-pros__float-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.7rem;
	color: var(--wp--preset--color--text-muted);
	font-weight: 500;
}

.patia-pros__float-meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	white-space: nowrap;
}

.patia-pros__float-meta svg {
	color: var(--wp--preset--color--secondary);
}

.patia-pros__float--verified {
	align-items: center;
}

.patia-pros__float--verified .patia-pros__float-body {
	align-items: center;
	margin: 0;
}

.patia-pros__float--verified .patia-pros__float-body strong {
	margin: 0;
	line-height: 1.2;
}

.patia-pros__float--request {
	top: 0;
	right: 0;
	width: max-content;
	max-width: 78%;
}

.patia-pros__float--verified {
	bottom: 0.5rem;
	right: 0;
}

.patia-pros__tags {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	justify-content: center;
	align-items: stretch;
	gap: 0.6rem 0.75rem;
	max-width: 320px;
	list-style: none;
	margin: 0 auto;
	padding: 0;
}

.patia-pros__tags li {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.4rem 0.9rem;
	border-radius: var(--patia-radius-pill);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-align: center;
}

.patia-pros__tags svg {
	color: var(--wp--preset--color--secondary);
}

@media (max-width: 899px) {
	.patia-pros__grid {
		flex-direction: column;
		align-items: stretch;
	}

	.patia-pros__content {
		flex-basis: auto;
		max-width: 100% !important;
		text-align: center;
	}

	.patia-pros__visual {
		flex-basis: auto;
	}

	.patia-pros__actions {
		justify-content: center;
	}

	.patia-pros__lead {
		margin-inline: auto;
	}

	.patia-pros__actions .wp-block-buttons,
	.patia-pros__actions .wp-block-button,
	.patia-pros__actions .wp-block-button__link {
		width: 100%;
	}

	.patia-pros__secondary-link {
		margin-top: 24px;
		justify-content: center;
		text-align: center;
	}

	.patia-pros__info {
		margin-top: 24px;
	}

	.patia-pros__trust {
		justify-content: center;
		text-align: left;
	}

	.patia-pros__note {
		margin-top: 12px;
		margin-left: 0;
		text-align: center;
	}

	.patia-pros__stage {
		max-width: 300px;
		padding: 1.5rem;
	}

	.patia-pros__float {
		padding: 0.55rem 0.75rem;
	}

	.patia-pros__float-body {
		font-size: 0.75rem;
	}
}

/* --- Página "Para profesionales": secciones propias ---
   Recorrido corto y enfocado a conversión: hero → para quién está pensada →
   qué aporta Patia y cómo funcionará (una sola sección) → formulario → FAQ
   breve. El scroll global se reduce recortando el padding vertical de cada
   sección (scoped a esta plantilla vía ".patia-pro-page") y fusionando lo que
   antes eran tres secciones (beneficios, pasos, confianza) en una sola. */
.patia-pro-page .patia-section {
	padding-block: 64px;
}

@media (max-width: 781px) {
	.patia-pro-page .patia-section {
		padding-block: 40px;
	}
}

/* Hero: reconstruido como cabecera editorial centrada, misma familia visual
   que la de "Qué encontrarás" (".patia-hero-compact", ver más abajo en este
   archivo) — sin fotografía, sin tarjetas flotantes, sin segunda columna. La
   altura de sección hereda el padding compacto de ".patia-hero-compact" en
   vez del padding de 88px del resto de secciones de esta página; sin este
   override, ".patia-pro-page .patia-section" (dos clases) ganaría por
   especificidad sobre ".patia-hero-compact" (una clase) pese a definirse
   antes en la cascada. */
.patia-pro-page .patia-hero-compact.patia-section {
	padding-block: 24px 16px;
}

@media (min-width: 900px) {
	.patia-pro-page .patia-hero-compact.patia-section {
		padding-block: 40px 24px;
	}
}

/* Ritmo vertical propio de este hero (título → párrafo → botón → enlace →
   bloque de confianza), distinto del de "Qué encontrarás" porque aquí hay
   CTA y bloque de confianza de por medio — acotado a ".patia-pro-hero-compact"
   para no alterar el hero compacto compartido. Más compacto que el rango
   inicial pedido: con seis piezas (título, párrafo, botón, enlace, mensaje,
   nota) sumaba demasiada altura incluso en el extremo inferior del rango. */
.patia-pro-hero-compact .patia-hero-compact__inner h1 {
	margin-bottom: 20px;
}

.patia-pro-hero-compact .patia-hero-compact__inner p {
	margin-bottom: 26px;
}

.patia-pro-hero__actions {
	margin-bottom: 22px;
}

.patia-pro-hero-compact .patia-hero-compact__scroll {
	margin-bottom: 22px;
}

.patia-pro-hero__trust {
	text-align: center;
}

.patia-pro-hero__trust-message {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--wp--preset--color--primary-dark);
	font-weight: 600;
	font-size: 0.9375rem;
}

.patia-pro-hero__trust-icon {
	display: inline-flex;
	flex: none;
	color: var(--wp--preset--color--secondary);
}

.patia-pro-hero__trust-note {
	margin: 8px 0 0;
	color: var(--wp--preset--color--soft-grey);
	font-size: var(--wp--preset--font-size--small);
}

/* Para quién está pensada: dos columnas — ilustración a tamaño real (sin caja
   ni tarjeta alrededor) + título, texto y lista compacta de perfiles. */
.patia-pro-quienes__grid {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--500);
	/* !important: gana a la regla de max-width:720px que WordPress aplica por
	   defecto a los hijos directos de ".is-layout-constrained" — mismo patrón
	   ya usado en ".patia-pros__grid" y ".patia-pro-form-grid". */
	max-width: 1140px !important;
}

.patia-pro-quienes__media {
	flex: 1 1 320px;
	max-width: 360px;
	min-width: 0;
}

.patia-pro-quienes__media img {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	margin-inline: auto;
}

.patia-pro-quienes__content {
	flex: 1 1 460px;
	max-width: 520px !important;
}

.patia-pro-quienes__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--300) var(--wp--preset--spacing--200);
	margin-top: var(--wp--preset--spacing--400);
}

.patia-pro-quienes__item {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
}

.patia-pro-quienes__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-top: 0.1rem;
	border-radius: 50%;
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--primary);
}

.patia-pro-quienes__item-body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.patia-pro-quienes__item-body strong {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--text);
}

.patia-pro-quienes__item-body span {
	color: var(--wp--preset--color--text-muted);
	font-size: 0.875rem;
	line-height: 1.45;
}

.patia-pro-quienes__note {
	margin: var(--wp--preset--spacing--400) 0 0;
	color: var(--wp--preset--color--soft-grey);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

@media (max-width: 899px) {
	.patia-pro-quienes__grid {
		flex-direction: column;
	}

	.patia-pro-quienes__content {
		max-width: 100% !important;
	}

	.patia-pro-quienes__media {
		max-width: 280px;
		margin-inline: auto;
	}
}

/* Qué aporta Patia y cómo funcionará: sección editorial única, alineada a la
   izquierda — cabecera, cuadrícula asimétrica (mensaje de confianza + tres
   beneficios en fila) y una franja de pasos al cierre. Sin iconos flotando
   sobre texto centrado, sin números grandes, sin tarjetas SaaS.

   Un único contenedor (".patia-pro-aporta__container") gobierna la anchura y
   el borde izquierdo de las tres subsecciones (cabecera, cuadrícula, pasos):
   antes cada una tenía su propio max-width/margen y no compartían el mismo
   eje vertical. Es el único hijo directo de ".patia-section__inner" (que ya
   aporta el padding lateral y el max-width de 1140px del sistema), así que
   no necesita su propio padding ni pelear con el margin-inline:auto que
   WordPress aplica por defecto a los hijos directos de ".is-layout-constrained"
   — todo lo demás cuelga de este contenedor, no directamente de la sección. */
.patia-pro-aporta__container {
	width: 100%;
	max-width: 1150px;
	margin-inline: auto;
}

.patia-pro-aporta__header {
	max-width: 660px;
	margin-inline: auto;
	text-align: center;
}

.patia-pro-aporta__header p {
	margin: 0.5em 0 0;
	color: var(--wp--preset--color--text-muted);
	font-weight: 400;
}

.patia-pro-aporta__grid {
	display: grid;
	grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
	align-items: start;
	column-gap: 80px;
	margin-top: 40px;
}

.patia-pro-aporta__intro-message {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.35;
}

.patia-pro-aporta__intro-text {
	margin: 0.9em 0 0;
	color: var(--wp--preset--color--text);
}

.patia-pro-aporta__intro-note {
	margin: 1.1em 0 0;
	color: var(--wp--preset--color--soft-grey);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.patia-pro-benefits__row {
	display: grid;
	grid-template-columns: 44px 1fr;
	column-gap: 14px;
	align-items: start;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.patia-pro-benefits__row:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}

.patia-pro-benefits__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--secondary);
}

.patia-pro-benefits__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.patia-pro-benefits__body strong {
	font-size: 1.0625rem;
	color: var(--wp--preset--color--text);
}

.patia-pro-benefits__body span {
	color: var(--wp--preset--color--text-muted);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.patia-pro-aporta__divider {
	margin-top: 40px;
	border-top: 1px solid var(--wp--preset--color--border);
}

.patia-pro-journey {
	margin-top: 28px;
}

.patia-pro-journey__subtitle {
	margin: 0 0 var(--wp--preset--spacing--300);
	font-size: 1.0625rem;
}

.patia-pro-journey__steps {
	display: grid;
	gap: 40px;
}

@media (min-width: 782px) {
	.patia-pro-journey__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.patia-pro-journey__step-title {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	font-size: 0.9375rem;
}

.patia-pro-journey__step-number {
	color: var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
}

.patia-pro-journey__step-text {
	margin: 0.35em 0 0;
	color: var(--wp--preset--color--text-muted);
	font-size: 0.9375rem;
	line-height: 1.5;
}

@media (max-width: 899px) {
	.patia-pro-aporta__grid {
		grid-template-columns: 1fr;
		row-gap: var(--wp--preset--spacing--400);
	}
}

/* Formulario de profesionales: dos columnas en escritorio (texto compacto +
   formulario en tarjeta ligera), una columna en móvil. Anchuras acotadas
   (spec: ~1180px total, intro 320-380px, formulario hasta 760px) para que los
   campos no se estiren a todo el ancho de la pantalla. */
.patia-pro-form-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--500);
	align-items: flex-start;
	max-width: 1180px !important;
}

.patia-pro-form-grid__intro {
	flex: 1 1 300px;
	max-width: 360px;
}

.patia-pro-form-grid__intro h2 {
	margin-top: 0;
}

.patia-pro-form-grid__intro p {
	color: var(--wp--preset--color--text-muted);
}

.patia-pro-form-grid__form {
	flex: 1 1 480px;
	max-width: 760px;
	min-width: 0;
}

/* Tarjeta muy ligera: solo para diferenciar el formulario del fondo (que en
   esta sección es el "sand" de marca, no blanco), sin convertir cada campo
   en su propia tarjeta. */
.patia-pro-form-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--patia-radius-medium);
	box-shadow: var(--patia-shadow-soft);
	padding: 32px 36px;
}

@media (max-width: 480px) {
	.patia-pro-form-card {
		padding: 20px;
	}
}

/* Campos más compactos que el resto del sitio (altura fija ~50px, separación
   18-22px), acotados a esta tarjeta para no afectar a los formularios de
   lista de espera o contacto. "box-sizing: border-box" es necesario porque
   ".patia-form input/select/textarea" ya fija width:100% sin declararlo — sin
   él, el padding se suma al 100% del ancho y los campos de dos columnas
   invaden la columna contigua (la causa real del "choque" entre campos). */
.patia-pro-form-card .patia-form input[type="text"],
.patia-pro-form-card .patia-form input[type="email"],
.patia-pro-form-card .patia-form input[type="tel"],
.patia-pro-form-card .patia-form select {
	height: 50px;
	min-height: 0;
	padding: 0 16px;
	box-sizing: border-box;
	max-width: 100%;
}

.patia-pro-form-card .patia-form textarea {
	min-height: 96px;
	max-height: 160px;
	padding: 14px 16px;
	box-sizing: border-box;
	max-width: 100%;
}

.patia-pro-form-card .patia-form label {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: 8px;
}

.patia-pro-form-card .patia-form .patia-field {
	min-width: 0;
	width: 100%;
	margin-bottom: 20px;
}

.patia-form-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 24px;
	row-gap: 22px;
	margin-bottom: 20px;
}

.patia-form-row .patia-field {
	margin-bottom: 0;
}

@media (min-width: 560px) {
	.patia-form-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Información opcional plegada por defecto: botón real (no <details>) para
   poder exponer aria-expanded y animar la apertura con una transición breve
   vía CSS Grid en vez de calcular alturas en JS. */
.patia-pro-form-more {
	margin-bottom: 20px;
	padding-top: 4px;
	border-top: 1px solid var(--wp--preset--color--border);
}

.patia-pro-form-more__toggle {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0.35rem 0;
	border: none;
	background: none;
	color: var(--wp--preset--color--primary-dark);
	font-family: inherit;
	font-weight: 600;
	font-size: 0.9375rem;
	text-align: left;
}

.patia-pro-form-more__toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 3px;
	border-radius: var(--patia-radius-small);
}

.patia-pro-form-more__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--primary);
	font-size: 0.9375rem;
	line-height: 1;
}

.patia-pro-form-more__icon::before {
	content: "+";
}

.patia-pro-form-more.is-open .patia-pro-form-more__icon::before {
	content: "–";
}

.patia-pro-form-more__panel-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.2s ease;
}

.patia-pro-form-more.is-open .patia-pro-form-more__panel-wrap {
	grid-template-rows: 1fr;
}

.patia-pro-form-more__panel {
	overflow: hidden;
	min-height: 0;
}

.patia-pro-form-more.is-open .patia-pro-form-more__panel {
	padding-top: 26px;
}

/* Consentimientos: separación más ajustada que el resto de campos (14-16px
   entre checkboxes, checkbox alineado con la primera línea de texto). */
.patia-pro-form-consents {
	margin-bottom: 24px;
}

.patia-pro-form-consents .patia-field {
	margin-bottom: 15px;
}

.patia-pro-form-consents .patia-field:last-child {
	margin-bottom: 0;
}

.patia-pro-form-consents label {
	display: flex;
	align-items: flex-start;
	gap: 11px;
}

.patia-pro-form-consents input[type="checkbox"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 0.1em;
}

.patia-pro-form-card .patia-form button[type="submit"] {
	margin-top: 0;
}

.patia-pro-form-card .patia-form .patia-field-hint {
	margin-top: 10px;
}

@media (max-width: 480px) {
	.patia-pro-form-card .patia-form button[type="submit"] {
		width: 100%;
	}
}

.patia-form-message__title {
	margin: 0 0 0.35em;
	font-size: 1.125rem;
	font-weight: 700;
}

.patia-form-message__title + p {
	margin: 0;
}

/* Lista de espera: cabecera editorial centrada — mismo patrón que las demás
   páginas interiores (".patia-hero-compact", ver "Qué encontrarás" y "Para
   profesionales"), pero sin CTA ni enlace de scroll (el formulario aparece
   justo después) y con más aire arriba/abajo al ser la única pieza antes de
   la franja de confianza. */
.patia-waitlist-hero.patia-section {
	padding-top: 96px;
	padding-bottom: 56px;
}

.patia-waitlist-hero .patia-hero-compact__inner {
	max-width: 800px;
}

.patia-waitlist-hero .patia-hero-compact__inner h1 {
	margin-bottom: 26px;
}

@media (max-width: 899px) {
	.patia-waitlist-hero.patia-section {
		padding-top: 56px;
		padding-bottom: 32px;
	}
}

/* Franja de confianza: puente visual entre la cabecera y el formulario, sobre
   un fondo verde-azulado muy claro (mismo lenguaje que los fondos suaves de
   Patia). Tres mini-cards blancas y redondeadas — no una lista de texto — con
   el mismo tratamiento de icono-en-círculo que ".patia-faq-category__icon",
   para que se sienta coherente con el resto del sitio en vez de "legal". */
.patia-waitlist-trust-strip.patia-section {
	background: var(--wp--preset--color--sand);
	padding-block: 52px;
}

.patia-waitlist-trust-strip__kicker {
	margin: 0 0 24px;
	color: var(--wp--preset--color--secondary);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
}

.patia-waitlist-trust-strip__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 24px;
	row-gap: 20px;
	max-width: 1040px !important;
	margin-inline: auto;
}

.patia-waitlist-trust-strip__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--wp--preset--color--surface);
	border-radius: var(--patia-radius-medium);
	box-shadow: var(--patia-shadow-soft);
	padding: 32px 24px;
}

.patia-waitlist-trust-strip__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--primary);
	margin-bottom: 16px;
}

.patia-waitlist-trust-strip__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin-bottom: 6px;
}

.patia-waitlist-trust-strip__text {
	color: var(--wp--preset--color--text-muted);
	font-size: 0.9375rem;
	line-height: 1.5;
}

@media (max-width: 899px) {
	.patia-waitlist-trust-strip__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 16px;
	}

	.patia-waitlist-trust-strip__card {
		padding: 24px 20px;
	}
}

/* Formulario: separación superior contenida para quedar conectado con la
   franja de confianza (sin el padding-top habitual de 96/72px de
   ".patia-section"). Tarjeta centrada, sin distribución en dos columnas. */
.patia-waitlist-form-section.patia-section {
	padding-top: 48px;
}

.patia-waitlist-form-section .patia-pro-form-card {
	max-width: 720px;
	margin-inline: auto;
}

.patia-waitlist-page__form-title {
	margin: 0 0 0.35em;
}

.patia-waitlist-page__form-subtitle {
	margin: 0 0 var(--wp--preset--spacing--300);
	color: var(--wp--preset--color--text-muted);
}

.patia-form-back-link {
	margin-top: var(--wp--preset--spacing--300);
}

.patia-form-back-link a {
	color: var(--wp--preset--color--text-muted);
}

@media (max-width: 899px) {
	.patia-waitlist-form-section.patia-section {
		padding-top: 32px;
	}
}

/* Contacto: cabecera editorial centrada, algo más ancha que la de "lista de
   espera" porque el texto introductorio es más largo. */
.patia-contact-hero.patia-section {
	padding-top: 96px;
	padding-bottom: 64px;
}

.patia-contact-hero .patia-hero-compact__inner {
	max-width: 780px;
}

.patia-contact-hero .patia-hero-compact__inner h1 {
	margin-bottom: 26px;
}

@media (max-width: 899px) {
	.patia-contact-hero.patia-section {
		padding-top: 56px;
		padding-bottom: 40px;
	}
}

/* Vías de contacto: tres cards diferenciadas sobre fondo "sand", mismo
   tratamiento de icono-en-círculo que ".patia-faq-category__icon" y
   ".patia-waitlist-trust-strip__icon" — pero con más aire, iconos más
   protagonistas y una composición ligeramente asimétrica (email algo más
   ancha, ver ".patia-contact-methods__grid") en vez de tres cajas clonadas. */
.patia-contact-methods.patia-section {
	background: var(--wp--preset--color--sand);
	padding-block: 64px;
}

.patia-contact-methods__heading {
	text-align: center;
	margin-bottom: 12px;
}

.patia-contact-methods__intro {
	max-width: 560px;
	margin: 0 auto 40px;
	color: var(--wp--preset--color--text-muted);
	text-align: center;
}

.patia-contact-methods__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 28px;
	row-gap: 24px;
	max-width: 1120px !important;
	margin-inline: auto;
	align-items: stretch;
}

.patia-contact-method {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--patia-radius-medium);
	box-shadow: var(--patia-shadow-soft);
	padding: 26px 24px;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

a.patia-contact-method:hover {
	border-color: var(--wp--preset--color--secondary);
	box-shadow: var(--patia-shadow-medium);
	transform: translateY(-3px);
	color: var(--wp--preset--color--text);
}

.patia-contact-method__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--primary);
	margin-bottom: 12px;
}

.patia-contact-method__icon svg {
	width: 22px;
	height: 22px;
}

/* La card de email es la vía "destacada": icono en fondo sólido primario en
   vez del círculo "sand" que comparten redes/formulario, para que se lea
   como la opción con más peso sin depender solo del ancho de columna. */
.patia-contact-method--email .patia-contact-method__icon {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--inverse);
}

.patia-contact-method__label {
	display: inline-block;
	color: var(--wp--preset--color--secondary);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.patia-contact-method__title {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin-bottom: 6px;
}

.patia-contact-method__text {
	color: var(--wp--preset--color--text-muted);
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* CTA "secundario" de la card de email: texto + flecha, mismo lenguaje que
   ".patia-hero-compact__scroll" pero declarado aparte porque aquí vive
   dentro de un enlace ya clicable (la card entera), no como enlace propio. */
.patia-contact-method__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 14px;
	color: var(--wp--preset--color--primary);
	font-size: 0.9375rem;
	font-weight: 700;
}

.patia-contact-method__cta-arrow {
	transition: transform 0.15s ease;
}

a.patia-contact-method:hover .patia-contact-method__cta-arrow {
	transform: translateX(3px);
}

.patia-contact-method__social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
}

.patia-contact-method__social-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.8rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--patia-radius-pill);
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--text);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--patia-shadow-soft);
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.patia-contact-method__social-link:hover,
.patia-contact-method__social-link:focus-visible {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--primary);
	transform: translateY(-2px);
}

.patia-contact-method__social-link--pending {
	color: var(--wp--preset--color--soft-grey);
	background: none;
	box-shadow: none;
	cursor: default;
}

.patia-contact-method__social-link--pending:hover {
	border-color: var(--wp--preset--color--border);
	background: none;
	color: var(--wp--preset--color--soft-grey);
	transform: none;
}

/* CTA "destacado" de la card de formulario: sigue siendo ".patia-button"
   (botón real, no un enlace de texto), pero con tamaño reducido respecto al
   botón por defecto del sitio — aquí compite por espacio con dos CTA mucho
   más ligeros (el enlace de email y los chips de redes) y el tamaño
   estándar (min-height 44px, padding 0.75rem 1.5rem) resultaba
   desproporcionado dentro de la card. */
.patia-contact-method__form-cta.patia-button {
	min-height: 38px;
	padding: 0.5rem 1.1rem;
	font-size: 0.875rem;
	margin-top: 14px;
}

@media (max-width: 899px) {
	.patia-contact-methods.patia-section {
		padding-block: 40px;
	}

	.patia-contact-methods__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.patia-contact-method {
		padding: 32px 24px;
	}
}

/* Formulario de contacto: dos columnas (intro + tarjeta), mismo patrón que
   ".patia-pro-form-grid" con proporciones propias porque el texto de esta
   introducción es más corto. */
.patia-contact-form-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 64px;
	align-items: flex-start;
	max-width: 1120px !important;
}

.patia-contact-form-grid__intro {
	flex: 1 1 280px;
	max-width: 360px;
}

.patia-contact-form-grid__intro h2 {
	margin-top: 0;
}

.patia-contact-form-grid__intro > p {
	color: var(--wp--preset--color--text-muted);
}

.patia-contact-form-grid__note {
	margin-top: var(--wp--preset--spacing--400);
	font-size: 0.9375rem;
}

.patia-contact-form-grid__form {
	flex: 1 1 480px;
	max-width: 720px;
	min-width: 0;
}

.patia-contact-form-grid__form .patia-pro-form-card {
	max-width: 100%;
}

@media (max-width: 899px) {
	.patia-contact-form-grid__intro {
		max-width: 100%;
	}
}

/* Novedades: cabecera compacta (mismo patrón que Contacto/Lista de espera),
   publicación destacada como card clicable de dos columnas, cuadrícula de
   tarjetas y estado vacío cuidado — todo reutilizando tokens ya existentes
   (radios, sombras suaves, ".patia-badge" para la categoría). */
.patia-novedades-hero.patia-section {
	padding-top: 88px;
	padding-bottom: 48px;
}

@media (max-width: 899px) {
	.patia-novedades-hero.patia-section {
		padding-top: 56px;
		padding-bottom: 32px;
	}
}

.patia-novedades-empty.patia-section {
	padding-block: 72px;
}

.patia-novedades-empty__box {
	max-width: 560px;
	margin-inline: auto;
	text-align: center;
	background: var(--wp--preset--color--sand);
	border-radius: var(--patia-radius-medium);
	padding: 48px 40px;
}

.patia-novedades-empty__box h2 {
	margin-top: 0;
	color: var(--wp--preset--color--primary);
}

.patia-novedades-empty__box p {
	color: var(--wp--preset--color--text-muted);
	margin-bottom: var(--wp--preset--spacing--300);
}

@media (max-width: 480px) {
	.patia-novedades-empty__box {
		padding: 32px 24px;
	}
}

/* Publicación destacada: card clicable de dos columnas (imagen + cuerpo) en
   escritorio, apilada en móvil. */
.patia-novedades-featured.patia-section {
	padding-top: 8px;
	padding-bottom: 56px;
}

.patia-news-featured {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	max-width: 1140px !important;
	margin-inline: auto;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--patia-radius-medium);
	box-shadow: var(--patia-shadow-soft);
	overflow: hidden;
	text-decoration: none;
	color: var(--wp--preset--color--text);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.patia-news-featured:hover {
	border-color: var(--wp--preset--color--secondary);
	box-shadow: var(--patia-shadow-medium);
	transform: translateY(-2px);
	color: var(--wp--preset--color--text);
}

.patia-news-featured__media {
	flex: 1 1 420px;
	min-width: 0;
	max-height: 340px;
	overflow: hidden;
}

.patia-news-featured__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.patia-news-featured__body {
	flex: 1 1 380px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 40px;
}

.patia-news-featured__category {
	margin-bottom: 12px;
}

.patia-news-featured__date {
	color: var(--wp--preset--color--soft-grey);
	font-size: 0.8125rem;
	margin-bottom: 10px;
}

.patia-news-featured__title {
	font-size: 1.5rem;
	color: var(--wp--preset--color--primary);
	margin: 0 0 12px;
	line-height: 1.25;
}

.patia-news-featured__excerpt {
	color: var(--wp--preset--color--text-muted);
	line-height: 1.6;
	margin: 0 0 20px;
}

.patia-news-featured__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	font-size: 0.9375rem;
}

@media (max-width: 899px) {
	.patia-news-featured {
		flex-direction: column;
	}

	.patia-news-featured__media {
		flex-basis: auto;
		max-height: 220px;
	}

	.patia-news-featured__body {
		flex-basis: auto;
		padding: 28px 24px;
	}
}

/* Cuadrícula de tarjetas: 3 columnas en escritorio, 2 en tablet, 1 en móvil. */
.patia-novedades-grid-section.patia-section {
	padding-top: 0;
	padding-bottom: 72px;
}

.patia-novedades-grid-section h2 {
	margin-bottom: 28px;
}

.patia-news-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.patia-news-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--patia-radius-medium);
	box-shadow: var(--patia-shadow-soft);
	overflow: hidden;
	text-decoration: none;
	color: var(--wp--preset--color--text);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.patia-news-card:hover {
	border-color: var(--wp--preset--color--secondary);
	box-shadow: var(--patia-shadow-medium);
	transform: translateY(-3px);
	color: var(--wp--preset--color--text);
}

/* .patia-news-card y .patia-news-featured fijan "display: flex" con una
   especificidad mayor que la regla UA "[hidden] { display: none }", así que
   el atributo hidden (usado por el selector de categorías de /novedades/)
   no bastaría por sí solo para ocultarlas sin esta anulación explícita. */
.patia-news-card[hidden],
.patia-news-featured[hidden] {
	display: none;
}

.patia-news-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.patia-news-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.patia-news-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px;
}

.patia-news-card__category {
	margin-bottom: 10px;
}

.patia-news-card__date {
	color: var(--wp--preset--color--soft-grey);
	font-size: 0.8125rem;
	margin-bottom: 8px;
}

.patia-news-card__title {
	font-size: 1.0625rem;
	color: var(--wp--preset--color--primary);
	margin: 0 0 8px;
	line-height: 1.3;
}

.patia-news-card__excerpt {
	color: var(--wp--preset--color--text-muted);
	font-size: 0.9375rem;
	line-height: 1.5;
	margin: 0;
}

@media (max-width: 900px) {
	.patia-news-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.patia-news-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Página de detalle de una novedad: ancho de lectura de 720px (mismo token
   que el resto del sitio), sin barra lateral. */
.patia-single-novedad.patia-section {
	padding-top: 56px;
	padding-bottom: 8px;
}

.patia-single-novedad__back {
	margin: 0 0 26px;
}

.patia-single-novedad__back a {
	color: var(--wp--preset--color--text-muted);
	font-size: 0.9375rem;
	text-decoration: none;
}

.patia-single-novedad__back a:hover {
	color: var(--wp--preset--color--primary);
}

.patia-single-novedad__category {
	margin-bottom: 18px;
}

.patia-single-novedad__category a {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.75rem;
	border-radius: var(--patia-radius-pill);
	background: var(--wp--preset--color--secondary-light);
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.patia-single-novedad__date {
	display: block;
	color: var(--wp--preset--color--soft-grey);
	font-size: 0.875rem;
	margin-bottom: 12px;
}

.patia-single-novedad h1 {
	margin: 0 0 20px;
}

.patia-single-novedad__intro {
	font-size: 1.125rem;
	color: var(--wp--preset--color--text-muted);
	line-height: 1.6;
	margin: 0 0 36px;
}

/* Imagen de apoyo editorial, no elemento dominante: tamaño contenido y
   centrado en escritorio (object-fit:contain para no recortarla), a ancho
   completo y altura automática en móvil. */
.patia-single-novedad__image {
	margin: 36px 0;
	text-align: center;
}

.patia-single-novedad__image img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 520px;
	max-height: 400px;
	margin-inline: auto;
	object-fit: contain;
	border-radius: var(--patia-radius-medium);
}

@media (max-width: 599px) {
	.patia-single-novedad__image img {
		max-width: 100%;
		max-height: none;
	}
}

/* Cuerpo del artículo: tamaño y separación algo mayores que el resto de la
   web (17px/1.7 en vez del cuerpo de texto estándar) para que se lea como
   contenido editorial, no como el texto compacto de las tarjetas/formularios. */
.patia-single-novedad__content {
	color: var(--wp--preset--color--text);
	font-size: 17px;
	line-height: 1.7;
}

.patia-single-novedad__content h2 {
	margin: 40px 0 16px;
	font-size: 1.375rem;
}

.patia-single-novedad__content h3 {
	margin: 32px 0 12px;
	font-size: 1.125rem;
}

.patia-single-novedad__content p {
	margin: 0 0 22px;
}

.patia-single-novedad__content ul,
.patia-single-novedad__content ol {
	margin: 0 0 22px;
	padding-left: 1.4em;
}

.patia-single-novedad__content li {
	margin-bottom: 0.4em;
}

/* FAQ por categorías: mismo componente que la FAQ de la home (categorías
   clicables + acordeones por categoría activa), con solo 4 categorías en vez
   de 6 — el grid de categorías se recompone a 2×2 en vez de heredar las 3
   columnas pensadas para 6, y los acordeones quedan más contenidos. */
.patia-pro-page .patia-faq-header {
	margin-bottom: 32px;
}

.patia-pro-faq-categories {
	margin-bottom: 40px;
}

@media (min-width: 900px) {
	.patia-pro-faq-categories {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 640px;
		margin-inline: auto;
	}
}

.patia-pro-faq {
	max-width: 780px;
	margin: var(--wp--preset--spacing--300) auto 0;
	gap: 12px;
}

.patia-pro-faq summary {
	min-height: 38px;
	padding-block: 0.4rem;
}

.patia-pro-faq__more {
	margin-top: var(--wp--preset--spacing--400);
	text-align: center;
}

/* --- Página general de "Preguntas frecuentes" (/preguntas-frecuentes) ---
   Mismo componente de categorías + acordeones que la home y "Para
   profesionales", con una capa extra por encima: el selector de audiencia
   (persona / profesional), que sustituye qué bloque de categorías y de
   acordeones se muestra. Solo un "[data-faq-audience-panel]" está visible a
   la vez; el otro permanece en el DOM (oculto con "hidden") para que sus ids
   sean estables al compartir URL con "?audiencia=...&categoria=...". */
.patia-faq-audience-switch-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: var(--wp--preset--spacing--500);
}

.patia-faq-audience-switch {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--patia-radius-pill);
}

.patia-faq-audience-switch__btn {
	border: none;
	background: transparent;
	padding: 0.7rem 1.75rem;
	border-radius: var(--patia-radius-pill);
	color: var(--wp--preset--color--text-muted);
	font-family: inherit;
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.patia-faq-audience-switch__btn.is-active {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--inverse);
	box-shadow: var(--patia-shadow-soft);
}

.patia-faq-audience-switch__btn:hover:not(.is-active) {
	color: var(--wp--preset--color--primary);
}

.patia-faq-audience-switch__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.patia-faq-audience-switch {
		width: 100%;
	}

	.patia-faq-audience-switch__btn {
		flex: 1 1 0;
	}
}

/* Recorrido "Para ti y tu perro": 5 categorías — 3 en la primera fila y 2
   centradas en la segunda, gracias a flex-wrap + justify-content:center en
   vez del grid de columnas fijas que usan la home (3 col, 6 categorías) y
   "Para profesionales" (2×2, 4 categorías). */
.patia-faq-categories.patia-faq-categories--personas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 980px;
	margin-inline: auto;
}

.patia-faq-categories--personas .patia-faq-category {
	flex: 1 1 260px;
	max-width: 300px;
}

@media (max-width: 899px) {
	.patia-faq-categories--personas .patia-faq-category {
		flex: 1 1 44%;
		max-width: none;
	}
}

@media (max-width: 479px) {
	.patia-faq-categories--personas .patia-faq-category {
		flex: 1 1 100%;
	}
}

.patia-faq-audience-panel .patia-faq-categories {
	margin-bottom: var(--wp--preset--spacing--500);
}

/* --- Hero: a bordes, integrada en un único plano de color, sin recuadros ---
   El vídeo de Moka conserva su propio fondo blanco de estudio; en vez de
   recortarlo, la sección adopta ese mismo blanco para que ambos se fundan
   sin caja ni recuadro visible alrededor del vídeo. */
.patia-hero--full {
	display: flex;
	align-items: center;
	/* padding-top = espaciado original de la sección + los 24px que antes
	   aportaba el margin-block-start del bloque raíz (ver .patia-main--flush):
	   el fondo llega ahora hasta la cabecera, pero el titular y el vídeo
	   conservan la misma posición vertical que tenían antes de quitarlo. */
	padding-top: calc(var(--wp--preset--spacing--300) + 24px);
	padding-bottom: var(--wp--preset--spacing--300);
	/* Gris de estudio exacto del vídeo de Moka (#EFF2F2), no blanco puro:
	   así la sección y el fondo del vídeo se funden sin costura visible. */
	background: #EFF2F2;
	overflow: hidden;
}

.patia-hero__inner {
	position: relative;
}

@media (min-width: 900px) {
	.patia-hero--full {
		min-height: calc(100vh - 73px);
		padding-top: calc(var(--wp--preset--spacing--200) + 24px);
		padding-bottom: var(--wp--preset--spacing--600);
	}
}

.patia-hero__heading {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(2.5rem, 3.2vw + 1.5rem, 3.75rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
	margin: 0 0 0.6em;
}

.patia-hero__subtitle {
	max-width: 620px;
	font-size: 0.9375rem;
	line-height: 1.5;
	margin-top: 0;
	margin-bottom: 1em;
}

.patia-hero__subtitle strong {
	color: var(--wp--preset--color--text);
	font-weight: 700;
}

.patia-hero__inner .wp-block-buttons {
	margin-bottom: 0;
}

.patia-hero__word {
	display: inline-block;
	opacity: 0;
	animation: patia-word-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	margin-right: 0.24em;
}

@keyframes patia-word-pop {
	0% {
		opacity: 0;
		transform: translateY(36px) scale(0.8) rotate(-3deg);
		filter: blur(6px);
	}
	60% {
		opacity: 1;
		transform: translateY(-4px) scale(1.03) rotate(0.5deg);
		filter: blur(0);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1) rotate(0deg);
		filter: blur(0);
	}
}

.patia-hero__anim--fade {
	opacity: 0;
	animation: patia-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.patia-hero__anim--figure {
	opacity: 0;
	animation: patia-slide-in-right 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.patia-hero__anim--badge {
	opacity: 0;
	animation: patia-scale-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

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

@keyframes patia-slide-in-right {
	from {
		opacity: 0;
		transform: translateX(32px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes patia-scale-in {
	from {
		opacity: 0;
		transform: scale(0.85);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Moka se integra directamente en el plano de color del hero: sin tarjeta,
   sin recuadro, sin fondo propio — vídeo con canal alfa (croma retirado en
   post-producción) apoyado en el suelo visual de la sección, como un elemento
   más de la escena en vez de una foto flotando encima. */
.patia-hero__figure {
	position: relative;
	max-width: 260px;
	margin-inline: auto;
}

.patia-hero__figure picture,
.patia-hero__figure img,
.patia-hero__video {
	display: block;
	width: 100%;
	height: auto;
	/* El gris de estudio del vídeo no es perfectamente plano (ligero viñeteado),
	   así que en vez de perseguir un color exacto, el propio vídeo se disuelve
	   en el fondo de la sección por los bordes — sin costura visible en ningún caso. */
	mask-image: radial-gradient(ellipse 68% 72% at 50% 40%, black 40%, transparent 92%);
	-webkit-mask-image: radial-gradient(ellipse 68% 72% at 50% 40%, black 40%, transparent 92%);
}

@media (min-width: 900px) {
	/* Antes la figura se dimensionaba solo a partir de la altura de la
	   ventana (78vh), sin límite ligado al ancho disponible: en cualquier
	   ventana con algo más de alto de lo habitual, el vídeo ya no cabía
	   junto al texto y el flex-wrap lo mandaba a la fila siguiente (debajo
	   del texto) aunque hubiese sitio de sobra en horizontal. Ahora el
	   ancho es el que manda —limitado también por lo que deja libre el
	   bloque de texto— y la altura se deriva con aspect-ratio, así que
	   siempre hay hueco para colocarlo al lado y, si no lo hay, encoge en
	   vez de bajar de línea (ver flex-wrap: nowrap más abajo).
	*/
	.patia-hero__figure {
		max-width: none;
		width: min(38vw, 480px);
		height: auto;
		aspect-ratio: 800 / 1090;
		margin-inline: 0;
		align-self: flex-end;
		flex-shrink: 1;
		min-width: 0;
	}

	.patia-hero__figure .patia-hero__video {
		width: 100%;
		height: auto;
	}

	.patia-hero--full .patia-hero__inner {
		align-items: flex-end !important;
		flex-wrap: nowrap;
	}
}

/* --- Página 404 --- */
.patia-error-404 {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: var(--wp--preset--spacing--300) var(--wp--preset--spacing--500);
	/* Mismo gris de estudio exacto del vídeo de Moka que usa .patia-hero--full,
	   para que el vídeo se funda con el fondo sin costura visible. */
	background: #EFF2F2;
	text-align: center;
	overflow: hidden;
}

.patia-error-404__digits {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(9rem, 34vw, 22rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--border);
	user-select: none;
	pointer-events: none;
}

.patia-error-404__inner {
	position: relative;
	z-index: 1;
}

.patia-error-404__stage {
	max-width: 170px;
	margin: 0 auto var(--wp--preset--spacing--200);
}

.patia-error-404__video {
	display: block;
	width: 100%;
	height: auto;
	/* Mismo truco de .patia-hero__figure: el vídeo se disuelve en el fondo
	   por los bordes en vez de recortarse en un rectángulo visible. */
	mask-image: radial-gradient(ellipse 68% 72% at 50% 40%, black 40%, transparent 92%);
	-webkit-mask-image: radial-gradient(ellipse 68% 72% at 50% 40%, black 40%, transparent 92%);
}

.patia-error-404__heading {
	color: var(--wp--preset--color--primary);
	font-size: clamp(1.75rem, 2.2vw + 1.2rem, 2.5rem);
	margin: 0 0 0.5em;
}

.patia-error-404__text {
	max-width: 440px;
	margin: 0 auto var(--wp--preset--spacing--400);
	color: var(--wp--preset--color--text-muted);
}

.patia-error-404 .wp-block-buttons {
	justify-content: center;
}

@media (min-width: 600px) {
	.patia-error-404__stage {
		max-width: 200px;
	}
}

/* --- Footer --- */
.patia-footer {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--inverse);
}

.patia-footer a {
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	transition: color 0.15s ease;
}

.patia-footer a:hover,
.patia-footer a:focus-visible {
	color: var(--wp--preset--color--secondary-light);
	text-decoration: underline;
	text-decoration-color: rgba(232, 244, 244, 0.5);
	text-underline-offset: 3px;
}

.patia-footer__inner {
	max-width: var(--wp--custom--max-width--wide);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--300);
	padding-block: 6rem 3.25rem;
	display: grid;
	gap: var(--wp--preset--spacing--400) var(--wp--preset--spacing--300);
}

.patia-footer__brand {
	grid-column: 1 / -1;
}

@media (min-width: 600px) {
	.patia-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 900px) {
	.patia-footer__inner {
		grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--400) var(--wp--preset--spacing--400);
	}

	.patia-footer__brand {
		grid-column: auto;
	}
}

.patia-footer__logo {
	display: block;
	width: 155px;
	height: auto;
	margin-bottom: 0.75rem;
}

.patia-footer__tagline {
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--wp--preset--color--inverse);
	margin: 0 0 1.125rem;
}

.patia-footer__description {
	font-size: 0.95rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	max-width: 420px;
	margin: 0;
}

.patia-footer__heading {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--wp--preset--color--inverse);
	text-transform: none;
	margin: 0 0 var(--wp--preset--spacing--300);
}

.patia-footer nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.patia-footer nav a {
	display: inline-block;
	padding-block: 0.25rem;
	font-size: 0.95rem;
	line-height: 1.5;
}

.patia-footer__bottom {
	max-width: var(--wp--custom--max-width--wide);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--300);
	padding-block: 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.patia-footer__bottom p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, 0.7);
}

/* --- Consentimiento de cookies (banner mínimo) --- */
.patia-consent-banner {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 60;
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--inverse);
	padding: var(--wp--preset--spacing--300);
	display: none;
}

.patia-consent-banner.is-visible {
	display: block;
}

.patia-consent-banner__inner {
	max-width: var(--wp--custom--max-width--wide);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--200);
	align-items: center;
	justify-content: space-between;
}

.patia-consent-banner__actions {
	display: flex;
	gap: var(--wp--preset--spacing--200);
	flex-wrap: wrap;
}

.patia-consent-banner .patia-button--secondary {
	color: var(--wp--preset--color--inverse);
	border-color: var(--wp--preset--color--inverse);
}

.patia-consent-banner .patia-button--secondary:hover {
	background: var(--wp--preset--color--inverse);
	color: var(--wp--preset--color--text);
}

/* --- Página "Qué encontrarás" --- */

#intro-patia {
	scroll-margin-top: 96px;
}

/* Hero editorial compacto: una sola columna, sin ilustración ni mockup —
   Moka ya protagoniza la home, aquí no vuelve a ocupar un hero completo.
   Introducción breve, no pantalla de bienvenida: padding y anchura
   deliberadamente recogidos. */
.patia-hero-compact {
	background: var(--wp--preset--color--background);
	padding-top: 40px;
	padding-bottom: 28px;
}

@media (min-width: 900px) {
	.patia-hero-compact {
		padding-top: 56px;
		padding-bottom: 40px;
	}
}

/* El block-gap por defecto de WP añade margin-block-start al bloque
   siguiente dentro de <main>; sumado al padding-bottom del hero, dejaba una
   franja blanca excesiva antes de la sección "No todos los perros...". */
.patia-hero-compact + * {
	margin-block-start: 0;
}

.patia-hero-compact__inner {
	max-width: 680px;
	margin-inline: auto;
	text-align: center;
}

.patia-hero-compact h1 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(2rem, 2.2vw + 1.3rem, 2.75rem);
	line-height: 1.16;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
	margin: 0 0 20px;
}

.patia-hero-compact p {
	max-width: 58ch;
	margin: 0 auto 22px;
	color: var(--wp--preset--color--text-muted);
	font-size: 1.0625rem;
}

/* Texto-botón: acción claramente clicable pero editorial — sin parecer un
   enlace HTML por defecto ni competir con un CTA principal. */
.patia-hero-compact__scroll {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--wp--preset--color--primary);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.15s ease;
}

.patia-hero-compact__scroll:hover {
	color: var(--wp--preset--color--secondary);
}

.patia-hero-compact__scroll:hover .patia-hero-compact__scroll-arrow {
	transform: translateY(2px);
}

.patia-hero-compact__scroll-arrow {
	display: inline-block;
	transition: transform 0.15s ease;
}

/* Bloque introductorio: composición editorial asimétrica (texto amplio +
   ilustración recortada, sin tarjeta ni caja detrás). */
.patia-intro {
	gap: var(--wp--preset--spacing--600);
}

.patia-intro__text {
	flex: 1.3 1 420px;
	min-width: 0;
}

.patia-intro__text p {
	max-width: 58ch;
	margin-top: 0.75em;
}

.patia-intro__media {
	flex: 1 1 320px;
	min-width: 0;
}

.patia-intro__media img {
	display: block;
	width: 100%;
	max-width: 360px;
	height: auto;
	margin-inline: auto;
}

@media (max-width: 781px) {
	.patia-intro {
		flex-direction: column;
		text-align: center;
	}

	.patia-intro__text,
	.patia-intro__media {
		flex-basis: auto;
	}

	.patia-intro__text p {
		margin-inline: auto;
	}
}

.patia-callout {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	margin-top: 1.25em;
}

.patia-note {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
	margin-top: 1em;
}

.patia-inline-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: var(--wp--preset--spacing--300);
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: none;
}

.patia-inline-link:hover {
	color: var(--wp--preset--color--secondary);
}

/* --- Explorador interactivo: la pieza diferencial de la página. Cuatro
   pestañas, un único panel visible cada vez, altura estable (todos los
   paneles comparten la misma celda de grid, así la fila se dimensiona según
   el más alto aunque el resto esté oculto con visibility). --- */
.patia-explorer {
	margin-top: var(--wp--preset--spacing--500);
	display: grid;
	gap: var(--wp--preset--spacing--400);
}

.patia-explorer__nav {
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 2px;
	scrollbar-width: thin;
}

.patia-explorer__tab {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-shrink: 0;
	padding: 0.65rem 1rem;
	border: none;
	border-radius: var(--patia-radius-medium);
	background: transparent;
	color: var(--wp--preset--color--text);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.patia-explorer__tab:hover {
	background: var(--wp--preset--color--sand);
}

.patia-explorer__tab.is-active {
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--primary);
}

.patia-explorer__tab-icon {
	display: inline-flex;
	color: var(--wp--preset--color--soft-grey);
	transition: color 0.15s ease;
}

.patia-explorer__tab.is-active .patia-explorer__tab-icon {
	color: var(--wp--preset--color--primary);
}

/* Mobile-first: solo el panel activo se renderiza (display:none en el resto)
   para no dejar huecos — la altura estable "según el panel más alto" es un
   requisito de escritorio (ver media query), en móvil cada panel ocupa solo
   lo que necesita. */
.patia-explorer__panel {
	display: none;
	flex-direction: column;
	gap: var(--wp--preset--spacing--400);
	opacity: 0;
}

.patia-explorer__panel.is-active {
	display: flex;
	opacity: 1;
}

.patia-explorer__panel-text {
	display: flex;
	flex-direction: column;
}

/* Estructura editorial común a las cuatro categorías: mismo tamaño/line-height
   de título, mismo estilo de párrafo, mismo peso en la frase destacada y el
   mismo ritmo de márgenes entre elementos — para que ninguna categoría
   "se sienta" distinta de las demás. Se pisan aquí los margin en em de
   .patia-callout/.patia-note/.patia-inline-link (pensados para uso suelto en
   otros bloques) por unos valores fijos en px, iguales para las 4. */
.patia-explorer__panel-text h3 {
	margin: 0 0 26px;
	color: var(--wp--preset--color--primary);
}

.patia-explorer__panel-text > p:not(.patia-callout):not(.patia-note) {
	max-width: 58ch;
	margin: 0 0 26px;
}

.patia-explorer__panel-text .patia-callout {
	margin: 0 0 32px;
}

.patia-explorer__panel-text .patia-inline-link {
	margin-top: 0;
}

.patia-explorer__panel-text .patia-note {
	margin-top: 0;
}

/* Última línea de texto del panel: sin margen sobrante al final. */
.patia-explorer__panel-text > :last-child {
	margin-bottom: 0;
}

/* Contenedor de ilustración de tamaño consistente: todas ocupan el mismo
   espacio visual y se centran dentro de él, aunque cada imagen tenga su
   propia proporción. */
.patia-explorer__panel-media {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
}

.patia-explorer__panel-media img {
	display: block;
	width: auto;
	height: auto;
	max-width: 260px;
	max-height: 220px;
	object-fit: contain;
}

@media (min-width: 900px) {
	.patia-explorer {
		grid-template-columns: 220px 1fr;
		align-items: start;
	}

	.patia-explorer__nav {
		flex-direction: column;
		overflow-x: visible;
		position: sticky;
		top: 96px;
	}

	.patia-explorer__tab {
		width: 100%;
		text-align: left;
		position: relative;
	}

	.patia-explorer__tab.is-active::before {
		content: "";
		position: absolute;
		left: 0;
		top: 8px;
		bottom: 8px;
		width: 3px;
		border-radius: var(--patia-radius-pill);
		background: var(--wp--preset--color--primary);
	}

	/* Altura estable en escritorio: los 4 paneles comparten la misma celda de
	   grid (superpuestos), así el contenedor se dimensiona según el panel más
	   alto y cambiar de categoría no da saltos de layout. En móvil esto se
	   desactiva a propósito (ver reglas base) para no forzar huecos. */
	.patia-explorer__panels {
		display: grid;
	}

	.patia-explorer__panel {
		grid-area: 1 / 1 / -1 / -1;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--600);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.2s ease;
	}

	.patia-explorer__panel.is-active {
		display: flex;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.patia-explorer__panel-text {
		flex: 1.2 1 380px;
		min-width: 0;
	}

	.patia-explorer__panel-media {
		flex: 1 1 280px;
		min-width: 0;
		min-height: 240px;
	}

	.patia-explorer__panel-media img {
		max-width: 280px;
		max-height: 240px;
	}
}

/* Bloque de cierre sobre el desarrollo: editorial, centrado, sin segunda
   columna ni ilustración grande. */
.patia-closing {
	text-align: center;
}

.patia-closing p {
	max-width: 60ch;
	margin-inline: auto;
}

/* CTA final: fondo corporativo, mismo tratamiento tonal que el footer. */
.patia-cta-final {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--inverse);
	text-align: center;
}

.patia-cta-final--compact {
	padding-block: var(--wp--preset--spacing--400);
}

/* :where(.wp-site-blocks) > * añade margin-block-start entre <main> y
   <footer>: no al <footer class="patia-footer"> en sí (ver más abajo), sino
   al <footer class="wp-block-template-part"> que WordPress genera alrededor
   del template part y que es el hijo directo real de .wp-site-blocks — por
   eso apuntar a .patia-footer no bastaba. Con secciones claras es invisible,
   pero entre un CTA final oscuro y el footer oscuro deja una franja de fondo
   blanco visible entre ambos. */
main + footer {
	margin-block-start: 0;
}

.patia-cta-final h2 {
	color: var(--wp--preset--color--inverse);
	margin: 0 0 0.5em;
}

.patia-faq-contact-link {
	margin: var(--wp--preset--spacing--300) 0 0;
	font-size: 0.9375rem;
}

.patia-faq-contact-link a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
}

.patia-faq-contact-link a:hover {
	color: var(--wp--preset--color--inverse);
	text-decoration: underline;
}

.patia-cta-final p {
	max-width: 520px;
	margin: 0 auto var(--wp--preset--spacing--300);
	color: rgba(255, 255, 255, 0.85);
}

.patia-cta-final .wp-block-buttons {
	justify-content: center;
}

/* Especificidad extra necesaria: .wp-block-button__link ya fija fondo/color
   por defecto en este mismo archivo, cargado después de los estilos base de
   bloques, así que un botón de color distinto necesita quedar anidado bajo
   la sección para ganar la cascada (mismo patrón que .patia-mobile-nav__cta). */
.patia-cta-final .wp-block-button__link {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
}

.patia-cta-final .wp-block-button__link:hover {
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--primary);
}