/* Cristal — componentes de front-end que van más allá de lo que theme.json puede expresar. */

/* Fondo general blanco detrás de toda la web; el conjunto
   header + contenido + footer (1100px) flota encima proyectando una
   única sombra continua, sin cortes entre secciones. */
body {
	background: var(--wp--preset--color--blanco) !important;
}

.cristal-shell {
	max-width: 1100px;
	margin: 0 auto;
	box-shadow: 0 0 100px 15px rgba(14, 17, 19, 0.45);
}

.cristal-page {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

/* Las secciones de Inicio van pegadas unas a otras, sin el hueco en blanco
   que deja el block-gap por defecto entre bloques del editor. */
.cristal-hero,
.cristal-tile-section,
.cristal-intro {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Foto de perfil a la izquierda de "Por qué yo", vídeo vertical a la derecha del todo. */
.cristal-intro {
	display: grid;
	grid-template-columns: minmax(200px, 320px) 1fr minmax(200px, 320px);
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

.cristal-intro__photo,
.cristal-intro__video {
	overflow: hidden;
	min-height: 0;
	min-width: 0;
}

.cristal-intro__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}

.cristal-intro__video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Con foto y vídeo a ambos lados queda poco ancho para la franja de título +
   texto; se apila el título encima del texto en vez de ponerlos en columnas,
   para que el bloque no se vuelva estrecho y alto. */
.cristal-intro .cristal-tile-section {
	grid-template-columns: 1fr;
}

.cristal-intro .cristal-tile-section__tile {
	min-height: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
}

@media (max-width: 782px) {
	.cristal-intro {
		grid-template-columns: 1fr;
	}
	.cristal-intro__photo {
		max-height: 320px;
	}
	.cristal-intro__video {
		max-height: 320px;
	}
}

/* Patrón "franja de color + contenido": bloque de acento a la izquierda con el
   nombre de la sección en grande, columna de contenido a la derecha. */
.cristal-tile-section {
	display: grid;
	grid-template-columns: minmax(220px, 420px) 1fr;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

.cristal-tile-section__tile {
	background: var(--wp--preset--color--grafito);
	color: var(--wp--preset--color--blanco);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	min-height: 220px;
}

/* Variante del bloque de acento dividida en dos: mitad rótulo, mitad foto. */
.cristal-tile-section__tile--split {
	flex-direction: column;
	padding: 0;
}

.cristal-tile-section__tile-half {
	flex: 1 1 50%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cristal-tile-section__tile-half--label {
	padding: var(--wp--preset--spacing--30);
}

.cristal-tile-section__tile-half--photo {
	overflow: hidden;
}

.cristal-tile-section__tile-half--photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
	display: block;
}

.cristal-tile-section__tile-label {
	font-family: var(--wp--preset--font-family--exo-2);
	font-weight: 100;
	letter-spacing: -0.01em;
	font-size: var(--wp--preset--font-size--xl);
	margin: 0;
}

/* Mismo tratamiento que el rótulo de las franjas, para los títulos de
   sección que no van dentro de un bloque de color (Reseñas, FAQ, Mapa,
   Formulario) — tamaño igual, y frase normal en vez de mayúsculas. */
.cristal-section-title {
	font-family: var(--wp--preset--font-family--exo-2);
	font-weight: 100;
	letter-spacing: -0.01em;
	font-size: var(--wp--preset--font-size--xl);
	text-transform: none;
	margin: 0;
}

.cristal-tile-section__content {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.cristal-tile-section__note {
	color: var(--wp--preset--color--grafito);
	opacity: 0.72;
	max-width: 60ch;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.cristal-tile-section--reverse {
	grid-template-columns: 1fr minmax(220px, 420px);
}

.cristal-tile-section__content--tinted {
	background: color-mix(in srgb, var(--wp--preset--color--petroleo-profundo) 8%, var(--wp--preset--color--blanco));
}

.cristal-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--30);
}

.cristal-badge {
	border: 1px solid var(--wp--preset--color--niebla);
	padding: 8px 18px;
	font-family: var(--wp--preset--font-family--exo-2);
	font-weight: 100;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: var(--wp--preset--font-size--sm);
}

@media (max-width: 782px) {
	.cristal-tile-section,
	.cristal-tile-section--reverse {
		grid-template-columns: 1fr;
	}
	.cristal-tile-section__tile {
		min-height: 120px;
	}
}

/* Barras de casuística */
.cristal-bars {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.cristal-bar__label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-family: var(--wp--preset--font-family--exo-2);
	font-weight: 100;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	margin-bottom: 10px;
}

.cristal-bar__percent {
	font-weight: 100;
	color: var(--wp--preset--color--petroleo-profundo);
}

.cristal-bar__track {
	height: 14px;
	background: color-mix(in srgb, var(--wp--preset--color--niebla) 35%, transparent);
	position: relative;
}

.cristal-bar__fill {
	height: 100%;
	background: var(--wp--preset--color--petroleo-profundo);
}

/* Hero de Inicio: imagen a pantalla completa (cover). "PSICÓLOGO" es la
   pieza editorial — grande, arriba, integrada en la imagen. El resto del
   texto (antetítulo, H1 real para SEO, subtítulo, botón) queda como bloque
   secundario, discreto, abajo a la izquierda. El degradado oscurece ambos
   extremos y deja la franja central despejada para que se vea la foto. */
.cristal-hero--bg {
	position: relative;
	min-height: 720px;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

.cristal-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(14, 17, 19, 0.85) 0%,
		rgba(14, 17, 19, 0.3) 24%,
		rgba(14, 17, 19, 0.05) 42%,
		rgba(14, 17, 19, 0.05) 58%,
		rgba(14, 17, 19, 0.4) 80%,
		rgba(14, 17, 19, 0.95) 100%
	);
}

/* La palabra editorial: un carácter pintado en el acento, tal como marca
   el manual de marca (pág. 4, "carácter pintado"). Es decorativa — el H1
   real de abajo ya lleva el texto completo para SEO y lectores de pantalla. */
.cristal-hero__word {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	margin: 0;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) 0;
	font-family: var(--wp--preset--font-family--exo-2);
	font-weight: 400;
	text-transform: uppercase;
	text-align: center;
	line-height: 0.86;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--blanco);
	font-size: clamp(4rem, 1rem + 6vw, 8.5rem);
	overflow-wrap: break-word;
}

.cristal-hero__word-accent {
	color: var(--wp--preset--color--petroleo-profundo);
}

.cristal-hero__content {
	position: relative;
	z-index: 1;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	max-width: 560px;
}

.cristal-hero__eyebrow {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--niebla);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0 0 var(--wp--preset--spacing--10);
}

.cristal-hero__title {
	font-family: var(--wp--preset--font-family--exo-2);
	font-weight: 100;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	line-height: 1.2;
	color: var(--wp--preset--color--niebla);
	font-size: var(--wp--preset--font-size--base);
	margin: 0 0 var(--wp--preset--spacing--10);
}

.cristal-hero__subtitle {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 400;
	color: var(--wp--preset--color--niebla);
	font-size: var(--wp--preset--font-size--sm);
	max-width: 45ch;
	margin: 0 0 var(--wp--preset--spacing--20);
}

@media (max-width: 782px) {
	.cristal-hero--bg {
		min-height: 560px;
	}
	.cristal-hero__word {
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) 0;
		font-size: clamp(2.25rem, 1.4rem + 7vw, 3.25rem);
	}
	.cristal-hero__content {
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
	}
}

/* Botón "Reservar cita" flotante, fijo en pantalla durante todo el scroll. */
.cristal-fab {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 1000;
}

.cristal-fab .wp-block-button__link {
	box-shadow: 0 10px 30px -8px rgba(14, 17, 19, 0.5);
}

/* Especialidades numeradas 01–06 */
.cristal-specialties {
	display: grid;
}

.cristal-specialty {
	display: grid;
	grid-template-columns: 5rem 1fr;
	gap: var(--wp--preset--spacing--30);
	align-items: baseline;
	padding: var(--wp--preset--spacing--30) 0;
}

.cristal-specialty__number {
	font-family: var(--wp--preset--font-family--exo-2);
	font-weight: 100;
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--petroleo-profundo);
	text-align: center;
}

.cristal-specialty__title {
	font-family: var(--wp--preset--font-family--exo-2);
	font-weight: 100;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	font-size: var(--wp--preset--font-size--md);
	margin: 0 0 0.4em;
}

.cristal-specialty__excerpt {
	color: var(--wp--preset--color--grafito);
	opacity: 0.72;
	margin: 0;
	max-width: 60ch;
}

@media (max-width: 600px) {
	.cristal-specialty {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--10);
	}
}

/* ==========================================================================
   Cómo saber si debo ir al psicólogo
   ========================================================================== */
.cristal-signs__eyebrow {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--petroleo-profundo);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0 0 var(--wp--preset--spacing--10);
}

.cristal-signs__intro {
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--grafito);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.cristal-signs__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cristal-signs__list li {
	position: relative;
	padding: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--20) 28px;
	border-top: 1px solid var(--wp--preset--color--niebla);
	font-size: var(--wp--preset--font-size--sm);
}

.cristal-signs__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(var(--wp--preset--spacing--20) + 0.75em);
	width: 12px;
	height: 2px;
	background: var(--wp--preset--color--petroleo-profundo);
}

/* ==========================================================================
   Reseñas de Doctoralia — el verde-turquesa es el color de marca de
   Doctoralia (no de Cristal), usado solo aquí como cita de la fuente.
   ========================================================================== */
.cristal-reviews {
	--doctoralia-teal: #00b3a4;
	--google-gold: #f2a600;
	max-width: 1100px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	background: color-mix(in srgb, var(--wp--preset--color--niebla) 12%, var(--wp--preset--color--blanco));
}

.cristal-reviews__badge {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: var(--wp--preset--spacing--10);
}

.cristal-reviews__badge .cristal-signs__eyebrow {
	margin: 0;
}

.cristal-reviews__logo {
	display: block;
	height: 16px;
	width: auto;
}

.cristal-reviews__logo--google {
	height: 18px;
}

.cristal-reviews__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	flex-wrap: wrap;
}

.cristal-reviews__head h2 {
	margin: 0;
}

.cristal-reviews__nav {
	display: flex;
	gap: 8px;
	flex: none;
}

.cristal-reviews__arrow {
	width: 38px;
	height: 38px;
	border: 1px solid var(--wp--preset--color--niebla);
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--grafito);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.cristal-reviews__arrow:hover {
	border-color: var(--wp--preset--color--petroleo-profundo);
	color: var(--wp--preset--color--petroleo-profundo);
}

.cristal-reviews__track {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--10);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--niebla) transparent;
}

.cristal-reviews__track::-webkit-scrollbar {
	height: 6px;
}

.cristal-reviews__track::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--niebla);
}

.cristal-reviews__track::-webkit-scrollbar-track {
	background: transparent;
}

.cristal-review {
	position: relative;
	flex: 0 0 220px;
	height: 220px;
	scroll-snap-align: start;
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--niebla);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.cristal-review:hover {
	border-color: var(--doctoralia-teal);
	box-shadow: 0 10px 24px -12px rgba(14, 17, 19, 0.25);
	transform: translateY(-2px);
}

.cristal-review::after {
	content: "”";
	position: absolute;
	top: -14px;
	right: 8px;
	font-family: var(--wp--preset--font-family--exo-2);
	font-size: 56px;
	line-height: 1;
	color: var(--wp--preset--color--petroleo-profundo);
	opacity: 0.08;
	pointer-events: none;
}

@media (max-width: 700px) {
	.cristal-reviews__nav {
		display: none;
	}
	.cristal-review {
		flex: 0 0 200px;
		height: 200px;
	}
}

.cristal-review__head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}

.cristal-review__avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--wp--preset--color--grafito);
	color: var(--wp--preset--color--blanco);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--exo-2);
	font-size: 10px;
	font-weight: 700;
	flex: none;
}

.cristal-review__name {
	font-family: var(--wp--preset--font-family--exo-2);
	font-weight: 600;
	font-size: 12px;
}

.cristal-review__stars {
	position: relative;
	color: var(--doctoralia-teal);
	letter-spacing: 1px;
	font-size: 12px;
}

.cristal-review__text {
	position: relative;
	font-size: 13px;
	line-height: 1.4;
	color: var(--wp--preset--color--grafito);
	margin: 0;
	flex-grow: 1;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

.cristal-review__more {
	align-self: flex-start;
	font-size: 12px;
	font-weight: 600;
	color: var(--doctoralia-teal);
	text-decoration: none;
}

.cristal-review__more:hover {
	text-decoration: underline;
}

.cristal-review__source {
	font-size: 10px;
	color: var(--wp--preset--color--niebla);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Reseñas de Google: mismas tarjetas, estrellas en su dorado de marca
   en vez del verde-turquesa de Doctoralia. */
.cristal-review--google .cristal-review__stars,
.cristal-review--google .cristal-review__more,
.cristal-review--google .cristal-review__source {
	color: var(--google-gold);
}

/* ==========================================================================
   FAQ — acordeón nativo con <details>/<summary>, sin JS.
   ========================================================================== */
.cristal-faq {
	max-width: 800px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.cristal-faq__item {
	border-bottom: 1px solid var(--wp--preset--color--niebla);
}

.cristal-faq__item summary {
	list-style: none;
	cursor: pointer;
	padding: var(--wp--preset--spacing--20) 0;
	font-family: var(--wp--preset--font-family--exo-2);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--base);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.cristal-faq__item summary::-webkit-details-marker {
	display: none;
}

.cristal-faq__item summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--exo-2);
	font-size: 22px;
	line-height: 1;
	color: var(--wp--preset--color--petroleo-profundo);
	flex: none;
}

.cristal-faq__item[open] summary::after {
	content: "–";
}

.cristal-faq__item p {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--grafito);
	opacity: 0.75;
	font-size: var(--wp--preset--font-size--sm);
	max-width: 65ch;
}

/* ==========================================================================
   Mapa
   ========================================================================== */
.cristal-map {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.cristal-map__info {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--grafito);
	color: var(--wp--preset--color--blanco);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.cristal-map__info address {
	font-style: normal;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--niebla);
	margin: 0 0 var(--wp--preset--spacing--20);
}

.cristal-map__frame {
	min-height: 360px;
}

.cristal-map__frame iframe {
	width: 100%;
	height: 100%;
	min-height: 360px;
	border: 0;
	display: block;
}

@media (max-width: 782px) {
	.cristal-map {
		grid-template-columns: 1fr;
	}
	.cristal-map__frame {
		min-height: 280px;
	}
}

/* ==========================================================================
   Formulario de contacto
   ========================================================================== */
.cristal-contact {
	max-width: 640px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.cristal-contact__form {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--30);
}

.cristal-contact__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--20);
}

.cristal-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cristal-field label {
	font-family: var(--wp--preset--font-family--exo-2);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--grafito);
}

.cristal-field input,
.cristal-field textarea {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--base);
	padding: 12px 14px;
	border: 1px solid var(--wp--preset--color--niebla);
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--grafito);
}

.cristal-field input:focus,
.cristal-field textarea:focus {
	outline: 2px solid var(--wp--preset--color--petroleo-profundo);
	outline-offset: 1px;
}

.cristal-field textarea {
	resize: vertical;
	min-height: 140px;
}

.cristal-contact__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cristal-contact__submit {
	justify-self: start;
	border: 0;
	cursor: pointer;
}

.cristal-form-feedback {
	padding: 12px 16px;
	font-size: var(--wp--preset--font-size--sm);
	margin: 0 0 var(--wp--preset--spacing--20);
	border-left: 3px solid var(--wp--preset--color--petroleo-profundo);
	background: color-mix(in srgb, var(--wp--preset--color--petroleo-profundo) 8%, var(--wp--preset--color--blanco));
}

.cristal-form-feedback--error {
	border-left-color: var(--wp--preset--color--grafito);
	background: color-mix(in srgb, var(--wp--preset--color--niebla) 20%, var(--wp--preset--color--blanco));
}

@media (max-width: 600px) {
	.cristal-contact__row {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Footer completo (y cabecera): ambos tienen fondo grafito, así que el
   enlace por defecto pasa a blanco — el hover global a grafito quedaría
   invisible sobre fondo oscuro. No afecta al botón "Reservar cita" del
   header, que fija su propio color por clase.
   ========================================================================== */
header.wp-block-group a,
footer.wp-block-group a {
	color: var(--wp--preset--color--blanco);
}

header.wp-block-group a:hover,
footer.wp-block-group a:hover {
	color: var(--wp--preset--color--petroleo-profundo);
}

.cristal-footer-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--30);
}

.cristal-footer-brand img {
	display: block;
	margin-bottom: var(--wp--preset--spacing--20);
}

.cristal-footer-claim {
	font-family: var(--wp--preset--font-family--exo-2);
	font-style: italic;
	font-size: var(--wp--preset--font-size--md);
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--blanco);
	margin: 0 0 var(--wp--preset--spacing--10);
	max-width: 26ch;
}

.cristal-footer-claim__accent {
	color: var(--wp--preset--color--petroleo-profundo);
}

.cristal-footer-col h3 {
	font-family: var(--wp--preset--font-family--exo-2);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 11px;
	color: var(--wp--preset--color--niebla);
	margin: 0 0 var(--wp--preset--spacing--10);
}

.cristal-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cristal-footer-col p {
	margin: 0;
}

.cristal-footer-col .cristal-footer-social {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.cristal-footer-social__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px 8px 10px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--niebla) 45%, transparent);
	font-family: var(--wp--preset--font-family--exo-2);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cristal-footer-social__link:hover {
	border-color: var(--wp--preset--color--petroleo-profundo);
	background: color-mix(in srgb, var(--wp--preset--color--petroleo-profundo) 12%, transparent);
}

.cristal-footer-social__link svg {
	display: block;
	flex: none;
}

.cristal-footer-bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--niebla) 35%, transparent);
}

.cristal-footer-bottom p {
	margin: 0;
}

@media (max-width: 782px) {
	.cristal-footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 500px) {
	.cristal-footer-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Páginas genéricas (page.html) — textos largos tipo legal: título
   discreto, medida de lectura cómoda, secciones separadas por líneas finas.
   ========================================================================== */
.cristal-page-main {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

.cristal-page-main .wp-block-post-title {
	max-width: 760px;
	margin: 0 auto var(--wp--preset--spacing--30);
}

.cristal-page-main .wp-block-post-content > * + * {
	margin-top: var(--wp--preset--spacing--20);
}

.cristal-page-main .wp-block-post-content h2 {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--niebla);
}

.cristal-page-main .wp-block-post-content h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.cristal-page-main .wp-block-post-content p {
	color: var(--wp--preset--color--grafito);
	opacity: 0.85;
}

@media (max-width: 700px) {
	.cristal-page-main {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}
}

/* ==========================================================================
   Banner de cookies. "Aceptar" y "Rechazar" llevan el mismo estilo a
   propósito: la AEPD exige que rechazar sea igual de fácil que aceptar,
   sin botón destacado empujando a una opción sobre la otra.
   ========================================================================== */
.cristal-cookie-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2000;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--grafito);
	border-top: 3px solid var(--wp--preset--color--petroleo-profundo);
	box-shadow: 0 -10px 30px -10px rgba(14, 17, 19, 0.4);
}

.cristal-cookie-banner[hidden] {
	display: none;
}

.cristal-cookie-banner__text {
	margin: 0;
	flex: 1 1 320px;
	max-width: 640px;
	font-size: 13px;
	color: var(--wp--preset--color--niebla);
}

.cristal-cookie-banner__text a {
	color: var(--wp--preset--color--blanco);
	text-decoration: underline;
}

.cristal-cookie-banner__actions {
	display: flex;
	flex: none;
	gap: 10px;
}

.cristal-cookie-banner__btn {
	font-family: var(--wp--preset--font-family--exo-2);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 10px 20px;
	border: 1px solid var(--wp--preset--color--blanco);
	background: transparent;
	color: var(--wp--preset--color--blanco);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.cristal-cookie-banner__btn:hover {
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--grafito);
}

@media (max-width: 600px) {
	.cristal-cookie-banner {
		flex-direction: column;
		align-items: stretch;
	}
	.cristal-cookie-banner__actions {
		justify-content: stretch;
	}
	.cristal-cookie-banner__btn {
		flex: 1;
	}
}

/* ==========================================================================
   Datos que conviene conocer — cifras citadas, actualizadas a mano.
   ========================================================================== */
.cristal-stats__intro {
	color: var(--wp--preset--color--grafito);
	opacity: 0.75;
	font-size: var(--wp--preset--font-size--sm);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.cristal-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.cristal-stat {
	border-top: 1px solid var(--wp--preset--color--niebla);
	padding-top: var(--wp--preset--spacing--20);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cristal-stat__number {
	font-family: var(--wp--preset--font-family--exo-2);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1;
	color: var(--wp--preset--color--petroleo-profundo);
	margin: 0;
}

.cristal-stat__label {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--grafito);
	margin: 0;
	flex-grow: 1;
}

.cristal-stat__source {
	font-size: 11px;
	color: var(--wp--preset--color--niebla);
	text-decoration: none;
}

.cristal-stat__source:hover {
	color: var(--wp--preset--color--petroleo-profundo);
	text-decoration: underline;
}

/* Cabecera fija arriba mientras se hace scroll. */
/* El sticky va en el envoltorio que genera WordPress alrededor del
   template-part (header.wp-block-template-part), no en la cabecera en sí:
   ese envoltorio es hijo directo de .cristal-shell (alto, toda la página),
   mientras que la cabecera interior mide lo mismo que su propio contenido
   — sticky necesita un contenedor más alto que el elemento para funcionar. */
.cristal-header-wrap {
	position: sticky;
	top: 0;
	z-index: 1000;
}