/* ==========================================================================
   Virginia Armillas · estilos principales
   Base del tema (fase 2): tokens, fuentes, tipografía, botones, cabecera, pie
   y plantilla general. Las secciones del inicio y del perfil van en fases 3 y 4.
   ========================================================================== */

/* --- Fuentes (alojadas en el tema, licencia OFL en assets/fonts/) --- */

@font-face {
	font-family: "Cormorant Garamond";
	src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Cormorant Garamond";
	src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Cormorant Garamond";
	src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Cormorant Garamond";
	src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Jost";
	src: url("../fonts/jost-latin-300-normal.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Jost";
	src: url("../fonts/jost-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Jost";
	src: url("../fonts/jost-latin-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* --- Tokens --- */

:root {
	/* Colores (CLAUDE.md) */
	--bosque: #0f1a15;
	--bosque-2: #16241d;
	--bosque-3: #0b130f;
	--lino: #efe6d4;
	--lino-2: #c9bfa9;
	--oro: #c9a45c;
	--oro-claro: #e3c58a;
	--arena: #e9dcc6;
	--arena-2: #f4ecdd;
	--tierra: #2a2019;
	--tierra-2: #4a3d31;
	--terracota: #a8532f;
	/* Terracota oscurecida para texto pequeño sobre arena: la original da 3,94:1 y el mínimo es 4,5:1. */
	--terracota-texto: #964a2a;

	/* Líneas */
	--linea-oro: rgb(201 164 92 / 0.22);
	--linea-oro-fuerte: rgb(201 164 92 / 0.5);
	--linea-lino: rgb(239 230 212 / 0.4);

	/* Tipografía */
	--fuente-titulos: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--fuente-texto: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Espaciado: 20 px de margen lateral a 390 px y 120 px a 1440 px */
	--margen-lateral: clamp(1.25rem, 9.52vw - 1.07rem, 7.5rem);
	--ancho-maximo: 75rem;
	--ancho-texto: 42rem;
	--seccion-vertical: clamp(5.5rem, 4.95vw + 4.29rem, 8.75rem); /* 88 px en móvil, 140 px en escritorio */

	/* Otros */
	--radio-pildora: 999px;
	--zona-tactil: 2.75rem; /* 44 px */
	--altura-cabecera: clamp(4.5rem, 2vw + 3.75rem, 6rem); /* 72 px en móvil, 96 px en escritorio */
	--transicion: 0.2s ease;
}

/* --- Base --- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 1rem;
}

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

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--bosque);
	color: var(--lino);
	font-family: var(--fuente-texto);
	font-weight: 400;
	font-size: 1.0625rem;
	line-height: 1.7;
}

main {
	flex-grow: 1;
}

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

a {
	color: var(--oro);
	text-decoration: none;
	transition: color var(--transicion);
}
a:hover {
	color: var(--oro-claro);
}

:focus-visible {
	outline: 2px solid var(--oro);
	outline-offset: 3px;
	border-radius: 2px;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-variant-numeric: lining-nums; /* Cormorant usa cifras de estilo antiguo por defecto. */
	font-family: var(--fuente-titulos);
	font-weight: 500;
	line-height: 1.05;
	text-wrap: balance;
}

p {
	margin: 0;
}

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

/* --- Utilidades --- */

.contenedor {
	width: 100%;
	max-width: calc(var(--ancho-maximo) + 2 * var(--margen-lateral));
	margin-inline: auto;
	padding-inline: var(--margen-lateral);
}

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

.saltar-contenido {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--oro);
	color: var(--bosque);
	border-radius: var(--radio-pildora);
	transform: translateY(-200%);
}
.saltar-contenido:focus {
	transform: none;
	color: var(--bosque);
}

/* Antetítulo en mayúsculas con espaciado */
.antetitulo {
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--oro);
}

/* Secciones claras: los componentes cambian de color solos */
.fondo-claro {
	background: var(--arena);
	color: var(--tierra);
}
.fondo-claro .antetitulo {
	color: var(--terracota-texto);
}
.fondo-claro a:not(.boton) {
	color: var(--terracota-texto);
}
.fondo-claro a:not(.boton):hover {
	color: var(--tierra);
}
.fondo-claro :focus-visible {
	outline-color: var(--terracota-texto);
}

/* --- Botones en forma de píldora --- */

.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: var(--zona-tactil);
	padding: 0.75rem 1.625rem;
	border: 1px solid transparent;
	border-radius: var(--radio-pildora);
	font-family: var(--fuente-texto);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-align: center;
	cursor: pointer;
	transition:
		background-color var(--transicion),
		border-color var(--transicion),
		color var(--transicion);
}

.boton--primario {
	background: var(--oro);
	border-color: var(--oro);
	color: var(--bosque);
	font-weight: 500;
}
.boton--primario:hover {
	background: var(--oro-claro);
	border-color: var(--oro-claro);
	color: var(--bosque);
}

.boton--contorno {
	border-color: var(--linea-lino);
	color: var(--lino);
}
.boton--contorno:hover {
	border-color: var(--oro-claro);
	color: var(--oro-claro);
}

.boton--oro {
	border-color: var(--oro);
	color: var(--oro);
}
.boton--oro:hover {
	background: var(--oro);
	color: var(--bosque);
}

.boton--grande {
	min-height: 3.625rem;
	padding-inline: 2.125rem;
}

/* --- Logo --- */

.logo {
	display: inline-flex;
	align-items: center;
	gap: clamp(0.625rem, 0.4vw + 0.5rem, 0.875rem);
	min-height: var(--zona-tactil);
	color: var(--lino);
}
.logo:hover {
	color: var(--lino);
}
.logo .triquetra {
	flex-shrink: 0;
	width: clamp(1.625rem, 0.75vw + 1.45rem, 2.125rem);
	height: auto;
	color: var(--oro);
	stroke-width: 4.5;
}
.logo__nombre {
	font-family: var(--fuente-titulos);
	font-size: clamp(1.375rem, 0.55vw + 1.24rem, 1.75rem);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1;
	white-space: nowrap;
}

/* --- Cabecera --- */

.cabecera {
	position: relative;
	z-index: 10;
	border-bottom: 1px solid var(--linea-oro);
}
.cabecera--superpuesta {
	position: absolute;
	inset: 0 0 auto;
	background: transparent;
}

.cabecera__interior {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: var(--altura-cabecera);
}

.navegacion__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem clamp(1.5rem, 2.4vw, 2.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
}

.navegacion__lista a {
	display: inline-flex;
	align-items: center;
	min-height: var(--zona-tactil);
	color: var(--lino);
}
.navegacion__lista a:hover,
.navegacion__lista .current-menu-item:not(.menu-item-type-custom) > a {
	/* Los enlaces a secciones del inicio (/#…) no se marcan: WordPress los da todos por «actuales». */
	color: var(--oro-claro);
}

/* El último elemento del menú («Reservar lectura») lleva la clase «es-boton» desde el panel. */
.navegacion__lista .es-boton > a {
	min-height: 3rem;
	padding: 0 1.625rem;
	border: 1px solid var(--oro);
	border-radius: var(--radio-pildora);
	color: var(--oro);
	letter-spacing: 0.04em;
	transition:
		background-color var(--transicion),
		color var(--transicion);
}
.navegacion__lista .es-boton > a:hover {
	background: var(--oro);
	color: var(--bosque);
}

/* Botón del menú móvil: oculto hasta que carga menu.js (atributo hidden) y solo por debajo de 80em. */
.boton-menu {
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--zona-tactil);
	height: var(--zona-tactil);
	padding: 0;
	background: transparent;
	border: 1px solid var(--linea-oro-fuerte);
	border-radius: var(--radio-pildora);
	color: var(--oro);
	cursor: pointer;
}
.boton-menu__cerrar,
.boton-menu[aria-expanded="true"] .boton-menu__abrir {
	display: none;
}
.boton-menu[aria-expanded="true"] .boton-menu__cerrar {
	display: block;
}

/* Frase y redes: solo dentro del menú móvil abierto. */
.navegacion__extra {
	display: none;
}

/* Botón «Volver a profesionales»: en móvil queda solo la flecha, como en el mock. */
.boton--volver {
	flex-shrink: 0;
	font-size: 0.9375rem;
	letter-spacing: 0;
	padding-inline: 1.5rem;
}

@media (max-width: 47.99em) {
	.boton--volver {
		width: var(--zona-tactil);
		padding: 0;
		border-color: var(--linea-oro-fuerte);
		color: var(--oro);
	}
	.boton--volver__texto {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* --- Menú por debajo de 80em (el menú completo no cabe en una línea) --- */

@media (max-width: 79.99em) {
	/* Sin JavaScript: los enlaces bajan a una segunda línea de la cabecera. */
	html:not(.js-menu) .cabecera__interior {
		flex-wrap: wrap;
		padding-block: 0.75rem;
	}
	html:not(.js-menu) .navegacion {
		width: 100%;
	}
	html:not(.js-menu) .navegacion__lista {
		font-size: 0.875rem;
		gap: 0 1.25rem;
	}

	/* Con JavaScript: menú a pantalla completa (1.4, opción A). */
	.js-menu .boton-menu:not([hidden]) {
		display: inline-flex;
	}

	.js-menu .navegacion {
		position: fixed;
		inset: calc(var(--altura-cabecera) + 1px) 0 0;
		z-index: 9;
		display: flex;
		flex-direction: column;
		gap: 2rem;
		padding: clamp(1.5rem, 5vh, 2.5rem) var(--margen-lateral) 2.25rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		background-color: var(--bosque);
		background-image: radial-gradient(120% 60% at 50% 110%, rgb(201 164 92 / 0.12), transparent 60%);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-0.5rem);
		transition:
			opacity 0.25s ease,
			transform 0.25s ease,
			visibility 0s 0.25s;
	}

	.menu-abierto .navegacion {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition:
			opacity 0.25s ease,
			transform 0.25s ease;
	}

	/* Con el menú abierto, la cabecera queda fija arriba y la página no se desplaza. */
	.menu-abierto,
	.menu-abierto body {
		overflow: hidden;
	}
	.menu-abierto .cabecera {
		position: fixed;
		inset: 0 0 auto;
		background: var(--bosque);
	}

	.js-menu .navegacion__lista {
		flex-grow: 1;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0;
		width: 100%;
		max-width: 40rem;
		margin-inline: auto;
		counter-reset: seccion;
		font-size: 1rem;
	}

	.js-menu .navegacion__lista > li {
		border-bottom: 1px solid var(--linea-oro);
	}

	.js-menu .navegacion__lista > li > a {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1rem;
		min-height: 4rem;
		padding-block: 0.75rem;
		font-family: var(--fuente-titulos);
		font-size: clamp(1.875rem, 2vw + 1.5rem, 2.25rem);
		font-weight: 500;
		letter-spacing: 0;
		line-height: 1.2;
	}

	/* Numeración romana decorativa: no se lee en voz alta. */
	.js-menu .navegacion__lista > li:not(.es-boton) > a::after {
		counter-increment: seccion;
		content: counter(seccion, upper-roman);
		content: counter(seccion, upper-roman) / "";
		font-family: var(--fuente-texto);
		font-size: 0.75rem;
		letter-spacing: 0.28em;
		color: var(--oro);
	}

	/* «Reservar lectura»: botón dorado al final de la lista. */
	.js-menu .navegacion__lista > .es-boton {
		margin-top: auto;
		padding-top: 2.5rem;
		border-bottom: 0;
	}
	.js-menu .navegacion__lista > .es-boton > a {
		justify-content: center;
		align-items: center;
		min-height: 3.5rem;
		padding: 0 1.5rem;
		background: var(--oro);
		border-color: var(--oro);
		color: var(--bosque);
		font-family: var(--fuente-texto);
		font-size: 1rem;
		font-weight: 500;
		letter-spacing: 0.04em;
	}
	.js-menu .navegacion__lista > .es-boton > a:hover {
		background: var(--oro-claro);
		border-color: var(--oro-claro);
	}

	.js-menu .navegacion__extra {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		text-align: center;
	}

	.navegacion__frase {
		font-family: var(--fuente-titulos);
		font-style: italic;
		font-size: 1.25rem;
		color: var(--oro-claro);
	}

	.navegacion__redes {
		display: flex;
		gap: 1.5rem;
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: 0.875rem;
	}
	.navegacion__redes a {
		display: inline-flex;
		align-items: center;
		min-height: var(--zona-tactil);
		color: var(--lino-2);
	}
	.navegacion__redes a:hover {
		color: var(--oro-claro);
	}
}

/* --- Pie --- */

.pie {
	background: var(--bosque-3);
	border-top: 1px solid var(--linea-oro);
	color: var(--lino-2);
	font-size: 0.875rem;
}

.pie__interior {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.375rem;
	padding-block: 3rem;
	text-align: center;
}

.pie .logo__nombre {
	font-size: clamp(1.375rem, 0.2vw + 1.3rem, 1.5rem);
}
.pie .triquetra {
	width: clamp(1.625rem, 0.3vw + 1.55rem, 1.875rem);
}

.pie__legal {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.pie__enlaces {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pie__enlaces a {
	display: inline-flex;
	align-items: center;
	min-height: var(--zona-tactil);
	color: var(--lino-2);
}
.pie__enlaces a:hover {
	color: var(--oro-claro);
}

.pie__copyright {
	font-size: 0.8125rem;
}

.pie__volver {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	min-height: var(--zona-tactil);
	font-size: 0.9375rem;
	color: var(--oro-claro);
}

@media (min-width: 48em) {
	.pie__interior {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		padding-block: 3.5rem;
		text-align: left;
	}
	.pie__legal {
		flex-direction: row;
		gap: 2rem;
	}
	.pie__copyright {
		font-size: 0.875rem;
	}
	/* En el perfil, el enlace de vuelta va a la derecha y el logo a la izquierda. */
	.pie__volver {
		order: 2;
	}
}

/* --- Plantilla general (páginas legales, 404…) --- */

.pagina__articulo {
	padding-block: var(--seccion-vertical);
}

.pagina__cabecera {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: var(--ancho-texto);
	margin-bottom: clamp(2rem, 3vw, 3.5rem);
}

.pagina__titulo {
	font-size: clamp(2.75rem, 3.5vw + 1.8rem, 5.5rem);
	line-height: 0.98;
	color: var(--lino);
}

.pagina--404 .boton {
	margin-top: 2.5rem;
}

/* Texto largo editado en el panel */
.texto-largo {
	max-width: var(--ancho-texto);
	color: var(--lino-2);
	font-size: 1.0625rem;
	line-height: 1.75;
}
.texto-largo > * + * {
	margin-top: 1.25em;
}
.texto-largo h2,
.texto-largo h3 {
	margin-top: 2em;
	color: var(--lino);
}
.texto-largo h2 {
	font-size: clamp(1.75rem, 1vw + 1.5rem, 2.5rem);
}
.texto-largo h3 {
	font-size: clamp(1.375rem, 0.6vw + 1.25rem, 1.75rem);
}
.texto-largo a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.texto-largo ul,
.texto-largo ol {
	padding-left: 1.25em;
}
.texto-largo li + li {
	margin-top: 0.4em;
}
.texto-largo strong {
	color: var(--lino);
	font-weight: 500;
}

/* ==========================================================================
   Componentes compartidos por inicio y perfil
   ========================================================================== */

/* --- Sección con cabecera (antetítulo, título con cursiva e introducción) --- */

.seccion {
	padding-block: var(--seccion-vertical);
}

.seccion__cabecera {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	margin-bottom: clamp(2.25rem, 2.7vw + 1.6rem, 4rem);
}

.seccion__titulares {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: clamp(1.125rem, 0.2vw + 1.05rem, 1.25rem);
}

.seccion__titulo {
	font-size: clamp(2.75rem, 2.67vw + 2.1rem, 4.5rem);
	line-height: 1.02;
}
.seccion__cursiva {
	font-style: italic;
	font-weight: 400;
	color: var(--oro-claro);
}
.fondo-claro .seccion__cursiva {
	color: var(--terracota);
}

.seccion__intro {
	max-width: 25rem;
	font-size: clamp(1rem, 0.2vw + 0.95rem, 1.125rem);
	line-height: 1.7;
	color: var(--lino-2);
}
.fondo-claro .seccion__intro {
	color: var(--tierra-2);
}

@media (min-width: 64em) {
	.seccion__cursiva {
		display: block;
	}
	.seccion__cabecera {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 4rem;
	}
	/* Solo en fila: la introducción ocupa como mucho 25rem de ancho junto al título. */
	.seccion__cabecera > .seccion__intro {
		flex: 0 1 25rem;
	}
}

/* --- Lista de datos (duración, modalidad, precio; datos de contacto) --- */

.datos {
	margin: 0;
	border-top: 1px solid rgb(201 164 92 / 0.25);
}
.datos__fila {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	padding-block: 1rem;
	border-bottom: 1px solid rgb(201 164 92 / 0.25);
	font-size: 1rem;
}
.datos dt {
	color: var(--lino-2);
}
.datos dd {
	margin: 0;
	color: var(--lino);
	text-align: right;
}
.datos a {
	color: var(--lino);
}
.datos a:hover {
	color: var(--oro-claro);
}

/* --- Marco en arco para fotos --- */

.arco {
	--color-arco: var(--oro);
	--proporcion: 0.8; /* ancho / alto */
	width: 100%;
	max-width: 30rem;
	aspect-ratio: var(--proporcion);
	padding: clamp(0.375rem, 0.75vw + 0.1rem, 0.875rem);
	border: 1px solid var(--color-arco);
	/* Arco de medio punto: radio horizontal 50 % del ancho; vertical 50 % × ancho/alto del alto. */
	border-radius: 50% 50% 0.75rem 0.75rem / calc(50% * var(--proporcion)) calc(50% * var(--proporcion)) 0.75rem 0.75rem;
}
.arco--terracota {
	--color-arco: var(--terracota);
}
.arco__interior {
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50% 50% 0.375rem 0.375rem / calc(50% * var(--proporcion)) calc(50% * var(--proporcion)) 0.375rem 0.375rem;
	background: #26382e;
}
.fondo-claro .arco__interior {
	background: #cdbd9f;
}
.arco__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.arco__marcador {
	padding: 1rem;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	color: var(--lino-2);
}
.fondo-claro .arco__marcador {
	color: var(--tierra-2);
}

/* --- Ficha de servicio --- */

.ficha-servicio {
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 0.8vw + 1rem, 1.75rem);
	padding: clamp(1.75rem, 1.9vw + 1.3rem, 3rem);
	background: var(--bosque-2);
	border: 1px solid rgb(201 164 92 / 0.3);
	border-radius: clamp(1.125rem, 0.6vw + 1rem, 1.5rem);
}
.ficha-servicio .icono-diseno {
	width: clamp(2.75rem, 0.8vw + 2.5rem, 3.25rem);
	height: auto;
	color: var(--oro);
}
.ficha-servicio__nombre {
	font-size: clamp(2.125rem, 0.95vw + 1.9rem, 2.75rem);
}
.ficha-servicio__descripcion {
	font-size: clamp(1rem, 0.1vw + 0.97rem, 1.0625rem);
	color: var(--lino-2);
}
.ficha-servicio .boton {
	align-self: flex-start;
	min-height: 3.375rem;
	padding-inline: 1.875rem;
}

/* --- Ficha de taller --- */

.ficha-taller {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--arena-2);
	border-radius: clamp(1.125rem, 0.2vw + 1.05rem, 1.25rem);
	color: var(--tierra);
}
.ficha-taller__imagen {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: #cdbd9f;
}
.ficha-taller__imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.ficha-taller:hover .ficha-taller__imagen img {
	transform: scale(1.03);
}
.ficha-taller__cuerpo {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 0.6vw + 0.85rem, 1.375rem);
	padding: clamp(1.75rem, 0.8vw + 1.55rem, 2.25rem) clamp(1.5rem, 1.1vw + 1.2rem, 2.25rem);
}
.ficha-taller--con-imagen .ficha-taller__cuerpo {
	padding-top: clamp(1.25rem, 0.8vw + 1rem, 1.75rem);
}
/* Más específico que «.fondo-claro a»: el título va en tierra, como en el mock. */
.ficha-taller .ficha-taller__nombre a {
	color: var(--tierra);
}
.ficha-taller .ficha-taller__nombre a:hover {
	color: var(--terracota-texto);
}
.ficha-taller__acciones {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
}
.ficha-taller__ver {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--zona-tactil);
	font-size: 0.9375rem;
	font-weight: 500;
}
.ficha-taller__ver .icono {
	transition: transform var(--transicion);
}
.ficha-taller__ver:hover .icono {
	transform: translateX(0.25rem);
}
.ficha-taller__fecha {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	color: var(--terracota-texto);
}
.ficha-taller__dia {
	font-family: var(--fuente-titulos);
	font-variant-numeric: lining-nums;
	font-size: clamp(3.25rem, 1.1vw + 2.95rem, 4rem);
	line-height: 1;
}
.ficha-taller__mes {
	font-size: 0.875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.ficha-taller__nombre {
	font-size: clamp(1.75rem, 0.4vw + 1.65rem, 2rem);
	font-weight: 600;
	line-height: 1.1;
}
.ficha-taller__resumen {
	font-size: clamp(0.9375rem, 0.1vw + 0.9rem, 1rem);
	line-height: 1.65;
	color: var(--tierra-2);
}
.ficha-taller__detalles {
	font-size: 0.9375rem;
	color: var(--tierra-2);
}
.ficha-taller .boton {
	align-self: flex-start;
}

.boton--terracota {
	min-height: 3.125rem;
	border-color: var(--terracota);
	color: var(--terracota-texto);
	font-size: 0.9375rem;
	font-weight: 500;
}
.boton--terracota:hover {
	background: var(--terracota-texto);
	border-color: var(--terracota-texto);
	color: var(--arena-2);
}
.boton--desactivado,
.boton--desactivado:hover {
	background: transparent;
	border-color: rgb(74 61 49 / 0.35);
	color: var(--tierra-2);
	cursor: default;
}

@media (max-width: 47.99em) {
	.ficha-servicio .boton {
		align-self: stretch;
	}
	.ficha-taller__acciones .boton {
		flex: 1 1 100%;
	}
}

/* ==========================================================================
   Inicio
   ========================================================================== */

/* --- 2.1 Portada --- */

.portada {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(40rem, 100svh, 58.75rem);
	padding-top: var(--altura-cabecera);
	overflow: hidden;
	isolation: isolate;
}

.portada__fondo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: #26382e;
}
.portada__fondo--vacio {
	background-image: repeating-linear-gradient(135deg, rgb(239 230 212 / 0.05) 0 1px, transparent 1px 22px);
}
.portada__fondo picture,
.portada__foto {
	width: 100%;
	height: 100%;
}
.portada__foto {
	object-fit: cover;
	object-position: 70% center;
}
/* Velo oscuro para que el texto se lea (2.1.1) */
.portada__fondo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(15 26 21 / 0.35) 0%, rgb(15 26 21 / 0.55) 35%, rgb(15 26 21 / 0.94) 70%, var(--bosque) 100%);
}

.portada__contenido {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding-bottom: 3rem;
}

.portada .antetitulo {
	font-size: clamp(0.75rem, 0.1vw + 0.72rem, 0.8125rem);
}

.portada__titulo {
	font-size: clamp(4.25rem, 6.2vw + 2.8rem, 8.25rem);
	line-height: 0.92;
	letter-spacing: -0.01em;
}

.portada__subtitulo {
	max-width: 35rem;
	font-family: var(--fuente-titulos);
	font-style: italic;
	font-size: clamp(1.5rem, 0.95vw + 1.28rem, 2.125rem);
	line-height: 1.3;
	color: var(--oro-claro);
}

.portada__texto {
	max-width: 31.25rem;
	font-size: clamp(1rem, 0.2vw + 0.95rem, 1.125rem);
	line-height: 1.7;
	color: #d8cfbc;
}

.portada__botones {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 0.375rem;
}

@media (min-width: 48em) {
	.portada__botones {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1rem;
	}
}

@media (min-width: 64em) {
	.portada {
		justify-content: center;
	}
	.portada__foto {
		object-position: right center;
	}
	.portada__fondo::after {
		background:
			linear-gradient(180deg, transparent 0, transparent calc(100% - 13.75rem), var(--bosque) 100%),
			linear-gradient(90deg, rgb(15 26 21 / 0.94) 0%, rgb(15 26 21 / 0.72) 42%, rgb(15 26 21 / 0.15) 100%);
	}
	.portada__contenido {
		gap: 2rem;
		padding-block: 3rem 4.5rem;
	}
	.portada__contenido > * {
		max-width: 51.25rem;
	}
}

/* --- 2.2 Franja con frase --- */

.franja {
	background: var(--bosque-2);
	border-block: 1px solid var(--linea-oro);
}
.franja__interior {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	padding-block: clamp(3.5rem, 7vw + 1.8rem, 7.5rem);
}
.franja__linea {
	width: 4rem;
	height: 1px;
	background: rgb(201 164 92 / 0.6);
}
.franja__frase {
	font-family: var(--fuente-titulos);
	font-style: italic;
	font-size: clamp(2.25rem, 1.52vw + 1.88rem, 3.25rem);
	line-height: 1.15;
	text-align: center;
	text-wrap: balance;
}

@media (min-width: 64em) {
	.franja__interior {
		flex-direction: row;
		gap: 3rem;
	}
	.franja__linea {
		flex: 1 1 0;
		width: auto;
		background: rgb(201 164 92 / 0.4);
	}
}

/* --- 2.3 Sobre mí --- */

.sobre-mi__rejilla {
	display: grid;
	gap: 2.5rem;
	align-items: center;
}
.sobre-mi__foto {
	justify-self: center;
	max-width: 20rem;
}
.sobre-mi__texto {
	display: flex;
	flex-direction: column;
	gap: clamp(1.375rem, 0.6vw + 1.2rem, 1.75rem);
}
.sobre-mi__titulo {
	font-size: clamp(2.625rem, 2.1vw + 2.1rem, 4rem);
	line-height: 1.03;
}
.sobre-mi__parrafos {
	display: flex;
	flex-direction: column;
	gap: 1.25em;
	font-size: clamp(1rem, 0.2vw + 0.95rem, 1.125rem);
	line-height: 1.75;
	color: var(--tierra-2);
}

.pilares {
	display: grid;
	gap: 0.75rem;
	margin: 0.375rem 0 0;
	padding: 0;
	list-style: none;
}
.pilar {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.125rem 1.25rem;
	border: 1px solid rgb(168 83 47 / 0.35);
	border-radius: 0.875rem;
}
.pilar .icono-diseno {
	flex-shrink: 0;
	width: 1.75rem;
	height: auto;
	color: var(--terracota);
}
.pilar__texto {
	font-family: var(--fuente-titulos);
	font-size: clamp(1.375rem, 0.2vw + 1.3rem, 1.5rem);
	font-weight: 600;
	line-height: 1.15;
}

@media (min-width: 40em) {
	.pilares {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}
	.pilar {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
		padding: 1.375rem;
	}
	.pilar .icono-diseno {
		width: 2rem;
	}
}

@media (min-width: 64em) {
	.sobre-mi__rejilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(3rem, 6vw, 6rem);
	}
	.sobre-mi__foto {
		max-width: 30rem;
	}
}

/* --- 2.4 Lecturas --- */

.lecturas__rejilla {
	display: grid;
	gap: clamp(1.5rem, 0.8vw + 1.3rem, 2rem);
}

@media (min-width: 56em) {
	.lecturas__rejilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- 2.5 Profesionales --- */

.profesionales {
	background: var(--tierra);
}

/* --- 2.6 Talleres --- */

.talleres__rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: clamp(1.25rem, 0.8vw + 1rem, 1.75rem);
}

.talleres__vacio {
	color: var(--tierra-2);
}

.aviso-talleres {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
	margin-top: clamp(2rem, 2vw + 1.5rem, 3.5rem);
	padding: clamp(1.75rem, 1vw + 1.5rem, 2rem) clamp(1.5rem, 1.5vw + 1.1rem, 2.5rem);
	background: var(--tierra);
	border-radius: 1.25rem;
	color: var(--lino);
}
.aviso-talleres__texto {
	font-family: var(--fuente-titulos);
	font-style: italic;
	font-size: clamp(1.5rem, 0.6vw + 1.35rem, 1.875rem);
	line-height: 1.25;
}
.aviso-talleres .boton {
	align-self: stretch;
}

@media (min-width: 56em) {
	.aviso-talleres {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
	}
	.aviso-talleres .boton {
		align-self: auto;
		flex-shrink: 0;
	}
}

/* --- 2.7 Contacto --- */

.contacto__rejilla {
	display: grid;
	gap: 3rem;
	align-items: start;
}
.contacto .seccion__cabecera {
	flex-direction: column;
	align-items: stretch;
	gap: 1.125rem;
	margin-bottom: 2.25rem;
}
.contacto .seccion__intro {
	max-width: 28.75rem;
}
.datos--contacto .datos__fila {
	padding-block: 1.25rem;
	font-size: clamp(1rem, 0.1vw + 0.97rem, 1.0625rem);
}

.formulario {
	display: flex;
	flex-direction: column;
	gap: 1.375rem;
	padding: clamp(1.5rem, 2.3vw + 0.95rem, 3rem);
	background: var(--bosque-2);
	border: 1px solid rgb(201 164 92 / 0.3);
	border-radius: 1.5rem;
}
.campo {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.campo__etiqueta {
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	color: var(--lino-2);
}
.campo__control {
	width: 100%;
	min-height: 3.25rem;
	padding: 0.75rem 1.125rem;
	background: var(--bosque);
	border: 1px solid rgb(201 164 92 / 0.35);
	border-radius: 0.75rem;
	color: var(--lino);
	font-size: 1rem;
}
.campo__control::placeholder {
	color: rgb(201 191 169 / 0.7);
}
.campo__control:focus-visible {
	outline: 2px solid var(--oro);
	outline-offset: 2px;
	border-color: var(--oro);
}
textarea.campo__control {
	resize: vertical;
}
.campo--casilla {
	font-size: 0.875rem;
	color: var(--lino-2);
}
/* Casilla de privacidad de Contact Form 7: la etiqueta envuelve la casilla y amplía la zona táctil. */
.campo--casilla label {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: var(--zona-tactil);
	cursor: pointer;
}
.campo--casilla input[type="checkbox"] {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	accent-color: var(--oro);
}
.campo--casilla .wpcf7-list-item {
	margin: 0;
}

/* Campo trampa antispam: fuera de la vista y del teclado; solo lo rellenan los robots. */
.campo--trampa {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.formulario .boton[disabled],
.formulario .wpcf7-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Mensajes de Contact Form 7 (sin su CSS) */
.formulario .hidden-fields-container {
	display: none; /* Campos ocultos de CF7: se envían igual, pero su borde se veía como un recuadro vacío. */
}
.formulario .wpcf7-form-control-wrap {
	display: block;
}
.formulario .screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.formulario .wpcf7-not-valid {
	border-color: #e8a48b;
}
.formulario .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.375rem;
	font-size: 0.875rem;
	color: #f0b9a3; /* 9,3:1 sobre bosque-2 */
}
.formulario .wpcf7-response-output {
	margin: 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--linea-oro-fuerte);
	border-radius: 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}
.formulario .wpcf7-response-output:empty {
	display: none;
}
.wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--oro);
	background: rgb(201 164 92 / 0.12);
	color: var(--lino);
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
	border-color: #e8a48b;
	color: #f0b9a3;
}
.formulario .wpcf7-spinner {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	margin-left: 0.75rem;
	vertical-align: middle;
	border: 2px solid var(--linea-oro-fuerte);
	border-top-color: var(--oro);
	border-radius: 50%;
	visibility: hidden;
	animation: va-girar 0.8s linear infinite;
}
.wpcf7-form.submitting .wpcf7-spinner {
	visibility: visible;
}
@keyframes va-girar {
	to {
		transform: rotate(360deg);
	}
}

@media (min-width: 64em) {
	.contacto__rejilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(3rem, 6vw, 6rem);
	}
}

/* --- 2.5 Fichas del equipo --- */

.equipo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.25rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ficha-profesional {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	height: 100%;
}
.ficha-profesional__enlace {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	color: var(--lino);
}
.ficha-profesional__enlace:hover {
	color: var(--lino);
}
.arco--equipo {
	--color-arco: rgb(201 164 92 / 0.45);
	max-width: none;
	transition: border-color var(--transicion);
}
.arco--equipo .arco__interior {
	background: #3a2d23;
}
.arco--equipo .arco__foto {
	transition: transform 0.5s ease;
}
.ficha-profesional__enlace:hover .arco--equipo {
	--color-arco: var(--oro);
}
.ficha-profesional__enlace:hover .arco__foto {
	transform: scale(1.03);
}
.ficha-profesional__especialidad {
	padding-inline: 0.25rem;
	font-size: clamp(0.6875rem, 0.2vw + 0.63rem, 0.8125rem);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--oro);
}
.ficha-profesional__nombre {
	padding-inline: 0.25rem;
	font-size: clamp(1.375rem, 1.15vw + 1.1rem, 2.125rem);
	line-height: 1.1;
}

/* Servicios del profesional en su ficha: nombre, precio y «Reservar» con él. */
.ficha-profesional__servicios {
	margin: 0.25rem 0 0;
	padding: 0 0.25rem;
	list-style: none;
	border-top: 1px solid var(--linea-oro);
}
.servicio-breve {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem 0.75rem;
	padding-block: 0.625rem;
	border-bottom: 1px solid var(--linea-oro);
	font-size: clamp(0.875rem, 0.2vw + 0.83rem, 0.9375rem);
}
.servicio-breve__nombre {
	color: var(--lino);
}
.servicio-breve__pie {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}
.servicio-breve__precio {
	color: var(--oro-claro);
	white-space: nowrap;
}
.servicio-breve__reservar {
	display: inline-flex;
	align-items: center;
	min-height: var(--zona-tactil);
	padding: 0 1rem;
	border: 1px solid var(--oro);
	border-radius: var(--radio-pildora);
	color: var(--oro);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	white-space: nowrap;
	transition:
		background-color var(--transicion),
		color var(--transicion);
}
.servicio-breve__reservar:hover {
	background: var(--oro);
	color: var(--bosque);
}

.ficha-profesional__ver {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	align-self: flex-start;
	min-height: var(--zona-tactil);
	padding-inline: 0.25rem;
	font-size: 0.9375rem;
	color: var(--oro-claro);
}
.ficha-profesional__ver .icono {
	transition: transform var(--transicion);
}
.ficha-profesional__ver:hover .icono {
	transform: translateX(0.25rem);
}

@media (max-width: 39.99em) {
	/* En móvil, dos columnas estrechas: el nombre del servicio arriba y precio y botón debajo. */
	.servicio-breve__pie {
		width: 100%;
		justify-content: space-between;
	}
}

@media (min-width: 64em) {
	.equipo {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 4rem 2rem;
	}
	.ficha-profesional {
		gap: 1.125rem;
	}
	.arco--equipo {
		--proporcion: 0.95;
	}
}

/* ==========================================================================
   Perfil de profesional (sección 3)
   ========================================================================== */

.perfil__presentacion {
	padding-block: clamp(2.5rem, 5.3vw + 1.2rem, 6rem) clamp(4.5rem, 2.3vw + 3.9rem, 6rem);
}

.perfil__rejilla {
	display: grid;
	gap: 1.75rem;
	align-items: center;
}
.perfil__foto {
	justify-self: center;
	max-width: 19rem;
}
.perfil__texto {
	display: flex;
	flex-direction: column;
	gap: clamp(1.125rem, 0.95vw + 0.9rem, 1.75rem);
}
.perfil .antetitulo {
	font-size: clamp(0.75rem, 0.1vw + 0.72rem, 0.8125rem);
	letter-spacing: 0.24em;
}
.perfil__nombre {
	font-size: clamp(3.25rem, 3.43vw + 2.41rem, 5.5rem);
	line-height: 0.98;
}
.perfil__especialidad {
	font-family: var(--fuente-titulos);
	font-style: italic;
	font-size: clamp(1.5rem, 0.76vw + 1.31rem, 2rem);
	color: var(--oro-claro);
}
.perfil__bio {
	display: flex;
	flex-direction: column;
	gap: 1.25em;
	font-size: clamp(1rem, 0.2vw + 0.95rem, 1.125rem);
	line-height: 1.75;
	color: var(--lino-2);
}
.perfil__botones {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 0.375rem;
}

@media (min-width: 48em) {
	.perfil__botones {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1rem;
	}
}

@media (min-width: 64em) {
	.perfil__rejilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(3rem, 6vw, 6rem);
	}
	.perfil__foto {
		max-width: 30rem;
	}
}

/* Servicios y talleres del profesional (3.5, 3.5b) */

.perfil__oferta {
	padding-block: clamp(4.5rem, 4.6vw + 3.4rem, 7.5rem);
}

.seccion__cabecera--simple {
	margin-bottom: clamp(1.5rem, 2.3vw + 0.95rem, 3rem);
}
@media (min-width: 64em) {
	.seccion__cabecera--simple {
		flex-direction: column;
		align-items: stretch;
	}
}

.seccion__titulo--mediano {
	font-size: clamp(2.625rem, 2.1vw + 2.1rem, 4rem);
	line-height: 1;
}

.perfil__servicios {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: clamp(1.25rem, 0.8vw + 1rem, 1.75rem);
}

.perfil__talleres-cabecera {
	margin-top: clamp(3.5rem, 4vw + 2.5rem, 6rem);
}

.ficha-servicio--compacta {
	gap: 1.125rem;
	padding: clamp(1.5rem, 1.1vw + 1.25rem, 2.25rem);
	background: var(--arena-2);
	border: 0;
	border-radius: 1.25rem;
	color: var(--tierra);
}
.ficha-servicio--compacta .ficha-servicio__nombre {
	font-size: clamp(1.625rem, 0.57vw + 1.49rem, 2rem);
	font-weight: 600;
	line-height: 1.1;
}
.ficha-servicio--compacta .ficha-servicio__descripcion,
.ficha-servicio__detalles {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--tierra-2);
}
.ficha-servicio__detalles {
	font-size: 0.9375rem;
}
.ficha-servicio--compacta .boton {
	margin-top: auto;
	min-height: 3.125rem;
	padding-inline: 1.625rem;
}

/* Enlaces externos (3.6) */

.perfil__enlaces-rejilla {
	display: grid;
	gap: 1.5rem;
	align-items: start;
}
.perfil__enlaces .seccion__intro {
	max-width: 27.5rem;
}
.seccion__cursiva--linea {
	display: inline;
}

.enlaces {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.enlace-externo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem 0.75rem;
	min-height: clamp(3.625rem, 0.6vw + 3.5rem, 4rem);
	padding: 0.75rem clamp(1.125rem, 0.6vw + 1rem, 1.5rem);
	border: 1px solid rgb(201 164 92 / 0.4);
	border-radius: 0.875rem;
	font-size: clamp(0.9375rem, 0.2vw + 0.9rem, 1.0625rem);
	color: var(--lino);
	transition: border-color var(--transicion);
}
.enlace-externo:hover {
	border-color: var(--oro);
	color: var(--lino);
}
.enlace-externo__etiqueta {
	color: var(--lino-2);
}
.enlace-externo__texto {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	min-width: 0;
	overflow-wrap: anywhere;
	color: var(--oro-claro);
}
.enlace-externo__texto .icono {
	flex-shrink: 0;
}

@media (min-width: 64em) {
	.perfil__enlaces-rejilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(3rem, 6vw, 6rem);
	}
}

/* ==========================================================================
   Banner de cookies de Complianz (1.7): colores y tipografía de la marca
   ========================================================================== */

.cmplz-cookiebanner.cmplz-cookiebanner {
	--cmplz_banner_background_color: var(--bosque-2);
	--cmplz_banner_border_color: var(--linea-oro-fuerte);
	--cmplz_banner_border_width: 1px;
	--cmplz_banner_border_radius: 16px;
	--cmplz_text_color: var(--lino);
	--cmplz_hyperlink_color: var(--oro-claro);
	--cmplz_button_accept_background_color: var(--oro);
	--cmplz_button_accept_border_color: var(--oro);
	--cmplz_button_accept_text_color: var(--bosque);
	--cmplz_button_deny_background_color: transparent;
	--cmplz_button_deny_border_color: var(--linea-lino);
	--cmplz_button_deny_text_color: var(--lino);
	--cmplz_button_settings_background_color: transparent;
	--cmplz_button_settings_border_color: var(--linea-lino);
	--cmplz_button_settings_text_color: var(--lino);
	--cmplz_button_border_radius: 999px;
	--cmplz_slider_active_color: var(--oro);
	--cmplz_slider_inactive_color: rgb(239 230 212 / 0.35);
	--cmplz_slider_bullet_color: var(--bosque);
	--cmplz_category_header_always_active_color: var(--oro-claro);
	font-family: var(--fuente-texto);
}
.cmplz-cookiebanner .cmplz-title {
	font-family: var(--fuente-titulos);
	font-weight: 500;
}
.cmplz-cookiebanner .cmplz-btn {
	min-height: var(--zona-tactil);
	font-weight: 500;
	letter-spacing: 0.04em;
}

/* ==========================================================================
   Página de detalles de un taller
   ========================================================================== */

.taller__presentacion {
	padding-block: clamp(2.5rem, 4vw + 1.5rem, 5.5rem) clamp(3.5rem, 4vw + 2.5rem, 6rem);
}
.taller__rejilla {
	display: grid;
	gap: 2.5rem;
	align-items: start;
}
.taller__texto {
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 0.8vw + 0.8rem, 1.5rem);
}
.taller__volver {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	align-self: flex-start;
	min-height: var(--zona-tactil);
	font-size: 0.9375rem;
}
.taller__nombre {
	font-size: clamp(2.75rem, 3vw + 2rem, 4.75rem);
	line-height: 1;
	color: var(--tierra);
}
.taller__resumen {
	font-family: var(--fuente-titulos);
	font-style: italic;
	font-size: clamp(1.375rem, 0.8vw + 1.2rem, 1.875rem);
	line-height: 1.3;
	color: var(--terracota-texto);
}
.datos--claro {
	border-top-color: rgb(74 61 49 / 0.2);
}
.datos--claro .datos__fila {
	border-bottom-color: rgb(74 61 49 / 0.2);
}
.datos--claro dt {
	color: var(--tierra-2);
}
.datos--claro dd {
	color: var(--tierra);
}
.taller__botones .boton {
	width: 100%;
}
.taller__aviso {
	padding: 1rem 1.25rem;
	border: 1px solid rgb(74 61 49 / 0.2);
	border-radius: 0.75rem;
	color: var(--tierra-2);
}
.taller__imagen {
	overflow: hidden;
	aspect-ratio: 3 / 2;
	border-radius: 1.25rem;
	background: #cdbd9f;
}
/* En móvil la foto va arriba, como portada del taller. */
@media (max-width: 63.99em) {
	.taller__imagen {
		order: -1;
	}
}
.taller__imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.taller__descripcion .seccion__titulo {
	margin-bottom: 1.5rem;
}

@media (min-width: 48em) {
	.taller__botones .boton {
		width: auto;
	}
}

@media (min-width: 64em) {
	.taller__rejilla {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		gap: clamp(3rem, 5vw, 5rem);
	}
	.taller__imagen {
		position: sticky;
		top: 2rem;
		aspect-ratio: 4 / 5;
	}
}