/**
 * Vibe Starter Theme — assets/css/theme.css
 *
 * CSS base del tema. Importa las variables de theme.json via WP custom properties
 * y establece estilos base de layout, tipografía y componentes comunes.
 *
 * Arquitectura:
 *   1. Custom properties del tema (aliases de theme.json).
 *   2. Reset / base.
 *   3. Layout.
 *   4. Tipografía.
 *   5. Componentes base (header, footer, nav, skip link).
 *   6. Utilidades.
 *   7. Responsive.
 *
 * Convención: clases .site-* para elementos del tema propio.
 * Clases de bloques de WordPress: .wp-block-*.
 * Clases del studio: .vibe-*.
 */

/* -------------------------------------------------------------------------
   1. Custom properties — aliases de theme.json
   Las variables --wp--preset--color--* las genera WP automáticamente.
   Aquí creamos alias más cortos para uso en CSS del tema.
   ------------------------------------------------------------------------- */

:root {
	/* Colisión de slugs en la escala de espaciado.
	   La escala por defecto de WordPress usa los pasos 20, 30, 40… y su paso 20
	   vale 0.44rem. Nuestra escala también define un slug "20", pero de 5rem.
	   En la hoja global se emiten los dos y gana el de core, así que cualquier
	   bloque con `var:preset|spacing|20` se quedaba en 7px: le pasaba al footer
	   y a la cabecera de `templates/home.html`.
	   `spacingScale: {steps: 0}` en theme.json ya declara la intención, pero no
	   limpia el preset que core emite, de ahí que se fije aquí. Mismo patrón que
	   con los tamaños de fuente de slug numérico. */
	--wp--preset--spacing--20: 5rem;

	/* Kicker (antetítulo) — una sola medida para todas sus variantes */
	--kicker-size: 0.72rem;
	--kicker-weight: 550;
	--kicker-tracking: 0.14em;

	/* Altura del logo. El del footer se deriva del de la navbar para que sea
	   siempre mayor, pase lo que pase con el de arriba. */
	--brand-logo-h: 46px;
	--brand-logo-h-footer: calc(var(--brand-logo-h) * 1.45);

	/* Colores */
	--color-primary:      var(--wp--preset--color--primary,      #234E5C);
	--color-primary-deep: var(--wp--preset--color--primary-deep, #0F262E);
	--color-accent:       var(--wp--preset--color--accent,       #C2A56B);
	--color-bg:           var(--wp--preset--color--bg,           #FFFFFF);
	--color-bg-deep:      var(--wp--preset--color--bg-deep,      #F1F5F5);
	--color-surface:      var(--wp--preset--color--surface,      #FFFFFF);
	--color-ink:          var(--wp--preset--color--ink,          #0F2127);
	--color-ink-soft:     var(--wp--preset--color--ink-soft,     #51636A);
	--color-line:         var(--wp--preset--color--line,         #E1E8E9);

	/* Tipografía */
	--font-body:    var(--wp--preset--font-family--body,    'Inter', system-ui, sans-serif);
	--font-display: var(--wp--preset--font-family--display, 'Archivo', system-ui, sans-serif);

	/* Easings canónicos */
	--ease-out-quint:    cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-bounce-soft:  cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Duraciones canónicas */
	--duration-fast:     150ms;
	--duration-base:     250ms;
	--duration-slow:     450ms;
	--duration-extended: 750ms;

	/* Espaciado */
	--section-y:     var(--wp--custom--spacing--section-y,    clamp(3rem, 8vw, 6rem));
	--container-x:   var(--wp--custom--spacing--container-x,  clamp(1rem, 5vw, 2rem));

	/* Border radius */
	--radius-sm:   var(--wp--custom--border--radius-sm,   4px);
	--radius-md:   var(--wp--custom--border--radius-md,   8px);
	--radius-lg:   var(--wp--custom--border--radius-lg,   16px);
	--radius-full: var(--wp--custom--border--radius-full, 9999px);

	/* Transiciones */
	--transition-base: var(--wp--custom--transition--base, 200ms ease);
	--transition-slow: var(--wp--custom--transition--slow, 400ms ease);
}

/* -------------------------------------------------------------------------
   2. Reset / base
   ------------------------------------------------------------------------- */

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

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
	color: var(--color-ink);
	background-color: var(--color-bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

/* -------------------------------------------------------------------------
   3. Layout
   ------------------------------------------------------------------------- */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

.site-main {
	flex: 1;
}

/* Contenedor estándar del studio */
.vibe-container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--container-x);
}

.vibe-container--narrow {
	max-width: 760px;
}

.vibe-container--wide {
	max-width: 1440px;
}

/* -------------------------------------------------------------------------
   4. Tipografía
   ------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	color: var(--color-ink);
	line-height: 1.2;
	margin-top: 0;
}

p {
	margin-top: 0;
}

a {
	color: var(--color-primary);
	text-decoration-skip-ink: auto;
	transition: color var(--transition-base);
}

a:hover {
	color: var(--color-primary-deep);
}

a:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------------------
   5. Componentes base
   ------------------------------------------------------------------------- */

/* Skip link de accesibilidad */
.skip-link {
	position: absolute;
	top: -100%;
	left: 1rem;
	z-index: 999;
	padding: 0.5rem 1rem;
	background: var(--color-primary);
	color: #ffffff;
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 600;
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	transition: top var(--transition-base);
}

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

/* Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: var(--wp--custom--z-index--sticky, 200);
	background-color: color-mix(in srgb, var(--color-bg) 82%, transparent);
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--color-line);
}

.site-header {
	transition: padding var(--duration-base) var(--ease-out-quint),
		box-shadow var(--duration-base) var(--ease-out-quint),
		border-color var(--duration-base) var(--ease-out-quint);
}

/* Estado tras hacer scroll: condensa y refuerza la hairline */
.site-header.is-scrolled {
	padding-top: 0.55rem !important;
	padding-bottom: 0.55rem !important;
	border-bottom-color: color-mix(in srgb, var(--color-line) 60%, var(--color-primary));
	box-shadow: 0 1px 0 rgba(18, 43, 84, 0.04), 0 10px 30px -24px rgba(18, 43, 84, 0.25);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.site-header__brand {
	gap: 0.7rem;
}

.site-header__brand { min-width: 0; }
.brand-logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	flex-shrink: 0;          /* nunca se encoge */
}

.brand-logo svg,
.brand-logo img {
	height: var(--brand-logo-h);
	width: auto;
	flex-shrink: 0;          /* el flex no comprime la imagen */
	object-fit: contain;
	display: block;
}
.site-header.is-scrolled .brand-logo img { height: 40px; }

/* Wordmark de la navbar — Cinzel (romana inscripcional, self-hosted) */
@font-face {
	font-family: 'Cinzel';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/cinzel-latin-wght-normal.woff2') format('woff2');
}

.site-header__brand .wp-block-site-title,
.site-header__brand .wp-block-site-title a {
	font-family: 'Cinzel', Georgia, serif !important;
	font-weight: 600;
	font-size: 1.02rem;
	letter-spacing: 0.04em;
	line-height: 1.05;
}

.site-header__brand .wp-block-site-title a {
	color: var(--color-ink);
	text-decoration: none;
}

.site-header__actions {
	gap: clamp(1.5rem, 3vw, 2.75rem);
}

/* Navegación principal — fuente y espaciado correctos */
.site-header .wp-block-navigation {
	font-family: var(--font-body);
}

.site-header .wp-block-navigation .wp-block-navigation__container {
	gap: clamp(1.25rem, 2.2vw, 2.25rem);
	align-items: center;
}

.site-header .wp-block-navigation a,
.site-header .wp-block-navigation .wp-block-navigation-item__content {
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.005em;
	color: var(--color-ink);
	text-decoration: none;
}

.site-header .wp-block-navigation a:hover,
.site-header .wp-block-navigation .current-menu-item a {
	color: var(--color-primary);
}

/* Hero home — imagen horizontal a sangre (escena de café). Sin tinte azul:
   solo un velo neutro oscuro a la izquierda para garantizar el contraste del
   texto blanco (WCAG AA), que se disipa hacia la derecha sobre la imagen. */
.hero--home {
	position: relative;
	background-color: var(--color-primary-deep);
	/* Fallback para navegadores sin image-set() (Safari < 17). */
	background-image:
		linear-gradient(90deg, rgba(8, 12, 18, 0.80) 0%, rgba(8, 12, 18, 0.55) 38%, rgba(8, 12, 18, 0.20) 64%, rgba(8, 12, 18, 0) 100%),
		url("../img/hero-cafe-1920.jpg");
	/* AVIF con variante 2x para pantallas retina: la escena es a sangre, así
	   que a 1x se estiraba y se veía pixelada en monitores grandes. */
	background-image:
		linear-gradient(90deg, rgba(8, 12, 18, 0.80) 0%, rgba(8, 12, 18, 0.55) 38%, rgba(8, 12, 18, 0.20) 64%, rgba(8, 12, 18, 0) 100%),
		image-set(
			url("../img/hero-cafe-1920.avif") type("image/avif") 1x,
			url("../img/hero-cafe-3200.avif") type("image/avif") 2x,
			url("../img/hero-cafe-1920.jpg") type("image/jpeg") 1x
		);
	background-repeat: no-repeat;
	background-position: center, center;
	background-size: cover, cover;
	overflow: hidden;
}

.hero--home > * { position: relative; z-index: 1; }

@media (max-width: 900px) {
	/* Hero móvil a dos tiempos.
	   La foto ocupa la pantalla entera y encima va solo el titular, con un
	   degradado inferior que le da el contraste. Todo lo demás —entradilla,
	   llamadas y microcopy— baja a una barra sobre el azul sólido justo debajo,
	   que se descubre al primer scroll.
	   Se resuelve con una rejilla de dos filas: la primera mide una pantalla y
	   ahí conviven la foto (pseudoelemento) y el titular en la misma celda; el
	   resto de hijos cae por colocación automática en las filas siguientes, ya
	   fuera de la imagen. */
	.hero--home {
		background-image: none;
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: 100vh auto;
		grid-template-rows: 100svh auto;
		/* El inline del bloque reserva 8.5rem abajo; sobra tanto aire bajo la barra. */
		padding-bottom: var(--wp--preset--spacing--12) !important;
	}

	/* El padding superior del hero en portada se anula al final de la hoja:
	   ver la nota junto a `body.home .hero--home { padding-top: 8.5rem }`. */

	/* El eyebrow repite lo que ya dice el titular ("estafas cripto y fraude
	   bancario"). Fuera: sobre la foto va el texto mínimo. */
	.hero--home .hero__eyebrow { display: none; }

	.hero--home::before {
		content: "";
		grid-row: 1;
		grid-column: 1;
		display: block;
		/* A sangre: se anula el padding lateral de raíz del tema. */
		width: calc(100% + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
		margin-left: calc(-1 * var(--wp--style--root--padding-left));
		margin-right: calc(-1 * var(--wp--style--root--padding-right));
		/* El degradado carga abajo, que es donde se apoya el titular, y deja
		   limpia la franja de la protagonista. */
		background-image:
			linear-gradient(180deg, rgba(8, 12, 18, 0.42) 0%, rgba(8, 12, 18, 0.05) 26%, rgba(8, 12, 18, 0.45) 62%, rgba(8, 12, 18, 0.88) 100%),
			url("../img/hero-cafe-m-900.jpg");
		background-image:
			linear-gradient(180deg, rgba(8, 12, 18, 0.42) 0%, rgba(8, 12, 18, 0.05) 26%, rgba(8, 12, 18, 0.45) 62%, rgba(8, 12, 18, 0.88) 100%),
			image-set(
				url("../img/hero-cafe-m-900.avif") type("image/avif") 1x,
				url("../img/hero-cafe-m-1390.avif") type("image/avif") 2x,
				url("../img/hero-cafe-m-900.jpg") type("image/jpeg") 1x
			);
		background-repeat: no-repeat;
		background-position: center 28%, center 28%;
		background-size: cover, cover;
	}

	/* Único texto sobre la foto, apoyado en el borde inferior. */
	.hero--home .hero__title {
		grid-row: 1;
		grid-column: 1;
		align-self: end;
		font-size: clamp(2.1rem, 8.4vw, 2.9rem);
		max-width: 15ch;
		margin-top: 0 !important;
		margin-bottom: var(--wp--preset--spacing--10);
	}

	/* La barra: el texto remanente sobre el azul sólido de la propia sección.
	   Un filete dorado arriba la separa de la foto y la ata a la paleta. */
	.hero--home .hero__sub {
		margin-top: var(--wp--preset--spacing--10) !important;
		padding-top: var(--wp--preset--spacing--8);
		border-top: 2px solid var(--color-accent);
	}
}

/* Doble clase a propósito: `.is-style-eyebrow` se declara más abajo y con la
   misma especificidad ganaba el cascade, dejando el eyebrow gris oscuro
   sobre la foto del hero. */
.hero__eyebrow.is-style-eyebrow { margin-bottom: 0; color: #C3D2D6; }

.hero--home .hero__cta {
	margin-left: 0 !important;
	justify-content: flex-start;
}

.hero--home .hero__title {
	font-size: clamp(2.4rem, 5.2vw, 4rem);
	max-width: 16ch;
	margin-left: 0 !important;
	margin-right: auto !important;
}

.hero--home .hero__sub {
	max-width: 56ch;
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Marco de imagen (secciones) — con velo azul sutil para casar con la paleta */
.media-frame {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--color-primary-deep);
}
.media-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.92) contrast(1.02);
}
.media-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(150deg, rgba(30, 79, 158, 0.18), rgba(18, 43, 84, 0.10));
	mix-blend-mode: multiply;
	pointer-events: none;
}
.media-frame--tall { aspect-ratio: 5 / 4; }
.media-frame img { filter: saturate(0.85) contrast(1.04) brightness(0.98); }

/* Servicios: filas imagen + texto.
   - Separación real entre columnas (el blockGap no se aplicaba: 46%+54%=100%).
   - Columnas a la misma altura; la imagen cubre la suya. */
.svc-row.are-vertically-aligned-center { align-items: stretch; }
.svc-row {
	column-gap: clamp(2rem, 4vw, 3.75rem) !important;
	row-gap: 2rem;
}
.svc-row > .wp-block-column { flex-shrink: 1; min-width: 0; align-self: stretch; }
/* Columna de imagen: la imagen rellena toda la altura de la fila */
.svc-row .wp-block-column:has(.media-frame) { display: flex; }
.svc-row .media-frame {
	width: 100%;
	height: 100%;
	min-height: 340px;
	aspect-ratio: auto;
}
.svc-row .media-frame img { height: 100%; }
/* Columna de texto: centra verticalmente su contenido frente a la imagen */
.svc-row .wp-block-column:not(:has(.media-frame)) {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media (max-width: 781px) {
	.svc-row .media-frame { min-height: 240px; aspect-ratio: 3 / 2; height: auto; }
}

@media (max-width: 781px) {
	.media-frame--tall { aspect-ratio: 16 / 9; }
}

/* Trust strip bajo el hero */
.trust-strip__text {
	margin: 0;
	letter-spacing: 0.02em;
}

/* Icono de tarjeta de servicio */
.svc-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 1.25rem;
	background: var(--color-bg-deep);
	border: 1px solid var(--color-line);
}
.svc-card__icon svg { width: 30px; height: 30px; display: block; }

/* Foto de cabecera de tarjeta de servicio — a sangre (anula el padding) */
.svc-card__media {
	margin: calc(-1 * clamp(1.5rem, 3vw, 2.25rem));
	margin-bottom: clamp(1.4rem, 2.5vw, 1.9rem);
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.svc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(0.9) contrast(1.03);
	transition: transform var(--duration-slow) var(--ease-out-quint);
}
.wp-block-group.is-style-card.svc-card:hover .svc-card__media img {
	transform: scale(1.04);
}

.svc-card .wp-block-heading { margin-bottom: 0.6rem; }

/* Icono de tarjeta genérico (principios, etc.) */
.card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 1.1rem;
	background: var(--color-bg-deep);
	border: 1px solid var(--color-line);
}
.is-style-card .card-icon { background: var(--color-bg); }
.card-icon svg { width: 28px; height: 28px; }
.svc-card__text { margin-bottom: 1.25rem; }

/* Enlace de texto con flecha */
.link-arrow { margin: 0; }
.link-arrow a {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-primary);
	text-decoration: none;
}
.link-arrow a { transition: color var(--duration-base) var(--ease-out-quint), letter-spacing var(--duration-base) var(--ease-out-quint); }
.link-arrow a:hover { color: var(--color-primary-deep); letter-spacing: 0.1em; }

/* Presets de tamaño 2xl–6xl: WordPress NO genera estas clases porque el slug
   empieza por dígito (sólo emite xs–xl). Las definimos aquí con clamps fluidos
   equivalentes a theme.json para que toda la jerarquía de titulares funcione. */
.has-2xl-font-size { font-size: clamp(1.35rem, 1.22rem + 0.6vw, 1.5rem) !important; }
.has-3xl-font-size { font-size: clamp(1.55rem, 1.32rem + 1.05vw, 1.875rem) !important; }
.has-4xl-font-size { font-size: clamp(1.85rem, 1.5rem + 1.55vw, 2.25rem) !important; }
.has-5xl-font-size { font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3rem) !important; }
.has-6xl-font-size { font-size: clamp(2.5rem, 1.85rem + 2.9vw, 3.75rem) !important; }

/* Subtítulos grandes — interlineado más ceñido que el cuerpo */
.hero__sub,
.has-xl-font-size,
.page-hero p.has-xl-font-size { line-height: 1.42; }

/* Reveal-on-scroll (la clase .reveal la añade theme.js; sin JS, todo visible) */
.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity var(--duration-extended) var(--ease-out-quint),
		transform var(--duration-extended) var(--ease-out-quint);
	will-change: opacity, transform;
}
.reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Pasos del proceso — número grande, separador hairline arriba */
.step {
	border-top: 2px solid var(--color-primary);
	padding-top: 1.25rem;
}
.step__num {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 700;
	line-height: 1;
	color: color-mix(in srgb, var(--color-primary) 22%, var(--color-line));
	margin: 0 0 1rem;
}
.step .wp-block-heading { margin-bottom: 0.5rem; }

/* Hitos de trayectoria — mismo esqueleto que .step, pero el año va en dorado y
   más pequeño: "2010–2020" no cabe a 2.75rem sin partirse en móvil. */
.milestone {
	border-top: 2px solid var(--color-accent);
	padding-top: 1.25rem;
}
.milestone__year {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2.4vw, 1.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--color-primary);
	margin: 0 0 0.85rem;
	white-space: nowrap;
}
.milestone .wp-block-heading { margin-bottom: 0.5rem; }

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

/* Microcopy del hero (bajo CTAs) */
.hero--home .hero__microcopy { margin-left: 0 !important; margin-right: auto !important; }

/* Intros de sección (párrafo directo) alineados a la izquierda, no centrados por WP.
   No afecta a títulos centrados (usan text-align). */
main > section > p:not(.has-text-align-center),
.wp-block-post-content > section > p:not(.has-text-align-center) {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Trust pillars (4 columnas) */
.pillars {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem 2rem;
}
.pillars li {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding-left: 1.4rem;
	border-left: 1px solid var(--color-line);
}
.pillars li:first-child { padding-left: 0; border-left: 0; }
.pillars__k {
	position: relative;
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary);
	padding-top: 0.9rem;
}
.pillars__k::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1.4rem;
	height: 2px;
	background: var(--color-accent);
}
.pillars__v { font-size: 0.95rem; color: var(--color-ink); line-height: 1.4; }

@media (max-width: 781px) {
	.pillars li { padding-left: 0; border-left: 0; }
}

/* Tarjetas de jurisprudencia — etiqueta superior */
.juris-card__tag {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary);
	border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-line));
	padding: 0.28rem 0.55rem;
	margin: 0 0 1.5rem;
}
.juris-card .wp-block-heading { margin-bottom: 0.6rem; }

/* Señales — lista numerada en 2 columnas con hairline */
.senales {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: senal;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem 3rem;
}
.senales li {
	counter-increment: senal;
	position: relative;
	padding-top: 1.25rem;
	border-top: 1px solid var(--color-line);
}
.senales li::before {
	content: counter(senal, decimal-leading-zero);
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--color-accent);
	display: block;
	margin-bottom: 0.6rem;
}
.senales h3 {
	font-family: var(--font-display);
	font-size: 1.18rem;
	font-weight: 540;
	line-height: 1.3;
	margin: 0 0 0.5rem;
	color: var(--color-ink);
}
.senales p { margin: 0; color: var(--color-ink-soft); }

/* Banda-declaración (wp:cover con imagen + cita) */
.statement-band .wp-block-cover__image-background { filter: saturate(0.7) brightness(0.9); }
.statement-band__quote {
	font-family: var(--font-display);
	font-weight: 560;
	font-size: clamp(1.4rem, 3vw, 2.1rem);
	line-height: 1.3;
	letter-spacing: -0.01em;
	max-width: 22ch;
	margin: 0 auto;
}

/* Lista de documentación (icono + texto) */
.docs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem 3rem;
}
.docs-list li { display: flex; gap: 1rem; align-items: flex-start; }
.docs-list__ic {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg);
	border: 1px solid var(--color-line);
}
.docs-list__ic svg { width: 26px; height: 26px; }
.docs-list h3 {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 560;
	margin: 0 0 0.3rem;
	color: var(--color-ink);
}
.docs-list p { margin: 0; font-size: 0.92rem; color: var(--color-ink-soft); line-height: 1.5; }

@media (max-width: 781px) {
	.docs-list { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* FAQ — acordeón nativo (details/summary) */
.faq { border-top: 1px solid var(--color-line); }
.faq details { border-bottom: 1px solid var(--color-line); }
.faq summary {
	list-style: none;
	cursor: pointer;
	padding: 1.4rem 2.5rem 1.4rem 0;
	position: relative;
	font-family: var(--font-display);
	font-size: 1.18rem;
	font-weight: 540;
	color: var(--color-ink);
	transition: color var(--duration-base) var(--ease-out-quint);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "";
	position: absolute;
	right: 0.4rem;
	top: 50%;
	width: 11px;
	height: 11px;
	border-right: 2px solid var(--color-primary);
	border-bottom: 2px solid var(--color-primary);
	transform: translateY(-70%) rotate(45deg);
	transition: transform var(--duration-base) var(--ease-out-quint);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:hover { color: var(--color-primary); }
.faq__a { padding: 0 0 1.5rem; max-width: 64ch; }
.faq__a p { margin: 0; color: var(--color-ink-soft); }

/* Blog — rejilla de tarjetas */
.blog-grid { gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--6) !important; }
.blog-grid > li { display: flex; flex-direction: column; }
.blog-grid .wp-block-post-featured-image {
	margin: 0 0 1rem;
	overflow: hidden;
}
.blog-grid .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--duration-slow) var(--ease-out-quint);
}
.blog-grid li:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.blog-grid .post-cat { margin: 0 0 0.25rem; }
.blog-grid .post-cat a { color: var(--color-primary); text-decoration: none; }
.blog-grid .wp-block-post-title { line-height: 1.25; }
.blog-grid .wp-block-post-title a { color: var(--color-ink); text-decoration: none; }
.blog-grid .wp-block-post-title a:hover { color: var(--color-primary); }
.blog-grid .wp-block-post-excerpt { margin-top: 0.5rem; }
.blog-grid .wp-block-post-excerpt__excerpt { color: var(--color-ink-soft); }
/* La categoría usa is-style-eyebrow pero sin el guion delante en el blog */
.blog-grid .post-cat.is-style-eyebrow::before { display: none; }

/* Banda de confidencialidad — imagen azul al fondo, baja opacidad */
.band-confidential { position: relative; overflow: hidden; }
.band-confidential::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/band-confidential.jpg") center/cover no-repeat;
	opacity: 0.35;
	mix-blend-mode: luminosity;
	pointer-events: none;
}
.band-confidential > * { position: relative; z-index: 1; }
.band-confidential .is-style-eyebrow { color: #8FB0B8; }
.band-confidential .is-style-eyebrow::before { background: #8FB0B8; }

/* Banda CTA final — fondo fotográfico (monedas) fundido sobre el azul */
.section--cta { position: relative; overflow: hidden; }
.section--cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/band-coins.jpg") center/cover no-repeat;
	opacity: 0.22;
	mix-blend-mode: luminosity;
	pointer-events: none;
}
.section--cta > * { position: relative; z-index: 1; }

/* Stagger del reveal en grupos de tarjetas */
.reveal-group > .reveal:nth-child(2) { transition-delay: 90ms; }
.reveal-group > .reveal:nth-child(3) { transition-delay: 180ms; }
.reveal-group > .reveal:nth-child(4) { transition-delay: 270ms; }

@media (max-width: 781px) {
	.pillars { grid-template-columns: 1fr 1fr; }
	.senales { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 480px) {
	.pillars { grid-template-columns: 1fr; }
}

/* Alineación izquierda editorial en heroes/filas de página
   (anula el centrado margin:auto !important del layout constrained de WP) */
.page-hero > *,
.svc-row > *,
.contact-info > * {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Lista de servicios — viñeta con marca de acento */
.svc-list {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
}
.svc-list li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.6rem;
	color: var(--color-ink-soft);
}
.svc-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	background: var(--color-accent);
}

/* -------------------------------------------------------------------------
   Páginas legales (aviso legal, privacidad, cookies)
   Texto largo de lectura seguida: medida corta, jerarquía clara y tablas que
   no rompen el layout en móvil.
   ------------------------------------------------------------------------- */

.legal-page h2 {
	margin-top: var(--wp--preset--spacing--12);
	margin-bottom: var(--wp--preset--spacing--4);
}

.legal-page h3 {
	margin-top: var(--wp--preset--spacing--8);
	margin-bottom: var(--wp--preset--spacing--3);
}

.legal-page p,
.legal-page li {
	max-width: 68ch;
}

.legal-page p {
	margin-bottom: var(--wp--preset--spacing--4);
}

.legal-page li {
	margin-bottom: var(--wp--preset--spacing--2);
}

.legal-page code {
	font-size: 0.86em;
	padding: 0.1em 0.35em;
	background: var(--color-bg-deep);
	border-radius: var(--radius-sm);
	overflow-wrap: anywhere;
}

/* La tabla scrollea dentro de su propio contenedor: el <body> nunca scrollea
   en horizontal. */
.legal-page .wp-block-table {
	margin-block: var(--wp--preset--spacing--6);
	overflow-x: auto;
}

.legal-page .wp-block-table table {
	min-width: 34rem;
	border-collapse: collapse;
	font-size: 0.94rem;
}

.legal-page .wp-block-table th,
.legal-page .wp-block-table td {
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--color-line);
	text-align: left;
	vertical-align: top;
}

.legal-page .wp-block-table th {
	background: var(--color-bg-deep);
	font-family: var(--font-body);
	font-weight: 600;
}

/* Page-hero — banner uniforme con imagen de fondo (navy + overlay).
   Mismo alto, mismo overlay y misma tipografía en todas las páginas internas. */
.page-hero.wp-block-cover {
	min-height: 400px !important;   /* fijo: iguala la altura en TODAS las páginas */
	align-items: center;
	justify-content: flex-start;
	padding-top: var(--wp--preset--spacing--14);
	padding-bottom: var(--wp--preset--spacing--14);
	border: 0 !important;
}
@media (max-width: 781px) {
	.page-hero.wp-block-cover { min-height: 300px !important; }
}
.page-hero .wp-block-cover__image-background {
	filter: saturate(0.6) brightness(0.9) contrast(1.04);
}
.page-hero .wp-block-cover__inner-container { width: 100%; }
.page-hero .wp-block-cover__inner-container > * {
	margin-left: 0 !important;
	margin-right: auto !important;
}
.page-hero .is-style-eyebrow { color: #8FB0B8; }
.page-hero .is-style-eyebrow::before { background: var(--color-accent); }
.page-hero h1.wp-block-heading { color: #ffffff; }
.page-hero p:not(.is-style-eyebrow) { color: #C3D2D6 !important; }

/* Etiquetas de info de contacto */
.contact-info__label {
	font-family: var(--font-body);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-ink-soft);
	margin-bottom: 0.25rem;
}

/* ---------- Formulario (cuadrado, elegante) ---------- */
/* Formulario — panel enmarcado, cuadrado, con filete superior de acento */
.rtf-form {
	margin: 0;
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-top: 3px solid var(--color-primary);
	padding: clamp(1.5rem, 3.5vw, 2.75rem);
}
.rtf-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 1.25rem;
}
.rtf-field { margin-bottom: 1.3rem; }
.rtf-field label {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--color-ink-soft);
	margin-bottom: 0.5rem;
}
.rtf-field input,
.rtf-field select,
.rtf-field textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-ink);
	background: var(--color-bg-deep);
	border: 1px solid var(--color-line);
	border-radius: 0;
	padding: 0.85rem 1rem;
	transition: border-color var(--duration-base) var(--ease-out-quint),
		background-color var(--duration-base) var(--ease-out-quint),
		box-shadow var(--duration-base) var(--ease-out-quint);
}
.rtf-field input::placeholder,
.rtf-field textarea::placeholder { color: color-mix(in srgb, var(--color-ink-soft) 75%, transparent); }
.rtf-field select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2356678A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.5rem;
}
.rtf-field input:focus,
.rtf-field select:focus,
.rtf-field textarea:focus {
	outline: none;
	background: var(--color-surface);
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}
.rtf-field textarea { resize: vertical; min-height: 130px; }
.rtf-consent {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	font-weight: 400;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--color-ink-soft);
	margin: 0.25rem 0 1.5rem;
}
.rtf-consent input { margin-top: 0.15rem; width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--color-primary); }
.rtf-submit {
	width: 100%;
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #ffffff;
	background-image: linear-gradient(to right, var(--color-primary-deep) 50%, var(--color-primary) 50%);
	background-size: 220% 100%;
	background-position: right center;
	border: none;
	border-radius: 0;
	padding: 1.15em 2.4em;
	cursor: pointer;
	transition: background-position var(--duration-slow) var(--ease-out-quint);
}
.rtf-submit:hover { background-position: left center; }
.rtf-submit:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.rtf-note {
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--color-ink-soft);
	margin: 1rem 0 0;
}
.rtf-opt { color: var(--color-ink-soft); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* "Qué ocurre después" (columna de contacto) */
.after-form {
	margin-top: 2.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--color-line);
}
/* Variante de la página de gracias: ahí la lista es el contenido principal de
   la columna, no un apéndice del formulario, así que va sin el filete de
   separación ni el aire superior. */
.after-form--plain {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.after-form__eyebrow {
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-ink-soft);
	margin: 0 0 1.25rem;
}
.after-form__steps { list-style: none; margin: 0; padding: 0; }
.after-form__steps li { display: flex; gap: 0.9rem; margin-bottom: 1.1rem; }
.after-form__n {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-size: 0.85rem;
	font-weight: 600;
	color: #fff;
	background: var(--color-primary);
}
.after-form__steps h3,
.after-form__steps h4 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.2rem; color: var(--color-ink); }
.after-form__steps p { margin: 0; font-size: 0.85rem; color: var(--color-ink-soft); line-height: 1.45; }

/* "En qué nos apoyamos" (servicios) */
.svc-basis {
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	border-left: 2px solid var(--color-accent);
	background: var(--color-bg-deep);
}
.svc-basis strong {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 0.4rem;
}
.svc-basis span { font-size: 0.92rem; color: var(--color-ink-soft); line-height: 1.5; }

/* Micro-trust (columna de contacto) */
.micro-trust {
	list-style: none;
	margin: 2rem 0 0;
	padding: 1.5rem 0 0;
	border-top: 1px solid var(--color-line);
}
.micro-trust li {
	position: relative;
	padding-left: 1.7rem;
	margin-bottom: 0.7rem;
	font-size: 0.9rem;
	color: var(--color-ink);
}
.micro-trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--color-accent);
	border-bottom: 2px solid var(--color-accent);
	transform: rotate(-45deg);
}

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

.site-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	margin: 0;
}

.site-title a {
	color: var(--color-ink);
	text-decoration: none;
}

/* Navegación principal */
.main-navigation ul {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation a {
	display: block;
	padding: 0.5rem 0.75rem;
	color: var(--color-ink);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 500;
	border-radius: var(--radius-sm);
	transition: color var(--transition-base), background-color var(--transition-base);
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
	color: var(--color-primary);
	background-color: var(--color-bg-deep);
}

.main-navigation a:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Footer — fondo oscuro (primary-deep vía bloque) */

/* Logo del footer: mayor que el de la navbar por token derivado, así que la
   proporción se mantiene aunque se retoque el de arriba. */
.site-footer .brand-logo img,
.site-footer .brand-logo svg {
	height: var(--brand-logo-h-footer);
}

.site-footer__brand {
	display: block;
	margin-bottom: var(--wp--preset--spacing--4);
}

.site-footer__title {
	font-family: var(--font-body);
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8FB0B8;
	margin-bottom: 0.75rem;
}

.site-footer__about {
	color: #C3D2D6;
}

/* Mención colegial obligatoria (LSSI art. 10.1.f) — discreta pero legible. */
.site-footer__bar {
	color: #8FB0B8;
}

/* Reabrir las preferencias de cookies. Es un <button> (abre un diálogo, no
   navega) pero debe leerse igual que los enlaces legales de su lado. */
.site-footer__prefs {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font-family: inherit;
	font-size: 0.78rem;
	color: #ffffff;
	text-decoration: none;
	cursor: pointer;
}

.site-footer__prefs:hover {
	color: #8FB0B8;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.site-footer__prefs:focus-visible {
	outline: 2px solid #8FB0B8;
	outline-offset: 2px;
}

.site-footer a {
	color: #ffffff;
	text-decoration: none;
}

.site-footer a:hover {
	color: #8FB0B8;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.site-footer .wp-block-navigation a {
	color: #C3D2D6;
}

.site-footer .wp-block-navigation a:hover {
	color: #ffffff;
}

.site-footer__bottom {
	gap: 1rem;
}

.site-footer__copyright,
.site-footer__legal {
	color: #8295BC;
	margin: 0;
}

/* Firma del studio — texto muy discreto */
.site-footer__studio {
	color: #8295BC;
	opacity: 0.85;
	margin: 0;
}

.site-footer__studio a {
	color: #C3D2D6;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* -------------------------------------------------------------------------
   5.b Primitives — botones, card, eyebrow
   ------------------------------------------------------------------------- */

/* Botones — cuadrados (radius 0), mayúsculas, tracking amplio, hover de
   fondo deslizante (relleno por gradient-position, sin span). Elegancia editorial. */
.wp-block-button__link {
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 1.05em 2.4em;
	border-radius: 0;
	border: none;
	background-repeat: no-repeat;
	background-size: 220% 100%;
	background-position: right center;
	transition:
		background-position var(--duration-slow) var(--ease-out-quint),
		color var(--duration-base) var(--ease-out-quint),
		box-shadow var(--duration-base) var(--ease-out-quint);
}

.wp-block-button__link:hover {
	background-position: left center;
}

/* Primario (relleno azul → azul profundo al hover) sobre fondo claro */
.wp-block-button:not(.is-style-ghost):not(.is-style-accent):not(.is-style-on-dark) .wp-block-button__link {
	color: #ffffff;
	background-image: linear-gradient(to right, var(--color-primary-deep) 50%, var(--color-primary) 50%);
}

/* Acento (azul vivo) — para destacar sobre fondo oscuro (hero/CTA) */
.wp-block-button.is-style-accent .wp-block-button__link {
	color: var(--color-primary-deep);
	background-image: linear-gradient(to right, #ffffff 50%, var(--color-accent) 50%);
}
.wp-block-button.is-style-accent .wp-block-button__link:hover {
	color: var(--color-primary-deep);
}

/* Ghost (contorno) sobre fondo claro */
.wp-block-button.is-style-ghost .wp-block-button__link {
	color: var(--color-primary);
	box-shadow: inset 0 0 0 1px var(--color-primary);
	background-image: linear-gradient(to right, var(--color-primary) 50%, transparent 50%);
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	color: #ffffff;
}

/* On-dark (contorno blanco) — secciones oscuras */
.wp-block-button.is-style-on-dark .wp-block-button__link {
	color: #ffffff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
	background-image: linear-gradient(to right, #ffffff 50%, transparent 50%);
}
.wp-block-button.is-style-on-dark .wp-block-button__link:hover {
	color: var(--color-primary-deep);
}

.wp-block-button__link:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

/* Botones en móvil (≤600px) — bloque apilado a ancho completo.
   Al ancho intrínseco los pares se rompían de línea con medidas distintas
   (228px y 177px en el hero) y dejaban el borde derecho dentado, que es lo que
   hacía que el conjunto se viera descuidado. Apilados y a ancho completo forman
   un bloque con un solo eje, y la jerarquía la sigue marcando el estilo —relleno
   dorado el principal, contorno el secundario—, no el tamaño.
   Por encima de 600px caben en línea sin romperse, así que ahí no se toca. */
@media (max-width: 600px) {
	.wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
		/* El layout de WordPress le pone `margin-right: auto` al grupo; ese
		   margen automático absorbe el espacio sobrante y deja el contenedor
		   ajustado al contenido, así que los botones no llegaban al borde. */
		width: 100%;
		margin-inline: 0;
	}

	.wp-block-buttons .wp-block-button { width: 100%; }

	.wp-block-buttons .wp-block-button__link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		/* 52px de alto: por encima del mínimo de 44px de la WCAG 2.2, que en un
		   botón de conversión se queda justo para el pulgar. */
		min-height: 52px;
		padding-inline: 1.25em;
		text-align: center;
		/* El tracking de 0.14em cuelga tras la última letra y descentra el texto
		   ópticamente; se compensa con una sangría del mismo valor. */
		text-indent: 0.14em;
	}
}

/* Card (core/group is-style-card) — sharp, hairline fino, editorial */
.wp-block-group.is-style-card {
	background-color: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: 0;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	transition:
		border-color var(--duration-base) var(--ease-out-quint),
		box-shadow var(--duration-slow) var(--ease-out-quint),
		transform var(--duration-slow) var(--ease-out-quint);
}

.wp-block-group.is-style-card:hover {
	border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-line));
	box-shadow:
		0 2px 6px -3px rgba(18, 43, 84, 0.08),
		0 12px 28px -16px rgba(18, 43, 84, 0.12),
		0 28px 60px -40px rgba(18, 43, 84, 0.16);
	transform: translateY(-2px);
}

/* Eyebrow — etiqueta sobre títulos */
.eyebrow,
.is-style-eyebrow {
	font-family: var(--font-body);
	font-size: var(--kicker-size);
	font-weight: var(--kicker-weight);
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: var(--color-ink-soft);
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}

/* Todos los kickers a la misma medida.
   Además del eyebrow de las secciones había otras tres familias que hacen el
   mismo papel de antetítulo y salían a tamaños distintos: los títulos de
   columna del footer y las etiquetas de contacto a 14px, y la categoría de las
   tarjetas del blog a 12px, frente a los 11.52px del eyebrow. La causa es que
   esos bloques llevan clase `has-sm-font-size` / `has-xs-font-size`, y en este
   tema las clases de tamaño de WordPress se declaran con `!important` (ver el
   arreglo de los slugs numéricos), así que ganaban al `font-size` de su propia
   regla —el footer, por ejemplo, pedía 0.78rem y renderizaba 14px—.
   De ahí el `!important` aquí: es la única forma de recuperar el control. */
.is-style-eyebrow,
.site-footer__title,
.contact-info__label,
.pillars__k {
	font-family: var(--font-body);
	font-size: var(--kicker-size) !important;
	font-weight: var(--kicker-weight);
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
}
/* Guion de acento antes del eyebrow (reserva el azul vivo para un detalle) */
.eyebrow::before,
.is-style-eyebrow::before {
	content: "";
	width: 1.4rem;
	height: 2px;
	background: var(--color-accent);
	flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   6. Utilidades
   ------------------------------------------------------------------------- */

/* Visually hidden — para screen readers */
.vibe-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* -------------------------------------------------------------------------
   7. Responsive
   ------------------------------------------------------------------------- */

/* Colapsar la navegación a hamburguesa hasta ~860px (tablet incluido):
   evita el menú en 2 líneas y el CTA partido del rango 600–860. */
@media (max-width: 860px) {
	.site-header .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
	.site-header .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
	/* El CTA del header cede sitio al menú; el CTA del hero queda justo debajo. */
	.site-header .site-header__actions .site-header__cta { display: none; }
}

@media (max-width: 600px) {

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* -------------------------------------------------------------------------
   Home — navbar transparente sobre el hero (overlay)
   El header se superpone al hero (no empuja layout). Texto/logo claros sobre
   la imagen; al hacer scroll (.is-scrolled) revierte a la cabecera sólida.
   Scopeado a body.home: el resto de páginas mantienen la cabecera estándar.
   ------------------------------------------------------------------------- */
body.home .site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom-color: transparent;
}

/* Velo superior sutil: asegura contraste del logo/nav claros sobre el hero */
body.home .site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(12, 28, 56, 0.45) 0%, rgba(12, 28, 56, 0.12) 60%, rgba(12, 28, 56, 0) 100%);
	pointer-events: none;
	transition: opacity var(--duration-base) var(--ease-out-quint);
}

/* Textos claros mientras el header está sobre el hero */
body.home .site-header:not(.is-scrolled) .wp-block-site-title,
body.home .site-header:not(.is-scrolled) .wp-block-site-title a,
body.home .site-header:not(.is-scrolled) .wp-block-navigation a,
body.home .site-header:not(.is-scrolled) .wp-block-navigation .wp-block-navigation-item__content {
	color: #fff !important;
}

body.home .site-header:not(.is-scrolled) .wp-block-navigation a:hover,
body.home .site-header:not(.is-scrolled) .wp-block-navigation .current-menu-item a {
	color: var(--color-gold, #C9A24B) !important;
}

/* CTA del header: contorno claro sobre el hero.
   background-image:none limpia el gradiente del botón base (si no, el fondo
   oscuro tapa el texto al hacer hover). */
body.home .site-header:not(.is-scrolled) .site-header__cta .wp-block-button__link {
	background-color: transparent;
	background-image: none !important;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.55);
}
body.home .site-header:not(.is-scrolled) .site-header__cta .wp-block-button__link:hover {
	background-color: #fff;
	color: var(--color-primary-deep);
	border-color: #fff;
}

/* CTA del navbar (cabecera sólida): en hover se ILUMINA a dorado en vez de
   ir a casi-negro. Reposo teal; texto oscuro legible sobre el dorado.
   No afecta al estado sobre el hero del home (regla de arriba, más específica). */
body:not(.home) .site-header__cta .wp-block-button__link,
body.home .site-header.is-scrolled .site-header__cta .wp-block-button__link {
	background-image: linear-gradient(to right, var(--color-accent) 50%, var(--color-primary) 50%) !important;
}
body:not(.home) .site-header__cta .wp-block-button__link:hover,
body.home .site-header.is-scrolled .site-header__cta .wp-block-button__link:hover {
	color: var(--color-primary-deep) !important;
}

/* Hamburguesa (responsive) clara sobre el hero */
body.home .site-header:not(.is-scrolled) .wp-block-navigation__responsive-container-open {
	color: #fff;
}

/* Estado tras scroll: cabecera sólida (vuelve al estilo estándar) */
body.home .site-header.is-scrolled {
	background-color: color-mix(in srgb, var(--color-bg) 92%, transparent);
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
}
body.home .site-header.is-scrolled::before {
	opacity: 0;
}

/* El header fijo sale del flujo: el margen superior de <main> quedaría como
   franja blanca sobre el hero. Lo anulamos para que el hero llegue al tope. */
body.home .wp-site-blocks > main {
	margin-top: 0 !important;
}

/* El hero arranca en el tope: deja aire bajo la navbar fija */
body.home .hero--home {
	padding-top: 8.5rem !important;
}

/* En móvil no se reserva ese aire: el hero empieza por la banda de foto, que
   sube hasta el borde con el header flotando encima (su velo degradado ya
   garantiza el contraste del logo). Recuperar esos 8.5rem es lo que mete la
   llamada a la acción dentro del primer pantallazo.
   Va aquí, y no en el bloque móvil del hero de más arriba, porque comparte
   especificidad con la regla anterior y gana la última declarada. */
@media (max-width: 900px) {
	body.home .hero--home {
		padding-top: 0 !important;
	}
}

/* -------------------------------------------------------------------------
   prefers-reduced-motion
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* =========================================================================
   Densidad visual — plan dirección de arte (alternancia + iconos + acabados)
   ========================================================================= */

/* Padding real del page-hero (el preset 14 no existe en theme.json) */
.page-hero.wp-block-cover {
	padding-top: var(--wp--preset--spacing--12);
	padding-bottom: var(--wp--preset--spacing--12);
}

/* Sección tintada: el svc-basis invierte a blanco para no fundirse */
.section--tint .svc-basis { background: var(--color-surface); }

/* svc-list — viñeta cuadrada → chevron outline de acento */
.svc-list li { padding-left: 1.75rem; }
.svc-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 1.05rem;
	height: 1.05rem;
	background: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E6BD6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* contact-info — icono outline junto a cada etiqueta */
.contact-info__label--email,
.contact-info__label--address,
.contact-info__label--coverage {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}
.contact-info__label--email::before,
.contact-info__label--address::before,
.contact-info__label--coverage::before {
	content: "";
	width: 1.05rem;
	height: 1.05rem;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.contact-info__label--email::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E4F9E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1'/%3E%3Cpolyline points='3 7 12 13 21 7'/%3E%3C/svg%3E");
}
.contact-info__label--address::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E4F9E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E");
}
.contact-info__label--coverage::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E4F9E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.6 2.6 2.6 15.4 0 18M12 3c-2.6 2.6-2.6 15.4 0 18'/%3E%3C/svg%3E");
}

/* ---------- Entradas de blog: lectura editorial, texto mayor y aireado ---------- */
.single-article__title.wp-block-post-title {
	font-size: clamp(2rem, 1.45rem + 2.6vw, 3rem);
	line-height: 1.12;
	letter-spacing: -0.022em;
	margin-bottom: 0.5rem;
}
.article-body {
	font-size: 1.18rem;
	line-height: 1.8;
	color: var(--color-ink);
}
.article-body p { margin: 0 0 1.55em; }
.article-body > *:first-child { margin-top: 0; }
.article-body h2,
.article-body h3 {
	color: var(--color-primary-deep);
	letter-spacing: -0.015em;
}
.article-body h2 {
	font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2rem);
	line-height: 1.22;
	margin: 2.6rem 0 0.9rem;
}
.article-body h3 {
	font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.55rem);
	line-height: 1.3;
	margin: 2.1rem 0 0.7rem;
}
.article-body ul,
.article-body ol { margin: 0 0 1.55em; padding-left: 1.4em; }
.article-body li { margin-bottom: 0.55em; line-height: 1.7; }
.article-body li::marker { color: var(--color-accent); }
.article-body strong { color: var(--color-ink); font-weight: 650; }
.article-body a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--color-primary-deep); }
.article-body blockquote {
	margin: 2.2rem 0;
	padding: 0.4rem 0 0.4rem 1.6rem;
	border-left: 3px solid var(--color-accent);
	font-size: 1.3rem;
	line-height: 1.55;
	color: var(--color-primary-deep);
}
.article-body blockquote p { margin-bottom: 0.5em; }
.article-body .post-disclaimer {
	margin-top: 2.5rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--color-line);
	font-size: 0.92rem;
	line-height: 1.6;
}

/* ---------- Meta de la entrada (autor · fecha · categoría) ---------- */
.single-article .post-meta {
	gap: 0.85rem !important;
	align-items: center;
	margin: 0.9rem 0 0;
	font-size: 0.85rem;
	color: var(--color-ink-soft);
}
.single-article .post-meta .wp-block-post-date,
.single-article .post-meta .wp-block-post-author { color: var(--color-ink-soft); }
.single-article .post-meta .wp-block-post-terms a {
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.72rem;
	color: var(--color-primary);
	text-decoration: none;
}
.single-article .post-meta .wp-block-separator {
	width: 4px;
	height: 4px;
	border: 0;
	margin: 0;
	border-radius: 50%;
	background: var(--color-line) !important;
	opacity: 1;
}

/* ---------- Navegación entre entradas (Anterior / Siguiente) ---------- */
.post-nav {
	gap: 1rem;
	margin-top: var(--wp--preset--spacing--12);
	padding-top: var(--wp--preset--spacing--10);
	border-top: 1px solid var(--color-line);
	align-items: stretch;
}
.post-nav .wp-block-post-navigation-link {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	border: 1px solid var(--color-line);
	padding: 1.1rem 1.35rem;
	transition: border-color var(--duration-base) var(--ease-out-quint),
		background-color var(--duration-base) var(--ease-out-quint);
}
.post-nav .wp-block-post-navigation-link:empty { display: none; }
.post-nav .wp-block-post-navigation-link:hover { border-color: var(--color-primary); background: var(--color-bg-deep); }
.post-nav .post-navigation-link-next { text-align: right; align-items: flex-end; }
.post-nav .wp-block-post-navigation-link::before {
	display: block;
	font-family: var(--font-body);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-ink-soft);
	margin-bottom: 0.55rem;
}
.post-nav .post-navigation-link-previous::before { content: "← Anterior"; }
.post-nav .post-navigation-link-next::before { content: "Siguiente →"; }
.post-nav .wp-block-post-navigation-link a {
	display: block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--color-ink);
	text-decoration: none;
	transition: color var(--duration-base) var(--ease-out-quint);
}
.post-nav .wp-block-post-navigation-link:hover a { color: var(--color-primary); }
.post-nav__back { margin-top: 2rem; }
.post-nav__back a {
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary);
	text-decoration: none;
}
.post-nav__back a:hover { color: var(--color-primary-deep); }
@media (max-width: 600px) {
	.post-nav { flex-direction: column; }
	.post-nav .post-navigation-link-next { text-align: left; justify-content: flex-start; }
	.post-nav .post-navigation-link-next::before { content: "Siguiente →"; }
}