/*
 * PHL · componentes de marca.
 *
 * Regla: aquí no hay un solo valor de color. Todo sale de las variables
 * que genera theme.json (--wp--preset--* y --wp--custom--*).
 * Referencias entre paréntesis: secciones del manual de marca v1.0.
 */

/* ------------------------------------------------------------------
 * Un solo peso, sin itálicas (04.3)
 * Gotu no tiene cursiva ni negrita; el navegador las sintetizaría.
 * ------------------------------------------------------------------ */
em, i, cite, dfn, address, var, q, blockquote, figcaption {
	font-style: normal;
}
b, strong, th, dt, legend, summary {
	font-weight: 400;
}

/* ------------------------------------------------------------------
 * Texto sobre cada superficie (04.2). Sobre Cacao todo va en Crema;
 * sobre cualquier superficie clara, en Cacao. Café solo aparece como
 * muestra en la guía y se trata como superficie oscura.
 * ------------------------------------------------------------------ */
.has-cacao-background-color,
.has-cafe-background-color,
:is(.has-cacao-background-color, .has-cafe-background-color) :is(h1, h2, h3, h4, h5, h6, p, li, a, figcaption) {
	color: var(--wp--preset--color--crema);
}
.phl-clara,
.has-lino-background-color,
.has-crema-background-color,
.has-malva-background-color,
.has-salvia-background-color,
.has-durazno-background-color,
.has-mantequilla-background-color,
:is(.has-lino-background-color, .has-crema-background-color, .has-malva-background-color, .has-salvia-background-color, .has-durazno-background-color, .has-mantequilla-background-color) :is(h1, h2, h3, h4, h5, h6, p, li, a, figcaption) {
	color: var(--wp--preset--color--cacao);
}

/* Excepciones a la herencia de superficie, con más especificidad que las
 * reglas de arriba: versalitas en Café sobre Lino/Crema, etiquetas y botones
 * conservan su propio par de colores aunque estén dentro de una sección Cacao. */
:is(.has-lino-background-color, .has-crema-background-color) :is(.is-style-versalitas, .phl-versalitas) {
	color: var(--wp--preset--color--cafe);
}
.has-cacao-background-color :is(.is-style-etiqueta, .phl-etiqueta):not(.has-cacao-background-color) {
	color: var(--wp--preset--color--cacao);
}
.has-cacao-background-color .wp-block-button:not(.is-style-contorno) .wp-block-button__link {
	color: var(--wp--preset--color--cacao);
}
.has-cacao-background-color .wp-block-button:not(.is-style-contorno) .wp-block-button__link:hover,
.has-cacao-background-color .wp-block-button:not(.is-style-contorno) .wp-block-button__link:focus,
.has-cacao-background-color .phl-demo-hover .wp-block-button__link {
	background-color: var(--wp--preset--color--crema);
	color: var(--wp--preset--color--cacao);
}

/* Imágenes nunca desbordan su contenedor. */
img {
	max-width: 100%;
	height: auto;
}

/* ------------------------------------------------------------------
 * Enlaces: subrayado en Malva, el único subrayado de la marca (04.6)
 * ------------------------------------------------------------------ */
a {
	text-decoration-color: var(--wp--preset--color--malva);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
	transition: text-decoration-color 0.15s ease;
}
a:hover {
	text-decoration-color: var(--wp--preset--color--cacao);
}
a:focus-visible {
	outline: 2px solid var(--wp--preset--color--cacao);
	outline-offset: 3px;
	border-radius: 2px;
}
:is(.has-malva-background-color, .has-salvia-background-color) a {
	text-decoration-color: var(--wp--preset--color--cacao);
}
.has-cacao-background-color a {
	text-decoration-color: var(--wp--preset--color--durazno);
}
.has-cacao-background-color a:hover {
	text-decoration-color: var(--wp--preset--color--crema);
}
.has-cacao-background-color a:focus-visible {
	outline-color: var(--wp--preset--color--crema);
}

/* ------------------------------------------------------------------
 * Versalitas espaciadas (04.3): descriptor, etiquetas y rótulos.
 * Café solo aquí y solo sobre Lino o Crema. Nunca en texto corrido.
 * ------------------------------------------------------------------ */
.is-style-versalitas,
.phl-versalitas {
	font-size: var(--wp--preset--font-size--etiqueta);
	line-height: 1.5;
	letter-spacing: var(--wp--custom--versalitas--tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--cafe);
}
.has-cacao-background-color :is(.is-style-versalitas, .phl-versalitas),
.is-style-versalitas.has-cacao-background-color {
	color: var(--wp--preset--color--crema);
}
:is(.has-malva-background-color, .has-salvia-background-color, .has-durazno-background-color, .has-mantequilla-background-color) :is(.is-style-versalitas, .phl-versalitas) {
	color: var(--wp--preset--color--cacao);
}

/* Etiqueta: rectángulo con extremos en semicírculo (04.4) */
.is-style-etiqueta,
.phl-etiqueta {
	display: inline-block;
	padding: 0.5em 1.2em;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--malva);
	color: var(--wp--preset--color--cacao);
	font-size: var(--wp--preset--font-size--etiqueta);
	line-height: 1.5;
	letter-spacing: var(--wp--custom--versalitas--tracking);
	text-transform: uppercase;
}
:is(.is-style-etiqueta, .phl-etiqueta).has-cacao-background-color {
	color: var(--wp--preset--color--crema);
}

/* ------------------------------------------------------------------
 * Botones: pill Malva/Cacao. Sin sombra, sin borde y relleno a la vez.
 * ------------------------------------------------------------------ */
.wp-block-button__link {
	border: 0;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--cacao);
	outline-offset: 3px;
}
.has-cacao-background-color .wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--crema);
}
.wp-block-button__link[aria-disabled="true"],
.wp-block-button.is-disabled .wp-block-button__link {
	opacity: 0.5;
	pointer-events: none;
}

/* Contorno: pill sin relleno, borde Cacao */
.wp-block-button.is-style-contorno .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--cacao);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--cacao);
}
.wp-block-button.is-style-contorno .wp-block-button__link:hover,
.wp-block-button.is-style-contorno .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--cacao);
	color: var(--wp--preset--color--crema);
}
.has-cacao-background-color .wp-block-button.is-style-contorno .wp-block-button__link {
	color: var(--wp--preset--color--crema);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--crema);
}
.has-cacao-background-color .wp-block-button.is-style-contorno .wp-block-button__link:hover,
.has-cacao-background-color .wp-block-button.is-style-contorno .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--crema);
	color: var(--wp--preset--color--cacao);
}

/* Estados congelados, solo para la guía /estilo */
.phl-demo-hover .wp-block-button__link {
	background-color: var(--wp--preset--color--cacao);
	color: var(--wp--preset--color--crema);
}
.phl-demo-focus .wp-block-button__link {
	outline: 2px solid var(--wp--preset--color--cacao);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------
 * El guion (04.6): separador, viñeta, subrayado corto, progreso.
 * Proporción fija 30 × 8, remates redondos, siempre horizontal.
 * ------------------------------------------------------------------ */

/* Separador: un guion centrado. Sustituye a la línea continua. */
.wp-block-separator {
	border: 0;
	width: var(--wp--custom--guion--largo);
	height: var(--wp--custom--guion--grueso);
	margin-left: auto;
	margin-right: auto;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--malva);
	opacity: 1;
}
.wp-block-separator.alignleft { margin-left: 0; }
.wp-block-separator.alignright { margin-right: 0; }
.has-cacao-background-color .wp-block-separator {
	background-color: var(--wp--preset--color--durazno);
}
.has-malva-background-color .wp-block-separator {
	background-color: var(--wp--preset--color--crema);
}

/* Viñeta: guion Malva al margen. Alterna con el punto; nunca los dos en la misma lista. */
ul.wp-block-list,
ul.phl-lista {
	list-style: none;
	padding-left: 0;
}
ul.wp-block-list > li,
ul.phl-lista > li {
	position: relative;
	padding-left: 1.9em;
}
ul.wp-block-list > li::before,
ul.phl-lista > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 1.1em;
	height: 0.3em;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--malva);
}
ul.wp-block-list.is-style-punto > li {
	padding-left: 1.3em;
}
ul.wp-block-list.is-style-punto > li::before {
	width: 0.45em;
	height: 0.45em;
	top: 0.62em;
	left: 0.15em;
}
.has-cacao-background-color ul.wp-block-list > li::before {
	background-color: var(--wp--preset--color--durazno);
}
:is(.has-malva-background-color, .has-salvia-background-color) ul.wp-block-list > li::before {
	background-color: var(--wp--preset--color--cacao);
}
ul.wp-block-list ul.wp-block-list {
	margin-top: 0.5em;
}
ol.wp-block-list {
	padding-left: 1.4em;
}

/* Subrayado corto: bajo la palabra clave de un titular, más corto que la palabra. */
.phl-subrayado {
	position: relative;
	white-space: nowrap;
}
.phl-subrayado::after {
	content: "";
	position: absolute;
	left: 18%;
	right: 18%;
	bottom: 0.06em;
	height: 0.16em;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--malva);
}
.has-cacao-background-color .phl-subrayado::after {
	background-color: var(--wp--preset--color--durazno);
}

/* Progreso: serie de guiones; el actual en Cacao, el resto en Malva. */
.phl-progreso {
	display: flex;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
.phl-progreso li {
	width: var(--wp--custom--guion--largo);
	height: var(--wp--custom--guion--grueso);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--malva);
	padding: 0;
}
.phl-progreso li[aria-current] {
	background-color: var(--wp--preset--color--cacao);
}

/* ------------------------------------------------------------------
 * El círculo (04.4): marco de foto, contenedor de sello, numeral.
 * ------------------------------------------------------------------ */
.wp-block-image.is-style-circulo img {
	border-radius: var(--wp--custom--radius--circulo);
	aspect-ratio: 1;
	object-fit: cover;
}
.phl-foto-placeholder {
	aspect-ratio: 1;
	border-radius: var(--wp--custom--radius--circulo);
	background-color: var(--wp--preset--color--malva);
}
.phl-numeral {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6em;
	height: 2.6em;
	border-radius: var(--wp--custom--radius--circulo);
	background-color: var(--wp--preset--color--malva);
	color: var(--wp--preset--color--cacao);
	font-size: var(--wp--preset--font-size--subtitulo);
	line-height: 1;
}
.has-malva-background-color .phl-numeral {
	background-color: var(--wp--preset--color--crema);
}

/* ------------------------------------------------------------------
 * Contenedores: esquina suave (04.4). Tarjetas en Crema por defecto.
 * ------------------------------------------------------------------ */
.wp-block-group.is-style-tarjeta,
.phl-tarjeta {
	border-radius: var(--wp--custom--radius--suave);
	padding: var(--wp--preset--spacing--50);
}
/* Superficie clara por token (--wp--custom--clara): tarjetas sin color propio
 * y secciones .phl-clara. Cambiar de variante de fondo = cambiar el token. */
.wp-block-group.is-style-tarjeta:not(.has-background),
.phl-clara {
	background-color: var(--wp--custom--clara);
}

/* ------------------------------------------------------------------
 * Textura de guiones (04.7): una por pieza, baja densidad.
 * Trazo Malva sobre Lino, Crema y Cacao; Crema sobre Malva.
 * El texto nunca va encima sin contenedor.
 * ------------------------------------------------------------------ */
.wp-block-group.is-style-textura-guiones {
	background-image: url("../textures/tile-guiones-malva.svg");
	background-size: 80px 128px;
	background-repeat: repeat;
}
.wp-block-group.is-style-textura-guiones.has-malva-background-color {
	background-image: url("../textures/tile-guiones-crema.svg");
}

/* ------------------------------------------------------------------
 * Logo (05.1): área de protección de 2G, nunca más chico que el mínimo (05.2).
 * ------------------------------------------------------------------ */
.phl-logo img {
	display: block;
	height: auto;
}
.phl-logo--lockup img   { width: clamp(140px, 18vw, 220px); }
.phl-logo--logotipo img { width: clamp(120px, 16vw, 200px); }
.phl-logo--sello img    { width: 48px; }

/* ------------------------------------------------------------------
 * Utilidades de la guía de estilo
 * ------------------------------------------------------------------ */
.phl-muestra {
	min-height: 7rem;
	border-radius: var(--wp--custom--radius--suave);
	padding: var(--wp--preset--spacing--30);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.phl-muestra > * {
	margin: 0;
}
.phl-muestra.has-lino-background-color,
.phl-muestra.has-crema-background-color {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--malva);
}
.phl-fila {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}
.phl-fila > * {
	margin: 0;
}
.phl-caja {
	border-radius: var(--wp--custom--radius--suave);
	padding: var(--wp--preset--spacing--40);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 9rem;
}
.phl-caja img {
	display: block;
	height: auto;
}

/* ------------------------------------------------------------------
 * Cabecera (03.5, 05.1, 05.2): lockup horizontal con descriptor;
 * en móvil, logotipo una línea. Área de protección 2G alrededor.
 * Sticky solo en móvil.
 * ------------------------------------------------------------------ */
.phl-header {
	padding-top: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--30);
	background-color: var(--wp--custom--base);
}
.phl-header__fila {
	gap: var(--wp--preset--spacing--40);
}
.phl-logo {
	display: inline-flex;
	line-height: 0;
	flex: 0 0 auto;
}
.phl-logo img {
	display: block;
	height: auto;
}
.phl-header .phl-logo--lockup img   { width: clamp(150px, 17vw, 220px); }
.phl-header .phl-logo--logotipo img { width: 150px; }
.phl-header .phl-logo--logotipo     { display: none; }

@media (max-width: 599px) {
	.phl-header .phl-logo--lockup   { display: none; }
	.phl-header .phl-logo--logotipo { display: inline-block; }
}
/* El sticky va en el envoltorio de la parte de plantilla, no en el grupo
 * interior: un elemento sticky necesita un padre más alto que él. */
header.wp-block-template-part:has(> .phl-header) {
	position: sticky;
	top: 0;
	z-index: 20;
	background-color: var(--wp--custom--base);
}

/* Navegación principal */
.phl-nav {
	font-size: var(--wp--preset--font-size--texto);
}
.phl-nav .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}
.phl-nav .wp-block-navigation-item__content {
	text-decoration: none;
	padding: 0.35em 0;
}
.phl-nav .wp-block-navigation-item__content:hover,
.phl-nav .wp-block-navigation-item__content:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--malva);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}
.phl-nav .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--malva);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

/* Botón de agenda: pill Malva dentro de la navegación */
.phl-nav .phl-nav-cta .wp-block-navigation-item__content {
	padding: 0.6em 1.3em;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--malva);
	color: var(--wp--preset--color--cacao);
	transition: background-color 0.15s ease, color 0.15s ease;
}
.phl-nav .phl-nav-cta .wp-block-navigation-item__content:hover,
.phl-nav .phl-nav-cta .wp-block-navigation-item__content:focus-visible {
	text-decoration: none;
	background-color: var(--wp--preset--color--cacao);
	color: var(--wp--preset--color--crema);
}
.phl-nav .phl-nav-cta .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--cacao);
	outline-offset: 3px;
}

/* Menú colapsado (móvil): overlay Lino, enlaces grandes, CTA al final */
.phl-nav .wp-block-navigation__responsive-container-open,
.phl-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--cacao);
	padding: 0.4em;
	border-radius: var(--wp--custom--radius--circulo);
}
.phl-nav .wp-block-navigation__responsive-container-open:focus-visible,
.phl-nav .wp-block-navigation__responsive-container-close:focus-visible {
	outline: 2px solid var(--wp--preset--color--cacao);
	outline-offset: 2px;
}
.phl-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	background-color: var(--wp--custom--base) !important;
}
.phl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--30);
	align-items: flex-start;
}
.phl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--subtitulo);
}
.phl-nav .wp-block-navigation__responsive-container.is-menu-open .phl-nav-cta {
	margin-top: var(--wp--preset--spacing--30);
}
.phl-nav .wp-block-navigation__responsive-container.is-menu-open .phl-nav-cta .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--texto);
}

/* ------------------------------------------------------------------
 * Pie de página: Cacao como cierre (04.2). Logotipo en Crema, declaración,
 * navegación, redes, sello Malva y aviso de privacidad.
 * ------------------------------------------------------------------ */
.phl-footer__fila {
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}
.phl-footer__marca {
	flex: 1 1 16rem;
	max-width: 24rem;
}
.phl-footer .phl-logo--logotipo img {
	width: clamp(140px, 16vw, 200px);
	margin-bottom: var(--wp--preset--spacing--10);
	/* El SVG trae su área de protección (viewBox desde -30 de 1458):
	   se compensa para alinear el nombre con el descriptor de abajo. */
	margin-left: -2%;
}
.phl-footer .phl-descriptor {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--30);
}
.phl-footer__nav .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--10);
}
.phl-footer__nav .wp-block-navigation-item__content {
	text-decoration: none;
	color: var(--wp--preset--color--crema);
}
.phl-footer__nav .wp-block-navigation-item__content:hover,
.phl-footer__nav .wp-block-navigation-item__content:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--durazno);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}
.phl-footer__redes ul.wp-block-list > li {
	padding-left: 0;
}
.phl-footer__redes ul.wp-block-list > li::before {
	display: none;
}
.phl-footer__redes a {
	text-decoration: none;
}
.phl-footer__redes a:hover,
.phl-footer__redes a:focus-visible {
	text-decoration: underline;
}
.phl-footer__cierre {
	margin-top: var(--wp--preset--spacing--60);
	gap: var(--wp--preset--spacing--30);
}
.phl-footer .phl-sello {
	display: block;
	width: 48px;
	height: 48px;
}

/* Listado de artículos (archive, index) */
.phl-listado {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}
.phl-listado .is-style-tarjeta {
	background-color: var(--wp--preset--color--crema);
}
.phl-listado .wp-block-post-title a {
	text-decoration: none;
}
.phl-listado .wp-block-post-title a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------
 * Patrones de página (1c)
 * ------------------------------------------------------------------ */

/* Hero: aire arriba y abajo, titular en display */
.phl-hero {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--60);
}
.phl-hero .wp-block-heading {
	max-width: 14ch;
}

/* Pasos numerados: rejilla de tres, numeral en círculo */
.phl-pasos {
	counter-reset: paso;
}
.phl-pasos {
	gap: var(--wp--preset--spacing--50);
}
.phl-paso .phl-numeral {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Bloque de precio */
.phl-precio__cifra {
	font-size: var(--wp--preset--font-size--subtitulo);
	line-height: 1.2;
	margin-top: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Pregunta frecuente: details/summary con el guion como marcador.
 * Malva cerrada, Cacao abierta (04.6, progreso). Sin líneas continuas. */
.wp-block-details {
	padding: var(--wp--preset--spacing--20) 0;
}
.wp-block-details summary {
	position: relative;
	padding-left: 1.9em;
	cursor: pointer;
	list-style: none;
	font-size: var(--wp--preset--font-size--subtitulo);
	line-height: 1.3;
}
.wp-block-details summary::-webkit-details-marker {
	display: none;
}
.wp-block-details summary::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 1.1em;
	height: 0.3em;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--malva);
	transition: background-color 0.15s ease;
}
.wp-block-details[open] summary::before,
.wp-block-details summary:hover::before {
	background-color: var(--wp--preset--color--cacao);
}
.wp-block-details summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--cacao);
	outline-offset: 4px;
	border-radius: 4px;
}
.wp-block-details > :not(summary) {
	padding-left: 1.9em;
	margin-top: var(--wp--preset--spacing--20);
}
.wp-block-details > :not(summary):last-child {
	margin-bottom: var(--wp--preset--spacing--10);
}

/* Formulario mínimo (avísame del próximo taller). Sin lógica todavía. */
.phl-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
}
.phl-form label {
	flex: 1 1 100%;
}
.phl-form input[type="email"] {
	flex: 1 1 14rem;
	font: inherit;
	color: var(--wp--preset--color--cacao);
	background-color: var(--wp--preset--color--crema);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.85em 1.4em;
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--malva);
}
.phl-form input[type="email"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--cacao);
	outline-offset: 3px;
}
.phl-form input[type="email"]::placeholder {
	color: var(--wp--preset--color--cafe);
	opacity: 1;
}
.phl-form button {
	font: inherit;
	cursor: pointer;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.85em 1.6em;
	background-color: var(--wp--preset--color--malva);
	color: var(--wp--preset--color--cacao);
	transition: background-color 0.15s ease, color 0.15s ease;
}
.phl-form button:hover,
.phl-form button:focus-visible {
	background-color: var(--wp--preset--color--cacao);
	color: var(--wp--preset--color--crema);
}
.phl-form button:focus-visible {
	outline: 2px solid var(--wp--preset--color--cacao);
	outline-offset: 3px;
}

/* Bio: foto en círculo, columna angosta */
.phl-bio .wp-block-image.is-style-circulo img {
	width: 100%;
	max-width: 18rem;
}

/* Datos de contacto: definición sin líneas */
.phl-datos {
	margin: var(--wp--preset--spacing--40) 0;
	display: grid;
	gap: var(--wp--preset--spacing--20);
}
.phl-datos dt {
	font-size: var(--wp--preset--font-size--etiqueta);
	letter-spacing: var(--wp--custom--versalitas--tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--cafe);
	line-height: 1.5;
}
.phl-datos dd {
	margin: 0.15em 0 0;
}

/* ------------------------------------------------------------------
 * Composición (pase sobre las páginas)
 * ------------------------------------------------------------------ */

/* Secciones a ancho completo. Dos niveles de espacio: grande entre

 * secciones (80), medio dentro (60). */
.phl-seccion {
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
}
/* Solo el primer hijo pierde el margen; entre hermanos (cabeza → tarjetas,
 * tarjetas → nota) siempre hay 60. Misma especificidad (0,2,0) en ambas. */
.phl-seccion > :first-child {
	margin-block-start: 0;
}
.phl-seccion > :not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--60);
}
.phl-seccion .phl-cabeza {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.phl-seccion .phl-cabeza > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Hero: 7/5, titular a la izquierda, foto en círculo a la derecha,
 * el guion volando en Malva junto al círculo. */
.phl-hero {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--80);
	overflow: hidden;
}
@media (min-width: 782px) {
	.phl-hero {
		min-height: 80vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}
.phl-hero .wp-block-heading {
	max-width: none;
}
.phl-hero__cols {
	gap: var(--wp--preset--spacing--50);
}
.phl-hero__texto > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}
.phl-hero__texto .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--50);
}
.phl-hero__foto {
	position: relative;
}
.phl-hero__foto .wp-block-image {
	margin: 0;
}
.phl-hero__foto .wp-block-image img {
	width: 100%;
	max-width: 30rem;
	margin-left: auto;
	display: block;
}
.phl-guion-vuela {
	position: absolute;
	display: block;
	width: 7.5rem;
	height: 2rem;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--malva);
	left: -15%;
	top: 0;
	pointer-events: none;
}
@media (max-width: 781px) {
	.phl-hero__cols {
		gap: var(--wp--preset--spacing--40);
	}
	.phl-hero__foto .wp-block-image img {
		max-width: 16rem;
		margin-left: 0;
	}
	.phl-guion-vuela {
		width: 5rem;
		height: 1.35rem;
		left: 15rem;
		top: auto;
		bottom: 10%;
	}
}

/* Guion a escala grande: separador decorativo entre secciones */
.phl-guion-grande {
	display: block;
	width: 3.75rem;
	height: 1rem;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--malva);
	margin: 0 auto var(--wp--preset--spacing--30);
}
.has-malva-background-color .phl-guion-grande {
	background-color: var(--wp--preset--color--crema);
}
.has-cacao-background-color .phl-guion-grande {
	background-color: var(--wp--preset--color--durazno);
}

/* Bloque desplazado: rótulo a la izquierda, texto a la derecha (5/7) */
.phl-desplazado {
	gap: var(--wp--preset--spacing--50);
}
.phl-desplazado .wp-block-column > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Hover de tarjeta con enlace: cambio de superficie, 200 ms, sin sombra ni escala.
 * Crema → Malva; Malva → Cacao con texto Crema. */
.is-style-tarjeta:has(a) {
	transition: background-color 0.2s ease, color 0.2s ease;
}
.is-style-tarjeta:has(a) :is(h2, h3, h4, p, li, a) {
	transition: color 0.2s ease;
}
/* !important porque WordPress declara .has-*-background-color con !important. */
.is-style-tarjeta:has(a):not(.has-background):hover,
.is-style-tarjeta.has-crema-background-color:has(a):hover {
	background-color: var(--wp--preset--color--malva) !important;
}
.is-style-tarjeta.has-crema-background-color:has(a):hover a,
.is-style-tarjeta:has(a):not(.has-background):hover a {
	text-decoration-color: var(--wp--preset--color--cacao);
}
.is-style-tarjeta.has-malva-background-color:has(a):hover {
	background-color: var(--wp--preset--color--cacao) !important;
}
.is-style-tarjeta.has-malva-background-color:has(a):hover :is(h2, h3, h4, p, li, a) {
	color: var(--wp--preset--color--crema);
}
.is-style-tarjeta.has-malva-background-color:has(a):hover a {
	text-decoration-color: var(--wp--preset--color--durazno);
}
.is-style-tarjeta.has-malva-background-color:has(a):hover ul.wp-block-list > li::before {
	background-color: var(--wp--preset--color--durazno);
}

/* Aparición al entrar en viewport (solo con JS y sin reduced-motion) */
html.phl-js .phl-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
	transition-delay: var(--phl-delay, 0ms);
}
html.phl-js .phl-reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	html.phl-js .phl-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.is-style-tarjeta:has(a),
	.is-style-tarjeta:has(a) :is(h2, h3, h4, p, li, a),
	.wp-block-button__link,
	a {
		transition: none;
	}
}

/* ------------------------------------------------------------------
 * Rejillas: columnas iguales a ancho completo.
 * WordPress genera repeat(auto-fill, …) para minimumColumnWidth y deja
 * tracks vacíos cuando caben más columnas que elementos. auto-fit los
 * colapsa: tres elementos, tres columnas iguales. Especificidad mayor que
 * la clase .wp-container-* que genera el core.
 * ------------------------------------------------------------------ */
main .wp-block-group.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}

/* Título de página (plantilla page): aire arriba, y la primera sección
 * del contenido no duplica el espacio. */
.phl-titulo {
	padding-top: var(--wp--preset--spacing--40);
}
.entry-content > .phl-seccion:first-child {
	padding-top: var(--wp--preset--spacing--50);
}

/* Bio: la foto ocupa la altura de la columna de texto */
.phl-bio {
	gap: var(--wp--preset--spacing--60);
}
.phl-bio .wp-block-image.is-style-circulo img {
	max-width: none;
	width: 100%;
}
.phl-bio .wp-block-column > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Manifiesto: sección Cacao, texto Crema a subtítulo, guion Durazno al cierre */
.phl-manifiesto .phl-manifiesto__texto {
	max-width: 720px;
}
.phl-manifiesto .phl-manifiesto__texto > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Preguntas: bloque de 720 centrado */
.phl-preguntas {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* Tarjeta Salvia con enlace: Salvia → Cacao (misma familia que Malva → Cacao) */
.is-style-tarjeta.has-salvia-background-color:has(a):hover {
	background-color: var(--wp--preset--color--cacao) !important;
}
.is-style-tarjeta.has-salvia-background-color:has(a):hover :is(h2, h3, h4, p, li, a) {
	color: var(--wp--preset--color--crema);
}
.is-style-tarjeta.has-salvia-background-color:has(a):hover a {
	text-decoration-color: var(--wp--preset--color--durazno);
}
.is-style-tarjeta.has-salvia-background-color:has(a):hover ul.wp-block-list > li::before {
	background-color: var(--wp--preset--color--durazno);
}

/* Texto legal: 720 centrado, títulos con aire */
.phl-legal {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.phl-legal > h2 {
	margin-block-start: var(--wp--preset--spacing--50);
}
.phl-legal > h3 {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Botón sobre Malva o Salvia: Cacao con texto Crema (la variante de /estilo).
 * Un pill Malva sobre Malva no se ve como botón. */
:is(.has-malva-background-color, .has-salvia-background-color) .wp-block-button:not(.is-style-contorno) .wp-block-button__link {
	background-color: var(--wp--preset--color--cacao);
	color: var(--wp--preset--color--crema);
}
:is(.has-malva-background-color, .has-salvia-background-color) .wp-block-button:not(.is-style-contorno) .wp-block-button__link:hover,
:is(.has-malva-background-color, .has-salvia-background-color) .wp-block-button:not(.is-style-contorno) .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--crema);
	color: var(--wp--preset--color--cacao);
}
/* Cuando la tarjeta Malva pasa a Cacao en hover, el botón se invierte a Crema. */
.is-style-tarjeta:is(.has-malva-background-color, .has-salvia-background-color):has(a):hover .wp-block-button:not(.is-style-contorno) .wp-block-button__link {
	background-color: var(--wp--preset--color--crema);
	color: var(--wp--preset--color--cacao);
}

/* Las secciones a ancho completo se tocan entre sí y con el footer:
 * sin el block-gap del core entre ellas. */
main .entry-content > .phl-seccion,
main .entry-content > .alignfull {
	margin-block-start: 0 !important;
}

/* El layout raíz mete block-gap entre header, main y footer. Fuera: las
 * secciones y el footer se tocan. */
.wp-site-blocks > main,
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0 !important;
}

/* Objetivos táctiles de al menos 24 px en enlaces pequeños del pie. */
.phl-footer__cierre a {
	display: inline-block;
	padding-block: 0.4em;
}

/* Bio en móvil y tablet: la foto no ocupa todo el ancho */
@media (max-width: 781px) {
	.phl-bio .wp-block-image.is-style-circulo img {
		max-width: 18rem;
	}
	.phl-bio .wp-block-image {
		margin-left: 0;
	}
}

/* Navegación entre 600 y 900 px: sin saltos de línea, menos aire */
.phl-nav .wp-block-navigation-item__content {
	white-space: nowrap;
}
@media (max-width: 900px) {
	.phl-nav .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--20);
	}
	.phl-header__fila {
		gap: var(--wp--preset--spacing--30);
	}
}

/* La etiqueta fija su color de texto y nunca lo hereda del contenedor:
 * Cacao sobre cualquier fondo claro, Crema solo cuando la propia etiqueta
 * es Cacao. !important porque las reglas de hover de tarjeta y de texto
 * sobre superficie son más específicas. */
:is(.is-style-etiqueta, .phl-etiqueta):not(.has-cacao-background-color) {
	color: var(--wp--preset--color--cacao) !important;
}
:is(.is-style-etiqueta, .phl-etiqueta).has-cacao-background-color {
	color: var(--wp--preset--color--crema) !important;
}

/* Páginas virtuales de phl-citas (/gracias, /cita, /pago-simulado):
 * espacio entre bloques como en un layout restringido. */
.phl-virtual > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}
.phl-virtual > .wp-block-heading + .is-style-tarjeta,
.phl-virtual > h2 {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Bloque phl/avisame */
.phl-avisame__error {
	background-color: var(--wp--preset--color--durazno);
	border-radius: var(--wp--custom--radius--suave);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}
.phl-avisame .phl-form input[type="checkbox"] {
	margin-right: 0.4em;
}

/* ------------------------------------------------------------------
 * Bloque phl/agenda. Vive en una sección Malva: el bloque es Crema.
 * ------------------------------------------------------------------ */
.phl-agenda-marco {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.phl-agenda {
	background-color: var(--wp--preset--color--crema);
	border-radius: var(--wp--custom--radius--suave);
	padding: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--cacao);
	text-align: left;
}
.phl-agenda > * + *,
.phl-agenda__panel > * + *,
.phl-agenda__paso > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}
.phl-agenda__cabecera {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	flex-wrap: wrap;
}
.phl-agenda__panel h2:focus {
	outline: none;
}
.phl-agenda fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}
.phl-agenda fieldset > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}
.phl-agenda legend {
	padding: 0;
	margin-bottom: var(--wp--preset--spacing--20);
}
.phl-agenda fieldset + fieldset {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Opciones (servicio, hora): botones-radio como tarjetas Lino */
.phl-agenda__opciones,
.phl-agenda__horas {
	display: grid;
	gap: var(--wp--preset--spacing--10);
}
.phl-agenda__horas {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
}
.phl-agenda__opcion,
.phl-agenda__hora {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	width: 100%;
	text-align: left;
	font: inherit;
	color: var(--wp--preset--color--cacao);
	background-color: var(--wp--preset--color--lino);
	border: 0;
	border-radius: var(--wp--custom--radius--suave);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.phl-agenda__hora span {
	font-size: var(--wp--preset--font-size--etiqueta);
	letter-spacing: var(--wp--custom--versalitas--tracking);
	text-transform: uppercase;
}
.phl-agenda__opcion strong {
	font-size: var(--wp--preset--font-size--texto);
}
.phl-agenda__opcion span:last-child {
	font-size: var(--wp--preset--font-size--etiqueta);
	letter-spacing: var(--wp--custom--versalitas--tracking);
	text-transform: uppercase;
}
label.phl-agenda__opcion {
	flex-direction: row;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}
label.phl-agenda__opcion span:last-child {
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--wp--preset--font-size--texto);
}
.phl-agenda__opcion:hover,
.phl-agenda__hora:hover {
	background-color: var(--wp--preset--color--malva);
}
.phl-agenda__opcion.is-activa,
.phl-agenda__hora.is-activa {
	background-color: var(--wp--preset--color--cacao);
	color: var(--wp--preset--color--crema);
}
.phl-agenda__opcion:focus-visible,
.phl-agenda__hora:focus-visible,
.phl-agenda__dia:focus-visible,
.phl-agenda input:focus-visible {
	outline: 2px solid var(--wp--preset--color--cacao);
	outline-offset: 3px;
}

/* Calendario */
.phl-agenda__mes {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
}
.phl-agenda__mes-nombre {
	font-size: var(--wp--preset--font-size--subtitulo);
}
.phl-agenda__calendario {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0.3rem;
	table-layout: fixed;
}
.phl-agenda__calendario th {
	font-size: var(--wp--preset--font-size--etiqueta);
	letter-spacing: var(--wp--custom--versalitas--tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--cafe);
	font-weight: 400;
	padding-bottom: 0.4rem;
}
.phl-agenda__dia {
	width: 100%;
	aspect-ratio: 1;
	border: 0;
	border-radius: var(--wp--custom--radius--circulo);
	font: inherit;
	color: var(--wp--preset--color--cafe);
	background-color: transparent;
	cursor: default;
}
.phl-agenda__dia.is-libre {
	background-color: var(--wp--preset--color--malva);
	color: var(--wp--preset--color--cacao);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.phl-agenda__dia.is-libre:hover,
.phl-agenda__dia.is-activo {
	background-color: var(--wp--preset--color--cacao);
	color: var(--wp--preset--color--crema);
}

/* Botones secundarios (navegación entre pasos) */
.phl-agenda__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
}
.phl-agenda button.wp-block-button__link {
	border: 0;
	cursor: pointer;
	font: inherit;
	font-size: var(--wp--preset--font-size--texto);
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.85em 1.6em;
	background-color: var(--wp--preset--color--malva);
	color: var(--wp--preset--color--cacao);
	transition: background-color 0.15s ease, color 0.15s ease;
}
.phl-agenda button.wp-block-button__link:hover:not(:disabled) {
	background-color: var(--wp--preset--color--cacao);
	color: var(--wp--preset--color--crema);
}
.phl-agenda button.wp-block-button__link:disabled {
	opacity: 0.5;
	cursor: default;
}
.phl-agenda button.phl-agenda__secundario {
	background-color: transparent;
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--cacao);
}

/* Datos */
.phl-agenda__campo {
	display: grid;
	gap: 0.35rem;
}
.phl-agenda__campo label,
.phl-agenda__paso label[for] {
	font-size: var(--wp--preset--font-size--etiqueta);
	letter-spacing: var(--wp--custom--versalitas--tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--cafe);
}
.phl-agenda input[type="text"],
.phl-agenda input[type="email"],
.phl-agenda input[type="tel"],
.phl-agenda input[type="date"] {
	font: inherit;
	color: var(--wp--preset--color--cacao);
	background-color: var(--wp--preset--color--lino);
	border: 0;
	border-radius: var(--wp--custom--radius--suave);
	padding: 0.75em 1em;
	width: 100%;
	max-width: 24rem;
}
.phl-agenda input[aria-invalid="true"] {
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--durazno);
}
.phl-agenda__campo-error,
.phl-agenda__error {
	display: block;
	background-color: var(--wp--preset--color--durazno);
	border-radius: var(--wp--custom--radius--suave);
	padding: 0.5em 0.9em;
	font-size: var(--wp--preset--font-size--texto);
}
.phl-agenda__nota {
	display: block;
	font-size: var(--wp--preset--font-size--etiqueta);
	line-height: 1.5;
	color: var(--wp--preset--color--cafe);
}
.phl-agenda__consentimiento {
	display: block;
	font-size: var(--wp--preset--font-size--etiqueta);
	line-height: 1.5;
}
.phl-agenda__credito {
	background-color: var(--wp--preset--color--lino);
	border-radius: var(--wp--custom--radius--suave);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}
.phl-agenda__credito.is-disponible {
	background-color: var(--wp--preset--color--salvia);
}
.phl-agenda__vacio {
	background-color: var(--wp--preset--color--lino);
	border-radius: var(--wp--custom--radius--suave);
	padding: var(--wp--preset--spacing--30);
}
.phl-agenda__vacio > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}
.phl-agenda__estado:empty {
	display: none;
}
.phl-agenda__estado {
	font-size: var(--wp--preset--font-size--etiqueta);
	color: var(--wp--preset--color--cafe);
}
.phl-agenda__resumen p {
	margin: 0;
}
.phl-agenda__resumen p + p {
	margin-top: 0.35rem;
}
@media (max-width: 599px) {
	.phl-agenda {
		padding: var(--wp--preset--spacing--30);
	}
	/* Nombre del mes arriba a lo ancho; los dos botones debajo, lado a lado. */
	.phl-agenda__mes {
		flex-wrap: wrap;
	}
	.phl-agenda__mes-nombre {
		order: -1;
		flex-basis: 100%;
	}
	.phl-agenda__mes button {
		flex: 1;
	}
	.phl-agenda__horas {
		grid-template-columns: repeat(2, 1fr);
	}
	.phl-agenda button.wp-block-button__link {
		padding: 0.7em 1.1em;
	}
}

/* ------------------------------------------------------------------
 * Medición: aviso de una línea al pie (solo la primera visita) y
 * preferencias de cookies.
 * ------------------------------------------------------------------ */
.phl-aviso-cookies {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 50;
	background-color: var(--wp--preset--color--lino);
	color: var(--wp--preset--color--cacao);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	text-align: center;
	font-size: var(--wp--preset--font-size--etiqueta);
	line-height: 1.5;
}
.phl-aviso-cookies p {
	margin: 0;
}
.phl-aviso-cookies a {
	color: var(--wp--preset--color--cacao);
	margin-inline-start: 0.5em;
}
.phl-cookies > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}
.phl-cookies__hecho {
	background-color: var(--wp--preset--color--salvia);
	border-radius: var(--wp--custom--radius--suave);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}
.phl-cookies__form {
	margin-block-start: var(--wp--preset--spacing--30);
}
.phl-cookies button.wp-block-button__link {
	border: 0;
	cursor: pointer;
	font: inherit;
	font-size: var(--wp--preset--font-size--texto);
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.85em 1.6em;
	background-color: var(--wp--preset--color--malva);
	color: var(--wp--preset--color--cacao);
}
.phl-cookies button.wp-block-button__link:hover,
.phl-cookies button.wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--cacao);
	color: var(--wp--preset--color--crema);
}