/*
Theme Name: Henry Xavier
Theme URI: https://henryxavier.com
Author: Henry Xavier
Description: Tema propio para Henry Xavier, estudio de retrato en Girona y la Costa Brava. Sin tema padre y sin constructor visual.
Version: 2.4.1
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: henryxavier

La tipografía Bebas Neue va autoalojada en assets/fonts bajo licencia SIL
Open Font License 1.1. La licencia acompaña al archivo en la misma carpeta.
*/

/* ---------------------------------------------------------------------------
   Tipografía propia
   --------------------------------------------------------------------------- */

@font-face {
	font-family: "Bebas Neue";
	src: url("assets/fonts/BebasNeue-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------------------
   Variables

   Paleta híbrida. Contrastes WCAG medidos:

     pizarra sobre humo      11,40:1   base de lectura
     sky     sobre pizarra    8,99:1   texto y acento sobre oscuro
     blanco  sobre ocean      5,23:1   botón principal
     ocean   sobre humo        4,76:1   acento y enlaces sobre claro
     ocean   sobre pizarra     2,39:1   PROHIBIDO
     sky     sobre humo        1,39:1   PROHIBIDO

   Regla: ocean solo contra fondo claro, sky solo contra fondo oscuro.
   Nunca al revés.
   --------------------------------------------------------------------------- */

:root {
	--hxv-pizarra: #2c3539;
	--hxv-ocean: #2872a1;
	--hxv-sky: #cbdde9;
	--hxv-humo: #f4f4f4;
	--hxv-blanco: #ffffff;

	--hxv-texto: var(--hxv-pizarra);
	--hxv-fondo: var(--hxv-humo);

	--hxv-display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
	--hxv-cuerpo: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--hxv-ancho: 1200px;
	--hxv-columna: 68ch;
	--hxv-seccion: clamp(3.5rem, 8vw, 7rem);
	--hxv-transicion: 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--hxv-fondo);
	color: var(--hxv-texto);
	font-family: var(--hxv-cuerpo);
	font-weight: 300;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.65;
	overflow-x: hidden;
}

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

a {
	color: inherit;
}

/* Bebas tiene un solo peso. Se bloquea la negrita sintética, que en una
   condensada engorda los trazos y se ve mal. */
h1,
h2,
h3,
.hxv-display {
	font-family: var(--hxv-display);
	font-weight: 400;
	font-synthesis: none;
	line-height: 0.95;
	letter-spacing: 0.02em;
	margin: 0 0 0.4em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 7vw, 5.5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); }

p { margin: 0 0 1.2em; }

/* Foco: ocean sobre claro. En las zonas oscuras se cambia a sky más abajo,
   porque ocean sobre pizarra se queda en 2,39:1 y no se vería. */
:focus-visible {
	outline: 3px solid var(--hxv-ocean);
	outline-offset: 3px;
}

.hxv-hero :focus-visible,
.hxv-cierre :focus-visible,
.hxv-pie :focus-visible,
.hxv-pack--destacado :focus-visible,
.hxv-nav :focus-visible {
	outline-color: var(--hxv-sky);
}

.hxv-saltar {
	position: absolute;
	left: -9999px;
	background: var(--hxv-pizarra);
	color: var(--hxv-sky);
	padding: 0.75rem 1.25rem;
	z-index: 999;
}

.hxv-saltar:focus {
	left: 1rem;
	top: 1rem;
}

/* ---------------------------------------------------------------------------
   Estructura
   --------------------------------------------------------------------------- */

.hxv-contenedor {
	width: min(100% - 2.5rem, var(--hxv-ancho));
	margin-inline: auto;
}

.hxv-columna {
	max-width: var(--hxv-columna);
}

.hxv-centrado {
	text-align: center;
}

.hxv-centrado.hxv-columna {
	margin-inline: auto;
}

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

.hxv-seccion__cab {
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.hxv-kicker {
	font-family: var(--hxv-display);
	font-size: 0.95rem;
	letter-spacing: 0.22em;
	color: var(--hxv-ocean);
	margin: 0 0 0.75rem;
}

/* Rejilla. El min() evita que la página se desborde a lo ancho en móviles
   estrechos, que es lo que pasa con minmax(300px, 1fr) a secas. */
.hxv-rejilla {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.5rem);
}

.hxv-rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.hxv-rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

/* Las galerías se salen de la columna de texto. Si van encajadas dentro de
   una columna estrecha salen pequeñas y descentradas. */
.hxv-galeria--ancha {
	width: min(100% - 2.5rem, 1600px);
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   Cabecera y navegación

   Transparente sobre el hero, sólida a partir del primer scroll. Sin ese
   cambio, al bajar el menú quedaría flotando sobre el contenido claro y las
   letras claras dejarían de leerse.

   El menú va en la tipografía de display, la misma de los titulares. Bebas
   no tiene minúsculas, así que sale en mayúsculas: por eso las etiquetas
   tienen que ser cortas.
   --------------------------------------------------------------------------- */

/* Con la cabecera fija, un enlace de ancla dejaría el destino escondido
   debajo del menú. Este margen lo compensa en todos los objetivos. */
:target,
[id^="hxv-"],
#servicios,
#precios {
	scroll-margin-top: 96px;
}

.hxv-cabecera {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	isolation: isolate;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background var(--hxv-transicion), border-color var(--hxv-transicion);
}

/* Con hero, el contenido pasa por debajo de la cabecera. Sin hero, empieza
   justo después: si no, la cabecera taparía la primera línea. */
.hxv-sin-hero .hxv-main {
	padding-top: 72px;
}

/* Sobre el hero oscuro, letras claras.

   Con velo propio en la franja superior. Sin él, si la parte de arriba de la
   foto es clara, el menú se queda en 2,29:1 y no se lee. Medido contra el
   peor caso, una zona blanca de la imagen: con el velo al 68 % sube a 6,51:1
   para el texto y 5,13:1 para el acento. El degradado se difumina hacia
   abajo, así que no se ve como una barra. */
.hxv-con-hero .hxv-cabecera {
	color: var(--hxv-humo);
}

.hxv-con-hero .hxv-cabecera::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 160px;
	pointer-events: none;
	z-index: -1;
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--hxv-pizarra) 68%, transparent) 0%,
		color-mix(in srgb, var(--hxv-pizarra) 40%, transparent) 55%,
		transparent 100%
	);
	transition: opacity var(--hxv-transicion);
}

/* Al fijarse ya hay fondo sólido: el velo sobra y se retira. */
.hxv-con-hero .hxv-cabecera.esta-fijada::before {
	opacity: 0;
}

.hxv-con-hero .hxv-menu-boton {
	color: var(--hxv-humo);
}

.hxv-con-hero .hxv-menu-boton__barras,
.hxv-con-hero .hxv-menu-boton__barras::before,
.hxv-con-hero .hxv-menu-boton__barras::after {
	background: var(--hxv-humo);
}

/* Al bajar, fondo sólido. Vale igual para las dos situaciones porque el
   fondo es siempre pizarra y el texto siempre claro. */
.hxv-cabecera.esta-fijada {
	background: color-mix(in srgb, var(--hxv-pizarra) 94%, transparent);
	backdrop-filter: blur(12px);
	border-bottom-color: color-mix(in srgb, var(--hxv-sky) 22%, transparent);
	color: var(--hxv-humo);
}

.hxv-cabecera.esta-fijada .hxv-menu-boton {
	color: var(--hxv-humo);
}

.hxv-cabecera.esta-fijada .hxv-menu-boton__barras,
.hxv-cabecera.esta-fijada .hxv-menu-boton__barras::before,
.hxv-cabecera.esta-fijada .hxv-menu-boton__barras::after {
	background: var(--hxv-humo);
}

.hxv-cabecera__interior {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 72px;
}

.hxv-logotipo {
	font-family: var(--hxv-display);
	font-size: 1.6rem;
	letter-spacing: 0.06em;
	text-decoration: none;
	color: inherit;
}

.custom-logo-link img {
	max-height: 40px;
	width: auto;
}

/* Sobre el hero, el logotipo en imagen se aclara para que no desaparezca
   contra la foto oscura. */
.hxv-con-hero .hxv-cabecera .custom-logo-link img {
	filter: brightness(0) invert(1);
}

/* El nav contiene la lista y el botón de contacto. Sin display:flex aquí,
   el botón cae debajo del menú en escritorio: el <ul> es un bloque. */
.hxv-nav {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 2vw, 2rem);
}

.hxv-nav__lista {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hxv-nav__lista a {
	font-family: var(--hxv-display);
	font-size: 1.05rem;
	letter-spacing: 0.12em;
	color: inherit;
	text-decoration: none;
	padding-block: 0.5rem;
	border-bottom: 1px solid transparent;
	transition: border-color var(--hxv-transicion), opacity var(--hxv-transicion);
}

.hxv-nav__lista a:hover,
.hxv-nav__lista .current-menu-item > a {
	border-bottom-color: currentColor;
}

/* Sin hero y sin scroll: letras oscuras sobre el fondo claro del sitio. */
.hxv-sin-hero .hxv-cabecera:not(.esta-fijada) .hxv-nav__lista a:hover,
.hxv-sin-hero .hxv-cabecera:not(.esta-fijada) .hxv-nav__lista .current-menu-item > a {
	border-bottom-color: var(--hxv-ocean);
}

.hxv-menu-boton {
	display: none;
	align-items: center;
	gap: 0.6rem;
	background: none;
	border: 0;
	padding: 0.6rem;
	cursor: pointer;
	font-family: var(--hxv-display);
	font-size: 1.1rem;
	letter-spacing: 0.12em;
	color: var(--hxv-texto);
}

.hxv-menu-boton__barras,
.hxv-menu-boton__barras::before,
.hxv-menu-boton__barras::after {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--hxv-pizarra);
	transition: transform var(--hxv-transicion), opacity var(--hxv-transicion), background var(--hxv-transicion);
}

.hxv-menu-boton__barras::before,
.hxv-menu-boton__barras::after {
	content: "";
	position: absolute;
}

.hxv-menu-boton__barras::before { transform: translateY(-7px); }
.hxv-menu-boton__barras::after { transform: translateY(7px); }

.hxv-menu-boton[aria-expanded="true"] .hxv-menu-boton__barras { background: transparent; }
.hxv-menu-boton[aria-expanded="true"] .hxv-menu-boton__barras::before { transform: rotate(45deg); }
.hxv-menu-boton[aria-expanded="true"] .hxv-menu-boton__barras::after { transform: rotate(-45deg); }

/* El botón de contacto de la cabecera se dibuja en línea para no pesar más
   que el propio menú. */
.hxv-btn--nav {
	padding: 0.55rem 1.2rem;
	font-size: 0.95rem;
	background: transparent;
	color: inherit;
	border-color: currentColor;
}

.hxv-btn--nav:hover {
	background: var(--hxv-sky);
	color: var(--hxv-pizarra);
	border-color: var(--hxv-sky);
}

.hxv-sin-hero .hxv-cabecera:not(.esta-fijada) .hxv-btn--nav:hover {
	background: var(--hxv-ocean);
	color: var(--hxv-blanco);
	border-color: var(--hxv-ocean);
}

/* Menú móvil desde el primer día. Ocultar la navegación sin poner un botón
   que la sustituya deja el sitio sin navegación en móvil. */
@media (max-width: 900px) {

	.hxv-menu-boton {
		display: inline-flex;
		position: relative;
	}

	.hxv-nav {
		position: fixed;
		inset: 72px 0 0;
		background: var(--hxv-pizarra);
		color: var(--hxv-humo);
		padding: 2.5rem 1.5rem;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		transform: translateX(100%);
		transition: transform var(--hxv-transicion);
		overflow-y: auto;
	}

	.hxv-nav.esta-abierto {
		transform: translateX(0);
	}

	.hxv-nav__lista {
		flex-direction: column;
		gap: 1.25rem;
	}

	.hxv-nav__lista a {
		font-size: 1.75rem;
		letter-spacing: 0.06em;
	}

	.hxv-nav__lista a:hover,
	.hxv-nav__lista .current-menu-item > a {
		border-bottom-color: var(--hxv-sky);
	}

	/* Con el menú abierto la cabecera va sobre fondo oscuro siempre. */
	.hxv-cabecera:has(.hxv-nav.esta-abierto) .hxv-menu-boton {
		color: var(--hxv-humo);
	}

	.hxv-cabecera:has(.hxv-nav.esta-abierto) .hxv-menu-boton__barras,
	.hxv-cabecera:has(.hxv-nav.esta-abierto) .hxv-menu-boton__barras::before,
	.hxv-cabecera:has(.hxv-nav.esta-abierto) .hxv-menu-boton__barras::after {
		background: var(--hxv-humo);
	}

	.hxv-nav .hxv-btn {
		background: var(--hxv-sky);
		color: var(--hxv-pizarra);
		border-color: var(--hxv-sky);
	}
}

/* ---------------------------------------------------------------------------
   Botones

   Principal: ocean con texto blanco, 5,23:1.
   Sobre fondo oscuro se invierte a sky con texto pizarra, 8,99:1.
   --------------------------------------------------------------------------- */

.hxv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.9rem 1.75rem;
	background: var(--hxv-ocean);
	color: var(--hxv-blanco);
	font-family: var(--hxv-display);
	font-size: 1.05rem;
	letter-spacing: 0.1em;
	text-decoration: none;
	border: 1px solid var(--hxv-ocean);
	transition: background var(--hxv-transicion), color var(--hxv-transicion), border-color var(--hxv-transicion);
}

.hxv-btn:hover {
	background: var(--hxv-pizarra);
	color: var(--hxv-sky);
	border-color: var(--hxv-pizarra);
}

.hxv-btn--grande {
	padding: 1.1rem 2.25rem;
	font-size: 1.2rem;
}

.hxv-btn--linea {
	background: transparent;
	color: var(--hxv-pizarra);
	border-color: var(--hxv-pizarra);
}

.hxv-btn--linea:hover {
	background: var(--hxv-pizarra);
	color: var(--hxv-sky);
}

.hxv-enlace {
	text-decoration: none;
	border-bottom: 1px solid var(--hxv-ocean);
	transition: opacity var(--hxv-transicion);
}

.hxv-enlace:hover { opacity: 0.7; }

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

.hxv-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(82svh, 780px);
	background: var(--hxv-pizarra);
	color: var(--hxv-humo);
	overflow: hidden;
}

.hxv-hero--interior {
	min-height: min(62svh, 600px);
}

.hxv-hero__media {
	position: absolute;
	inset: 0;
}

.hxv-hero__img,
.hxv-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
}

.hxv-hero__video {
	position: absolute;
	inset: 0;
}

.hxv-hero__texto {
	position: relative;
	padding-block: clamp(3rem, 8vw, 6rem);
}

.hxv-hero .hxv-kicker {
	color: var(--hxv-sky);
}

.hxv-hero__titulo {
	max-width: 18ch;
}

.hxv-hero__tagline {
	font-family: var(--hxv-display);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	color: var(--hxv-sky);
	letter-spacing: 0.04em;
	margin-bottom: 1rem;
}

.hxv-hero__entrada {
	max-width: 52ch;
	font-size: 1.05rem;
}

.hxv-hero__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.5rem;
}

/* Sobre el hero oscuro el botón sólido va en sky, no en ocean. */
.hxv-hero .hxv-btn {
	background: var(--hxv-sky);
	color: var(--hxv-pizarra);
	border-color: var(--hxv-sky);
}

.hxv-hero .hxv-btn:hover {
	background: transparent;
	color: var(--hxv-sky);
}

.hxv-hero .hxv-btn--linea {
	background: transparent;
	color: var(--hxv-sky);
	border-color: var(--hxv-sky);
}

.hxv-hero .hxv-btn--linea:hover {
	background: var(--hxv-sky);
	color: var(--hxv-pizarra);
}

/* ---------------------------------------------------------------------------
   Tarjetas y razones
   --------------------------------------------------------------------------- */

.hxv-tarjeta__enlace {
	display: block;
	text-decoration: none;
	color: inherit;
}

.hxv-tarjeta__img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform var(--hxv-transicion);
}

.hxv-tarjeta__enlace:hover .hxv-tarjeta__img {
	transform: scale(1.03);
}

.hxv-tarjeta__cuerpo {
	margin-top: 1rem;
}

.hxv-tarjeta__tipo {
	display: block;
	font-family: var(--hxv-display);
	font-size: 0.85rem;
	letter-spacing: 0.18em;
	color: var(--hxv-ocean);
	margin-bottom: 0.35rem;
}

.hxv-razon__numero {
	display: block;
	font-family: var(--hxv-display);
	font-size: 3rem;
	color: var(--hxv-ocean);
	line-height: 1;
	margin-bottom: 0.5rem;
}

.hxv-seccion--razones {
	background: var(--hxv-blanco);
}

/* ---------------------------------------------------------------------------
   Precios
   --------------------------------------------------------------------------- */

.hxv-pack {
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--hxv-blanco);
	border: 1px solid color-mix(in srgb, var(--hxv-pizarra) 15%, transparent);
}

.hxv-pack--destacado {
	background: var(--hxv-pizarra);
	color: var(--hxv-humo);
	border-color: var(--hxv-pizarra);
}

.hxv-pack--destacado .hxv-pack__precio {
	color: var(--hxv-sky);
}

.hxv-pack--destacado .hxv-btn {
	background: var(--hxv-sky);
	color: var(--hxv-pizarra);
	border-color: var(--hxv-sky);
}

.hxv-pack--destacado .hxv-btn:hover {
	background: transparent;
	color: var(--hxv-sky);
}

.hxv-pack__etiqueta {
	display: inline-block;
	align-self: flex-start;
	font-family: var(--hxv-display);
	font-size: 0.8rem;
	letter-spacing: 0.18em;
	padding: 0.25rem 0.7rem;
	background: var(--hxv-sky);
	color: var(--hxv-pizarra);
	margin-bottom: 1rem;
}

.hxv-pack__precio {
	font-family: var(--hxv-display);
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	line-height: 1;
	margin: 0 0 1.25rem;
}

.hxv-pack__lista {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	flex: 1;
}

.hxv-pack__lista li {
	padding: 0.5rem 0 0.5rem 1.35rem;
	position: relative;
	border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.hxv-pack__lista li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.1rem;
	width: 8px;
	height: 1px;
	background: var(--hxv-ocean);
}

.hxv-pack--destacado .hxv-pack__lista li::before {
	background: var(--hxv-sky);
}

.hxv-precios__nota {
	margin-top: 1.75rem;
	font-size: 0.9rem;
	opacity: 0.75;
}

/* ---------------------------------------------------------------------------
   FAQ, contenido, vídeo
   --------------------------------------------------------------------------- */

.hxv-faq__item {
	border-bottom: 1px solid color-mix(in srgb, var(--hxv-pizarra) 15%, transparent);
}

.hxv-faq__pregunta {
	cursor: pointer;
	padding: 1.1rem 2rem 1.1rem 0;
	font-family: var(--hxv-display);
	font-size: 1.25rem;
	letter-spacing: 0.03em;
	list-style: none;
	position: relative;
}

.hxv-faq__pregunta::-webkit-details-marker { display: none; }

.hxv-faq__pregunta::after {
	content: "+";
	position: absolute;
	right: 0;
	color: var(--hxv-ocean);
	font-size: 1.5rem;
}

.hxv-faq__item[open] .hxv-faq__pregunta::after { content: "–"; }

.hxv-faq__respuesta { padding-bottom: 1rem; }

.hxv-contenido > * { max-width: var(--hxv-columna); }

.hxv-contenido a { color: var(--hxv-ocean); }

.hxv-contenido .alignwide,
.hxv-contenido .alignfull,
.hxv-contenido .wp-block-gallery {
	max-width: none;
}

.hxv-video {
	position: relative;
	cursor: pointer;
	background: var(--hxv-pizarra);
	aspect-ratio: 16 / 9;
}

.hxv-video__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.7;
}

.hxv-video__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: fit-content;
	height: fit-content;
	background: var(--hxv-sky);
	color: var(--hxv-pizarra);
	border: 0;
	padding: 1rem 2rem;
	font-family: var(--hxv-display);
	font-size: 1.2rem;
	letter-spacing: 0.12em;
	cursor: pointer;
}

.hxv-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.hxv-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 2.5rem;
}

.hxv-filtro {
	font-family: var(--hxv-display);
	letter-spacing: 0.12em;
	text-decoration: none;
	padding: 0.4rem 1rem;
	border: 1px solid color-mix(in srgb, var(--hxv-pizarra) 25%, transparent);
}

.hxv-filtro:hover {
	border-color: var(--hxv-ocean);
	color: var(--hxv-ocean);
}

/* ---------------------------------------------------------------------------
   Cierre y pie
   --------------------------------------------------------------------------- */

.hxv-cierre {
	background: var(--hxv-pizarra);
	color: var(--hxv-humo);
	padding-block: var(--hxv-seccion);
}

.hxv-cierre .hxv-hero__acciones { justify-content: center; }

.hxv-cierre .hxv-kicker { color: var(--hxv-sky); }

.hxv-cierre .hxv-btn {
	background: var(--hxv-sky);
	color: var(--hxv-pizarra);
	border-color: var(--hxv-sky);
}

.hxv-cierre .hxv-btn:hover {
	background: transparent;
	color: var(--hxv-sky);
}

.hxv-cierre .hxv-btn--linea {
	background: transparent;
	color: var(--hxv-sky);
	border-color: var(--hxv-sky);
}

.hxv-cierre .hxv-btn--linea:hover {
	background: var(--hxv-sky);
	color: var(--hxv-pizarra);
}

.hxv-cierre__texto { max-width: 46ch; margin-inline: auto; }

.hxv-seccion--relacion .hxv-kicker { color: var(--hxv-ocean); }

.hxv-pie {
	background: var(--hxv-pizarra);
	color: var(--hxv-humo);
	padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
	border-top: 1px solid color-mix(in srgb, var(--hxv-sky) 30%, transparent);
	font-size: 0.95rem;
}

.hxv-pie__titulo {
	font-size: 1.2rem;
	letter-spacing: 0.14em;
	color: var(--hxv-sky);
	margin-bottom: 1rem;
}

.hxv-pie__lista,
.hxv-pie__redes,
.hxv-pie__legal-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hxv-pie__lista li,
.hxv-pie__redes li { margin-bottom: 0.6rem; }

.hxv-pie__redes {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1rem;
}

.hxv-pie a { text-decoration: none; }
.hxv-pie a:hover { color: var(--hxv-sky); }

.hxv-pie .hxv-enlace { border-bottom-color: var(--hxv-sky); }

.hxv-pie__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid color-mix(in srgb, var(--hxv-humo) 18%, transparent);
	font-size: 0.85rem;
	opacity: 0.85;
}

.hxv-pie__legal-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

/* ---------------------------------------------------------------------------
   Scroll reveal
   --------------------------------------------------------------------------- */

/* El contenido solo se esconde si el JS ha arrancado. Sin la clase hxv-js,
   todo es visible: un fallo de JavaScript no puede dejar la página en blanco. */
.hxv-js .hxv-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.hxv-js .hxv-reveal.esta-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {

	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}

	.hxv-js .hxv-reveal {
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Bloques de página de servicio
   --------------------------------------------------------------------------- */

/* Ancla de precio en el hero. La cifra aparece antes de que nadie tenga que
   bajar a buscarla: en un mercado donde nadie publica precios, decirlo
   arriba es el argumento. */
.hxv-hero__ancla {
	margin-top: 1.5rem;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	color: var(--hxv-sky);
	border-top: 1px solid color-mix(in srgb, var(--hxv-sky) 35%, transparent);
	padding-top: 1rem;
	max-width: 34ch;
}

.hxv-hero__ancla strong {
	font-family: var(--hxv-display);
	font-weight: 400;
	font-size: 1.5rem;
	letter-spacing: 0.02em;
}

/* Contraste: el lado izquierdo apagado, el derecho con peso. La comparación
   funciona porque los dos se ven a la vez. */
.hxv-seccion--contraste {
	background: var(--hxv-blanco);
}

.hxv-contraste__lado {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border: 1px solid color-mix(in srgb, var(--hxv-pizarra) 15%, transparent);
}

.hxv-contraste__lado--antes {
	opacity: 0.72;
}

.hxv-contraste__lado--despues {
	background: var(--hxv-pizarra);
	color: var(--hxv-humo);
	border-color: var(--hxv-pizarra);
}

.hxv-contraste__lado--despues .hxv-contraste__titulo {
	color: var(--hxv-sky);
}

.hxv-contraste__titulo {
	font-size: 1.35rem;
	letter-spacing: 0.06em;
	margin-bottom: 1.25rem;
}

.hxv-contraste__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hxv-contraste__lista li {
	position: relative;
	padding: 0.6rem 0 0.6rem 1.6rem;
	border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.hxv-contraste__lista li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.25rem;
	width: 9px;
	height: 1px;
	background: var(--hxv-ocean);
}

.hxv-contraste__lado--despues .hxv-contraste__lista li::before {
	background: var(--hxv-sky);
}

/* Proceso. Numeración grande y línea de continuidad entre pasos. */
.hxv-proceso {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.25rem);
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	counter-reset: hxv-paso;
}

.hxv-proceso__paso {
	position: relative;
	padding-top: 1.5rem;
	border-top: 2px solid color-mix(in srgb, var(--hxv-ocean) 30%, transparent);
}

.hxv-proceso__numero {
	display: block;
	font-family: var(--hxv-display);
	font-size: 2.5rem;
	line-height: 1;
	color: var(--hxv-ocean);
	margin-bottom: 0.5rem;
}

.hxv-proceso__titulo {
	font-size: 1.25rem;
	letter-spacing: 0.04em;
	margin-bottom: 0.5rem;
}

.hxv-proceso__texto {
	font-size: 0.95rem;
	margin: 0;
}

/* Garantía. Fondo claro y marco marcado: tiene que leerse como un
   compromiso, no como un bloque decorativo más. */
.hxv-seccion--garantia {
	background: var(--hxv-blanco);
}

.hxv-seccion--garantia .hxv-contenedor {
	margin-inline: auto;
}

.hxv-garantia {
	list-style: none;
	margin: 0;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 2px solid var(--hxv-ocean);
}

.hxv-garantia li {
	position: relative;
	padding: 0.75rem 0 0.75rem 2rem;
}

.hxv-garantia li + li {
	border-top: 1px solid color-mix(in srgb, var(--hxv-pizarra) 12%, transparent);
}

.hxv-garantia li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0.7rem;
	color: var(--hxv-ocean);
	font-size: 1.1rem;
}

.hxv-garantia__cierre {
	margin-top: 1.25rem;
	font-size: 0.9rem;
	opacity: 0.75;
}

/* Testimonios. Sin comillas decorativas gigantes ni estrellas: el texto
   sostiene solo si es real. */
.hxv-testimonio {
	margin: 0;
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--hxv-blanco);
	border-left: 3px solid var(--hxv-ocean);
}

.hxv-testimonio__texto {
	margin: 0 0 1.25rem;
	font-size: 1.05rem;
	line-height: 1.6;
}

.hxv-testimonio__firma {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.hxv-testimonio__nombre {
	font-family: var(--hxv-display);
	font-size: 1.15rem;
	letter-spacing: 0.06em;
}

.hxv-testimonio__cargo {
	font-size: 0.85rem;
	color: var(--hxv-ocean);
	letter-spacing: 0.06em;
}

/* Aviso que solo ve el equipo. Nunca se enseña un bloque a medias al
   visitante: o hay contenido real, o la sección no existe. */
.hxv-aviso-editor {
	border: 1px dashed var(--hxv-ocean);
	background: var(--hxv-blanco);
	padding: 1.5rem;
	margin-block: 2rem;
	font-size: 0.9rem;
	color: var(--hxv-ocean);
	text-align: center;
}

/* Resumen de reseñas. Tres citas sueltas no prueban nada; la nota media, el
   total y el enlace a la ficha sí, porque cualquiera puede comprobarlo. */
.hxv-resena-resumen {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin: 0 0 2.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid color-mix(in srgb, var(--hxv-pizarra) 15%, transparent);
}

.hxv-resena-resumen__nota {
	font-family: var(--hxv-display);
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	line-height: 1;
	color: var(--hxv-ocean);
}

.hxv-resena-resumen__texto {
	font-size: 0.95rem;
}

.hxv-resena-resumen a {
	color: var(--hxv-ocean);
	border-bottom: 1px solid currentColor;
	text-decoration: none;
}

.hxv-testimonio__origen {
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.55;
	margin-top: 0.35rem;
}

/* ---------------------------------------------------------------------------
   Cuerpo editorial

   El problema de un texto largo en una columna estrecha es que todo pesa
   igual: párrafo, título y lista se leen como un bloque continuo. Aquí cada
   pieza tiene un papel visible y el ojo puede saltar.
   --------------------------------------------------------------------------- */

.hxv-contenido {
	padding-block: clamp(3rem, 6vw, 5rem);
}

/* Entradilla. Más grande que el cuerpo, sin llegar a titular. Da entrada al
   texto y marca dónde empieza. */
.hxv-contenido .hxv-entradilla {
	font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
	line-height: 1.45;
	font-weight: 300;
	margin-bottom: 1.5rem;
	text-wrap: pretty;
}

/* Titulares de sección con filete. El filete corto por encima separa
   bloques sin necesidad de añadir espacio en blanco infinito. */
.hxv-contenido h2 {
	margin-top: clamp(2.75rem, 5vw, 4rem);
	padding-top: 1.5rem;
	border-top: 1px solid color-mix(in srgb, var(--hxv-pizarra) 18%, transparent);
	position: relative;
}

.hxv-contenido h2::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 56px;
	height: 3px;
	background: var(--hxv-ocean);
}

.hxv-contenido h2:first-child {
	margin-top: 0;
}

.hxv-contenido h3 {
	margin-top: 2.25rem;
}

/* Dato suelto. Una cifra que se lee de un vistazo sin tener que buscarla
   dentro de un párrafo. */
.hxv-contenido .hxv-dato {
	font-family: var(--hxv-display);
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
	letter-spacing: 0.03em;
	line-height: 1.3;
	color: var(--hxv-pizarra);
	padding: 1.1rem 0 1.1rem 1.5rem;
	border-left: 3px solid var(--hxv-ocean);
	margin-block: 2rem;
}

.hxv-contenido .hxv-dato strong {
	font-weight: 400;
	color: var(--hxv-ocean);
}

/* Frase destacada. Es la que se recuerda, así que se saca del cuerpo. */
.hxv-contenido .hxv-destacado {
	font-family: var(--hxv-display);
	font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
	line-height: 1.1;
	letter-spacing: 0.02em;
	color: var(--hxv-pizarra);
	margin-block: clamp(2.25rem, 4vw, 3.25rem);
	max-width: 22ch;
}

/* Listas de entregables. Con marca propia en lugar del punto por defecto. */
.hxv-contenido .hxv-lista-check {
	list-style: none;
	margin: 1.75rem 0;
	padding: 0;
}

.hxv-contenido .hxv-lista-check li {
	position: relative;
	padding: 0.85rem 0 0.85rem 2.1rem;
	border-bottom: 1px solid color-mix(in srgb, var(--hxv-pizarra) 12%, transparent);
}

.hxv-contenido .hxv-lista-check li:first-child {
	border-top: 1px solid color-mix(in srgb, var(--hxv-pizarra) 12%, transparent);
}

.hxv-contenido .hxv-lista-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.35rem;
	width: 12px;
	height: 12px;
	border-left: 2px solid var(--hxv-ocean);
	border-bottom: 2px solid var(--hxv-ocean);
	transform: rotate(-45deg) translateY(-2px);
}

/* Nota o aviso. Lo que hay que leer aunque se esté leyendo en diagonal. */
.hxv-contenido .hxv-nota {
	background: var(--hxv-blanco);
	border-left: 3px solid var(--hxv-ocean);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	margin-block: clamp(2.25rem, 4vw, 3rem);
	font-size: 0.98rem;
	line-height: 1.6;
}

.hxv-contenido .hxv-nota strong {
	display: block;
	font-family: var(--hxv-display);
	font-weight: 400;
	font-size: 1.2rem;
	letter-spacing: 0.05em;
	color: var(--hxv-ocean);
	margin-bottom: 0.4rem;
}

/* Listas normales del editor, por si alguien escribe una sin clase. */
.hxv-contenido ul:not([class]),
.hxv-contenido ol:not([class]) {
	padding-left: 1.25rem;
	margin-block: 1.5rem;
}

.hxv-contenido ul:not([class]) li,
.hxv-contenido ol:not([class]) li {
	margin-bottom: 0.6rem;
	padding-left: 0.35rem;
}

.hxv-contenido ol:not([class]) li::marker {
	font-family: var(--hxv-display);
	color: var(--hxv-ocean);
}

/* ---------------------------------------------------------------------------
   Extra: paseo fotográfico

   Se presenta visualmente como lo que es: un añadido, no un servicio al mismo
   nivel. Fondo oscuro para separarlo del resto de la página, tipografía más
   contenida y sin ancla de precio en el hero.
   --------------------------------------------------------------------------- */

.hxv-extra {
	background: var(--hxv-pizarra);
	color: var(--hxv-humo);
}

.hxv-extra .hxv-kicker {
	color: var(--hxv-sky);
}

.hxv-extra__cab {
	max-width: 62ch;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.hxv-extra__entrada {
	font-size: 1.05rem;
	color: color-mix(in srgb, var(--hxv-humo) 88%, transparent);
	margin: 0;
}

.hxv-extra__cuerpo {
	align-items: start;
}

.hxv-extra__pack {
	padding: 1.5rem 0;
	border-top: 1px solid color-mix(in srgb, var(--hxv-sky) 28%, transparent);
}

.hxv-extra__pack--foco .hxv-extra__pack-nombre::after {
	content: "El más elegido";
	display: inline-block;
	margin-left: 0.75rem;
	vertical-align: middle;
	font-family: var(--hxv-cuerpo);
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.2rem 0.6rem;
	background: var(--hxv-sky);
	color: var(--hxv-pizarra);
}

.hxv-extra__pack-cab {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.hxv-extra__pack-nombre {
	font-size: 1.3rem;
	letter-spacing: 0.06em;
	margin: 0;
}

.hxv-extra__pack-precio {
	font-family: var(--hxv-display);
	font-size: 2rem;
	line-height: 1;
	color: var(--hxv-sky);
	margin: 0;
}

.hxv-extra__pack-lista {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	font-size: 0.92rem;
	opacity: 0.85;
}

.hxv-extra__pack-lista li {
	position: relative;
	padding-left: 0.85rem;
}

.hxv-extra__pack-lista li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 5px;
	height: 1px;
	background: var(--hxv-sky);
}

.hxv-extra__nota {
	font-size: 0.82rem;
	opacity: 0.7;
	margin: 1.5rem 0;
	line-height: 1.6;
}

.hxv-extra__sitios-titulo {
	font-size: 1.2rem;
	letter-spacing: 0.06em;
	color: var(--hxv-sky);
	margin-bottom: 1rem;
}

.hxv-extra__lista-sitios {
	margin: 0;
}

.hxv-extra__sitio {
	padding: 0.85rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--hxv-humo) 15%, transparent);
}

.hxv-extra__sitio dt {
	font-family: var(--hxv-display);
	font-size: 1.05rem;
	letter-spacing: 0.06em;
}

.hxv-extra__sitio dd {
	margin: 0.2rem 0 0;
	font-size: 0.9rem;
	opacity: 0.78;
}

.hxv-extra__sitios-pie {
	margin: 1.25rem 0 0;
	font-size: 0.85rem;
	opacity: 0.65;
}


/* ---------------------------------------------------------------------------
   Bifurcación de la portada

   Tres caminos a ancho completo con retrato de fondo. En una web de
   fotografía la imagen es el producto: quien llega sabe si le gusta el
   trabajo antes de leer nada.

   El problema de poner texto sobre foto es que el contraste depende de la
   imagen. Aquí no se deja al azar: el velo tiene un degradado que en la zona
   del texto llega al 92 % de pizarra. Medido contra el peor caso posible, una
   zona completamente blanca de la foto, da 6,48:1 para el texto y 5,11:1 para
   el acento. Pase lo que pase, se lee.
   --------------------------------------------------------------------------- */

.hxv-bifurcacion {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	background: var(--hxv-pizarra);
	color: var(--hxv-humo);
}

.hxv-via {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(380px, 46vw, 520px);
	padding: clamp(2rem, 4vw, 3rem) clamp(1.75rem, 3vw, 2.75rem);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	isolation: isolate;
	transition: background var(--hxv-transicion);
}

/* Sin foto se comporta como antes: bloque plano y sin altura forzada. */
.hxv-via:not(.hxv-via--foto) {
	min-height: 0;
	justify-content: flex-start;
	gap: 0.75rem;
}

.hxv-via__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform 0.7s var(--hxv-transicion);
}

/* Velo. Arriba deja ver el retrato, abajo garantiza la lectura. */
.hxv-via--foto::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--hxv-pizarra) 35%, transparent) 0%,
		color-mix(in srgb, var(--hxv-pizarra) 62%, transparent) 45%,
		color-mix(in srgb, var(--hxv-pizarra) 92%, transparent) 100%
	);
	transition: opacity var(--hxv-transicion);
}

.hxv-via:hover .hxv-via__img {
	transform: scale(1.04);
}

/* Separadores. Con foto sobran: los bordes de la imagen ya separan. */
.hxv-via + .hxv-via:not(.hxv-via--foto)::after {
	content: "";
	position: absolute;
	inset: clamp(2rem, 4vw, 3rem) auto clamp(2rem, 4vw, 3rem) 0;
	width: 1px;
	background: color-mix(in srgb, var(--hxv-sky) 25%, transparent);
}

@media (max-width: 899px) {

	.hxv-via + .hxv-via:not(.hxv-via--foto)::after {
		inset: 0 clamp(1.75rem, 3vw, 2.75rem) auto;
		width: auto;
		height: 1px;
	}
}

.hxv-via:not(.hxv-via--foto):hover {
	background: color-mix(in srgb, var(--hxv-sky) 10%, transparent);
}

.hxv-via__cuerpo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	position: relative;
}

.hxv-via__titulo {
	font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
	letter-spacing: 0.03em;
	margin: 0;
}

.hxv-via__texto {
	font-size: 0.98rem;
	line-height: 1.6;
	color: color-mix(in srgb, var(--hxv-humo) 88%, transparent);
	margin: 0;
	max-width: 34ch;
}

.hxv-via__desde {
	margin: 0;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	color: color-mix(in srgb, var(--hxv-humo) 70%, transparent);
}

.hxv-via__desde strong {
	font-family: var(--hxv-display);
	font-weight: 400;
	font-size: 1.6rem;
	letter-spacing: 0.02em;
	color: var(--hxv-sky);
	margin-right: 0.35rem;
}

/* El botón es un span dentro del enlace: toda la tarjeta es clicable, pero
   el botón deja claro que hay algo al otro lado. */
.hxv-via__boton {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	/* auto empuja el botón al fondo: los tres quedan a la misma altura
	   aunque los textos midan distinto. */
	margin-top: auto;
	padding: 0.75rem 1.5rem;
	background: transparent;
	border: 1px solid var(--hxv-sky);
	color: var(--hxv-sky);
	font-family: var(--hxv-display);
	font-size: 1rem;
	letter-spacing: 0.1em;
	transition: background var(--hxv-transicion), color var(--hxv-transicion);
}

.hxv-via__boton::after {
	content: "\2192";
	transition: transform var(--hxv-transicion);
}

.hxv-via:hover .hxv-via__boton {
	background: var(--hxv-sky);
	color: var(--hxv-pizarra);
}

.hxv-via:hover .hxv-via__boton::after {
	transform: translateX(4px);
}

.hxv-via:focus-visible {
	outline: 3px solid var(--hxv-sky);
	outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {

	.hxv-via:hover .hxv-via__img {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Bloque editorial con ficha lateral

   El texto largo en una columna suelta debajo del hero se lee como una
   entrada de blog. Con la ficha al lado deja de parecerlo: hay dos elementos
   en tensión, la página tiene estructura y el ojo entra por algún sitio.

   Y no es decoración. Mientras se lee el argumento, el precio, el plazo y el
   botón están delante sin tener que volver arriba ni bajar a la tabla.
   --------------------------------------------------------------------------- */

.hxv-editorial {
	display: grid;
	grid-template-columns: minmax(min(260px, 100%), 300px) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
	padding-block: clamp(3rem, 6vw, 5rem);
}

@media (max-width: 899px) {

	.hxv-editorial {
		grid-template-columns: 1fr;
	}
}

/* La ficha sigue al scroll mientras dura el texto. El desplazamiento
   compensa la cabecera fija. */
.hxv-editorial__lateral {
	position: sticky;
	top: 104px;
}

@media (max-width: 899px) {

	.hxv-editorial__lateral {
		position: static;
	}
}

.hxv-editorial__texto {
	padding-block: 0;
	max-width: 62ch;
}

.hxv-ficha {
	background: var(--hxv-pizarra);
	color: var(--hxv-humo);
	padding: clamp(1.5rem, 3vw, 2rem);
}

.hxv-ficha__dato--precio {
	padding-bottom: 1.25rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid color-mix(in srgb, var(--hxv-sky) 30%, transparent);
}

.hxv-ficha__etiqueta {
	display: block;
	font-family: var(--hxv-display);
	font-size: 0.85rem;
	letter-spacing: 0.2em;
	color: var(--hxv-sky);
}

.hxv-ficha__valor {
	display: block;
	font-family: var(--hxv-display);
	font-size: clamp(2.75rem, 5vw, 3.5rem);
	line-height: 1;
	letter-spacing: 0.01em;
	margin-block: 0.25rem;
}

.hxv-ficha__pie {
	display: block;
	font-size: 0.78rem;
	opacity: 0.7;
}

.hxv-ficha__lista {
	margin: 0 0 1.5rem;
}

.hxv-ficha__lista > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--hxv-humo) 14%, transparent);
}

.hxv-ficha__lista dt {
	font-family: var(--hxv-display);
	font-size: 0.9rem;
	letter-spacing: 0.14em;
	opacity: 0.75;
}

.hxv-ficha__lista dd {
	margin: 0;
	font-size: 0.92rem;
	text-align: right;
}

.hxv-ficha__acciones {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.85rem;
}

.hxv-ficha .hxv-btn {
	background: var(--hxv-sky);
	color: var(--hxv-pizarra);
	border-color: var(--hxv-sky);
	justify-content: center;
}

.hxv-ficha .hxv-btn:hover {
	background: transparent;
	color: var(--hxv-sky);
}

.hxv-ficha__enlace {
	text-align: center;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	color: var(--hxv-sky);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.hxv-ficha__enlace:hover {
	border-bottom-color: currentColor;
}

/* Dentro del bloque editorial el primer H2 no necesita filete: ya hay una
   entradilla encima marcando el arranque. */
.hxv-editorial__texto h2:first-of-type {
	margin-top: 2.5rem;
}

/* Páginas legales. Texto largo, ancho de lectura corto y tabla legible en
   móvil, que es donde se leen las políticas de cookies. */
.hxv-legal .hxv-contenido table {
	width: 100%;
	border-collapse: collapse;
	margin-block: 1.5rem;
	font-size: 0.9rem;
}

.hxv-legal .hxv-contenido th,
.hxv-legal .hxv-contenido td {
	text-align: left;
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid color-mix(in srgb, var(--hxv-pizarra) 15%, transparent);
}

.hxv-legal .hxv-contenido th {
	font-family: var(--hxv-display);
	font-weight: 400;
	letter-spacing: 0.08em;
	color: var(--hxv-ocean);
}

.hxv-lista-datos {
	list-style: none;
	margin: 1.5rem 0;
	padding: 1.25rem 1.5rem;
	background: var(--hxv-blanco);
	border-left: 3px solid var(--hxv-ocean);
}

.hxv-lista-datos li {
	padding: 0.3rem 0;
}

.hxv-legal__fecha {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid color-mix(in srgb, var(--hxv-pizarra) 15%, transparent);
	font-size: 0.85rem;
	opacity: 0.7;
}