/*
Theme Name: Rescate Ancestral
Theme URI: https://rescateancestral.cl
Author: CORDENOR
Author URI: https://cordenor.cl
Description: Tema personalizado para la plataforma digital del Proyecto Rescate Ancestral - Patrimonio Turístico Indígena de la Región de Tarapacá.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rescate-ancestral
Tags: one-column, two-columns, right-sidebar, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-width-template, translation-ready

Esto es un tema base. Los estilos principales se cargan vía hojas de estilo separadas.
*/

/* ==========================================================================
   CSS Custom Properties — Design System Rescate Ancestral
   ========================================================================== */

:root {
	/* Marca — Rescate Ancestral (logo oficial) */
	--color-logo-azul: #0172C2;
	--color-logo-azul-deep: #015A9E;
	--color-logo-arena: #CD9967;
	--color-logo-bruno: #482007;

	/* Colores Primarios */
	--color-terracota: #B5543F;
	--color-arena: #F5EDE3;
	--color-obsidiana: #1E1E1E;

	/* Colores Secundarios */
	--color-cielo: #2B4C7E;
	--color-pampa: #C9A84C;
	--color-piedra: #6B6B6B;

	/* Colores Funcionales */
	--color-exito: #2D7D46;
	--color-alerta: #C0392B;

	/* Neutros */
	--color-blanco: #FFFFFF;
	--color-gris-100: #F7F5F2;
	--color-gris-200: #E5E0DA;
	--color-gris-400: #9E9A94;
	--color-gris-600: #5C5852;
	--color-acento-suave: #F6E5DA;

	/* Header */
	--header-bg: var(--color-obsidiana-calido);

	/* Paleta "Tierra Viva" (Fase 1) */
	--color-terracota-deep: #8C3A2A;
	--color-arena-deep: #E8DCC8;
	--color-salar: #FBF7F0;
	--color-obsidiana-calido: #171310;
	--color-texto: #2A241F;
	--color-texto-suave: #6E6359;

	/* Tokens de rol (Fase 1 — superficies y tintas) */
	--surface-hueso: #FAF6F0;
	--surface-arena: #F5EDE3;
	--surface-pergamino: #EEE3D4;
	--tinta: #2A241F;
	--tinta-suave: #6E6359;

	/* Superficie — tarjetas del archive de Actores: "registro patrimonial" en
	   pergamino (material de la paleta, --color-arena-deep). Al ser un neutro
	   cálido luminoso se separa claramente del fondo terracota (#B5543F) sin
	   imitar la tarjeta blanca de Experiencias. Tintas: obsidiana cálido
	   (nombre), terracota-deep (meta/CTA) y tinta (extracto), todas AA. */
	--bg-pergamino: var(--color-arena-deep);

	/* Marco editorial: filete visible de los paneles claros de la Home */
	--panel-filete: 1.5px solid rgba(23, 19, 16, 0.26);

	/* Gradientes de marca */
	--gradient-noche: linear-gradient(135deg, var(--color-terracota) 0%, var(--color-obsidiana-calido) 100%);

	/* Tipografía */
	--font-heading: 'Playfair Display', Georgia, serif;
	--font-body: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Liberation Mono', monospace;

	/* Escala tipográfica */
	--fs-display: clamp(2.5rem, 8vw, 5rem);
	--fs-h2: clamp(1.75rem, 4vw, 2.5rem);
	--fs-lead: clamp(1.125rem, 2.6vw, 1.5rem);

	/* Espaciado (base 4px) */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;
	--space-2xl: 48px;
	--space-3xl: 64px;
	--space-4xl: 96px;

	/* Bordes */
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-xl: 12px;
	--radius-2xl: 24px;
	--radius-pill: 9999px;

	/* Sombras */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);
	--shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
	--shadow-panel: 0 1px 2px rgba(20, 16, 10, 0.16), 0 4px 12px rgba(20, 16, 10, 0.14), 0 20px 50px rgba(20, 16, 10, 0.24);

	/* Transiciones */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
	--transition-slow: 400ms ease;
	--transition-smooth: 300ms cubic-bezier(0.22, 1, 0.36, 1);

	/* Movimiento (sistema global) */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--duration-entrance: 550ms;
	--reveal-distance: 12px;

	/* Layout */
	--content-width: 1200px;
	--header-height: 72px;
	/* Altura de la barra de búsqueda (baseline; navigation.js la recalcula al abrir) */
	--search-bar-height: 100px;
}

/* ==========================================================================
   Reset y Base
   ========================================================================== */

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

html {
	font-size: 16px;
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-height);
	-webkit-text-size-adjust: 100%;
}

#ra-comments {
	scroll-margin-top: var(--header-height);
}

body {
	font-family: var(--font-body);
	font-weight: 400;
	line-height: 1.6;
	color: var(--color-obsidiana);
	background-color: var(--color-arena);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Accesibilidad — Skip Link
   ========================================================================== */

.skip-link {
	position: absolute;
	top: -100%;
	left: var(--space-md);
	z-index: 10000;
	padding: var(--space-sm) var(--space-md);
	background-color: var(--color-terracota);
	color: var(--color-blanco);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	transition: top var(--transition-fast);
}

.skip-link:focus {
	top: 0;
	outline: 2px solid var(--color-salar);
	outline-offset: 2px;
}

/* ==========================================================================
   Tipografía
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.15;
	color: var(--color-obsidiana);
}

h1 {
	font-size: clamp(2rem, 5vw, 3rem);
}

h2 {
	font-size: clamp(1.625rem, 4vw, 2.25rem);
}

h3 {
	font-size: clamp(1.375rem, 3vw, 1.75rem);
}

h4 {
	font-size: clamp(1.125rem, 2.5vw, 1.375rem);
}

p {
	margin-bottom: var(--space-md);
}

a {
	color: var(--color-cielo);
	text-decoration: none;
	transition: color var(--transition-fast);
}

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

/* Foco visible — Accesibilidad */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--color-cielo);
	outline-offset: 2px;
}

/* ==========================================================================
   Layout
   ========================================================================== */

/* Contenedor general */
.container {
	width: 100%;
	max-width: var(--content-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-md);
	padding-right: var(--space-md);
}

@media (min-width: 768px) {
	.container {
		padding-left: var(--space-xl);
		padding-right: var(--space-xl);
	}
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: var(--header-bg);
	border-bottom: 1px solid transparent;
	color: var(--color-salar);
	height: var(--header-height);
	display: flex;
	align-items: center;
	transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth), color var(--transition-smooth), transform var(--transition-smooth);
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Logo: isotipo + nombre del sitio en un único enlace al Home */
.site-branding {
	display: flex;
	align-items: center;
	min-width: 0;
}

.site-branding a {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: var(--color-salar);
}

.site-branding img {
	max-height: 48px;
	width: auto;
}

.site-branding__link {
	gap: 10px;
	min-width: 0;
}

.site-branding__mark {
	width: auto;
	height: 36px;
	flex-shrink: 0;
}

.site-branding__name {
	min-width: 0;
}

/* Pantallas muy estrechas: el nombre se ajusta ligeramente, sin ocultarse. */
@media (max-width: 360px) {
	.site-branding__name {
		font-size: 0.875rem;
	}
}

@media (min-width: 768px) {
	.site-branding__mark {
		height: 44px;
	}
}

/* Navegación Principal */
.main-navigation {
	display: none;
}

.main-navigation .menu {
	display: flex;
	list-style: none;
	gap: var(--space-lg);
}

.main-navigation .menu a {
	display: block;
	padding: var(--space-sm) 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-salar);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.main-navigation .menu a:hover,
.main-navigation .menu a[aria-current="page"] {
	color: var(--color-logo-arena);
	border-bottom-color: var(--color-logo-arena);
}

/* Submenu toggle button (disclosure trigger) */
.menu-item-has-children {
	position: relative;
}

.ra-submenu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: var(--space-sm) 0;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-salar);
	background: none;
	border: none;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.ra-submenu-toggle:hover {
	color: var(--color-logo-arena);
	border-bottom-color: var(--color-logo-arena);
}

.ra-submenu-toggle:focus-visible {
	outline: 2px solid var(--color-salar);
	outline-offset: 2px;
}

.ra-submenu-toggle__chevron {
	flex-shrink: 0;
	transition: transform var(--transition-fast);
}

.menu-item-has-children.is-open .ra-submenu-toggle__chevron {
	transform: rotate(180deg);
}

/* Submenu — desktop dropdown */
.menu-item-has-children .sub-menu {
	display: none;
	position: absolute;
	top: calc(100% + var(--space-sm));
	left: 0;
	min-width: 200px;
	background-color: var(--header-bg);
	border: 1px solid rgba(251, 247, 240, 0.14);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	padding: var(--space-xs) 0;
	z-index: 1001;
	list-style: none;
}

.menu-item-has-children.is-open .sub-menu {
	display: block;
}

.menu-item-has-children .sub-menu a {
	display: block;
	padding: var(--space-sm) var(--space-lg);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-salar);
	text-decoration: none;
	border-bottom: none;
	white-space: nowrap;
	transition: background-color var(--transition-fast);
}

.menu-item-has-children .sub-menu a:hover {
	background-color: rgba(251, 247, 240, 0.10);
}

.menu-item-has-children .sub-menu a:focus-visible {
	outline: 2px solid var(--color-salar);
	outline-offset: -2px;
}

/* Header Actions (idioma + búsqueda) */
.header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

/* Selector de idioma */
.language-selector {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.language-selector a {
	padding: var(--space-xs) var(--space-sm);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--color-gris-100);
	text-decoration: none;
	border-radius: var(--radius-sm);
	border-bottom: 2px solid transparent;
	transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.language-selector a:hover {
	color: var(--color-logo-arena);
	border-bottom-color: var(--color-logo-arena);
}

.language-selector a.active {
	color: var(--color-blanco);
	background-color: rgba(251, 247, 240, 0.18);
}

/* ==========================================================================
   Header — Login link (no autenticado)
   ========================================================================== */

.ra-header-auth__login {
	display: inline-flex;
	align-items: center;
	padding: var(--space-sm) var(--space-md);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-salar);
	text-decoration: none;
	border-radius: var(--radius-sm);
	border-bottom: 2px solid transparent;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.ra-header-auth__login:hover {
	color: var(--color-logo-arena);
	border-bottom-color: var(--color-logo-arena);
}

.ra-header-auth__login:focus-visible {
	outline: 2px solid var(--color-salar);
	outline-offset: 2px;
}

/* ==========================================================================
   Header — User Dropdown (autenticado)
   ========================================================================== */

.ra-user-dropdown {
	position: relative;
	display: flex;
	align-items: center;
}

.ra-user-dropdown__trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: var(--space-sm) var(--space-md);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-salar);
	background: none;
	border: none;
	cursor: pointer;
	border-radius: var(--radius-sm);
	transition: color var(--transition-fast), background-color var(--transition-fast);
}

.ra-user-dropdown__trigger:hover {
	color: var(--color-blanco);
	background-color: rgba(251, 247, 240, 0.10);
}

.ra-user-dropdown__trigger:focus-visible {
	outline: 2px solid var(--color-salar);
	outline-offset: 2px;
}

.ra-user-dropdown__name {
	max-width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ra-user-dropdown__chevron {
	flex-shrink: 0;
	transition: transform var(--transition-fast);
}

.ra-user-dropdown.is-open .ra-user-dropdown__chevron {
	transform: rotate(180deg);
}

.ra-user-dropdown__menu {
	display: none;
	position: absolute;
	top: calc(100% + var(--space-sm));
	right: 0;
	min-width: 180px;
	background-color: var(--color-obsidiana-calido);
	border: 1px solid rgba(251, 247, 240, 0.14);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	padding: var(--space-xs) 0;
	z-index: 1001;
}

.ra-user-dropdown.is-open .ra-user-dropdown__menu {
	display: block;
}

.ra-user-dropdown__item {
	display: block;
	padding: var(--space-sm) var(--space-lg);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-salar);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--transition-fast);
}

.ra-user-dropdown__item:hover {
	background-color: rgba(251, 247, 240, 0.10);
	color: var(--color-logo-arena);
}

.ra-user-dropdown__item:focus-visible {
	outline: 2px solid var(--color-salar);
	outline-offset: -2px;
}

/* Botón hamburguesa (mobile) */
.menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.menu-toggle .hamburger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 24px;
	height: 24px;
}

.menu-toggle .hamburger span {
	display: block;
	width: 100%;
	height: 2px;
	background-color: var(--color-salar);
	border-radius: 2px;
	transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Menú móvil abierto */
.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Overlay del menú móvil */
.mobile-menu-overlay {
	display: none;
	position: fixed;
	top: var(--header-height);
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--header-bg);
	z-index: 999;
	padding: var(--space-2xl) var(--space-lg);
	opacity: 0;
	transition: opacity var(--transition-base);
}

.mobile-menu-overlay.is-open {
	display: flex;
	flex-direction: column;
	opacity: 1;
	overflow-y: auto;
}

.mobile-menu-overlay .mobile-menu-close {
	align-self: flex-end;
	background: none;
	border: none;
	color: var(--color-blanco);
	font-size: 1.5rem;
	cursor: pointer;
	padding: var(--space-sm);
}

.mobile-menu-overlay .mobile-nav {
	list-style: none;
	margin-top: var(--space-xl);
}

.mobile-menu-overlay .mobile-nav a {
	display: block;
	padding: var(--space-md) 0;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--color-blanco);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	transition: color var(--transition-fast);
}

.mobile-menu-overlay .mobile-nav a:hover {
	color: var(--color-logo-arena);
}

/* Submenu toggle — mobile */
.mobile-menu-overlay .ra-submenu-toggle {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-md) 0;
	font-family: var(--font-body);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--color-blanco);
	background: none;
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	cursor: pointer;
	text-align: left;
	transition: color var(--transition-fast);
}

.mobile-menu-overlay .ra-submenu-toggle:hover {
	color: var(--color-logo-arena);
}

.mobile-menu-overlay .ra-submenu-toggle:focus-visible {
	outline: 2px solid var(--color-salar);
	outline-offset: 2px;
}

.mobile-menu-overlay .ra-submenu-toggle__chevron {
	flex-shrink: 0;
	transition: transform var(--transition-fast);
}

.mobile-menu-overlay .menu-item-has-children.is-open .ra-submenu-toggle__chevron {
	transform: rotate(180deg);
}

/* Submenu — mobile inline */
.mobile-menu-overlay .sub-menu {
	display: none;
	padding-left: var(--space-lg);
	list-style: none;
}

.mobile-menu-overlay .menu-item-has-children.is-open .sub-menu {
	display: block;
}

.mobile-menu-overlay .sub-menu a {
	display: block;
	padding: var(--space-sm) 0;
	font-size: 1.125rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	border-bottom: none;
	transition: color var(--transition-fast);
}

.mobile-menu-overlay .sub-menu a:hover {
	color: var(--color-logo-arena);
}

.mobile-menu-overlay .mobile-language {
	margin-top: var(--space-2xl);
	display: flex;
	gap: var(--space-md);
}

.mobile-menu-overlay .mobile-language a {
	padding: var(--space-sm) var(--space-md);
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--color-gris-400);
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-pill);
	transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.mobile-menu-overlay .mobile-language a.active {
	color: var(--color-logo-bruno);
	border-color: var(--color-logo-arena);
	background-color: var(--color-logo-arena);
}

/* ==========================================================================
   Menú móvil — Autenticación
   ========================================================================== */

.mobile-auth {
	margin-top: var(--space-xl);
	padding-top: var(--space-xl);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-auth__name {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--color-salar);
	margin-bottom: var(--space-md);
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mobile-auth__link {
	display: block;
	padding: var(--space-md) 0;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--color-blanco);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	transition: color var(--transition-fast);
}

.mobile-auth__link:hover {
	color: var(--color-logo-arena);
}

.mobile-auth__link:focus-visible {
	outline: 2px solid var(--color-salar);
	outline-offset: 2px;
}

/* Ocultar auth desktop en móvil */
@media (max-width: 1023px) {
	.ra-header-auth__login,
	.ra-user-dropdown {
		display: none;
	}
}

/* ==========================================================================
   Header — Botón de búsqueda
   ========================================================================== */

.search-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	color: var(--color-salar);
	transition: color var(--transition-fast);
}

.search-toggle:hover {
	color: var(--color-logo-arena);
}

/* Foco visible dentro del header y del menú móvil (plano bruno) */
.site-header :focus-visible,
.mobile-menu-overlay :focus-visible {
	outline-color: var(--color-salar);
}

@media (min-width: 1024px) {
	.main-navigation {
		display: flex;
	}

	.menu-toggle {
		display: none;
	}
}

/* ==========================================================================
   Barra de búsqueda global
   ========================================================================== */

.ra-search-bar {
	display: none;
	position: fixed;
	top: var(--header-height);
	left: 0;
	right: 0;
	background-color: var(--surface-pergamino);
	border-bottom: var(--panel-filete);
	z-index: 998;
	padding: var(--space-lg) 0;
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity var(--transition-base), transform var(--transition-base);
}

.ra-search-bar.is-search-open {
	display: block;
	opacity: 1;
	transform: translateY(0);
}

.ra-search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	max-width: 640px;
	margin: 0 auto;
}

.ra-search-form__type-select {
	padding: var(--space-sm) var(--space-lg);
	min-height: 40px;
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-logo-azul-deep);
	background-color: transparent;
	border: 1px solid rgba(1, 90, 158, 0.45);
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23015A9E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-sm) center;
	padding-right: calc(var(--space-lg) + 18px);
}

.ra-search-form__type-select:hover {
	background-color: rgba(1, 114, 194, 0.1);
	border-color: var(--color-logo-azul);
}

.ra-search-form__type-select:focus {
	outline: none;
	border-color: var(--color-logo-azul);
}

.ra-search-form__type-select:focus-visible {
	outline: 2px solid var(--color-logo-azul);
	outline-offset: 2px;
}

.ra-search-form__input {
	flex: 1;
	padding: var(--space-sm) var(--space-md);
	font-size: 1rem;
	font-family: var(--font-body);
	color: var(--color-texto);
	background-color: var(--surface-hueso);
	border: 1px solid rgba(23, 19, 16, 0.5);
	border-radius: var(--radius-pill);
	transition: border-color var(--transition-fast);
}

.ra-search-form__input:hover {
	border-color: rgba(23, 19, 16, 0.6);
}

.ra-search-form__input:focus {
	outline: none;
	border-color: var(--color-logo-azul);
}

.ra-search-form__input:focus-visible {
	outline: 2px solid var(--color-logo-azul);
	outline-offset: 2px;
}

.ra-search-form__input::placeholder {
	color: var(--color-texto-suave);
}

.ra-search-form__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	background-color: var(--color-logo-azul-deep);
	color: var(--color-blanco);
	border: none;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.ra-search-form__btn:hover {
	background-color: var(--color-logo-azul);
}

.ra-search-form__btn:focus-visible {
	outline: 2px solid var(--color-logo-azul);
	outline-offset: 2px;
}

@media (max-width: 640px) {
	.ra-search-form__filters {
		flex-basis: 100%;
		gap: var(--space-xs);
	}
	.ra-search-form__territory-filter {
		flex: 1 1 auto;
		min-width: 0;
	}
	.ra-search-form__type-select {
		flex: 1 1 auto;
		min-width: 0;
	}
}

.ra-search-form__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.ra-search-form__territory-filter {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	align-self: flex-start;
	min-width: 0;
	opacity: 1;
	transform: translateY(0);
	transition:
		grid-template-columns var(--transition-base),
		grid-template-rows var(--transition-base),
		margin var(--transition-base),
		opacity var(--transition-fast),
		transform var(--transition-fast);
}

.ra-search-form__territory-filter-inner {
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	visibility: visible;
	transition: visibility var(--transition-base);
}

.ra-search-form__territory-filter.is-hidden {
	grid-template-columns: 0fr;
	grid-template-rows: 0fr;
	margin: 0 calc( var(--space-sm) / -2 );
	opacity: 0;
	transform: translateY( calc( var(--space-sm) / -2 ) );
}

.ra-search-form__territory-filter.is-hidden .ra-search-form__territory-filter-inner {
	visibility: hidden;
}

/* ==========================================================================
   Search Results — Header
   ========================================================================== */

.ra-search-header {
	margin-bottom: var(--space-2xl);
}

.ra-search-header__title {
	font-size: 1.75rem;
	color: var(--color-obsidiana);
	margin-bottom: var(--space-xs);
}

.ra-search-header__term {
	color: var(--color-terracota);
}

.ra-search-header__type {
	color: var(--color-logo-azul-deep);
}

.ra-search-header__count {
	font-size: 0.9375rem;
	color: var(--color-texto-suave);
}

/* Search Results — Filtros activos */

.ra-search-filters {
	margin-bottom: var(--space-2xl);
}

.ra-search-filters__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ra-search-filters__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	white-space: nowrap;
	min-height: 44px;
	padding: var(--space-sm) var(--space-md);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-logo-azul-deep);
	background-color: rgba(1, 90, 158, 0.08);
	border: 1px solid rgba(1, 90, 158, 0.45);
	border-radius: var(--radius-pill);
	text-decoration: none;
	transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.ra-search-filters__chip:hover,
.ra-search-filters__chip:focus-visible {
	color: var(--color-logo-azul-deep);
	background-color: rgba(1, 114, 194, 0.1);
	border-color: var(--color-logo-azul);
}

.ra-search-filters__clear-all {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: var(--space-sm) var(--space-md);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-logo-azul-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--transition-fast);
}

.ra-search-filters__clear-all:hover,
.ra-search-filters__clear-all:focus-visible {
	color: var(--color-logo-azul);
}

.ra-search-filters :focus-visible {
	outline-color: var(--color-logo-azul);
}

/* Search Results — Grid (reutiliza patrón de archivos).
   Alineación por defecto (stretch): todas las cards de una fila comparten
   el alto de la fila más alta. El estirado no produce superficie muerta
   porque la variante de búsqueda (abajo) convierte cada card en columna
   flex, hace crecer el cuerpo y ancla el CTA al pie. En móvil (1 columna)
   cada fila tiene una sola card, por lo que las alturas son naturales. */
.ra-search-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

@media (min-width: 768px) {
	.ra-search-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ra-search-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* En búsqueda la tarjeta base de actor ocupa la celda de la grilla;
   la base max-width: 300px de .actor-card queda fuera de contexto. */
.ra-search-grid .actor-card {
	max-width: none;
}

/* Variante visual de búsqueda — sistema compartido entre los CPTs que
   conviven en resultados (experiencia, relato, actor, recurso; receta por
   si algún día entra en el card_map de search.php).

   Normaliza la composición sin tocar los componentes globales en Home,
   archives o singles:
   - article en columna flex para que el enlace llene la celda estirada;
   - enlace con flex: 1 para ocupar todo el alto del article;
   - cuerpo con flex: 1 para absorber el espacio vertical sobrante;
   - CTA con margin-top: auto para anclarlo al pie de la card y cuadrar el
     baselito entre cards de distinto CPT;
   - imágenes normalizadas a 16 / 9 en TODAS las cards. Los wrappers ya son
     position: relative; width: 100%; overflow: hidden y sus imágenes ya
     usan width/height: 100% y object-fit: cover en las cinco variantes:
     solo difiere la proporción (1/1 en actor, 4/3 en receta, 16/9 resto);
   - recurso base (sin wrapper .recurso-card__body): sus contenidos son
     hijos directos del enlace; se le da el ritmo vertical de los demás
     cuerpos (padding lateral space-lg y separaciones space-sm). */
.ra-search-grid .exp-card,
.ra-search-grid .actor-card,
.ra-search-grid .relato-card,
.ra-search-grid .recurso-card,
.ra-search-grid .receta-card {
	display: flex;
	flex-direction: column;
}

.ra-search-grid .exp-card__link,
.ra-search-grid .actor-card__link,
.ra-search-grid .relato-card__link,
.ra-search-grid .recurso-card__link,
.ra-search-grid .receta-card__link {
	flex: 1;
}

.ra-search-grid .exp-card__body,
.ra-search-grid .actor-card__body,
.ra-search-grid .relato-card__body,
.ra-search-grid .receta-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.ra-search-grid .exp-card__image-wrapper,
.ra-search-grid .actor-card__image-wrapper,
.ra-search-grid .relato-card__image-wrapper,
.ra-search-grid .recurso-card__image-wrapper,
.ra-search-grid .receta-card__image-wrapper {
	aspect-ratio: 16 / 9;
}

.ra-search-grid .exp-card__cta,
.ra-search-grid .actor-card__cta,
.ra-search-grid .relato-card__cta,
.ra-search-grid .recurso-card__cta,
.ra-search-grid .receta-card__cta {
	margin-top: auto;
}

.ra-search-grid .recurso-card__title {
	margin: var(--space-lg) var(--space-lg) 0;
}

.ra-search-grid .recurso-card__excerpt,
.ra-search-grid .recurso-card__source {
	margin: var(--space-sm) var(--space-lg) 0;
}

.ra-search-grid .recurso-card__cta {
	margin-top: auto;
	margin-right: var(--space-lg);
	margin-bottom: var(--space-lg);
	margin-left: var(--space-lg);
	padding-top: var(--space-sm);
}

/* Hover/focus de la variante de búsqueda — los textos interactivos que en
   Home/archives pasan a terracota pasan a azul SOLO dentro de resultados.
   Se reutiliza --color-logo-azul-deep, el mismo azul que el proyecto ya usa
   para el hover de título/CTA de .receta-card (bloque de receta). Contrasta
   AA sobre la superficie blanca de las cards. Estado normal intacto. */
.ra-search-grid .exp-card__link:hover .exp-card__title,
.ra-search-grid .actor-card__link:hover .actor-card__title,
.ra-search-grid .relato-card__link:hover .relato-card__title,
.ra-search-grid .recurso-card__link:hover .recurso-card__title,
.ra-search-grid .receta-card__link:hover .receta-card__title,
.ra-search-grid .exp-card__link:hover .exp-card__cta,
.ra-search-grid .actor-card__link:hover .actor-card__cta,
.ra-search-grid .relato-card__link:hover .relato-card__cta,
.ra-search-grid .recurso-card__link:hover .recurso-card__cta,
.ra-search-grid .receta-card__link:hover .receta-card__cta {
	color: var(--color-logo-azul-deep);
}

/* Search Results — Estado vacío */

.ra-search-empty {
	text-align: center;
	padding: var(--space-3xl) 0;
}

.ra-search-empty p {
	font-size: 1.125rem;
	color: var(--color-texto-suave);
	margin-bottom: var(--space-xl);
}

.ra-search-empty .ra-search-form {
	max-width: 480px;
}

.ra-search-empty__actions {
	display: flex;
	justify-content: center;
	gap: var(--space-md);
	margin-top: var(--space-xl);
}

/* Search Results — Plano azul (continuidad cromática con Home, Archives y
   Singles). Todo scoped a body.search para afectar solo esta página; las
   cards conservan su superficie clara (--color-blanco).

   Tintas AA sobre #0172C2: salar #FBF7F0 4.57:1 ✓ y blanco #FFFFFF 4.88:1 ✓;
   los colores arena/bruno/terracota quedan reservados a superficies claras. */
body.search .site-main {
	background-color: var(--color-logo-azul);
}

body.search .ra-search-header__title,
body.search .ra-search-header__count,
body.search .ra-search-empty p {
	color: var(--color-salar);
}

body.search .ra-search-header__term,
body.search .ra-search-header__type,
body.search .ra-search-filters__chip,
body.search .ra-search-filters__clear-all {
	color: var(--color-blanco);
}

body.search .ra-search-filters__chip {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.4);
}

body.search .ra-search-filters__chip:hover,
body.search .ra-search-filters__chip:focus-visible {
	color: var(--color-obsidiana);
	background-color: var(--color-salar);
	border-color: var(--color-salar);
}

body.search .ra-search-filters__clear-all:hover,
body.search .ra-search-filters__clear-all:focus-visible {
	color: var(--color-salar);
}

body.search .ra-search-filters :focus-visible {
	outline-color: var(--color-salar);
}

/* Botón secundario del estado vacío sobre azul (variante salar,
   mismo patrón que los archivos de CPT). */
body.search .ra-search-empty .btn-secondary {
	color: var(--color-salar);
	border-color: var(--color-salar);
}

body.search .ra-search-empty .btn-secondary:hover,
body.search .ra-search-empty .btn-secondary:focus-visible {
	background-color: var(--color-salar);
	border-color: var(--color-salar);
	color: var(--color-obsidiana);
}

/* ==========================================================================
   Section Hero
   ========================================================================== */

.section-hero {
	position: relative;
	display: flex;
	justify-content: center;
	color: var(--color-blanco);
	overflow: hidden;
}

.section-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.section-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.section-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.section-hero__content {
	position: relative;
	z-index: 2;
}

.section-hero__title {
	font-family: var(--font-heading);
	font-weight: 700;
}

.section-hero__subtitle {
	font-family: var(--font-body);
}

.section-hero__description {
	font-size: clamp(0.9375rem, 2vw, 1.125rem);
	font-weight: 300;
	line-height: 1.5;
}

.section-hero__actions {
	display: flex;
	gap: var(--space-md);
}

.section-hero__scroll-indicator {
	position: absolute;
	bottom: var(--space-lg);
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	color: var(--color-blanco);
	opacity: 0.7;
}

@media (min-width: 768px) {
	.section-hero__actions {
		justify-content: center;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	background-color: var(--color-obsidiana);
	color: var(--color-gris-200);
	padding-top: var(--space-3xl);
	padding-bottom: var(--space-xl);
}

.footer-main {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2xl);
}

@media (min-width: 768px) {
	.footer-main {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.footer-main {
		grid-template-columns: 2fr 1fr 1fr;
		gap: var(--space-3xl);
	}
}

.footer-section h3 {
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-blanco);
	margin-bottom: var(--space-md);
}

.footer-section ul {
	list-style: none;
}

.footer-section ul li {
	margin-bottom: var(--space-sm);
}

.footer-section ul a {
	color: var(--color-gris-400);
	text-decoration: none;
	font-size: 0.9375rem;
	transition: color var(--transition-fast);
}

.footer-section ul a:hover {
	color: var(--color-pampa);
}

.footer-bottom {
	margin-top: var(--space-2xl);
	padding-top: var(--space-lg);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	text-align: center;
}

.footer-bottom p {
	font-size: 0.8125rem;
	color: var(--color-gris-400);
	margin: 0;
}

/* ==========================================================================
   Botones
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-lg);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--radius-md);
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), text-decoration var(--transition-fast);
	line-height: 1.4;
}

.btn-primary {
	background-color: var(--color-terracota);
	color: var(--color-blanco);
	border-color: var(--color-terracota);
}

.btn-primary:hover {
	background-color: #9C4835;
	border-color: #9C4835;
	color: var(--color-blanco);
}

.btn-secondary {
	background-color: transparent;
	color: var(--color-terracota);
	border-color: var(--color-terracota);
}

.btn-secondary:hover {
	background-color: var(--color-terracota);
	color: var(--color-blanco);
}


/* ==========================================================================
   Utilidades
   ========================================================================== */

.sr-only,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.section-padding {
	padding-top: var(--space-3xl);
	padding-bottom: var(--space-3xl);
}

/* Línea divisoria editorial entre las secciones azules de la Home:
   todas menos .section-sobre (primera tras el Hero) llevan un hilo sutil
   superior para separarse de la sección precedente. */
.section-experiencias,
.section-actores,
.section-mapa,
.section-relatos,
.section-recursos,
.section-contacto {
	border-top: 1px solid rgba(251, 247, 240, 0.40);
}

/* ==========================================================================
   Sección — Sobre el Proyecto
   ========================================================================== */

.section-sobre {
	background: var(--color-logo-azul);
	padding-top: var(--space-3xl);
	padding-bottom: var(--space-3xl);
}

@media (min-width: 1024px) {
	.section-sobre,
	.section-experiencias,
	.section-mapa,
	.section-actores,
	.section-relatos,
	.section-recursos,
	.section-contacto {
		padding-top: calc(var(--space-3xl) + var(--space-md));
		padding-bottom: calc(var(--space-3xl) + var(--space-md));
	}
}

.section-sobre__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	align-items: flex-start;
}

.section-sobre__figure {
	margin: 0;
	flex: 0 0 100%;
	border-radius: var(--radius-md);
	box-shadow: 0 10px 30px rgba(20, 16, 10, 0.18);
	overflow: hidden;
}

.section-sobre__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Móvil (<768px): la imagen se muestra completa a su proporción natural,
   sin recorte. La figura ocupa el ancho disponible y su altura fluye
   con la altura real de la imagen. La sección usa una fuente cuadrada fija
   sin srcset (ver sobre.php), por lo que el box sigue la proporción 1:1.
   Desktop (≥768px) intacto. */
@media (max-width: 767px) {
	.section-sobre__figure {
		flex: 0 0 auto;
		width: 100%;
	}

	.section-sobre__image {
		aspect-ratio: auto;
		height: auto;
		object-fit: contain;
	}

	.section-sobre__inner {
		gap: var(--space-lg);
	}
}

.section-sobre__content {
	flex: 1 1 100%;
}

.section-sobre__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	line-height: 1.15;
	text-wrap: balance;
	color: var(--color-obsidiana);
	margin-bottom: var(--space-md);
}

@media (min-width: 768px) {
	.section-sobre__inner {
		flex-direction: row;
		align-items: center;
		gap: var(--space-2xl);
	}

	.section-sobre__figure {
		flex: 0 0 50%;
	}

	.section-sobre__image {
		aspect-ratio: 4 / 3;
	}

	.section-sobre__content {
		flex: 1 1 50%;
	}

	.section-sobre__title {
		font-size: 2.5rem;
	}
}

@media (min-width: 1024px) {
	.section-sobre__inner {
		gap: var(--space-3xl);
	}

	.section-sobre__figure {
		flex: 0 0 55%;
	}

	.section-sobre__content {
		flex: 1 1 45%;
	}
}

.section-sobre__eyebrow {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-obsidiana);
	margin-bottom: var(--space-sm);
}

.section-sobre__description {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	line-height: 1.7;
	color: var(--color-obsidiana);
	max-width: 65ch;
}

.section-sobre__description > *:first-child {
	margin-top: 0;
}

.section-sobre__description > *:last-child {
	margin-bottom: 0;
}

/* Sin imagen: texto a ancho completo. */
.section-sobre:not(.section-sobre--has-image) .section-sobre__content {
	flex: 1 1 100%;
}

/* ==========================================================================
   Sección — Experiencias Destacadas
   ========================================================================== */

.section-experiencias {
	background: var(--color-logo-azul);
}

.section-experiencias__header {
	text-align: center;
	margin-bottom: var(--space-2xl);
}

.section-experiencias__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

@media (min-width: 768px) {
	.section-experiencias__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.section-experiencias__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Tarjeta de Experiencia */
.exp-card {
	background-color: var(--color-blanco);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.exp-card:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-2px);
}

.exp-card__link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.exp-card__link:focus-visible {
	outline: 2px solid var(--color-cielo);
	outline-offset: 2px;
	border-radius: var(--radius-lg);
}

.exp-card__image-wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--color-gris-200);
}

.exp-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.exp-card:hover .exp-card__image {
	transform: scale(1.03);
}

.exp-card__image--placeholder {
	background-color: var(--color-gris-200);
	background-image: linear-gradient(135deg, var(--color-gris-200) 0%, var(--color-gris-100) 100%);
}

.exp-card__body {
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.exp-card__type {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-terracota);
}

.exp-card__title {
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 3vw, 1.5rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-obsidiana);
	margin: 0;
}

.exp-card__link:hover .exp-card__title {
	color: var(--color-terracota);
}

.exp-card__excerpt {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--color-gris-600);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 0;
}

.exp-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin-top: var(--space-xs);
}

.exp-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-size: 0.8125rem;
	color: var(--color-piedra);
}

.exp-card__meta-label {
	display: inline-flex;
	color: var(--color-gris-400);
	flex-shrink: 0;
}

.exp-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-terracota);
	margin-top: var(--space-sm);
	transition: gap var(--transition-fast);
}

.exp-card__link:hover .exp-card__cta {
	gap: var(--space-sm);
}

/* Variante archivo (/experiencias/) — sello sobre la imagen y meta en mono */
.exp-card--archive {
	background-color: var(--surface-pergamino);
}

.exp-card--archive .exp-card__link {
	position: relative;
}

.exp-card--archive .exp-card__type {
	position: absolute;
	top: var(--space-md);
	left: var(--space-md);
	z-index: 2;
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-sm);
	background-color: rgba(23, 19, 16, 0.78);
	color: var(--color-salar);
}

.exp-card--archive .exp-card__meta-item {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--color-gris-600);
}

.exp-card--archive .exp-card__image-wrapper::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(1, 114, 194, 0) 55%, rgba(1, 90, 158, 0.3) 100%);
	opacity: 0;
	transition: opacity var(--transition-base);
	pointer-events: none;
}

.exp-card--archive:hover .exp-card__image-wrapper::after {
	opacity: 1;
}

/* Hover de la variante archivo: mismo patrón azul de la Home.
   El título y el CTA pasan a azul-deep y el velo de la imagen usa
   el azul del logo (sustituye los acentos terracota del hover). */
.exp-card--archive .exp-card__link:hover .exp-card__title,
.exp-card--archive .exp-card__cta {
	color: var(--color-logo-azul-deep);
}

.exp-card--archive .exp-card__link:focus-visible {
	outline-color: var(--color-logo-azul-deep);
}

.section-experiencias__empty,
.section-actores__empty {
	text-align: center;
	padding: var(--space-3xl) var(--space-md);
}

.section-experiencias__empty p,
.section-actores__empty p {
	font-family: var(--font-body);
	font-size: clamp(0.9375rem, 2vw, 1.125rem);
	color: var(--color-gris-600);
	margin-bottom: 0;
}

/* ==========================================================================
   Archive — Experiencias
   ========================================================================== */

/* Cabecera de archivo — compartida por todos los CPT */
.exp-archive-header,
.actor-archive-header,
.relato-archive-header,
.recurso-archive-header {
	background-color: var(--color-logo-azul);
	color: var(--color-salar);
	padding-top: var(--space-xl);
	padding-bottom: var(--space-xl);
}

.exp-archive-header__eyebrow,
.actor-archive-header__eyebrow,
.relato-archive-header__eyebrow,
.recurso-archive-header__eyebrow {
	color: var(--color-salar);
	margin-bottom: var(--space-md);
}

.exp-archive-header__eyebrow::before,
.actor-archive-header__eyebrow::before,
.relato-archive-header__eyebrow::before,
.recurso-archive-header__eyebrow::before {
	background-color: var(--color-salar);
	opacity: 1;
}

.exp-archive-header__title,
.actor-archive-header__title,
.relato-archive-header__title,
.recurso-archive-header__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: clamp(1.6rem, 3vw, 2rem);
	line-height: 1.15;
	color: var(--color-salar);
	margin-bottom: var(--space-xs);
}

.exp-archive-header__description,
.actor-archive-header__description {
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.6;
	color: var(--color-salar);
	margin-bottom: 0;
	max-width: 560px;
}

.relato-archive-header__description,
.recurso-archive-header__description {
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.6;
	color: var(--color-salar);
	margin-bottom: 0;
	max-width: 640px;
}

.exp-archive-header :focus-visible,
.actor-archive-header :focus-visible,
.relato-archive-header :focus-visible,
.recurso-archive-header :focus-visible {
	outline-color: var(--color-salar);
}

/* Filtros de territorio — sticky solo en escritorio (>=1024px);
   en móvil quedan en flujo normal sobre la grilla y no persiguen el scroll.
   Excepción: mientras la búsqueda está abierta (body.ra-search-open) quedan
   anclados justo debajo de la barra de búsqueda para no quedar ocultos tras ella.
   Tratamiento base: fondo arena + costuras editoriales oscuras (top/bottom).
   Experiencias, Actores, Relatos y Recursos se retiñen a panel claro con
   filete más abajo.
   Compartida por Experiencias (.exp-archive-filter), Actores (.actor-archive-filter)
   y Relatos (.relato-archive-filter). */
.exp-archive-filter,
.actor-archive-filter,
.relato-archive-filter,
.recurso-archive-filter {
	padding: var(--space-md) 0;
	background-color: var(--surface-arena);
	border-top: 1px solid rgba(23, 19, 16, 0.15);
	border-bottom: 1px solid rgba(23, 19, 16, 0.15);
}

/* Filtro Experiencias: fondo azul continuo con header y grid. */
.exp-archive-filter {
	background-color: var(--color-logo-azul);
	padding-top: var(--space-sm);
	padding-bottom: var(--space-sm);
}

/* Separador sutil entre grupos de filtros. */
.exp-archive-filter__group + .exp-archive-filter__group {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: var(--space-sm);
}

/* Filtros de Actores, Relatos y Recursos: fondo azul continuo
   con identidad cromática uniforme en todos los archives. */
.actor-archive-filter,
.relato-archive-filter,
.recurso-archive-filter {
	background-color: var(--color-logo-azul);
}

/* Búsqueda abierta en móvil: la barra de filtros se ancla bajo el buscador
   (fixed, top: header-height) sumando su altura real; al cerrar, vuelve
   inmediatamente a su flujo normal. */
@media (max-width: 1023px) {
	body.ra-search-open .exp-archive-filter,
	body.ra-search-open .actor-archive-filter,
	body.ra-search-open .relato-archive-filter,
	body.ra-search-open .recurso-archive-filter {
		position: sticky;
		top: calc(var(--header-height) + var(--search-bar-height));
		z-index: 50;
	}
}

.exp-archive-filter__inner,
.actor-archive-filter__inner,
.relato-archive-filter__inner,
.recurso-archive-filter__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

@media (min-width: 1024px) {
	.exp-archive-filter__inner,
	.actor-archive-filter__inner,
	.relato-archive-filter__inner,
	.recurso-archive-filter__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-xl);
	}

	.exp-archive-filter__inner {
		flex-direction: column;
	}
}

/* Grupos de filtros de Actores y Experiencias: dos filas etiquetadas
   que se acomodan en columna en móvil y en paralelo en desktop. */
.actor-archive-filter__groups,
.exp-archive-filter__groups {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	min-width: 0;
}

@media (min-width: 1024px) {
	.actor-archive-filter__groups,
	.exp-archive-filter__groups {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--space-2xl);
	}

	.exp-archive-filter__groups {
		flex-direction: column;
	}
}

.actor-archive-filter__group,
.exp-archive-filter__group,
.relato-archive-filter__group,
.recurso-archive-filter__group {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	min-width: 0;
}

.actor-archive-filter__group-label,
.exp-archive-filter__group-label,
.relato-archive-filter__group-label,
.recurso-archive-filter__group-label {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.85);
}

.exp-archive-filter__summary,
.actor-archive-filter__summary,
.relato-archive-filter__summary,
.recurso-archive-filter__summary {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	flex-shrink: 0;
}

.exp-archive-filter__count,
.actor-archive-filter__count,
.relato-archive-filter__count,
.recurso-archive-filter__count {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-blanco);
}

.exp-archive-filter__current,
.actor-archive-filter__current,
.relato-archive-filter__current,
.recurso-archive-filter__current {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	margin: 0;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.8);
}

.exp-archive-filter__current strong,
.actor-archive-filter__current strong,
.relato-archive-filter__current strong,
.recurso-archive-filter__current strong {
	font-weight: 600;
	color: var(--color-blanco);
}

.exp-archive-filter__clear,
.actor-archive-filter__clear,
.relato-archive-filter__clear,
.recurso-archive-filter__clear {
	font-size: 0.8125rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.8);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.exp-archive-filter__clear:hover,
.exp-archive-filter__clear:focus-visible,
.actor-archive-filter__clear:hover,
.actor-archive-filter__clear:focus-visible,
.relato-archive-filter__clear:hover,
.relato-archive-filter__clear:focus-visible,
.recurso-archive-filter__clear:hover,
.recurso-archive-filter__clear:focus-visible {
	color: var(--color-blanco);
}

.exp-archive-filter__list,
.actor-archive-filter__list,
.relato-archive-filter__list,
.recurso-archive-filter__list {
	display: flex;
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}

@media (min-width: 1024px) {
	.exp-archive-filter__list,
	.actor-archive-filter__list,
	.relato-archive-filter__list,
	.recurso-archive-filter__list {
		flex-wrap: wrap;
		overflow: visible;
	}
}

.exp-archive-filter__chip,
.actor-archive-filter__chip,
.relato-archive-filter__chip,
.recurso-archive-filter__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	min-height: 40px;
	padding: var(--space-sm) var(--space-lg);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-blanco);
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--radius-pill);
	text-decoration: none;
	scroll-snap-align: start;
	transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.exp-archive-filter__chip:hover,
.actor-archive-filter__chip:hover,
.relato-archive-filter__chip:hover,
.recurso-archive-filter__chip:hover {
	color: var(--color-obsidiana);
	background-color: var(--color-salar);
	border-color: var(--color-salar);
}

.exp-archive-filter__chip.is-active,
.actor-archive-filter__chip.is-active,
.relato-archive-filter__chip.is-active,
.recurso-archive-filter__chip.is-active {
	color: var(--color-blanco);
	background-color: var(--color-logo-azul-deep);
	border-color: var(--color-logo-azul-deep);
}

.exp-archive-filter__chip.is-active:hover,
.actor-archive-filter__chip.is-active:hover,
.relato-archive-filter__chip.is-active:hover,
.recurso-archive-filter__chip.is-active:hover {
	background-color: var(--color-logo-azul);
	border-color: var(--color-logo-azul);
}

.exp-archive-filter :focus-visible,
.actor-archive-filter :focus-visible,
.relato-archive-filter :focus-visible,
.recurso-archive-filter :focus-visible {
	outline-color: var(--color-logo-azul);
}

/* Grilla de archivos — fondo azul para continuar la identidad cromática de la Home */
.exp-archive-grid {
	background-color: var(--color-logo-azul);
	padding-top: var(--space-xl);
	padding-bottom: var(--space-3xl);
}

.exp-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

@media (min-width: 768px) {
	.exp-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.exp-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.actor-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

@media (min-width: 768px) {
	.actor-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.actor-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Estado sin resultados — compartido por todos los archivos CPT */
.exp-grid__empty,
.actor-grid__empty,
.relato-grid__empty,
.recurso-grid__empty {
	text-align: center;
	padding: var(--space-3xl) var(--space-md);
}

.exp-grid__empty p,
.actor-grid__empty p,
.relato-grid__empty p,
.recurso-grid__empty p {
	font-family: var(--font-body);
	font-size: 1.125rem;
	color: var(--color-salar);
	margin-bottom: var(--space-xl);
}

.exp-grid__empty-actions,
.actor-grid__empty-actions,
.relato-grid__empty-actions,
.recurso-grid__empty-actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-md);
}

/* Botones del estado vacío sobre azul (variante salar) */
.exp-archive-grid .btn-secondary,
.actor-archive-grid .btn-secondary,
.relato-archive-grid .btn-secondary,
.recurso-archive-grid .btn-secondary {
	color: var(--color-salar);
	border-color: var(--color-salar);
}

.exp-archive-grid .btn-secondary:hover,
.exp-archive-grid .btn-secondary:focus-visible,
.actor-archive-grid .btn-secondary:hover,
.actor-archive-grid .btn-secondary:focus-visible,
.relato-archive-grid .btn-secondary:hover,
.relato-archive-grid .btn-secondary:focus-visible,
.recurso-archive-grid .btn-secondary:hover,
.recurso-archive-grid .btn-secondary:focus-visible {
	background-color: var(--color-salar);
	border-color: var(--color-salar);
	color: var(--color-obsidiana);
}

/* Paginación compartida (template-parts/common/pagination.php).
   the_posts_pagination() genera nav.navigation.pagination > .nav-links.
   Aplica a los archivos de los 4 CPT y a la búsqueda. */
.navigation.pagination {
	display: flex;
	justify-content: center;
	margin-top: var(--space-2xl);
}

.navigation.pagination .nav-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
}

.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 var(--space-sm);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-obsidiana);
	text-decoration: none;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-gris-200);
	background-color: var(--color-blanco);
	transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.navigation.pagination .page-numbers:hover {
	color: var(--color-terracota);
	border-color: var(--color-terracota);
}

.navigation.pagination .page-numbers.current {
	color: var(--color-blanco);
	background-color: var(--color-terracota);
	border-color: var(--color-terracota);
}

.navigation.pagination .prev,
.navigation.pagination .next {
	font-weight: 600;
}

/* Paginación sobre fondo azul (archivos de CPT) */
.exp-archive-grid .navigation.pagination .page-numbers,
.actor-archive-grid .navigation.pagination .page-numbers,
.relato-archive-grid .navigation.pagination .page-numbers,
.recurso-archive-grid .navigation.pagination .page-numbers {
	color: var(--color-salar);
	background-color: transparent;
	border-color: rgba(251, 247, 240, 0.35);
}

.exp-archive-grid .navigation.pagination .page-numbers:hover,
.exp-archive-grid .navigation.pagination .page-numbers:focus-visible,
.actor-archive-grid .navigation.pagination .page-numbers:hover,
.actor-archive-grid .navigation.pagination .page-numbers:focus-visible,
.relato-archive-grid .navigation.pagination .page-numbers:hover,
.relato-archive-grid .navigation.pagination .page-numbers:focus-visible,
.recurso-archive-grid .navigation.pagination .page-numbers:hover,
.recurso-archive-grid .navigation.pagination .page-numbers:focus-visible {
	color: var(--color-obsidiana);
	background-color: var(--color-salar);
	border-color: var(--color-salar);
}

.exp-archive-grid .navigation.pagination .page-numbers.current,
.actor-archive-grid .navigation.pagination .page-numbers.current,
.relato-archive-grid .navigation.pagination .page-numbers.current,
.recurso-archive-grid .navigation.pagination .page-numbers.current {
	color: var(--color-obsidiana);
	background-color: var(--color-salar);
	border-color: var(--color-salar);
}

/* Foco salar sobre la paginación y los estados vacíos de los archivos
   (fondo azul). */
.exp-archive-grid .navigation.pagination :focus-visible,
.actor-archive-grid .navigation.pagination :focus-visible,
.relato-archive-grid .navigation.pagination :focus-visible,
.recurso-archive-grid .navigation.pagination :focus-visible,
.exp-grid__empty :focus-visible,
.actor-grid__empty :focus-visible,
.relato-grid__empty :focus-visible,
.recurso-grid__empty :focus-visible {
	outline-color: var(--color-salar);
}

/* ==========================================================================
   Single — Experiencia (Ficha individual)
   ========================================================================== */

/* Plano del single — fondo azul del logo (continuidad con Home y Archives).
   Alcance: únicamente la ficha de Experiencia. */
.single-experiencia .site-main {
	background: var(--color-logo-azul);
}

/* Foco visible sobre los planos azules del single de experiencia */
body.single-experiencia .ra-breadcrumbs :focus-visible,
body.single-experiencia .exp-single-hero :focus-visible,
body.single-experiencia .exp-single-map .ra-single-map__link:focus-visible,
body.single-experiencia .ra-comments :focus-visible {
	outline-color: var(--color-salar);
}

/* Foco visible sobre los paneles claros del single de experiencia */
.single-experiencia .exp-single-main__body :focus-visible,
.single-experiencia .exp-single-sidebar :focus-visible {
	outline-color: var(--color-logo-azul-deep);
}

/* Breadcrumbs */
.ra-breadcrumbs {
	padding: var(--space-md) 0;
	font-family: var(--font-body);
	font-size: 0.875rem;
	color: var(--color-gris-600);
}

.ra-breadcrumbs a {
	color: var(--color-logo-azul-deep);
	text-decoration: none;
}

.ra-breadcrumbs a:hover {
	color: var(--color-logo-azul);
}

.ra-breadcrumbs__sep {
	margin: 0 var(--space-sm);
	color: var(--color-gris-400);
}

.ra-breadcrumbs__current {
	color: var(--color-logo-azul-deep);
}

/* Cabecera — Hero editorial de la ficha */
.exp-single-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 62vh;
	overflow: hidden;
	background-color: var(--color-obsidiana-calido);
}

.exp-single-hero__media {
	position: absolute;
	inset: 0;
	margin: 0;
}

.exp-single-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.exp-single-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(23, 19, 16, 0.32) 0%,
		rgba(23, 19, 16, 0.5) 48%,
		rgba(23, 19, 16, 0.92) 100%
	);
}

.exp-single-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-top: var(--space-3xl);
	padding-bottom: var(--space-3xl);
}

.exp-single-hero__main {
	display: flex;
	flex-direction: column;
}

/* Grid de 2 columnas — contenido izquierdo + aside derecho */
@media (min-width: 1024px) {
	.exp-single-hero {
		min-height: calc(100dvh - var(--header-height));
		align-items: stretch;
	}

	.exp-single-hero__content {
		display: grid;
		grid-template-columns: 1fr 320px;
		grid-template-rows: 1fr;
		column-gap: var(--space-xl);
		padding-top: 0;
	}
}

/* Variante sin imagen: panel editorial oscuro */
.exp-single-hero--no-image {
	align-items: flex-start;
	min-height: 0;
	background: linear-gradient(160deg, var(--color-obsidiana-calido) 0%, var(--color-logo-azul-deep) 92%);
}

.exp-single-hero--no-image .exp-single-hero__content {
	padding-bottom: var(--space-3xl);
}

.exp-single-hero__panel {
	position: absolute;
	inset: 0;
	opacity: 0.07;
	pointer-events: none;
	background-image: repeating-linear-gradient(-45deg, var(--color-salar) 0 2px, transparent 2px 22px);
}

.exp-single-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-md);
	color: var(--color-logo-arena);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
	margin-bottom: var(--space-lg);
}

.exp-single-hero__eyebrow::before {
	content: "";
	width: 36px;
	height: 2px;
	background-color: var(--color-logo-arena);
	flex-shrink: 0;
	opacity: 0.85;
}

/* Breadcrumbs sobre la imagen — integrados en la composición del hero */
.exp-single-hero__breadcrumbs {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	padding: 0;
	margin-bottom: var(--space-lg);
}

.exp-single-hero__breadcrumbs a {
	color: var(--color-logo-arena);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.exp-single-hero__breadcrumbs a:hover {
	color: var(--color-salar);
}

.exp-single-hero__breadcrumbs .ra-breadcrumbs__sep {
	color: var(--color-salar);
	opacity: 0.6;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.exp-single-hero__breadcrumbs .ra-breadcrumbs__current {
	color: var(--color-salar);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.exp-single-hero__title {
	font-family: var(--font-heading);
	font-size: clamp(2.25rem, 7vw, 4.5rem);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.015em;
	color: var(--color-salar);
	max-width: 20ch;
	margin-bottom: var(--space-lg);
	text-wrap: balance;
}

.exp-single-hero__excerpt {
	font-family: var(--font-body);
	font-size: clamp(1.0625rem, 2vw, 1.25rem);
	font-weight: 300;
	line-height: 1.65;
	color: var(--color-salar);
	max-width: 62ch;
	margin-bottom: 0;
	text-wrap: pretty;
}

/* Datos rápidos — fila editorial sobre la imagen */
.exp-single-hero__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-lg) var(--space-2xl);
	margin: var(--space-xl) 0 0;
	padding-top: var(--space-lg);
	border-top: 1px solid rgba(205, 153, 103, 0.35);
	max-width: 62ch;
}

@media (min-width: 1024px) {
	.exp-single-hero__facts {
		margin-top: auto;
	}
}

.exp-single-hero__fact {
	margin: 0;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.exp-single-hero__fact-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	margin: 0 0 2px;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-logo-arena);
}

.exp-single-hero__fact-icon {
	display: inline-flex;
	align-items: center;
	opacity: 0.85;
}

.exp-single-hero__fact-value {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-salar);
}

@media (min-width: 640px) {
	.exp-single-hero__facts {
		display: flex;
		gap: 0;
	}

	.exp-single-hero__fact {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 var(--space-xl);
		border-left: 1px solid rgba(205, 153, 103, 0.35);
	}

	.exp-single-hero__fact:first-child {
		padding-left: 0;
		border-left: 0;
	}
}

/* CTA "Cómo llegar" en hero — override de .btn-secondary para fondo oscuro */
.exp-single-hero__cta {
	align-self: flex-start;
	margin-top: var(--space-lg);
	background-color: var(--color-salar);
	color: var(--color-obsidiana);
	border-color: var(--color-salar);
}

.exp-single-hero__cta:hover,
.exp-single-hero__cta:focus-visible {
	background-color: transparent;
	color: var(--color-salar);
	border-color: var(--color-salar);
}

/* ==========================================================================
   Planifica tu visita
   ========================================================================== */

.exp-single-planifica__panel {
	max-width: 1080px;
	margin: 0 auto;
	background-color: var(--color-arena);
	border: var(--panel-filete);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-panel);
	padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
}

.exp-single-planifica__eyebrow {
	margin-bottom: var(--space-md);
}

.exp-single-planifica__title {
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-obsidiana);
	margin-bottom: var(--space-md);
}

.exp-single-planifica__title::after {
	content: "";
	display: block;
	width: 3rem;
	height: 2px;
	margin-top: var(--space-sm);
	background-color: var(--color-terracota);
}

.exp-single-planifica__intro {
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-texto-suave);
	max-width: 65ch;
	margin-bottom: var(--space-2xl);
}

/* Grid de bloques — 2 columnas en desktop, 1 columna en móvil */
.exp-single-planifica__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
}

@media (min-width: 900px) {
	.exp-single-planifica__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-xl) var(--space-2xl);
	}
}

/* Bloque individual — sin background propio, diferenciado por tipografía y divisores */
.exp-single-planifica__block {
	padding-top: var(--space-lg);
	border-top: 1px solid rgba(23, 19, 16, 0.1);
}

.exp-single-planifica__grid > :first-child {
	padding-top: 0;
	border-top: 0;
}

.exp-single-planifica__block-title {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-obsidiana);
	margin-bottom: var(--space-md);
}

.exp-single-planifica__icon {
	display: inline-flex;
	align-items: center;
	color: var(--color-logo-azul-deep);
	flex-shrink: 0;
}

/* Cuerpo de texto de cada bloque */
.exp-single-planifica__block-body {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--color-texto);
}

.exp-single-planifica__block-body p {
	margin-bottom: var(--space-md);
}

.exp-single-planifica__block-body p:last-child {
	margin-bottom: 0;
}

/* Lista de Qué llevar — patrón de ingredientes de Receta */
.exp-single-planifica__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.exp-single-planifica__list-item {
	padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-texto);
	border-bottom: 1px solid rgba(23, 19, 16, 0.08);
}

.exp-single-planifica__list-item:last-child {
	border-bottom: 0;
}

.exp-single-planifica__list-item::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: var(--space-sm);
	border-radius: 50%;
	background-color: var(--color-terracota);
	vertical-align: middle;
}

/* ==========================================================================
   Panel de comentarios en hero
   ========================================================================== */

.ra-comment-panel {
	background: rgba(23, 19, 16, 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	color: var(--color-salar);
}

.ra-comment-panel__title {
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-salar);
	margin-bottom: var(--space-md);
}

.ra-comment-panel__empty {
	font-family: var(--font-body);
	font-size: 0.875rem;
	color: var(--color-salar);
	opacity: 0.8;
	margin-bottom: var(--space-md);
}

.ra-comment-panel__list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-md);
}

.ra-comment-panel__item {
	display: flex;
	gap: var(--space-sm);
	padding: var(--space-sm) 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.ra-comment-panel__item:last-child {
	border-bottom: none;
}

.ra-comment-panel__avatar {
	border-radius: 50%;
	flex-shrink: 0;
}

.ra-comment-panel__body {
	min-width: 0;
}

.ra-comment-panel__name {
	font-family: var(--font-heading);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-salar);
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ra-comment-panel__date {
	font-family: var(--font-body);
	font-size: 0.6875rem;
	color: var(--color-salar);
	opacity: 0.7;
	display: block;
}

.ra-comment-panel__excerpt {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--color-salar);
	margin: var(--space-xs) 0 0;
	opacity: 0.9;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ra-comment-panel__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	color: var(--color-salar);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	padding: var(--space-xs) 0;
}

.ra-comment-panel__cta:hover,
.ra-comment-panel__cta:focus-visible {
	text-decoration: underline;
}

/* Panel oculto en tablet/móvil */
@media (max-width: 1023px) {
	.ra-comment-panel {
		display: none;
	}
}

/* Wrapper del panel derecho del hero — apila Comentarios + Gastronomía
   en una columna flex. Sin gap: la separación la da border-top del preview.
   Sigue siendo el único hijo de la columna derecha del grid (1fr 320px). */
.exp-single-hero__aside {
	display: flex;
	flex-direction: column;
	gap: 0;
	align-self: end;
}

@media (max-width: 1023px) {
	.exp-single-hero__aside {
		display: none;
	}
}

/* Preview visual de Gastronomía en hero — sin fondo propio; el overlay
   oscuro del hero provee contraste. Separador sutil con el panel de
   comentarios. Diseño editorial con thumbnail + ingredientes. */
.ra-gastro-preview {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: var(--space-lg);
	margin-top: var(--space-lg);
}

.ra-gastro-preview__eyebrow {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--color-salar);
	opacity: 0.7;
	margin-bottom: var(--space-md);
}

.ra-gastro-preview__recipe {
	display: flex;
	gap: var(--space-md);
	text-decoration: none;
	color: inherit;
	margin-bottom: var(--space-md);
}

.ra-gastro-preview__recipe:hover .ra-gastro-preview__name {
	text-decoration: underline;
}

.ra-gastro-preview__recipe:focus-visible {
	outline: 2px solid var(--color-salar);
	outline-offset: 2px;
	border-radius: var(--radius-md);
}

.ra-gastro-preview__thumb {
	width: 72px;
	height: 72px;
	border-radius: var(--radius-md);
	object-fit: cover;
	flex-shrink: 0;
}

.ra-gastro-preview__thumb--placeholder {
	background: rgba(255, 255, 255, 0.15);
}

.ra-gastro-preview__info {
	min-width: 0;
	flex: 1;
}

.ra-gastro-preview__name {
	display: block;
	font-family: var(--font-heading);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-salar);
	line-height: 1.3;
	margin-bottom: var(--space-xs);
}

.ra-gastro-preview__ingredients {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ra-gastro-preview__ingredients li {
	font-family: var(--font-body);
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--color-salar);
	opacity: 0.8;
}

.ra-gastro-preview__more {
	display: block;
	font-family: var(--font-body);
	font-size: 0.6875rem;
	color: var(--color-salar);
	opacity: 0.6;
	margin-top: 2px;
}

.ra-gastro-preview__count {
	font-family: var(--font-body);
	font-size: 0.75rem;
	color: var(--color-salar);
	opacity: 0.7;
	margin-bottom: var(--space-sm);
}

.ra-gastro-preview__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	color: var(--color-salar);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	padding: var(--space-xs) 0;
}

.ra-gastro-preview__cta:hover,
.ra-gastro-preview__cta:focus-visible {
	text-decoration: underline;
}

/* Contenido + Sidebar */
.exp-single-content {
	padding-top: var(--space-2xl);
	padding-bottom: var(--space-3xl);
	border-top: 1px solid rgba(251, 247, 240, 0.28);
}

.exp-single-content__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"main"
		"sidebar"
		"video";
	gap: var(--space-2xl);
}

.exp-single-main   { grid-area: main; }
.exp-single-sidebar { grid-area: sidebar; }
.exp-single-video   { grid-area: video; }

/* Mobile: reordenar para Descripción → Video → Sidebar */
@media (max-width: 1023px) {
	.exp-single-sidebar { order: 2; }
	.exp-single-video   { order: 1; }
}

/* Desktop: 2 columnas, sidebar ocupa ambas filas */
@media (min-width: 1024px) {
	.exp-single-content__inner {
		grid-template-columns: minmax(0, 1fr) 360px;
		grid-template-rows: auto auto;
		grid-template-areas:
			"main    sidebar"
			"video   sidebar";
		gap: var(--space-3xl);
	}
}

/* Columna principal — panel pergamino sobre el plano azul; tintas oscuras
   de lectura y enlaces en azul-deep. Comparte superficie con la ficha
   lateral y conserva su jerarquía con una banda superior azul-deep. */
.exp-single-main__body {
	font-family: var(--font-body);
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.8;
	color: var(--color-texto);
	max-width: 68ch;
	background: var(--bg-pergamino);
	border: var(--panel-filete);
	border-top: 3px solid var(--color-logo-azul-deep);
	border-radius: var(--radius-lg);
	padding: clamp(var(--space-lg), 4vw, var(--space-xl));
}

.exp-single-main__body h2 {
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-obsidiana);
	margin-top: var(--space-2xl);
	margin-bottom: var(--space-md);
}

.exp-single-main__body h3 {
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-obsidiana);
	margin-top: var(--space-xl);
	margin-bottom: var(--space-sm);
}

.exp-single-main__body p {
	margin-bottom: var(--space-lg);
	text-wrap: pretty;
}

.exp-single-main__body ul,
.exp-single-main__body ol {
	margin-bottom: var(--space-lg);
	padding-left: var(--space-xl);
}

.exp-single-main__body li {
	margin-bottom: var(--space-sm);
}

.exp-single-main__body blockquote {
	margin: var(--space-xl) 0;
	padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
	border-left: 3px solid var(--color-logo-azul-deep);
	font-family: var(--font-heading);
	font-size: clamp(1.125rem, 2.5vw, 1.375rem);
	line-height: 1.5;
	color: var(--color-obsidiana);
}

.exp-single-main__body blockquote p {
	margin-bottom: 0;
}

.exp-single-main__body a {
	color: var(--color-logo-azul-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.exp-single-main__body a:hover,
.exp-single-main__body a:focus-visible {
	color: var(--color-logo-azul);
}

.exp-single-main__body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

.exp-single-main__body figure {
	margin: var(--space-xl) 0;
}

.exp-single-main__body figcaption {
	margin-top: var(--space-sm);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--color-texto-suave);
}

/* Sidebar — fichas patrimoniales sobre el plano azul: paneles pergamino
   (--bg-pergamino, dos escalones más cálidos que el hueso del cuerpo
   editorial) con filete del sistema, tintas oscuras y enlaces en azul-deep.
   Sin sombras ni cajas de UI. Las diferencias entre Comunidad, Contacto,
   Actores y Recursos se dan por icono y tipografía. */
.exp-single-sidebar__section {
	background: var(--bg-pergamino);
	border: var(--panel-filete);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	margin-bottom: var(--space-lg);
}

.exp-single-sidebar__section:last-child {
	margin-bottom: 0;
}

.exp-single-sidebar__title {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-obsidiana-calido);
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid rgba(140, 58, 42, 0.28);
}

/* Filete inferior del título — scoped al single de Experiencia (la clase
   .exp-single-sidebar__title también se usa en el single de Actor).
   Bruno del logo translúcido: detalle warm sutil sobre el panel arena. */
.single-experiencia .exp-single-sidebar__title {
	border-bottom-color: rgba(72, 32, 7, 0.30);
}

.exp-single-sidebar__icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--color-logo-azul-deep);
}

/* Ficha editorial de contacto — scoped a body.single-actor para evitar
   contaminar otros CPTs. Cada dato es un bloque transparente sobre la
   tarjeta blanca: icono, label pequeño y valor debajo, separados solo
   por aire. Grilla de 1 columna en móvil y 2×2 en escritorio. Sin
   bordes ni fondos por dato. */
body.single-actor .exp-single-info {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg) var(--space-2xl);
	margin: 0;
}

body.single-actor .exp-single-info__row {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	margin: 0;
}

body.single-actor .exp-single-info__label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-texto-suave);
}

body.single-actor .actor-single-contact__icon {
	width: 16px;
	height: 16px;
	padding: 6px;
	background: var(--color-acento-suave);
	border-radius: var(--radius-sm);
	color: var(--color-logo-bruno);
	flex-shrink: 0;
}

body.single-actor .exp-single-info__value {
	margin: 0;
	text-align: left;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-texto);
	overflow-wrap: anywhere;
}

@media (min-width: 768px) {
	body.single-actor .exp-single-info {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Comunidad anfitriona */
.exp-single-community {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.exp-single-community__image {
	flex-shrink: 0;
}

.exp-single-community__img {
	display: block;
	width: 88px;
	height: 88px;
	border-radius: var(--radius-lg);
	object-fit: cover;
}

.exp-single-community__info {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.exp-single-community__name {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--color-texto);
	text-decoration: none;
}

.exp-single-community__name:hover,
.exp-single-community__name:focus-visible {
	color: var(--color-logo-azul-deep);
}

.exp-single-community__more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-logo-azul-deep);
	text-decoration: none;
}

.exp-single-community__more:hover,
.exp-single-community__more:focus-visible {
	text-decoration: underline;
}

/* Contacto */
.exp-single-contact {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--color-texto);
}

/* Actores asociados */
.exp-single-actors {
	list-style: none;
	margin: 0;
	padding: 0;
}

.exp-single-actors__item {
	margin-bottom: var(--space-sm);
}

.exp-single-actors__item:last-child {
	margin-bottom: 0;
}

.exp-single-actors__card {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-sm) 0;
	border-radius: 0;
	background: transparent;
	border: 0;
	text-decoration: none;
}

.exp-single-actors__card:hover,
.exp-single-actors__card:focus-visible {
	background: transparent;
}

.exp-single-actors__thumb {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--color-gris-100);
}

.exp-single-actors__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.exp-single-actors__thumb--placeholder::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--color-gris-100), var(--color-gris-200));
}

.exp-single-actors__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.exp-single-actors__name {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-texto);
}

.exp-single-actors__more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-logo-azul-deep);
}

.exp-single-actors__card:hover .exp-single-actors__more,
.exp-single-actors__card:focus-visible .exp-single-actors__more {
	text-decoration: underline;
}

/* Recursos */
.exp-single-resources {
	list-style: none;
	margin: 0;
	padding: 0;
}

.exp-single-resources__item {
	margin-bottom: var(--space-sm);
}

.exp-single-resources__item:last-child {
	margin-bottom: 0;
}

.exp-single-resources__card {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-sm) 0;
	border-radius: 0;
	background: transparent;
	border: 0;
	text-decoration: none;
}

.exp-single-resources__card:hover,
.exp-single-resources__card:focus-visible {
	background: transparent;
}

.exp-single-resources__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--color-logo-azul-deep);
}

.exp-single-resources__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.exp-single-resources__name {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-texto);
}

.exp-single-resources__more {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-logo-azul-deep);
}

.exp-single-resources__card:hover .exp-single-resources__more,
.exp-single-resources__card:focus-visible .exp-single-resources__more {
	text-decoration: underline;
}

/* Video */
.exp-single-video__title {
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-salar);
	margin-bottom: var(--space-lg);
}

.exp-single-video__wrapper {
	position: relative;
	width: 100%;
	max-width: 960px;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-obsidiana-calido);
}

.exp-single-video__wrapper + .exp-single-video__wrapper {
	margin-top: var(--space-xl);
}

.exp-single-video__wrapper iframe,
.exp-single-video__wrapper object,
.exp-single-video__wrapper embed,
.exp-single-video__wrapper video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

.exp-single-video__fallback {
	font-size: 0.9375rem;
	color: var(--color-texto-suave);
}

.exp-single-video__fallback a {
	color: var(--color-cielo);
}

/* Textos que quedan directamente sobre el plano azul (scope local) */
.single-experiencia .exp-single-video__fallback {
	color: var(--color-salar);
}

.single-experiencia .exp-single-video__fallback a {
	color: var(--color-salar);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Experiencias relacionadas */
.exp-single-related {
	background: var(--color-logo-azul-deep);
	border-top: 1px solid rgba(251, 247, 240, 0.28);
	border-bottom: 1px solid rgba(251, 247, 240, 0.28);
}

.exp-single-related__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-md);
	color: var(--color-salar);
	margin-bottom: var(--space-md);
}

.exp-single-related__eyebrow::before {
	content: "";
	width: 40px;
	height: 2px;
	background-color: var(--color-salar);
	flex-shrink: 0;
	opacity: 0.85;
}

.exp-single-related__title {
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-salar);
	margin-bottom: var(--space-xl);
}

.exp-single-related__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

@media (min-width: 640px) {
	.exp-single-related__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.exp-single-related__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Tarjetas de las experiencias relacionadas — variante clara sobre la banda
   azul-deep. La tarjeta base (.exp-card) se comparte con Home y archives:
   estos overrides van scoped a esta sección. */
.exp-single-related .exp-card__type {
	color: var(--color-logo-azul-deep);
}

.exp-single-related .exp-card__link:hover .exp-card__title,
.exp-single-related .exp-card__cta {
	color: var(--color-logo-azul-deep);
}

.exp-single-related .exp-card__link:focus-visible {
	outline-color: var(--color-logo-azul-deep);
}

/* ==========================================================================
   Gastronomía relacionada — Tarjeta de receta y sección completa
   ========================================================================== */

/* Tarjeta de receta reutilizable — misma arquitectura que .exp-card */
.receta-card {
	background: var(--surface-hueso);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.receta-card:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-2px);
}

.receta-card__link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.receta-card__link:hover .receta-card__title,
.receta-card__link:hover .receta-card__cta {
	color: var(--color-logo-azul-deep);
}

.receta-card__link:focus-visible {
	outline: 2px solid var(--color-logo-azul);
	outline-offset: 2px;
	border-radius: var(--radius-lg);
}

.receta-card__image-wrapper {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-arena);
}

.receta-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.receta-card:hover .receta-card__image {
	transform: scale(1.03);
}

.receta-card__image--placeholder {
	width: 100%;
	height: 100%;
	background: var(--color-arena);
}

.receta-card__body {
	padding: var(--space-lg);
}

.receta-card__title {
	font-family: var(--font-heading);
	font-size: clamp(1rem, 2vw, 1.25rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-obsidiana);
	margin-bottom: var(--space-sm);
}

.receta-card__excerpt {
	font-family: var(--font-body);
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--color-obsidiana);
	opacity: 0.8;
	margin-bottom: var(--space-md);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.receta-card__ingredientes {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-sm);
}

.receta-card__ingredientes li {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--color-obsidiana);
	opacity: 0.7;
	padding-left: var(--space-md);
	position: relative;
}

.receta-card__ingredientes li::before {
	content: "·";
	position: absolute;
	left: 0;
	color: var(--color-terracota);
	font-weight: 700;
}

.receta-card__more {
	font-family: var(--font-body);
	font-size: 0.75rem;
	color: var(--color-obsidiana);
	opacity: 0.5;
	margin: 0 0 var(--space-md);
}

.receta-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-logo-azul-deep);
	text-decoration: none;
	padding: var(--space-xs) 0;
}

/* Sección completa de Gastronomía — se ubica entre Mapa y Otras experiencias */
.receta-single-gastronomia__eyebrow {
	color: var(--color-blanco);
	margin-bottom: var(--space-md);
}

.receta-single-gastronomia__title {
	font-family: var(--font-heading);
	font-size: clamp(1.375rem, 3vw, 1.75rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-blanco);
	margin-bottom: var(--space-xl);
}

.receta-single-gastronomia__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

@media (min-width: 640px) {
	.receta-single-gastronomia__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.receta-single-gastronomia__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Mapa de ubicación — Experiencia y Actor individual (clases compartidas) */
.ra-single-map__title {
	font-family: var(--font-heading);
	font-size: clamp(1.375rem, 3vw, 1.75rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-obsidiana);
	margin-bottom: var(--space-lg);
}

.ra-single-map__wrapper {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.ra-single-map__canvas {
	width: 100%;
	height: 100%;
}

.ra-single-map__link {
	margin-top: var(--space-md);
	font-size: 0.9375rem;
}

.ra-single-map__link a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--color-terracota);
	text-decoration: none;
}

.ra-single-map__link a:hover {
	text-decoration: underline;
}

/* Mapa sobre el plano azul — scope local a Experiencia. Las clases
   .ra-single-map__* globales se conservan intactas para el single de Actor. */
.single-experiencia .ra-single-map__title {
	color: var(--color-salar);
}

.single-experiencia .ra-single-map__link a {
	color: var(--color-salar);
}

/* Móvil — fichas más compactas para no robar espacio de lectura a 320 px */
@media (max-width: 480px) {
	.exp-single-sidebar__section {
		padding: var(--space-md);
	}
}

@media (min-width: 768px) {
	.ra-single-map__wrapper {
		aspect-ratio: 21 / 9;
	}
}

/* ==========================================================================
   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;
		scroll-behavior: auto !important;
	}
}

/* Mapa Home — Popup */
.ra-map-popup__type {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 2px 6px;
	border-radius: var(--radius-pill);
	margin-bottom: 4px;
}

.ra-map-popup__type--experiencia {
	color: var(--color-blanco);
	background-color: var(--color-terracota);
}

.ra-map-popup__type--actor {
	color: var(--color-blanco);
	background-color: var(--color-cielo);
}

/* ==================================================
   Home — Actores Destacados
   ================================================== */

.section-actores {
	background: var(--color-logo-azul);
}

.section-actores__header {
	text-align: center;
	margin-bottom: var(--space-2xl);
}

/* Tarjeta de Actor */
.actor-card {
	background-color: var(--color-blanco);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	max-width: 300px;
	width: 100%;
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.actor-card:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-2px);
}

.actor-card__link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.actor-card__link:focus-visible {
	outline: 2px solid var(--color-cielo);
	outline-offset: 2px;
	border-radius: var(--radius-lg);
}

.actor-card__image-wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--color-gris-200);
}

.actor-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform var(--transition-slow);
}

.actor-card:hover .actor-card__image {
	transform: scale(1.03);
}

.actor-card__image--fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--color-gris-200) 0%, var(--color-gris-100) 100%);
	color: var(--color-gris-400);
}

.actor-card__body {
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

/* Meta [TIPO · TERRITORIO]: complementa al nombre sin competir con él */
.actor-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-sm);
	color: var(--color-gris-600);
}

.actor-card__meta-sep {
	color: var(--color-gris-400);
}

.actor-card__type,
.actor-card__territory {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: inherit;
}

/* Monograma sustitutivo de fotografía (marca circular) */
.actor-card__monogram {
	font-family: var(--font-heading);
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--color-gris-400);
}

.actor-card__title {
	font-family: var(--font-heading);
	font-size: clamp(1.125rem, 2.5vw, 1.375rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-obsidiana);
	margin: 0;
}

.actor-card__link:hover .actor-card__title {
	color: var(--color-terracota);
}

.actor-card__excerpt {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--color-gris-600);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 0;
}

.actor-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-terracota);
	margin-top: var(--space-sm);
	transition: gap var(--transition-fast);
}

.actor-card__link:hover .actor-card__cta {
	gap: var(--space-sm);
}

/* ==================================================
   Home — Recursos (Sendero: itinerario de interpretación)
   ================================================== */

.section-recursos {
	background: var(--color-logo-azul);
}

/* Panel editorial del sendero: misma receta de superficie que Actores/Relatos
   (terracota humeda + filete translucido + sombra suave + radio lg).
   La cabecera y el boton "Ver todos los recursos" quedan fuera del panel. */
.section-recursos__sendero {
	position: relative;
	max-width: 820px;
	margin: 0;
	padding: var(--space-xl);
	list-style: none;
	background-color: var(--surface-pergamino);
	border: var(--panel-filete);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-panel);
}

/* Hilo del sendero: linea de ruta tenue que une los puntos de parada.
   El desplazamiento (padding del panel + mitad del punto) ancla la linea a
   los centros de la primera y la ultima parada. */
.section-recursos__sendero::before {
	content: "";
	position: absolute;
	top: calc(var(--space-xl) + 3px);
	bottom: calc(var(--space-xl) + 3px);
	left: 14px;
	border-left: 1px dotted rgba(72, 32, 7, 0.45);
}

@media (max-width: 767px) {
	.section-recursos__sendero {
		padding: var(--space-lg);
	}

	.section-recursos__sendero::before {
		top: calc(var(--space-lg) + 3px);
		bottom: calc(var(--space-lg) + 3px);
	}
}

@media (min-width: 1024px) {
	.section-recursos__sendero {
		padding: var(--space-2xl);
	}

	.section-recursos__sendero::before {
		top: calc(var(--space-2xl) + 3px);
		bottom: calc(var(--space-2xl) + 3px);
	}
}

/* Parada: el punto de ruta y el cuerpo quedan en columnas independientes */
.recurso-parada {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	column-gap: var(--space-md);
	align-items: start;
}

.recurso-parada + .recurso-parada {
	margin-top: var(--space-2xl);
}

.recurso-parada__cuerpo {
	min-width: 0;
}

@media (max-width: 767px) {
	.recurso-parada + .recurso-parada {
		margin-top: var(--space-xl);
	}
}

/* Punto de parada: marca discreta sobre el hilo, como un mojon de sendero.
   Sin circulo relleno: el punto solo senala el lugar de la parada. */
.recurso-parada__marca {
	position: relative;
	z-index: 1;
	justify-self: center;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--color-salar);
	margin-top: 5px;
}

/* Signatura editorial: clasificacion en escala menor */
.recurso-parada__signatura {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--color-salar);
}

.recurso-parada__glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	color: var(--color-gris-400);
}

.recurso-parada__formato-label {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--color-salar);
}

.recurso-parada__meta {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-sm);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-texto-suave);
}

.recurso-parada__meta-item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
}

.recurso-parada__meta-sep {
	color: var(--color-gris-400);
}

.recurso-parada__title {
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-obsidiana);
	margin: var(--space-xs) 0 0;
	text-wrap: balance;
}

.recurso-parada__title a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-repeat: no-repeat;
	background-position: left 100%;
	transition: background-size var(--transition-base), color var(--transition-base);
}

.recurso-parada__title a:hover,
.recurso-parada__title a:focus-visible {
	color: var(--color-terracota);
	background-size: 100% 1px;
}

.recurso-parada__title a:focus-visible {
	outline: 2px solid var(--color-cielo);
	outline-offset: 3px;
}

.recurso-parada__desc {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-texto-suave);
	margin: var(--space-sm) 0 0;
	max-width: 60ch;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-wrap: pretty;
}

.recurso-parada__accion {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-terracota);
	text-decoration: none;
	white-space: nowrap;
	margin-top: var(--space-md);
	padding: var(--space-sm) 0;
}

.recurso-parada__accion svg {
	transition: transform var(--transition-fast);
}

.recurso-parada__accion:hover svg,
.recurso-parada__accion:focus-visible svg {
	transform: translateX(3px);
}

.recurso-parada__accion:focus-visible {
	outline: 2px solid var(--color-cielo);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.recurso-parada__accion svg,
	.recurso-parada__title a {
		transition: none;
	}
}

/* Tarjeta de Relato */
.relato-card {
	background-color: var(--color-blanco);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	width: 100%;
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.relato-card:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-2px);
}

.relato-card__link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.relato-card__link:focus-visible {
	outline: 2px solid var(--color-cielo);
	outline-offset: 2px;
	border-radius: var(--radius-lg);
}

.relato-card__image-wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--color-gris-200);
}

.relato-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.relato-card:hover .relato-card__image {
	transform: scale(1.03);
}

.relato-card__image--fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--color-gris-200) 0%, var(--color-gris-100) 100%);
	color: var(--color-gris-400);
}

.relato-card__body {
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.relato-card__badge {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-cielo);
}

.relato-card__title {
	font-family: var(--font-heading);
	font-size: clamp(1.125rem, 2.5vw, 1.375rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-obsidiana);
	margin: 0;
}

.relato-card__link:hover .relato-card__title {
	color: var(--color-terracota);
}

.relato-card__narrator {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-style: italic;
	color: var(--color-texto-suave);
	margin-bottom: 0;
}

.relato-card__excerpt {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--color-gris-600);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 0;
}

.relato-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-terracota);
	margin-top: var(--space-sm);
	transition: gap var(--transition-fast);
}

.relato-card__link:hover .relato-card__cta {
	gap: var(--space-sm);
}

/* ==================================================
   Archive — Relatos (Folio en la mesa)
   ================================================== */

/* Grilla: fondo azul que continúa la cabecera; los pliegos flotan
   sobre la misma superficie sin panel de color. */
.relato-archive-grid {
	background-color: var(--color-logo-azul);
	padding-top: var(--space-xl);
	padding-bottom: var(--space-3xl);
}

.relato-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	align-items: start;
}

/* Pliego editorial (variante folio): sin superficie propia, solo un filete
   en el registro translúcido de las costuras del proyecto (salar al 40%),
   el radio y la sombra. El texto es el protagonista. */
.relato-card--folio {
	background-color: var(--surface-pergamino);
	border: 1px solid rgba(251, 247, 240, 0.4);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-panel);
	overflow: visible;
}

.relato-card--folio:hover {
	transform: none;
	box-shadow: 0 2px 4px rgba(20, 16, 10, 0.18), 0 8px 24px rgba(20, 16, 10, 0.2), 0 32px 80px rgba(20, 16, 10, 0.3);
}

.relato-card--folio .relato-card__link:focus-visible {
	outline-color: var(--color-salar);
}

.relato-card--folio .relato-card__body {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: var(--space-xl);
}

@media (min-width: 1024px) {
	.relato-card--folio .relato-card__body {
		padding: var(--space-2xl);
	}
}

/* Sello de voz: medallón salar con la comilla del relato (U+275D), misma
   receta que el sello de monograma de Actores (fondo salar + tinta
   terracota-deep + borde fino translúcido). Ancla y focaliza el pliego;
   tamaño y aire ajustados para que forme un mismo bloque con el título. */
.relato-card__sello {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(36px, 4.5vw, 44px);
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--color-salar);
	border: 1px solid rgba(251, 247, 240, 0.28);
	color: var(--color-terracota-deep);
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: 1;
	margin-bottom: var(--space-md);
}

.relato-card--folio .relato-card__badge {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-logo-bruno);
	margin-bottom: var(--space-xs);
}

.relato-card--folio .relato-card__title {
	font-size: clamp(1.375rem, 3vw, 1.75rem);
	line-height: 1.3;
	color: var(--color-obsidiana);
	margin-bottom: var(--space-md);
	text-wrap: balance;
}

.relato-card--folio .relato-card__link:hover .relato-card__title,
.relato-card--folio .relato-card__link:focus-visible .relato-card__title {
	color: var(--color-logo-azul-deep);
}

.relato-card--folio .relato-card__narrator {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-xs);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-style: italic;
	color: var(--color-texto-suave);
	margin-bottom: var(--space-sm);
}

.relato-card--folio .relato-card__narrator-label {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-gris-600);
}

.relato-card__audio {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	margin-bottom: var(--space-sm);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-gris-600);
}

.relato-card--folio .relato-card__excerpt {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--color-gris-600);
	-webkit-line-clamp: 4;
	margin-bottom: var(--space-lg);
	text-wrap: pretty;
}

.relato-card--folio .relato-card__cta {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-logo-azul-deep);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	margin-top: 0;
}

.relato-card--folio .relato-card__link:hover .relato-card__cta,
.relato-card--folio .relato-card__link:focus-visible .relato-card__cta {
	color: var(--color-obsidiana);
	gap: var(--space-sm);
}


/* ==================================================
   Archive — Actores
   ================================================== */

/* Grilla de archivos — fondo azul para continuar la identidad de la Home */
.actor-archive-grid {
	background-color: var(--color-logo-azul);
	padding-top: var(--space-xl);
}

/* Tarjeta — variante archivo: "ficha de identidad" en pergamino. Retrato y
   nombre protagonizan; tipo y territorio complementan en mono. El filete es
   una línea de tinta (azul-deep translúcido) que enmarca el registro;
   la sombra se conserva para separar la ficha del fondo azul. */
.actor-card--archive {
	max-width: none;
	background-color: var(--bg-pergamino);
	border: 1.5px solid rgba(1, 90, 158, 0.35);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-panel);
}

.actor-card--archive:hover {
	box-shadow: 0 2px 4px rgba(20, 16, 10, 0.18), 0 6px 16px rgba(20, 16, 10, 0.16), 0 24px 60px rgba(20, 16, 10, 0.28);
}

.actor-card--archive .actor-card__link:focus-visible {
	outline-color: var(--color-logo-azul-deep);
}

/* Retrato: proporción 4:3 en móvil y 4:5 en tablet+, como el destacado de la Home.
   La costura bajo el retrato usa la tinta del registro, no salar (invisible
   sobre pergamino). */
.actor-card--archive .actor-card__image-wrapper {
	aspect-ratio: 4 / 3;
	background-color: var(--color-salar);
	border-bottom: 1px solid rgba(1, 90, 158, 0.28);
}

@media (min-width: 768px) {
	.actor-card--archive .actor-card__image-wrapper {
		aspect-ratio: 4 / 5;
	}
}

/* Sin fotografía: sello circular de monograma sobre el pergamino, como una
   estampa de registro (bruno con iniciales en salar). */
.actor-card--archive .actor-card__image--fallback {
	background: none;
	background-color: var(--bg-pergamino);
	color: var(--color-logo-bruno);
}

.actor-card--archive .actor-card__monogram {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(72px, 9vw, 96px);
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--color-logo-bruno);
	color: var(--color-salar);
	font-size: clamp(2rem, 4vw, 2.75rem);
}

/* Nombre protagonista: obsidiana cálido sobre pergamino (13.63:1) */
.actor-card--archive .actor-card__title {
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	line-height: 1.15;
	color: var(--color-obsidiana-calido);
}

.actor-card--archive .actor-card__link:hover .actor-card__title {
	color: var(--color-logo-azul-deep);
}

/* Meta y CTA en tinta azul-deep (5.63:1); el extracto en
   tinta de cuerpo (11.31:1). Todo AA sobre pergamino. */
.actor-card--archive .actor-card__meta,
.actor-card--archive .actor-card__meta-sep,
.actor-card--archive .actor-card__cta {
	color: var(--color-logo-azul-deep);
}

.actor-card--archive .actor-card__excerpt {
	color: var(--tinta);
}

.actor-card--archive .actor-card__link:hover .actor-card__cta {
	color: var(--color-logo-azul);
}

/* ==================================================
   Single — Actor (Ficha individual)
   ================================================== */

/* Cabecera — Hero editorial de Actor: el texto tiene más peso que la fotografía */
.actor-single-hero {
	padding-top: var(--space-xl);
	padding-bottom: var(--space-2xl);
}

/* Móvil: el texto (tipo, título, descripción) se lee primero; la fotografía
   y la franja editorial quedan debajo. En escritorio la fotografía se
   reposiciona a la izquierda mediante colocación explícita
   (grid-column / grid-row) dentro del media query. */
.actor-single-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	align-items: start;
	/* Gran contenedor editorial: una única superficie clara integra foto,
	   texto, banda de datos y contacto. El azul del plano queda por fuera. */
	background: var(--surface-pergamino);
	border: var(--panel-filete);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
}

/* Texto: protagonista de la composición */
.actor-single-hero__type {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-logo-bruno);
	margin-bottom: var(--space-sm);
}

.actor-single-hero__type::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 2px;
	background: var(--color-pampa);
	margin-right: var(--space-sm);
	vertical-align: middle;
}

/* Epígrafe cultural (Territorio · Pueblo): identidad de pertenencia como
   cabecera del actor, en mono con separador dorado. No es un encabezado. */
.actor-single-hero__epigraph {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-sm);
	margin: 0 0 var(--space-md);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-logo-bruno);
}

.actor-single-hero__epigraph-sep {
	color: var(--color-pampa);
}

.actor-single-hero__title {
	font-family: var(--font-heading);
	font-size: clamp(2.25rem, 5.5vw, 3.5rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--color-obsidiana);
	margin-bottom: var(--space-lg);
	text-wrap: balance;
}

.actor-single-hero__title::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-top: var(--space-md);
	background: var(--color-pampa);
}

.actor-single-hero__body {
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-texto);
	max-width: 65ch;
	text-wrap: pretty;
}

.actor-single-hero__body > :first-child {
	margin-top: 0;
}

.actor-single-hero__body > :last-child {
	margin-bottom: 0;
}

.actor-single-hero__body p {
	margin-bottom: var(--space-md);
}

.actor-single-hero__body h2 {
	font-family: var(--font-heading);
	font-size: clamp(1.375rem, 3vw, 1.75rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-obsidiana);
	margin-top: var(--space-2xl);
	margin-bottom: var(--space-md);
}

.actor-single-hero__body h3 {
	font-family: var(--font-heading);
	font-size: clamp(1.125rem, 2.5vw, 1.375rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-obsidiana);
	margin-top: var(--space-xl);
	margin-bottom: var(--space-sm);
}

.actor-single-hero__body ul,
.actor-single-hero__body ol {
	margin-bottom: var(--space-md);
	padding-left: var(--space-xl);
}

.actor-single-hero__body li {
	margin-bottom: var(--space-sm);
}

.actor-single-hero__body a {
	color: var(--color-logo-azul-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.actor-single-hero__body a:hover,
.actor-single-hero__body a:focus-visible {
	color: var(--color-logo-bruno);
}

.actor-single-hero__content {
	padding: var(--space-lg) var(--space-lg) var(--space-2xl);
}

/* Identidad: la fotografía es la pieza de apertura, inseteada dentro del
   contenedor editorial (pergamino visible alrededor en móvil; en escritorio
   su columna y el padding definen la placa). Completa, con radio pequeño y
   una sombra de impresión muy suave. Sin object-fit ni aspect-ratio. */
.actor-single-hero__media {
	max-width: 100%;
	padding: var(--space-lg);
}

.actor-single-hero__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
	box-shadow: 0 2px 8px rgba(23, 19, 16, 0.10);
}

/* Banda editorial (Territorio · Pueblo · Ubicación): dentro de la misma
   superficie, separada del relato por un hairline. En móvil se apila; en
   escritorio pasa a fila con separadores verticales. Sin fondo propio. */
.actor-single-hero__facts {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: var(--space-lg);
	margin-top: 0;
	padding: var(--space-lg) var(--space-xl);
	border-top: 1px solid rgba(23, 19, 16, 0.12);
}

.actor-single-hero__fact {
	display: flex;
	align-items: baseline;
	gap: var(--space-xs);
	margin: 0;
}

.actor-single-hero__fact-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	vertical-align: middle;
	margin-right: var(--space-xs);
	color: var(--color-logo-azul-deep);
}

.actor-single-hero__fact-label {
	display: inline;
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-gris-600);
}

.actor-single-hero__fact-value {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-obsidiana);
}

@media (min-width: 900px) {
	.actor-single-hero {
		padding-top: var(--space-2xl);
		padding-bottom: var(--space-2xl);
	}

	/* Escritorio: placa fotográfica inseteada a la izquierda (pergamino
	   visible en los lados; la columna define el ancho natural de la foto)
	   y bloque narrativo a la derecha con caja propia. La banda editorial
	   (Territorio · Pueblo · Ubicación) y el Contacto cierran a ancho
	   completo dentro de la misma superficie. Con colocación explícita
	   (grid-column / grid-row) el orden de lectura móvil se mantiene en el
	   DOM. */
	.actor-single-hero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
		column-gap: 0;
		row-gap: 0;
	}

	.actor-single-hero__media {
		grid-column: 1;
		grid-row: 1;
		padding: var(--space-2xl) 0 var(--space-2xl) var(--space-2xl);
	}

	.actor-single-hero__content {
		grid-column: 2;
		grid-row: 1;
		padding: var(--space-3xl) var(--space-2xl) var(--space-2xl);
	}

	body.single-actor .actor-single-hero__contact {
		grid-column: 1 / -1;
		grid-row: 3;
		padding: var(--space-2xl);
	}

	body.single-actor .actor-single-hero__contact .exp-single-info {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-md) var(--space-3xl);
		margin-top: var(--space-sm);
	}

	.actor-single-hero__facts {
		grid-column: 1 / -1;
		grid-row: 2;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		column-gap: var(--space-xl);
		row-gap: var(--space-lg);
		padding: var(--space-lg) var(--space-2xl);
	}

	.actor-single-hero__fact + .actor-single-hero__fact {
		margin-left: var(--space-lg);
		padding-left: var(--space-lg);
		border-left: 1px solid rgba(23, 19, 16, 0.12);
	}
}

/* Enlace volver */
.actor-single-back__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-logo-azul-deep);
	text-decoration: none;
	transition: gap var(--transition-fast);
}

.actor-single-back__link:hover {
	gap: var(--space-md);
}

.actor-single-back__link svg {
	flex-shrink: 0;
}

/* Contacto — franja de cierre dentro del contenedor editorial: fuera de la
   fila principal, separada del resto por un hairline. Sin tarjeta: título
   en mono bruno y datos apilados en móvil / línea horizontal en escritorio.
   Tintas AA sobre var(--surface-pergamino). */
body.single-actor .actor-single-contact__card {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: var(--space-2xl) var(--space-xl);
	border-top: 1px solid rgba(23, 19, 16, 0.12);
	min-width: 0;
}

body.single-actor .actor-single-hero__contact .exp-single-sidebar__title {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-logo-bruno);
	border-bottom: 0;
	margin-bottom: var(--space-md);
}

body.single-actor .actor-single-hero__contact .exp-single-info__row {
	margin: 0;
}

body.single-actor .actor-single-hero__contact .exp-single-info__label {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--color-gris-600);
}

body.single-actor .actor-single-hero__contact .actor-single-contact__icon {
	padding: 0;
	background: none;
	color: var(--color-logo-azul-deep);
}

body.single-actor .actor-single-hero__contact .exp-single-info__value {
	color: var(--color-texto);
}

.actor-single-contact__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	min-width: 0;
	color: var(--color-logo-azul-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
	transition: color var(--transition-fast);
}

.actor-single-contact__link:hover,
.actor-single-contact__link:focus-visible {
	color: var(--color-logo-bruno);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Enlace volver — reducir espacio vertical */
.actor-single-back {
	padding-top: var(--space-lg);
	padding-bottom: var(--space-xl);
}

/* ==================================================
   Single — Actor: Experiencias asociadas
   ================================================== */

.actor-single-experiencias__title {
	font-family: var(--font-heading);
	font-size: clamp(1.375rem, 3vw, 1.75rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-obsidiana);
	margin-bottom: var(--space-xl);
}

.actor-single-experiencias__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

@media (min-width: 768px) {
	.actor-single-experiencias__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.actor-single-experiencias__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Tarjetas de las experiencias asociadas — variante clara sobre el plano
   azul. La tarjeta base (.exp-card) se comparte con Home y archives: estos
   overrides van scoped al single de Actor. */
body.single-actor .actor-single-experiencias .exp-card__type {
	color: var(--color-logo-azul-deep);
}

body.single-actor .actor-single-experiencias .exp-card__link:hover .exp-card__title,
body.single-actor .actor-single-experiencias .exp-card__cta {
	color: var(--color-logo-azul-deep);
}

body.single-actor .actor-single-experiencias .exp-card__link:focus-visible {
	outline-color: var(--color-logo-azul-deep);
}

/* Superficie de las tarjetas — pergamino (var(--surface-pergamino)) sobre el plano azul,
   igualando el contenedor editorial del hero y su filete. La tarjeta base
   (.exp-card) se comparte con Home y archives: estos overrides van scoped
   al single de Actor. Tintas AA sobre var(--surface-pergamino): obsidiana/título 13.1:1,
   texto-suave/meta 4.6:1, gris-600/extracto 5.5:1, azul-deep (tipo, CTA,
   hover y foco) 5.6:1. */
body.single-actor .actor-single-experiencias .exp-card {
	background-color: var(--surface-pergamino);
	border: var(--panel-filete);
}

body.single-actor .actor-single-experiencias .exp-card:hover {
	border-color: rgba(23, 19, 16, 0.40);
}

body.single-actor .actor-single-experiencias .exp-card__meta-item {
	color: var(--color-texto-suave);
}

body.single-actor .actor-single-experiencias .exp-card__meta-label {
	color: var(--color-piedra);
}

/* Separación editorial entre las tres grandes secciones del single de
   Actor (Hero → Mapa → Experiencias): un hilo de 1px al ancho del
   .container, no a todo el ancho azul. Vive en el padding-top existente
   de cada sección, así que no añade altura. Mismo token que los
   separadores de la Home (salar al 40%). */
body.single-actor .actor-single-map > .container,
body.single-actor .actor-single-experiencias > .container {
	border-top: 1px solid rgba(251, 247, 240, 0.40);
}

/* ==================================================
   Archive — Recurso
   ================================================== */

/* Grilla: fondo azul continuo (mesa de materiales); las fichas
   hueso flotan sobre la superficie como catálogo de consulta. */
.recurso-archive-grid {
	background-color: var(--color-logo-azul);
	padding-top: var(--space-xl);
	padding-bottom: var(--space-3xl);
}

.recurso-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	align-items: start;
}

/* Tarjeta de Recurso */
.recurso-card {
	background-color: var(--color-blanco);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.recurso-card:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-2px);
}

.recurso-card__link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.recurso-card__link:focus-visible {
	outline: 2px solid var(--color-cielo);
	outline-offset: 2px;
	border-radius: var(--radius-lg);
}

.recurso-card__image-wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--color-gris-200);
}

.recurso-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.recurso-card:hover .recurso-card__image {
	transform: scale(1.03);
}

.recurso-card__image--fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--color-gris-200) 0%, var(--color-gris-100) 100%);
	color: var(--color-gris-400);
}

.recurso-card__title {
	font-family: var(--font-heading);
	font-size: clamp(1.125rem, 2.5vw, 1.375rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-obsidiana);
	margin: 0;
}

.recurso-card__link:hover .recurso-card__title {
	color: var(--color-terracota);
}

.recurso-card__excerpt {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--color-gris-600);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 0;
}

.recurso-card__source {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	color: var(--color-piedra);
}

.recurso-card__source-icon {
	display: inline-flex;
	align-items: center;
}

.recurso-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-terracota);
	margin-top: var(--space-sm);
	transition: gap var(--transition-fast);
}

.recurso-card__link:hover .recurso-card__cta {
	gap: var(--space-sm);
}

/* Ficha de catálogo (variante archive): superficie hueso —distinta del
   blanco de Experiencias, del pergamino de Actores y del pliego
   transparente de Relatos— con sello de formato, signatura mono, título
   serif y pie de acción separado por filete. El borde exterior usa la
   costura salar del sistema (filete editorial sobre el fondo terracota);
   en hover la costura se ilumina y la ficha se levanta. */
.recurso-card--ficha {
	background-color: var(--surface-hueso);
	border: 1px solid rgba(251, 247, 240, 0.55);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}

.recurso-card--ficha:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-2px);
	border-color: rgba(251, 247, 240, 0.85);
}

.recurso-card--ficha .recurso-card__link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	padding: var(--space-lg);
	gap: var(--space-sm);
}

.recurso-card--ficha .recurso-card__link:focus-visible {
	outline: 2px solid var(--color-terracota-deep);
	outline-offset: 2px;
	border-radius: var(--radius-lg);
}

@media (min-width: 1024px) {
	.recurso-card--ficha .recurso-card__link {
		padding: var(--space-xl);
	}
}

/* Encabezado de la ficha: sello de formato + signatura editorial */
.recurso-card--ficha .recurso-card__header {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	margin-bottom: var(--space-sm);
}

/* Sello de formato: medallón salar con el glifo del material real.
   Receta del sello editorial del proyecto, con el anillo en
   terracota-deep: sobre la superficie hueso (casi idéntica al salar)
   el anillo define la forma del sello y le da presencia sin añadir
   color nuevo. Pequeño y funcional, no decorativo. */
.recurso-card--ficha .recurso-card__sello {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: clamp(36px, 4vw, 44px);
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--color-salar);
	border: 1.5px solid var(--color-terracota-deep);
	color: var(--color-terracota-deep);
}

/* Signatura editorial: tipo · categoría en escala menor */
.recurso-card--ficha .recurso-card__signatura {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--color-terracota-deep);
}

.recurso-card--ficha .recurso-card__signatura-sep {
	color: var(--color-gris-400);
}

/* Título serif como protagonista */
.recurso-card--ficha .recurso-card__title {
	font-family: var(--font-heading);
	font-size: clamp(1.125rem, 2.5vw, 1.375rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-texto);
	margin: 0;
	text-wrap: balance;
}

.recurso-card--ficha .recurso-card__link:hover .recurso-card__title,
.recurso-card--ficha .recurso-card__link:focus-visible .recurso-card__title {
	color: var(--color-terracota-deep);
}

/* Extracto: máximo 2 líneas. Bloque de lectura normal; la tarjeta cierra
   justo después de su contenido, sin aire artificial que la estire. */
.recurso-card--ficha .recurso-card__excerpt {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--color-texto-suave);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 0;
	text-wrap: pretty;
}

/* Pie: filete editorial en terracota-deep (tinta del sello y la acción)
   que separa la acción del cuerpo y ancla la zona de uso de la ficha. */
.recurso-card--ficha .recurso-card__pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-md);
	padding: var(--space-md) var(--space-lg);
	border-top: 1px solid rgba(140, 58, 42, 0.28);
}

@media (min-width: 1024px) {
	.recurso-card--ficha .recurso-card__pie {
		padding-left: var(--space-xl);
		padding-right: var(--space-xl);
	}
}

/* Acción directa: enlace hermano (no anidado) con verbo real. Texto
   mono con subrayado solo en hover/focus: peso visual de enlace
   editorial, sin forma de botón. */
.recurso-card--ficha .recurso-card__accion {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-terracota-deep);
	text-decoration: none;
	text-underline-offset: 3px;
	white-space: nowrap;
	padding: var(--space-xs) 0;
}

.recurso-card--ficha .recurso-card__accion svg {
	transition: transform var(--transition-fast);
}

.recurso-card--ficha .recurso-card__accion:hover,
.recurso-card--ficha .recurso-card__accion:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.recurso-card--ficha .recurso-card__accion:hover svg,
.recurso-card--ficha .recurso-card__accion:focus-visible svg {
	transform: translateX(3px);
}

.recurso-card--ficha .recurso-card__accion:focus-visible {
	outline: 2px solid var(--color-cielo);
	outline-offset: 3px;
}

/* Licencia: solo cuando existe */
.recurso-card--ficha .recurso-card__licencia {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-gris-600);
	text-align: right;
	max-width: 60%;
}

@media (prefers-reduced-motion: reduce) {
	.recurso-card--ficha {
		transition: none;
	}

	.recurso-card--ficha .recurso-card__accion svg {
		transition: none;
	}
}

/* Overrides de identidad — SOLO archive de Recursos.
   La variante .recurso-card--ficha se comparte con los recursos afines del
   single (franja terracota); por eso estos ajustes van scoped al grid del
   archive para no afectar single-related ni el single de recurso. */
.recurso-archive-grid .recurso-card--ficha {
	background-color: var(--surface-pergamino);
}

.recurso-archive-grid .recurso-card--ficha .recurso-card__sello {
	border-color: var(--color-logo-bruno);
	color: var(--color-logo-bruno);
}

.recurso-archive-grid .recurso-card--ficha .recurso-card__signatura {
	color: var(--color-logo-azul-deep);
}

.recurso-archive-grid .recurso-card--ficha .recurso-card__link:hover .recurso-card__title,
.recurso-archive-grid .recurso-card--ficha .recurso-card__link:focus-visible .recurso-card__title {
	color: var(--color-logo-azul-deep);
}

.recurso-archive-grid .recurso-card--ficha .recurso-card__pie {
	border-top-color: rgba(1, 90, 158, 0.28);
}

.recurso-archive-grid .recurso-card--ficha .recurso-card__accion {
	color: var(--color-logo-azul-deep);
}

.recurso-archive-grid .recurso-card--ficha .recurso-card__accion:hover,
.recurso-archive-grid .recurso-card--ficha .recurso-card__accion:focus-visible {
	color: var(--color-obsidiana);
}

.recurso-archive-grid .recurso-card--ficha .recurso-card__link:focus-visible {
	outline-color: var(--color-logo-azul-deep);
}

.recurso-archive-grid .recurso-card--ficha .recurso-card__accion:focus-visible {
	outline-color: var(--color-logo-azul-deep);
}

.recurso-archive-grid .recurso-card--ficha .recurso-card__title {
	color: var(--color-obsidiana);
}

.recurso-archive-grid .recurso-card--ficha .recurso-card__licencia {
	color: var(--color-gris-600);
}

/* ==================================================
   Responsive — Tablet (768px+)
   ================================================== */

@media (min-width: 768px) {
	.recurso-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==================================================
   Responsive — Desktop (1024px+)
   ================================================== */

@media (min-width: 1024px) {
	.recurso-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 768px) {
	.relato-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.relato-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==================================================
   Single — Recurso (Ficha de catálogo patrimonial)
   ================================================== */

/* Cabecera "sello de catálogo": plano azul compacto, sin grid ni
   imagen hero. Continúa la identidad de ficha del archive (sello +
   signatura) y se distingue del hero narrativo de Relatos. */
.recurso-single-catalog {
	background-color: var(--color-logo-azul);
	border-bottom: 1px solid rgba(251, 247, 240, 0.25);
	padding: var(--space-lg) 0 var(--space-2xl);
}

/* Migas de pan sobre terracota (solo single de recurso) */
body.single-recurso .ra-breadcrumbs {
	color: var(--color-salar);
}

body.single-recurso .ra-breadcrumbs a {
	color: var(--color-salar);
}

body.single-recurso .ra-breadcrumbs a:hover,
body.single-recurso .ra-breadcrumbs a:focus-visible {
	color: var(--color-blanco);
}

body.single-recurso .ra-breadcrumbs__sep {
	color: var(--color-salar);
}

body.single-recurso .ra-breadcrumbs__current {
	color: var(--color-blanco);
}

/* Filete editorial bajo las migas: regla de cabecera del hero (igual que
   Relatos) sobre el plano continuo azul. */
body.single-recurso .recurso-single-catalog .ra-breadcrumbs {
	border-bottom: 1px solid rgba(251, 247, 240, 0.22);
	padding-bottom: var(--space-md);
}

/* Fila del sello: glifo dentro de recuadro de archivo + signatura */
.recurso-single-catalog__fila {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	margin-top: var(--space-md);
}

.recurso-single-catalog__sello {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	color: var(--color-salar);
	border: 1.5px solid rgba(251, 247, 240, 0.7);
	border-radius: var(--radius-sm);
}

.recurso-single-catalog__signatura {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-salar);
	margin: 0;
}

.recurso-single-catalog__signatura-sep {
	margin: 0 var(--space-sm);
}

.recurso-single-catalog__title {
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--color-salar);
	max-width: 30ch;
	margin-top: var(--space-md);
	margin-bottom: 0;
	text-wrap: balance;
}

.recurso-single-catalog__abstract {
	font-family: var(--font-body);
	font-size: clamp(1rem, 2vw, 1.125rem);
	line-height: 1.7;
	color: var(--color-salar);
	max-width: 60ch;
	margin-top: var(--space-md);
	margin-bottom: 0;
}

/* Plano continuo azul: la misma superficie en todo el single. La
   jerarquía se apoya en la lámina (papel), los filetes y la tipografía,
   no en cambios de fondo entre secciones. */
.recurso-single-content {
	background-color: var(--color-logo-azul);
	padding: var(--space-3xl) 0;
}

.recurso-single-content__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2xl);
}

/* Columna principal */
.recurso-single-main__body {
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.8;
	color: var(--color-salar);
	max-width: 68ch;
	text-wrap: pretty;
}

.recurso-single-main__body > :first-child {
	margin-top: 0;
}

.recurso-single-main__body > :last-child {
	margin-bottom: 0;
}

.recurso-single-main__body h2 {
	font-family: var(--font-heading);
	font-size: clamp(1.375rem, 3vw, 1.75rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-salar);
	margin-top: var(--space-2xl);
	margin-bottom: var(--space-md);
}

.recurso-single-main__body h3 {
	font-family: var(--font-heading);
	font-size: clamp(1.125rem, 2.5vw, 1.375rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-salar);
	margin-top: var(--space-xl);
	margin-bottom: var(--space-sm);
}

.recurso-single-main__body p {
	margin-bottom: var(--space-lg);
}

.recurso-single-main__body ul,
.recurso-single-main__body ol {
	margin-bottom: var(--space-lg);
	padding-left: var(--space-xl);
}

.recurso-single-main__body li {
	margin-bottom: var(--space-sm);
}

.recurso-single-main__body a {
	color: var(--color-salar);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.recurso-single-main__body a:hover,
.recurso-single-main__body a:focus-visible {
	color: var(--color-blanco);
}

.recurso-single-main__body blockquote {
	margin: var(--space-xl) 0;
	padding: 0 0 0 var(--space-lg);
	border-left: 3px solid rgba(251, 247, 240, 0.7);
	font-family: var(--font-heading);
	font-style: italic;
	line-height: 1.5;
	color: var(--color-salar);
}

/* Lámina: único panel de papel (pergamino) sobre el plano azul. Es el
   objeto material del recurso; se eleva con sombra suave. */
.recurso-single-main__lamina {
	margin: 0 0 var(--space-2xl);
	padding: var(--space-md);
	border: 1px solid rgba(72, 32, 7, 0.22);
	background-color: var(--bg-pergamino);
	box-shadow: var(--shadow-md);
	max-width: 720px;
}

.recurso-single-main__lamina-img {
	display: block;
	width: 100%;
	height: auto;
}

.recurso-single-main__lamina-caption {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--color-texto-suave);
	margin: var(--space-sm) 0 0;
}

/* Sidebar: ficha del archivo como notas al margen sobre el plano (sin
   tarjetas ni sombras). Filetes salar translúcidos sobre azul. */
.recurso-single-sidebar {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid rgba(251, 247, 240, 0.25);
	padding-top: var(--space-xl);
}

.recurso-single-sidebar__block {
	margin: 0;
}

.recurso-single-sidebar__block + .recurso-single-sidebar__block {
	border-top: 1px solid rgba(251, 247, 240, 0.25);
	padding-top: var(--space-xl);
}

.recurso-single-sidebar__eyebrow {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-salar);
	margin-bottom: var(--space-md);
}

/* Ficha: filas label/valor separadas por filete cálido */
.recurso-single-info {
	margin: 0;
}

.recurso-single-info__row {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding-bottom: var(--space-md);
	margin-bottom: var(--space-md);
	border-bottom: 1px solid rgba(251, 247, 240, 0.25);
}

.recurso-single-info__row:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}

.recurso-single-info__label {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-salar);
}

.recurso-single-info__value {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--color-salar);
	margin: 0;
	overflow-wrap: anywhere;
}

/* Acceso al material: enlace editorial sobre el plano azul (tinta
   salar/blanco, AA sobre #0172C2). */
.recurso-single-action {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	min-height: 44px;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-salar);
	text-decoration: none;
}

.recurso-single-action + .recurso-single-action {
	margin-top: var(--space-md);
}

.recurso-single-action:hover,
.recurso-single-action:focus-visible {
	color: var(--color-blanco);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.recurso-single-action__glifo {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	width: 1.125rem;
	height: 1.125rem;
	color: var(--color-salar);
}

.recurso-single-action__texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.recurso-single-action__label {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-salar);
}

.recurso-single-action__meta {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 500;
	color: rgba(251, 247, 240, 0.7);
}

/* Recursos afines: franja azul con fichas de catálogo */
.recurso-single-related {
	background-color: var(--color-logo-azul);
	padding: var(--space-2xl) 0 var(--space-3xl);
}

.recurso-single-related__title {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-salar);
	margin: 0 0 var(--space-xl);
}

.recurso-single-related__title::before {
	content: "";
	width: 24px;
	height: 2px;
	background-color: var(--color-salar);
	flex-shrink: 0;
}

/* Footer (Volver a Recursos) */
.recurso-single-footer {
	background-color: var(--color-logo-azul);
	padding: var(--space-xl) 0;
	text-align: center;
	border-top: 1px solid rgba(251, 247, 240, 0.25);
}

/* Foco visible sobre el plano azul del single de recurso */
body.single-recurso .ra-breadcrumbs :focus-visible,
body.single-recurso .recurso-single-catalog :focus-visible,
body.single-recurso .recurso-single-related :focus-visible,
body.single-recurso .recurso-single-footer :focus-visible {
	outline-color: var(--color-salar);
}

/* Fichas de recursos afines — variante clara sobre el plano azul. La base
   .recurso-card--ficha se comparte con búsqueda y archive: estos overrides
   van scoped al single de recurso (espejo de los del archive). */
.recurso-single-related .recurso-card--ficha .recurso-card__sello {
	border-color: var(--color-logo-bruno);
	color: var(--color-logo-bruno);
}

.recurso-single-related .recurso-card--ficha .recurso-card__signatura {
	color: var(--color-logo-azul-deep);
}

.recurso-single-related .recurso-card--ficha .recurso-card__link:hover .recurso-card__title,
.recurso-single-related .recurso-card--ficha .recurso-card__link:focus-visible .recurso-card__title {
	color: var(--color-logo-azul-deep);
}

.recurso-single-related .recurso-card--ficha .recurso-card__pie {
	border-top-color: rgba(1, 90, 158, 0.28);
}

.recurso-single-related .recurso-card--ficha .recurso-card__accion {
	color: var(--color-logo-azul-deep);
}

.recurso-single-related .recurso-card--ficha .recurso-card__accion:hover,
.recurso-single-related .recurso-card--ficha .recurso-card__accion:focus-visible {
	color: var(--color-logo-azul);
}

.recurso-single-related .recurso-card--ficha .recurso-card__link:focus-visible {
	outline-color: var(--color-logo-azul-deep);
}

.recurso-single-related .recurso-card--ficha .recurso-card__accion:focus-visible {
	outline-color: var(--color-logo-azul-deep);
}

/* ==================================================
   Responsive — Single Recurso (1024px+)
   ================================================== */

@media (min-width: 1024px) {
	.recurso-single-content__inner {
		grid-template-columns: 1fr 340px;
		gap: var(--space-xl);
	}

	.recurso-single-sidebar {
		border-top: 0;
		padding-top: 0;
		border-left: 1px solid rgba(251, 247, 240, 0.25);
		padding-left: var(--space-xl);
	}
}

/* ==================================================
   Single Relato — Header
   ================================================== */

.relato-single-hero-section {
	background-color: var(--color-logo-azul);
	background-image: linear-gradient(180deg, var(--color-logo-azul) 0%, var(--color-logo-azul-deep) 100%);
	border-bottom: 1px solid rgba(251, 247, 240, 0.25);
	padding: var(--space-2xl) 0 var(--space-3xl);
}

.relato-single-header__pueblo {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-logo-azul-deep);
	background-color: var(--color-salar);
	padding: var(--space-xs) var(--space-md);
	border-radius: var(--radius-pill);
	margin-bottom: var(--space-md);
}

.relato-single-header__title {
	font-family: var(--font-heading);
	font-size: clamp(2.25rem, 4.5vw, 3.25rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--color-salar);
	max-width: 30ch;
	margin-bottom: var(--space-md);
	text-wrap: balance;
}

.relato-single-header__narradores {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-salar);
	border-top: 1px solid rgba(251, 247, 240, 0.25);
	padding-top: var(--space-md);
	margin-top: var(--space-lg);
	margin-bottom: 0;
}

.relato-single-header__narradores-sep {
	margin: 0 var(--space-xs);
	color: var(--color-blanco);
}

.relato-single-header__narradores-names {
	font-family: var(--font-body);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--color-blanco);
}

.relato-single-header__bajada {
	font-family: var(--font-body);
	font-size: clamp(1.125rem, 2vw, 1.25rem);
	line-height: 1.7;
	color: var(--color-salar);
	max-width: 65ch;
}

/* Migas de pan sobre terracota (solo single de relato) */
body.single-relato .ra-breadcrumbs {
	color: var(--color-salar);
}

body.single-relato .ra-breadcrumbs a {
	color: var(--color-salar);
}

body.single-relato .ra-breadcrumbs a:hover,
body.single-relato .ra-breadcrumbs a:focus-visible {
	color: var(--color-blanco);
}

body.single-relato .ra-breadcrumbs__sep {
	color: var(--color-salar);
}

body.single-relato .ra-breadcrumbs__current {
	color: var(--color-blanco);
}

/* Filete editorial bajo las migas: regla de cabecera del hero */
body.single-relato .relato-single-hero-section .ra-breadcrumbs {
	border-bottom: 1px solid rgba(251, 247, 240, 0.22);
	padding-bottom: var(--space-md);
}

/* Foco visible sobre el plano azul del single de relato */
body.single-relato .ra-breadcrumbs :focus-visible,
body.single-relato .relato-single-header :focus-visible,
body.single-relato .relato-single-hero-section :focus-visible,
body.single-relato .relato-single-audio :focus-visible,
body.single-relato .relato-single-archivo :focus-visible,
body.single-relato .relato-single-footer :focus-visible {
	outline-color: var(--color-salar);
}

/* Dentro de los paneles claros → azul-deep */
body.single-relato .relato-single-audio__panel :focus-visible,
body.single-relato .relato-single-content__page :focus-visible,
body.single-relato .relato-single-gallery__sheet :focus-visible {
	outline-color: var(--color-logo-azul-deep);
}

/* ==================================================
   Single Relato — Hero
   ================================================== */

/* Grilla editorial del hero: texto e imagen. Mobile First: 1 columna en
   orden natural (pueblo, título, bajada, narradores, imagen). Escritorio:
   8fr texto / 4fr imagen, con el texto alineado a la izquierda y la
   fotografía como acompañante, no protagonista. */
.relato-single-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	align-items: start;
}

.relato-single-hero__content {
	text-align: left;
}

.relato-single-hero__grid--no-image .relato-single-hero__content {
	max-width: 70ch;
}

.relato-single-hero__media {
	min-width: 0;
}

.relato-single-hero {
	margin: 0;
}

.relato-single-hero__image {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Fotografía de acompañamiento: 4/3 (patrimonial horizontal), sin marco,
   apoyada directamente sobre el azul del hero. Con object-fit: cover
   mantiene proporción y el radio suaviza el borde sobre el fondo. */
.relato-single-hero__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
	border-radius: var(--radius-md);
}

.relato-single-hero__caption {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--color-salar);
	padding: var(--space-sm) 0 0;
	text-align: left;
}

@media (min-width: 1024px) {
	.relato-single-hero__grid {
		grid-template-columns: 8fr 4fr;
		column-gap: var(--space-2xl);
	}

	.relato-single-hero__grid--no-image {
		grid-template-columns: 1fr;
	}
}

/* ==================================================
   Single Relato — Audio
   ================================================== */

.relato-single-audio {
	background-color: var(--color-logo-azul);
}

.relato-single-audio__panel {
	background-color: var(--bg-pergamino);
	border: var(--panel-filete);
	border-radius: var(--radius-xl);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.relato-single-audio__title {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-obsidiana);
	margin: 0 0 var(--space-lg);
}

.relato-single-audio__title::before {
	content: "";
	width: 24px;
	height: 2px;
	background-color: var(--color-logo-azul-deep);
	flex-shrink: 0;
}

.relato-single-audio__player {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.relato-single-audio__element {
	width: 100%;
	border-radius: var(--radius-md);
}

.relato-single-audio__download {
	margin: 0;
}

.relato-single-audio__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	min-height: 44px;
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-logo-azul-deep);
	text-decoration: none;
}

.relato-single-audio__link:hover,
.relato-single-audio__link:focus-visible {
	color: var(--color-logo-azul);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.relato-single-audio__link-icon {
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
}

/* ==================================================
   Single Relato — Content + Sidebar Grid
   ================================================== */

.relato-single-content {
	background-color: var(--color-logo-azul);
	padding: var(--space-2xl) 0;
}

.relato-single-content__page {
	background-color: var(--bg-pergamino);
	border: var(--panel-filete);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-md);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.relato-single-content__inner {
	display: grid;
	gap: var(--space-xl);
}

/* Cuerpo del relato: página de lectura */
.relato-single-main__body {
	font-family: var(--font-body);
	font-size: clamp(1rem, 2vw, 1.0625rem);
	line-height: 1.8;
	color: var(--color-obsidiana);
	max-width: 65ch;
	text-wrap: pretty;
}

.relato-single-main__body > :first-child {
	margin-top: 0;
}

.relato-single-main__body > :last-child {
	margin-bottom: 0;
}

.relato-single-main__body p {
	margin-bottom: var(--space-lg);
}

.relato-single-main__body h2 {
	font-family: var(--font-heading);
	font-size: clamp(1.375rem, 3vw, 1.75rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-obsidiana);
	margin-top: var(--space-2xl);
	margin-bottom: var(--space-md);
}

.relato-single-main__body h3 {
	font-family: var(--font-heading);
	font-size: clamp(1.125rem, 2.5vw, 1.375rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-obsidiana);
	margin-top: var(--space-xl);
	margin-bottom: var(--space-sm);
}

.relato-single-main__body ul,
.relato-single-main__body ol {
	margin-bottom: var(--space-lg);
	padding-left: var(--space-xl);
}

.relato-single-main__body li {
	margin-bottom: var(--space-sm);
}

.relato-single-main__body a {
	color: var(--color-logo-azul-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.relato-single-main__body a:hover,
.relato-single-main__body a:focus-visible {
	color: var(--color-logo-azul);
}

.relato-single-main__body blockquote {
	margin: var(--space-xl) 0;
	padding: 0 0 0 var(--space-lg);
	border-left: 3px solid var(--color-logo-azul-deep);
	font-family: var(--font-heading);
	font-size: clamp(1.125rem, 2.5vw, 1.25rem);
	font-style: italic;
	line-height: 1.5;
	color: var(--color-obsidiana);
}

.relato-single-main__body blockquote p {
	margin-bottom: var(--space-md);
}

.relato-single-main__body blockquote p:last-child {
	margin-bottom: 0;
}

.relato-single-main__body img {
	max-width: 100%;
	height: auto;
}

/* Sidebar: notas marginales (sin tarjetas ni sombras) */
.relato-single-sidebar {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid rgba(72, 32, 7, 0.18);
	padding-top: var(--space-xl);
}

.relato-single-sidebar__block {
	margin: 0;
}

/* Filetes cálidos entre notas al margen: sustituyen la línea gris de widget */
.relato-single-sidebar__block + .relato-single-sidebar__block {
	border-top: 1px solid rgba(72, 32, 7, 0.18);
	padding-top: var(--space-xl);
}

.relato-single-sidebar__label {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--tinta-suave);
	margin-bottom: var(--space-sm);
}

.relato-single-sidebar__comunidad {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	min-height: 44px;
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-obsidiana-calido);
}

.relato-single-sidebar__comunidad-icon {
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	color: var(--color-logo-azul-deep);
}

a.relato-single-sidebar__comunidad {
	color: var(--color-obsidiana-calido);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a.relato-single-sidebar__comunidad:hover,
a.relato-single-sidebar__comunidad:focus-visible {
	color: var(--color-logo-azul);
}

.relato-single-sidebar__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.relato-single-sidebar__list:not(.relato-single-sidebar__list--recursos) li + li::before {
	content: "·";
	margin: 0 var(--space-sm);
	color: rgba(72, 32, 7, 0.5);
}

.relato-single-sidebar__item {
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--tinta);
}

.relato-single-sidebar__list--recursos {
	flex-direction: column;
	gap: var(--space-xs);
	align-items: stretch;
}

.relato-single-sidebar__link {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	min-height: 44px;
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--tinta);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.relato-single-sidebar__link:hover,
.relato-single-sidebar__link:focus-visible {
	color: var(--color-logo-azul);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.relato-single-sidebar__link-icon {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	color: var(--color-logo-azul-deep);
}

.relato-single-sidebar__text {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	line-height: 1.75;
	color: var(--tinta);
	border-left: 2px solid rgba(72, 32, 7, 0.28);
	padding-left: var(--space-md);
}

/* ==================================================
   Single Relato — Archivo visual (Video + Galería)
   ================================================== */

.relato-single-archivo {
	background-color: var(--color-logo-azul);
	padding: var(--space-2xl) 0 var(--space-3xl);
}

.relato-single-archivo__title {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-salar);
	margin: 0 0 var(--space-xl);
}

.relato-single-archivo__title::before {
	content: "";
	width: 24px;
	height: 2px;
	background-color: var(--color-salar);
	flex-shrink: 0;
}

/* ---------- Bloque Video ---------- */

.relato-single-video {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	margin-bottom: var(--space-2xl);
}

.relato-single-archivo .relato-single-video:last-child {
	margin-bottom: 0;
}

.relato-single-video__title {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--color-salar);
	margin: 0;
}

.relato-single-video__title::before {
	content: "";
	width: 16px;
	height: 2px;
	background-color: var(--color-salar);
	flex-shrink: 0;
}

.relato-single-video__wrapper {
	position: relative;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-md);
	background-color: var(--color-obsidiana-calido);
}

.relato-single-video__wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.relato-single-video__fallback {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	color: var(--color-salar);
	margin: 0;
}

.relato-single-video__fallback a {
	color: var(--color-blanco);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- Bloque Galería ---------- */

.relato-single-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

.relato-single-gallery__title {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--color-salar);
	margin: 0;
}

.relato-single-gallery__title::before {
	content: "";
	width: 16px;
	height: 2px;
	background-color: var(--color-salar);
	flex-shrink: 0;
}

.relato-single-gallery__sheet {
	background-color: var(--bg-pergamino);
	border: var(--panel-filete);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-md);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.relato-single-gallery__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

.relato-single-gallery__item {
	margin: 0;
}

.relato-single-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-md);
	background-color: var(--color-gris-100);
}

.relato-single-gallery__caption {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--color-texto-suave);
	padding: var(--space-md) var(--space-sm) 0;
	text-align: center;
}

/* ==================================================
   Single Relato — Footer (Volver)
   ================================================== */

.relato-single-footer {
	background-color: var(--color-logo-azul);
	padding: var(--space-xl) 0;
	text-align: center;
	border-top: 1px solid rgba(251, 247, 240, 0.25);
}

/* ==================================================
   Responsive — Single Relato (768px+)
   ================================================== */

@media (min-width: 768px) {
	.relato-single-hero-section {
		padding: var(--space-3xl) 0 var(--space-2xl);
	}

	.relato-single-audio__player {
		flex-direction: row;
		align-items: center;
		gap: var(--space-lg);
	}

	.relato-single-audio__element {
		flex: 1 1 auto;
		min-width: 0;
	}

	.relato-single-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==================================================
   Responsive — Single Relato (1024px+)
   ================================================== */

@media (min-width: 1024px) {
	.relato-single-content__inner {
		grid-template-columns: 1fr 340px;
		gap: var(--space-xl);
	}

	.relato-single-sidebar {
		border-top: 0;
		padding-top: 0;
		border-left: 1px solid rgba(72, 32, 7, 0.22);
		padding-left: var(--space-xl);
	}

	.relato-single-gallery__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==================================================
   Sección Contacto — Home ("La Recepción")
   --------------------------------------------------
   La sección cierra la Home como la entrada de un centro
   de interpretación: un único panel continuo reúne los
   grupos informativos ("Cómo llegar" y "Escríbenos"), el
   formulario como libro de visitas y la coda institucional.
   Solo los campos del formulario son superficie clara.
   ================================================== */

.section-contacto {
	background: var(--color-logo-azul);
}

.section-contacto__header {
	margin-bottom: var(--space-2xl);
}

.section-contacto__title {
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 700;
	color: var(--color-salar);
	margin-bottom: var(--space-sm);
}

.section-contacto__subtitle {
	font-family: var(--font-body);
	font-size: 1.125rem;
	color: var(--color-salar);
	margin-bottom: var(--space-sm);
}

.section-contacto__desc {
	font-size: 1rem;
	color: var(--color-salar);
	line-height: 1.6;
	max-width: 60ch;
}

/* Panel único continuo: la mesa de recepción */
.section-contacto__panel {
	background-color: var(--surface-pergamino);
	border: var(--panel-filete);
	border-radius: var(--radius-xl);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.section-contacto__grid {
	display: grid;
	gap: var(--space-2xl);
}

/* ---------- Grupos informativos ---------- */
.section-contacto__info {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}

.section-contacto__grupo {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.section-contacto__grupo-titulo {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-salar);
	margin: 0;
}

.section-contacto__grupo-titulo::before {
	content: "";
	width: 24px;
	height: 2px;
	background-color: var(--color-salar);
	flex-shrink: 0;
}

.section-contacto__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
}

.section-contacto__icon {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	color: var(--color-salar);
	margin-top: 5px;
}

.section-contacto__label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-salar);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 2px;
}

.section-contacto__text {
	font-size: 1rem;
	color: var(--color-salar);
	line-height: 1.5;
}

.section-contacto__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	gap: 4px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-salar);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	word-break: break-all;
}

.section-contacto__link:hover,
.section-contacto__link:focus-visible {
	color: var(--color-blanco);
}

/* ---------- Formulario (libro de visitas) ---------- */
.section-contacto__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.section-contacto__form-title {
	font-family: var(--font-heading);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--color-salar);
	margin: 0;
}

.section-contacto__form-lead {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-salar);
	margin: 0;
}

/* Los campos quedan como única superficie clara del panel */
.section-contacto .ra-contact-form label {
	color: var(--color-salar);
}

.section-contacto .ra-contact-form .wpcf7-text,
.section-contacto .ra-contact-form .wpcf7-email,
.section-contacto .ra-contact-form .wpcf7-textarea,
.section-contacto .ra-contact-form .wpcf7-select {
	border-color: var(--color-piedra);
}

.section-contacto .ra-contact-form .wpcf7-submit {
	min-height: 44px;
	color: var(--color-obsidiana);
	background-color: var(--color-salar);
	border-color: var(--color-salar);
}

.section-contacto .ra-contact-form .wpcf7-submit:hover,
.section-contacto .ra-contact-form .wpcf7-submit:focus-visible {
	color: var(--color-obsidiana);
	background-color: var(--color-blanco);
	border-color: var(--color-blanco);
}

.section-contacto .ra-contact-form .wpcf7-not-valid-tip {
	color: #ffd9d4;
}

.section-contacto .ra-contact-form .wpcf7-response-output {
	background-color: transparent;
	border-color: rgba(251, 247, 240, 0.35);
	color: var(--color-salar);
}

.section-contacto .ra-contact-form form.sent .wpcf7-response-output,
.section-contacto .ra-contact-form form.invalid .wpcf7-response-output,
.section-contacto .ra-contact-form form.failed .wpcf7-response-output,
.section-contacto .ra-contact-form form.aborted .wpcf7-response-output,
.section-contacto .ra-contact-form form.spam .wpcf7-response-output {
	background-color: transparent;
}

/* ---------- Coda institucional (cierre de la mesa) ---------- */
.section-contacto__coda {
	margin-top: var(--space-2xl);
	padding-top: var(--space-lg);
	border-top: 1px solid rgba(251, 247, 240, 0.28);
	text-align: center;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.section-contacto__coda-line {
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 2.5vw, 1.625rem);
	font-style: italic;
	line-height: 1.4;
	color: var(--color-salar);
	margin: 0 0 var(--space-md);
}

.section-contacto__coda-signature {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-salar);
	margin: 0;
}

/* ==================================================
   Página de Contacto — Page Template
   Concepto "La Carta": cabecera editorial azul,
   formulario como protagonista sobre una hoja hueso y
   datos institucionales como marginalia sobre el azul.
   ================================================== */

/* ---------- Cabecera editorial ---------- */
.page-contacto__hero {
	background-color: var(--color-logo-azul);
	color: var(--color-salar);
	padding-top: var(--space-3xl);
	padding-bottom: var(--space-2xl);
}

.page-contacto__eyebrow {
	color: var(--color-salar);
	margin-bottom: var(--space-md);
}

.page-contacto__eyebrow::before {
	content: "";
	display: inline-block;
	width: 40px;
	height: 2px;
	background-color: var(--color-salar);
	flex-shrink: 0;
	margin-right: var(--space-md);
	opacity: 0.7;
}

.page-contacto__title {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--color-salar);
	margin: 0 0 var(--space-md);
	max-width: 18ch;
	text-wrap: balance;
}

.page-contacto__lead {
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--color-salar);
	max-width: 60ch;
	margin: 0;
}

/* ---------- Cuerpo: mesa azul ---------- */
.page-contacto__cuerpo {
	background-color: var(--color-logo-azul);
	padding-top: var(--space-2xl);
	padding-bottom: var(--space-3xl);
}

.page-contacto__content {
	background-color: var(--surface-pergamino);
	border: var(--panel-filete);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	margin-bottom: var(--space-xl);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-obsidiana);
}

.page-contacto__grid {
	display: grid;
	gap: var(--space-xl);
	align-items: start;
}

/* ---------- Hoja (la carta): el formulario ----------
   Punto focal de la página: se levanta sobre la mesa azul con
   la sombra mayor del sistema. Todo lo demás queda secundario. */
.page-contacto__letter {
	background-color: var(--surface-pergamino);
	border: var(--panel-filete);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.page-contacto__form-title {
	font-family: var(--font-heading);
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--color-logo-azul-deep);
	margin: 0 0 var(--space-sm);
}

.page-contacto__form-lead {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--tinta-suave);
	margin: 0 0 var(--space-lg);
	max-width: 55ch;
}

/* Labels de la hoja: signatura mono de la misma jerarquía editorial.
   Se mantienen visibles y con contraste AA sobre hueso. */
.page-contacto .ra-contact-form label {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-obsidiana);
	margin-bottom: var(--space-xs);
}

.page-contacto .ra-contact-form .wpcf7-not-valid-tip {
	font-size: 0.8125rem;
	color: var(--color-alerta);
	margin-top: var(--space-xs);
}

.page-contacto .ra-contact-form .wpcf7-response-output {
	border-width: 1px;
	border-radius: var(--radius-md);
	font-size: 0.9375rem;
	line-height: 1.5;
	padding: var(--space-sm) var(--space-md);
	margin: 0;
}

.page-contacto .ra-contact-form .wpcf7-submit {
	min-height: 48px;
	color: var(--color-salar);
	background-color: var(--color-logo-bruno);
	border-color: var(--color-logo-bruno);
}

.page-contacto .ra-contact-form .wpcf7-submit:hover,
.page-contacto .ra-contact-form .wpcf7-submit:focus-visible {
	color: var(--color-salar);
	background-color: var(--color-logo-azul-deep);
	border-color: var(--color-logo-azul-deep);
}

.page-contacto .ra-contact-form .wpcf7-submit:focus {
	outline-color: var(--color-logo-azul-deep);
}

/* Foco de inputs dentro de la hoja: acento azul-deep sobre hueso */
.page-contacto .ra-contact-form .wpcf7-text:focus,
.page-contacto .ra-contact-form .wpcf7-email:focus,
.page-contacto .ra-contact-form .wpcf7-textarea:focus,
.page-contacto .ra-contact-form .wpcf7-select:focus {
	border-color: var(--color-logo-azul-deep);
	box-shadow: 0 0 0 3px rgba(1, 90, 158, 0.15);
}

.page-contacto .ra-contact-form .wpcf7-spinner {
	border-top-color: var(--color-logo-azul);
}

.page-contacto .ra-contact-form__recaptcha-note a:hover,
.page-contacto .ra-contact-form__recaptcha-note a:focus-visible {
	color: var(--color-obsidiana);
}

.page-contacto .ra-contact-form form.sent .wpcf7-response-output,
.page-contacto .ra-contact-form form.invalid .wpcf7-response-output,
.page-contacto .ra-contact-form form.failed .wpcf7-response-output,
.page-contacto .ra-contact-form form.aborted .wpcf7-response-output,
.page-contacto .ra-contact-form form.spam .wpcf7-response-output {
	background-color: var(--color-blanco);
}

/* Navegación post-envío: solo CSS. Se revela cuando el formulario
   CF7 queda en estado sent (funciona también sin JS: CF7 devuelve
   la página con la clase en el <form>). Si el navegador no soporta
   :has(), la acción queda oculta sin romper el mensaje de éxito. */
.page-contacto__next {
	display: none;
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid rgba(23, 19, 16, 0.2);
}

.page-contacto .ra-contact-form:has(form.sent) ~ .page-contacto__next {
	display: block;
}

.page-contacto__next-label {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--tinta-suave);
	margin: 0 0 var(--space-md);
}

/* Botón "Volver al inicio" dentro de la hoja: bruno con hover azul-deep,
   coherente con el resto del sistema (no usa el btn-primary global terracota). */
.page-contacto__next .btn-primary {
	background-color: var(--color-logo-bruno);
	color: var(--color-salar);
	border-color: var(--color-logo-bruno);
}

.page-contacto__next .btn-primary:hover,
.page-contacto__next .btn-primary:focus-visible {
	background-color: var(--color-logo-azul-deep);
	border-color: var(--color-logo-azul-deep);
	color: var(--color-salar);
}

/* ---------- Marginalia: datos institucionales sobre azul ----------
   Rol secundario: debe acompañar sin competir con la hoja. Los textos
   conservan salar (AA); solo se atenúan lo decorativo (iconos, filetes). */
.page-contacto__marginalia {
	color: var(--color-salar);
}

.page-contacto__marginalia-title {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1.4;
	color: var(--color-salar);
	margin: 0 0 var(--space-md);
}

.page-contacto__marginalia-title::before {
	content: "";
	width: 40px;
	height: 2px;
	background-color: rgba(251, 247, 240, 0.45);
	flex-shrink: 0;
}

.page-contacto__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-md);
	padding: var(--space-sm) 0;
	border-top: 1px solid rgba(251, 247, 240, 0.16);
}

.page-contacto__item:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.page-contacto__icon {
	flex-shrink: 0;
	width: 0.875rem;
	height: 0.875rem;
	color: rgba(251, 247, 240, 0.65);
	margin-top: 4px;
}

.page-contacto__item-body {
	min-width: 0;
}

.page-contacto__label {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1.4;
	color: var(--color-salar);
	margin-bottom: 2px;
}

.page-contacto__text {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--color-salar);
}

.page-contacto__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	gap: 4px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-salar);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	word-break: break-all;
}

.page-contacto__link:hover,
.page-contacto__link:focus-visible {
	color: var(--color-blanco);
}

/* Foco visible sobre las superficies azules del logo */
.page-contacto__hero :focus-visible,
.page-contacto__marginalia :focus-visible,
.page-contacto__coda :focus-visible {
	outline-color: var(--color-salar);
}

/* Foco visible dentro de los paneles claros: acento azul-deep */
.page-contacto__letter :focus-visible {
	outline-color: var(--color-logo-azul-deep);
}

/* ---------- Coda institucional (cierre de la mesa) ---------- */
.page-contacto__coda {
	margin-top: var(--space-2xl);
	padding-top: var(--space-lg);
	border-top: 1px solid rgba(251, 247, 240, 0.28);
	text-align: center;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.page-contacto__coda-line {
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 2.5vw, 1.625rem);
	font-style: italic;
	line-height: 1.4;
	color: var(--color-salar);
	margin: 0 0 var(--space-md);
}

.page-contacto__coda-signature {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-salar);
	margin: 0;
}

/* ==================================================
   Responsive — Contacto (1024px+)
   ================================================== */

@media (min-width: 1024px) {
	.section-contacto__grid {
		grid-template-columns: 380px 1fr;
		align-items: start;
	}

	.page-contacto__grid {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--space-2xl);
		align-items: start;
	}
}

/* ==================================================
   Contact Form 7 — Estilos Globales
   ================================================== */

.ra-contact-form .wpcf7 {
	max-width: 100%;
}

.ra-contact-form .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.ra-contact-form .wpcf7-form-control-wrap {
	display: block;
}

.ra-contact-form label {
	display: block;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-obsidiana);
	margin-bottom: var(--space-xs);
}

.ra-contact-form .wpcf7-text,
.ra-contact-form .wpcf7-email,
.ra-contact-form .wpcf7-textarea,
.ra-contact-form .wpcf7-select {
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-obsidiana);
	background-color: var(--color-blanco);
	border: 1px solid var(--color-gris-200);
	border-radius: var(--radius-md);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	box-sizing: border-box;
}

.ra-contact-form .wpcf7-text:focus,
.ra-contact-form .wpcf7-email:focus,
.ra-contact-form .wpcf7-textarea:focus,
.ra-contact-form .wpcf7-select:focus {
	outline: none;
	border-color: var(--color-terracota);
	box-shadow: 0 0 0 3px rgba(181, 84, 63, 0.15);
}

.ra-contact-form .wpcf7-textarea {
	resize: vertical;
	min-height: 120px;
}

.ra-contact-form .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-sm) var(--space-lg);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-blanco);
	background-color: var(--color-terracota);
	border: 2px solid var(--color-terracota);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
	line-height: 1.4;
}

.ra-contact-form .wpcf7-submit:hover {
	background-color: #9C4835;
	border-color: #9C4835;
}

.ra-contact-form .wpcf7-submit:focus {
	outline: 2px solid var(--color-terracota);
	outline-offset: 2px;
}

.ra-contact-form .wpcf7-not-valid-tip {
	font-size: 0.8125rem;
	color: var(--color-alerta);
	margin-top: var(--space-xs);
}

.ra-contact-form .wpcf7-response-output {
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-md);
	font-size: 0.9375rem;
	line-height: 1.5;
	margin: 0;
	border: 1px solid var(--color-gris-200);
	background-color: var(--color-gris-100);
	color: var(--color-obsidiana);
}

/* Estados normalizados a los tokens de la paleta del sistema */
.ra-contact-form form.sent .wpcf7-response-output {
	background-color: transparent;
	border-color: var(--color-exito);
	color: var(--color-exito);
}

.ra-contact-form form.invalid .wpcf7-response-output,
.ra-contact-form form.failed .wpcf7-response-output,
.ra-contact-form form.aborted .wpcf7-response-output {
	background-color: transparent;
	border-color: var(--color-alerta);
	color: var(--color-alerta);
}

.ra-contact-form form.spam .wpcf7-response-output {
	background-color: transparent;
	border-color: var(--color-pampa);
	color: var(--color-obsidiana);
}

.ra-contact-form .wpcf7-spinner {
	border-color: var(--color-gris-200);
	border-top-color: var(--color-terracota);
}

/* Badge de Google reCAPTCHA v3: oculto solo visualmente. El script de
   Google sigue cargándose y la verificación v3 (token + score) funciona
   igual. Se usa `visibility: hidden` (no `display: none`) para no interferir
   con el render del badge. La divulgación legal se muestra bajo el
   formulario en .ra-contact-form__recaptcha-note. */
.grecaptcha-badge {
	visibility: hidden;
}

/* Aviso de privacidad reCAPTCHA: texto discreto bajo el formulario.
   Tintas AA sobre pergamino/hueso (--color-texto-suave ≈5:1 y
   --color-logo-azul-deep ≈5:1). */
.ra-contact-form__recaptcha-note {
	margin: var(--space-sm) 0 0;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--color-texto-suave);
}

.ra-contact-form__recaptcha-note a {
	color: var(--color-logo-azul-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ra-contact-form__recaptcha-note a:hover,
.ra-contact-form__recaptcha-note a:focus-visible {
	color: var(--color-logo-azul);
}

.ra-contact-form__recaptcha-note a:focus-visible {
	outline-color: var(--color-logo-azul-deep);
}

/* ==========================================================================
   FASE 1 — Rediseño visual (tokens, header transparente, hero cinematográfico)
   Las secciones restantes de la Home se integrarán en fases posteriores.
   ========================================================================== */

/* ---------- Componentes base ---------- */

:focus-visible {
	outline: 3px solid var(--color-cielo);
	outline-offset: 3px;
}

.eyebrow {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	line-height: 1.4;
}

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

/* Cabeza de sección base (se aplica a secciones en fases posteriores) */
.section-head {
	max-width: 720px;
}

.section-head__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-md);
	color: var(--color-terracota);
	margin-bottom: var(--space-md);
}

.section-head__eyebrow::before {
	content: "";
	width: 40px;
	height: 2px;
	background-color: var(--color-terracota);
	flex-shrink: 0;
	opacity: 0.7;
}

.section-head__title {
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.15;
	color: var(--color-texto);
	margin-bottom: var(--space-md);
}

.section-head__lead {
	font-size: var(--fs-lead);
	font-weight: 300;
	line-height: 1.6;
	color: var(--color-texto-suave);
}

/* Estado sólido al hacer scroll (añadido por header-scroll.js).
   El header oscuro es la base (ver .site-header); is-solid añade
   borde y sombra al superar el umbral de scroll. */
.site-header.is-solid {
	border-bottom-color: rgba(251, 247, 240, 0.14);
	box-shadow: var(--shadow-sm);
}

/* Respetar la barra de administración de WordPress */
body.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

/* ==========================================================================
   Header — Ocultar al hacer scroll (solo móvil <1024px)
   ========================================================================== */

@media (max-width: 1023px) {
	.site-header {
		transition: transform var(--transition-smooth);
	}

	.site-header.is-hidden {
		transform: translateY(-100%);
	}
}

/* ---------- Hero cinematográfico ---------- */

.section-hero {
	align-items: flex-end;
	min-height: 90vh;
	background-color: var(--color-obsidiana-calido);
	background-image: var(--gradient-noche);
}

.section-hero__overlay {
	background-color: transparent;
	background-image: linear-gradient(180deg, rgba(23, 19, 16, 0.62) 0%, rgba(23, 19, 16, 0.28) 45%, rgba(23, 19, 16, 0.78) 100%);
}

.section-hero__content {
	text-align: left;
	max-width: 100%;
	padding: var(--space-2xl) var(--space-lg) var(--space-3xl);
}

.section-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-md);
	color: var(--color-pampa);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
	margin-bottom: var(--space-lg);
}

.section-hero__eyebrow::before {
	content: "";
	width: 40px;
	height: 2px;
	background-color: var(--color-pampa);
	flex-shrink: 0;
	opacity: 0.8;
}

.section-hero__title {
	font-size: var(--fs-display);
	line-height: 1.02;
	letter-spacing: -0.01em;
	max-width: 14ch;
	color: var(--color-salar);
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
	margin-bottom: var(--space-lg);
}

.section-hero__subtitle {
	font-size: var(--fs-lead);
	font-weight: 300;
	line-height: 1.45;
	color: var(--color-blanco);
	max-width: 48ch;
	margin-bottom: var(--space-md);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.section-hero__description {
	max-width: 56ch;
	color: var(--color-gris-200);
	margin-bottom: var(--space-2xl);
}

.section-hero__actions {
	align-items: flex-start;
	flex-direction: row;
	flex-wrap: wrap;
}

.section-hero__actions .btn {
	min-width: 0;
	padding: var(--space-md) var(--space-2xl);
	min-height: 52px;
	border-radius: var(--radius-pill);
}

.section-hero__actions .btn-primary {
	box-shadow: var(--shadow-lg);
	background-color: var(--color-logo-bruno);
	border-color: var(--color-logo-bruno);
	color: var(--color-salar);
}

.section-hero__actions .btn-primary:hover,
.section-hero__actions .btn-primary:focus-visible {
	background-color: var(--color-logo-arena);
	border-color: var(--color-logo-arena);
	color: var(--color-logo-bruno);
}

.section-hero__actions .btn-primary:focus-visible {
	outline: 3px solid var(--color-salar);
	outline-offset: 3px;
}

.section-hero__cta-secondary {
	background-color: rgba(251, 247, 240, 0.14);
	border-color: rgba(251, 247, 240, 0.65);
	color: var(--color-salar);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.section-hero__cta-secondary:hover {
	background-color: var(--color-salar);
	border-color: var(--color-salar);
	color: var(--color-obsidiana-calido);
}

/* Textura de contorno topográfica (solo escritorio, decorativa) */
@media (min-width: 1024px) {
	.section-hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23F5EDE3' stroke-opacity='0.14' stroke-width='1'%3E%3Cpath d='M0 120c80 0 80 40 160 40s80-40 160-40 80 40 160 40 80-40 160-40'/%3E%3Cpath d='M0 240c80 0 80 40 160 40s80-40 160-40 80 40 160 40 80-40 160-40'/%3E%3Cpath d='M0 360c80 0 80 40 160 40s80-40 160-40 80 40 160 40 80-40 160-40'/%3E%3Cpath d='M0 480c80 0 80 40 160 40s80-40 160-40 80 40 160 40 80-40 160-40'/%3E%3C/g%3E%3C/svg%3E");
		background-repeat: repeat;
		opacity: 0.5;
	}
}

/* ---------- Entrada del hero (sutil y accesible) ---------- */

@keyframes ra-fade-up {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.section-hero__content > * {
	opacity: 0;
	animation: ra-fade-up var(--duration-entrance) var(--ease-out) forwards;
}

.section-hero__eyebrow {
	animation-delay: 80ms;
}

.section-hero__title {
	animation-delay: 160ms;
}

.section-hero__subtitle {
	animation-delay: 240ms;
}

.section-hero__description {
	animation-delay: 320ms;
}

.section-hero__actions {
	animation-delay: 400ms;
}

/* Ajustes móviles del hero */
@media (max-width: 767px) {
	.section-hero__content {
		padding-bottom: var(--space-2xl);
	}

	.section-hero__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.section-hero__actions .btn {
		width: 100%;
	}
}

/* ---------- Movimiento reducido (Fase 1) ---------- */

@media (prefers-reduced-motion: reduce) {
	.section-hero__content > * {
		opacity: 1;
		animation: none;
	}

	.site-header {
		transition: none;
	}
}

/* ==========================================================================
   Sistema de movimiento — Fase 1: reveal por scroll (IntersectionObserver)
   Revela bloques estructurales del Home marcados con [data-ra-reveal].
   Progressive enhancement: el estado oculto solo existe bajo html.js
   (inline de header.php), viewports >=768px y prefers-reduced-motion:
   no-preference. Sin JS, en móvil o con movimiento reducido, el contenido
   permanece visible sin animar.
   ========================================================================== */

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
	html.js [data-ra-reveal] {
		opacity: 0;
		transform: translateY(var(--reveal-distance));
		transition: opacity var(--duration-entrance) var(--ease-out),
			transform var(--duration-entrance) var(--ease-out);
	}

	html.js [data-ra-reveal].is-revealed {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   FASE 2 — Rediseño visual (sección "Experiencias destacadas")
   Estilos con ámbito local a la Home: la tarjeta base (.exp-card) también se
   usa en el archive y en los resultados de búsqueda, por lo que no se toca.
   ========================================================================== */

/* Cabecera en formato dividido: texto a la izquierda, enlace a la derecha */
.section-experiencias__header {
	text-align: left;
	margin-bottom: var(--space-2xl);
}

.section-head--split {
	display: grid;
	gap: var(--space-lg);
	max-width: none;
}

.section-head--split .section-head__title {
	margin-bottom: var(--space-md);
}

@media (min-width: 1024px) {
	.section-head--split {
		grid-template-columns: 1fr auto;
		align-items: end;
		gap: var(--space-3xl);
	}
}

.section-head--split .section-experiencias__link,
.section-head--split .section-relatos__link,
.section-head--split .section-recursos__link {
	min-height: 44px;
	padding: var(--space-sm) var(--space-lg);
	border-radius: var(--radius-md);
	font-size: 0.9375rem;
	font-weight: 600;
	gap: var(--space-sm);
	justify-self: start;
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.section-head--split .section-experiencias__link svg,
.section-head--split .section-relatos__link svg,
.section-head--split .section-recursos__link svg {
	transition: transform var(--transition-fast);
}

.section-head--split .section-experiencias__link:hover svg,
.section-head--split .section-experiencias__link:focus-visible svg,
.section-head--split .section-relatos__link:hover svg,
.section-head--split .section-relatos__link:focus-visible svg,
.section-head--split .section-recursos__link:hover svg,
.section-head--split .section-recursos__link:focus-visible svg {
	transform: translateX(4px);
}

@media (min-width: 1024px) {
	.section-head--split .section-experiencias__link,
	.section-head--split .section-relatos__link,
	.section-head--split .section-recursos__link {
		margin-bottom: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.section-head--split .section-experiencias__link svg,
	.section-head--split .section-relatos__link svg,
	.section-head--split .section-recursos__link svg {
		transform: none;
		transition: none;
	}
}

/* Tarjetas de la Home: las fotografías como protagonistas */
.section-experiencias .exp-card {
	background-color: var(--surface-pergamino);
	border-radius: var(--radius-lg);
	box-shadow: none;
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.section-experiencias .exp-card:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-3px);
}

.section-experiencias .exp-card__image-wrapper {
	aspect-ratio: 4 / 3;
}

.section-experiencias .exp-card__image {
	object-position: center;
}

.section-experiencias .exp-card:hover .exp-card__image {
	transform: scale(1.05);
}

/* Badge: tipo de experiencia sobre la imagen */
.section-experiencias .exp-card__link {
	position: relative;
}

.section-experiencias .exp-card__type {
	position: absolute;
	top: var(--space-md);
	left: var(--space-md);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	padding: var(--space-xs) var(--space-sm);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--radius-pill);
	background-color: rgba(20, 16, 10, 0.68);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: var(--color-blanco);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Cuerpo: título principal, meta, extracto breve e indicador */
.section-experiencias .exp-card__body {
	padding: var(--space-lg);
	gap: var(--space-sm);
}

.section-experiencias .exp-card__title {
	order: 1;
}

.section-experiencias .exp-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	order: 2;
	gap: var(--space-sm) var(--space-md);
	margin-top: 0;
}

.section-experiencias .exp-card__meta-item {
	font-size: 0.8125rem;
	color: var(--color-gris-600);
}

.section-experiencias .exp-card__excerpt {
	order: 3;
	color: var(--color-texto-suave);
}

.section-experiencias .exp-card__cta {
	order: 4;
	margin-top: var(--space-sm);
}

.section-experiencias .exp-card__cta svg {
	transition: transform var(--transition-fast);
}

.section-experiencias .exp-card__link:hover .exp-card__cta svg,
.section-experiencias .exp-card__link:focus-visible .exp-card__cta svg {
	transform: translateX(4px);
}

.section-experiencias .exp-card__link:focus-visible {
	outline: 3px solid var(--color-cielo);
	outline-offset: 3px;
}

/* Movimiento reducido (Fase 2) */
@media (prefers-reduced-motion: reduce) {
	.section-experiencias .exp-card,
	.section-experiencias .exp-card__image,
	.section-experiencias .exp-card__cta svg {
		transition: none;
	}

	.section-experiencias .exp-card:hover {
		transform: none;
	}

	.section-experiencias .exp-card:hover .exp-card__image,
	.section-experiencias .exp-card__link:hover .exp-card__cta svg,
	.section-experiencias .exp-card__link:focus-visible .exp-card__cta svg {
		transform: none;
	}
}

/* ==========================================================================
   FASE 3 — Rediseño visual (sección "Mapa interactivo")
   Sección oscura con composición dividida. Solo estilos: no se tocan
   IDs, clases ni eventos usados por home-map.js, GA4 o accesibilidad.
   Los estilos Leaflet van acotados a .section-mapa (solo existe en Home).
   ========================================================================== */

/* Fondo azul de marca y contraste de texto */
.section-mapa {
	background: var(--color-logo-azul);
	color: var(--color-salar);
}

.section-mapa .section-head__eyebrow {
	color: var(--color-salar);
}

.section-mapa .section-head__eyebrow::before {
	background-color: var(--color-salar);
}

.section-mapa__title {
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.15;
	color: var(--color-salar);
	margin-bottom: var(--space-md);
}

.section-mapa__desc {
	font-family: var(--font-body);
	font-size: var(--fs-lead);
	font-weight: 300;
	line-height: 1.6;
	color: var(--color-salar);
	margin-bottom: var(--space-xl);
}

/* Composición dividida: panel + mapa */
.section-mapa__layout {
	display: grid;
	gap: var(--space-2xl);
	align-items: start;
}

@media (min-width: 1024px) {
	.section-mapa__layout {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: var(--space-3xl);
	}
}

/* Filtros integrados en el panel */
.section-mapa__filter {
	border: none;
	padding: 0;
	margin-bottom: var(--space-md);
}

.section-mapa__filter-label {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-salar);
	margin-bottom: var(--space-md);
	display: block;
}

.section-mapa__filter-options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.section-mapa__filter-chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: var(--space-sm) var(--space-lg);
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-salar);
	background-color: rgba(251, 247, 240, 0.12);
	border: 1px solid rgba(251, 247, 240, 0.32);
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.section-mapa__filter-chip:hover {
	color: var(--color-blanco);
	border-color: var(--color-logo-arena);
	background-color: rgba(251, 247, 240, 0.18);
}

.section-mapa__filter-input:checked + .section-mapa__filter-chip {
	color: var(--color-logo-bruno);
	background-color: var(--color-logo-arena);
	border-color: var(--color-logo-arena);
}

.section-mapa__filter-input:checked + .section-mapa__filter-chip:hover {
	background-color: color-mix(in srgb, var(--color-logo-arena) 88%, var(--color-blanco));
	border-color: color-mix(in srgb, var(--color-logo-arena) 88%, var(--color-blanco));
	color: var(--color-logo-bruno);
}

.section-mapa__filter-input:focus-visible + .section-mapa__filter-chip {
	outline: 3px solid var(--color-salar);
	outline-offset: 3px;
}

/* Contador de resultados */
.section-mapa__results {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	color: var(--color-salar);
	min-height: 1.5em;
	margin-top: var(--space-xs);
}

/* Foco: salar sobre el plano azul; azul-deep dentro del mapa (superficie clara) */
.section-mapa :focus-visible {
	outline-color: var(--color-salar);
}

.section-mapa__container :focus-visible {
	outline-color: var(--color-logo-azul-deep);
}

/* Contenedor del mapa */
.section-mapa__container {
	width: 100%;
	aspect-ratio: 1 / 1;
	border: var(--panel-filete);
	border-radius: var(--radius-2xl);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	z-index: 0;
}

@media (min-width: 768px) {
	.section-mapa__container {
		aspect-ratio: 16 / 9;
	}
}

@media (min-width: 1024px) {
	.section-mapa__container {
		aspect-ratio: 4 / 3;
	}
}

.section-mapa__noscript {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: var(--space-xl);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	text-align: center;
	color: var(--color-piedra);
	background-color: var(--color-gris-100);
}

@media (min-width: 768px) {
	.section-mapa__noscript {
		aspect-ratio: 16 / 9;
	}
}

/* Marcadores: microinteracción sutil (solo CSS) */
.section-mapa .leaflet-marker-icon {
	filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
	transition: transform var(--transition-fast), filter var(--transition-fast);
}

.section-mapa .leaflet-marker-icon:hover,
.section-mapa .leaflet-marker-icon:focus {
	transform: scale(1.15);
	filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55));
}

/* Controles de zoom */
.section-mapa .leaflet-bar {
	border: none;
	box-shadow: none;
}

.section-mapa .leaflet-control-zoom a {
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 1.125rem;
	background-color: rgba(23, 19, 16, 0.85);
	color: var(--color-salar);
	border: 1px solid rgba(232, 220, 200, 0.28);
	border-radius: var(--radius-md);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.section-mapa .leaflet-control-zoom a:hover {
	background-color: var(--color-terracota);
	color: var(--color-blanco);
}

.section-mapa .leaflet-control-zoom a:focus-visible {
	outline: 3px solid var(--color-logo-azul-deep);
	outline-offset: 2px;
}

/* Atribución de tiles */
.section-mapa .leaflet-control-attribution {
	background-color: rgba(23, 19, 16, 0.66);
	color: var(--color-arena-deep);
	font-size: 0.6875rem;
}

.section-mapa .leaflet-control-attribution a {
	color: var(--color-pampa);
}

/* Popups */
.section-mapa .leaflet-popup-content-wrapper {
	background-color: rgba(23, 19, 16, 0.96);
	color: var(--color-salar);
	border: 1px solid rgba(232, 220, 200, 0.28);
	border-radius: var(--radius-lg);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.section-mapa .leaflet-popup-content {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.5;
	margin: var(--space-sm) var(--space-md);
}

.section-mapa .leaflet-popup-content a {
	color: var(--color-pampa);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.section-mapa .leaflet-popup-content a:hover,
.section-mapa .leaflet-popup-content a:focus-visible {
	color: var(--color-blanco);
}

.section-mapa .leaflet-popup-tip {
	background-color: rgba(23, 19, 16, 0.96);
}

.section-mapa .leaflet-popup-close-button {
	color: var(--color-salar);
}

.section-mapa .leaflet-popup-close-button:hover {
	color: var(--color-pampa);
}

/* ==========================================================================
   FASE 6 — Rediseño conceptual (sección "Relatos" — Home)
   Composición editorial 7/5: crónica principal (7fr) + relatos
   secundarios (5fr). La tarjeta base (.relato-card) sigue viva para el
   archive y la búsqueda, por lo que no se toca.
   ========================================================================== */

/* Fondo y cabecera */
.section-relatos {
	background: var(--color-logo-azul);
}

.section-relatos__header {
	text-align: left;
	margin-bottom: var(--space-2xl);
}

/* Composición 7/5 — panel editorial */
.section-relatos__editorial {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3xl);
	align-items: start;
	background-color: var(--surface-pergamino);
	border-radius: 0;
	padding: var(--space-xl);
}

@media (min-width: 1024px) {
	.section-relatos__editorial {
		grid-template-columns: 7fr 5fr;
		gap: var(--space-3xl);
	}
}

@media (max-width: 767px) {
	.section-relatos__editorial {
		padding: var(--space-md);
	}
}

/* Crónica principal */
.relato-principal__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.relato-principal__link:focus-visible {
	outline: 3px solid var(--color-cielo);
	outline-offset: 3px;
	border-radius: var(--radius-lg);
}

.relato-principal__media {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-xl);
	background-color: var(--color-gris-200);
	margin-bottom: var(--space-lg);
}

.relato-principal__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.relato-principal__link:hover .relato-principal__image {
	transform: scale(1.03);
}

.relato-principal__badge {
	position: absolute;
	top: var(--space-md);
	left: var(--space-md);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	padding: var(--space-xs) var(--space-sm);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--radius-pill);
	background-color: rgba(20, 16, 10, 0.68);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: var(--color-blanco);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.relato-principal__badge--inline {
	position: static;
	display: inline-flex;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	color: var(--color-salar);
	font-size: 0.75rem;
	font-weight: 600;
	margin-bottom: var(--space-sm);
}

.relato-principal__title {
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 3.5vw, 2.5rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--color-salar);
	margin: 0 0 var(--space-sm);
}

.relato-principal__link:hover .relato-principal__title {
	color: var(--color-blanco);
}

.relato-principal__narrator {
	font-family: var(--font-heading);
	font-size: clamp(1rem, 2vw, 1.125rem);
	font-style: italic;
	line-height: 1.4;
	color: var(--color-arena);
	margin: 0 0 var(--space-md);
}

.relato-principal__excerpt {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-arena);
	margin: 0 0 var(--space-lg);
	max-width: 60ch;
}

.relato-principal__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-salar);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: gap var(--transition-fast), color var(--transition-fast);
}

.relato-principal__link:hover .relato-principal__cta {
	gap: var(--space-sm);
	color: var(--color-blanco);
}

/* Relatos secundarios: filas editoriales con imagen */
.section-relatos__secundarios {
	display: flex;
	flex-direction: column;
}

.relato-secundario {
	border-top: 1px solid rgba(251, 247, 240, 0.22);
	padding: var(--space-lg) 0;
}

.relato-secundario:first-child {
	border-top: 0;
	padding-top: 0;
}

.relato-secundario:last-child {
	padding-bottom: 0;
}

.relato-secundario__link {
	display: flex;
	align-items: flex-start;
	gap: var(--space-lg);
	text-decoration: none;
	color: inherit;
}

.relato-secundario__link:focus-visible {
	outline: 3px solid var(--color-salar);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

.relato-secundario__media {
	flex: 0 0 168px;
	width: 168px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-md);
	background-color: var(--color-logo-bruno);
}

.relato-secundario__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.relato-secundario__link:hover .relato-secundario__image {
	transform: scale(1.03);
}

.relato-secundario__media--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: linear-gradient(135deg, var(--color-logo-arena) 0%, var(--color-logo-bruno) 100%);
	color: var(--color-salar);
	font-family: var(--font-heading);
	font-size: 2rem;
	line-height: 1;
}

.relato-secundario__media--placeholder::before {
	content: "❝";
	opacity: 0.75;
}

.relato-secundario__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.relato-secundario__badge {
	display: inline-flex;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-salar);
	margin-bottom: var(--space-xs);
}

.relato-secundario__title {
	font-family: var(--font-heading);
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-salar);
	margin: 0 0 var(--space-xs);
}

.relato-secundario__link:hover .relato-secundario__title {
	color: var(--color-blanco);
}

.relato-secundario__narrator {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-arena);
	margin: 0 0 var(--space-xs);
}

.relato-secundario__excerpt {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--color-arena);
	margin: 0 0 var(--space-md);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.relato-secundario__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	margin-top: auto;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-salar);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: gap var(--transition-fast), color var(--transition-fast);
}

.relato-secundario__link:hover .relato-secundario__cta {
	color: var(--color-blanco);
	gap: var(--space-sm);
}

/* Tablet: dos tarjetas verticales lado a lado */
@media (min-width: 768px) and (max-width: 1023px) {
	.section-relatos__secundarios {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-lg);
	}

	.relato-secundario {
		border-top: 0;
		padding: 0;
	}

	.relato-secundario__link {
		flex-direction: column;
		gap: var(--space-md);
	}

	.relato-secundario__media {
		flex: none;
		width: 100%;
	}
}

/* Móvil: filas horizontales compactas */
@media (max-width: 767px) {
	.relato-secundario__link {
		gap: var(--space-md);
	}

	.relato-secundario__media {
		flex-basis: 112px;
		width: 112px;
	}

	.relato-secundario__excerpt {
		-webkit-line-clamp: 2;
	}
}

/* Movimiento reducido (Fase 6) */
@media (prefers-reduced-motion: reduce) {
	.relato-principal__image,
	.relato-principal__cta,
	.relato-secundario__image,
	.relato-secundario__cta {
		transition: none;
	}

	.relato-principal__link:hover .relato-principal__image,
	.relato-principal__link:hover .relato-principal__cta,
	.relato-secundario__link:hover .relato-secundario__image,
	.relato-secundario__link:hover .relato-secundario__cta {
		transform: none;
	}
}

/* ==========================================================================
   FASE 6 — Rediseño conceptual (sección "Actores" — Home)
   "Mesa de los nombres": unidades horizontales editoriales e igualitarias.
   Cada actor = marca circular (foto → monograma → icono) + nombre en serif
   como protagonista + meta [TIPO · TERRITORIO]. El archive usa
   .actor-card--archive y no se ve afectado.
   ========================================================================== */

/* Cabecera dividida */
.section-actores__header {
	text-align: left;
	margin-bottom: var(--space-2xl);
}

/* Composicion: destacado (izq.) + indice (der.) en escritorio; 1 columna antes.
   Pieza editorial: misma receta de superficie que el panel de Relatos
   (terracota humeda + filete translucido + sombra suave + radio lg). */
.section-actores__composicion {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3xl) var(--space-4xl);
	align-items: start;
	background-color: var(--surface-pergamino);
	border: var(--panel-filete);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-panel);
	padding: var(--space-xl);
}

@media (max-width: 767px) {
	.section-actores__composicion {
		padding: var(--space-lg);
	}
}

@media (min-width: 1024px) {
	.section-actores__composicion {
		grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
		padding: var(--space-xl);
	}
}

/* Destacado: retrato + ficha editorial */
.actor-destacado__link {
	display: block;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

.actor-destacado__link:focus-visible {
	outline: 3px solid var(--color-logo-azul-deep);
	outline-offset: 3px;
	border-radius: var(--radius-md);
}

.actor-destacado__retrato {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-color: var(--color-blanco);
	border: 1px solid rgba(23, 19, 16, 0.15);
}

@media (min-width: 768px) {
	.actor-destacado__retrato {
		aspect-ratio: 4 / 3;
	}
}

.actor-destacado__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* Ficha editorial sin fotografia: sello de monograma junto al contenido */
.actor-destacado__sello {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(96px, 14vw, 128px);
	aspect-ratio: 1;
	border-radius: var(--radius-lg);
	background-color: var(--color-blanco);
	border: 1px solid rgba(23, 19, 16, 0.15);
	color: var(--color-terracota-deep);
}

.actor-destacado__monogram {
	font-family: var(--font-heading);
	font-size: clamp(2.5rem, 6vw, 3.75rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
}

.actor-destacado--ficha .actor-destacado__link {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--space-xl);
	align-items: start;
}

.actor-destacado__cuerpo {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding-top: var(--space-lg);
}

.actor-destacado__etiqueta,
.actor-destacado__tipo,
.actor-destacado__territorio {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-logo-bruno);
	margin: 0;
}

.actor-destacado__nombre {
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--color-obsidiana);
	margin: 0;
}

.actor-destacado__link:hover .actor-destacado__nombre {
	color: var(--color-logo-azul-deep);
}

.actor-destacado__voz {
	font-family: var(--font-body);
	font-size: clamp(0.9375rem, 2vw, 1.0625rem);
	line-height: 1.55;
	color: var(--color-texto-suave);
	margin: var(--space-sm) 0 0;
}

/* Tablet: destacado en banda horizontal (retrato 50% / texto 50%) */
@media (min-width: 768px) and (max-width: 1023px) {
	.actor-destacado__link {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
		gap: var(--space-2xl);
		align-items: center;
	}
}

/* Indice: filas con filete institucional */
.actor-indice {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(23, 19, 16, 0.15);
}

@media (min-width: 768px) and (max-width: 1023px) {
	.actor-indice {
		columns: 2;
		column-gap: var(--space-3xl);
	}
}

.actor-indice__fila {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-md) 0;
	border-bottom: 1px solid rgba(23, 19, 16, 0.15);
}

@media (min-width: 1024px) {
	.actor-indice__fila {
		min-height: 104px;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.actor-indice__fila {
		break-inside: avoid;
	}
}

.actor-indice__link {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: var(--space-md);
	text-decoration: none;
	color: inherit;
}

.actor-indice__link:focus-visible {
	outline: 3px solid var(--color-logo-azul-deep);
	outline-offset: 3px;
	border-radius: var(--radius-md);
}

.actor-indice__arrow {
	flex: 0 0 auto;
	margin-left: auto;
	display: block;
	color: var(--color-gris-600);
	transition: transform var(--transition-fast);
}

.actor-indice__link:hover .actor-indice__arrow,
.actor-indice__link:focus-visible .actor-indice__arrow {
	transform: translateX(3px);
}

/* Marca: 48px; foto o monograma */
.actor-indice__marca {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	background-color: var(--color-blanco);
	border: 1px solid rgba(23, 19, 16, 0.12);
	color: var(--color-terracota-deep);
}

.actor-indice__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.actor-indice__monogram {
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.actor-indice__texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.actor-indice__nombre {
	font-family: var(--font-heading);
	font-size: clamp(1rem, 1.8vw, 1.1875rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-obsidiana);
	margin: 0;
	overflow-wrap: anywhere;
}

.actor-indice__link:hover .actor-indice__nombre {
	color: var(--color-logo-azul-deep);
}

.actor-indice__meta {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-sm);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-texto-suave);
}

.actor-indice__meta-sep {
	color: var(--color-texto-suave);
}

/* Pie: texto institucional + CTA */
.section-actores__pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	margin-top: var(--space-2xl);
	padding-top: var(--space-lg);
	border-top: 1px solid rgba(251, 247, 240, 0.28);
}

.section-actores__pie-texto {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--color-salar);
	margin: 0;
}

@media (max-width: 639px) {
	.section-actores__pie {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.section-actores__pie .section-actores__cta {
		width: 100%;
		justify-content: center;
	}
}

/* ==================================================
   Identidad de marca — Home (paleta del logo)
   --------------------------------------------------
   Sustituye a la antigua capa "Identidad terracota". Las seis
   secciones comparten el plano azul del logo; los contenedores
   internos (grillas, paneles editoriales, sendero, mesa de
   recepción) usan superficies hueso/blanco:
     Planos       #0172C2 (azul logo)     · salar 4.7:1 ✓
     Paneles      hueso/blanco            · obsidiana/bruno/azul-deep ✓

   El bruno, el verde y la arena quedan reservados como tinta y
   acento (monogramas, badges, puntos de ruta, iconos, botones y
   estados) y para header/footer en fases posteriores. Reglas acotadas
   a la Home; no afectan archives, singles, Hero, Mapa, header ni footer.
   ================================================== */

/* ---------- Sobre: plano azul ---------- */
.section-sobre__eyebrow {
	color: var(--color-salar);
}

.section-sobre__title,
.section-sobre__description {
	color: var(--color-salar);
}

.section-sobre__description a {
	color: var(--color-salar);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.section-sobre__description a:hover {
	color: var(--color-blanco);
}

/* ---------- Experiencias: plano azul, grilla y tarjetas hueso ---------- */
.section-experiencias .section-head__eyebrow,
.section-experiencias .section-head__title,
.section-experiencias .section-head__lead,
.section-experiencias__empty p {
	color: var(--color-salar);
}

.section-experiencias .section-head__eyebrow::before {
	background-color: var(--color-salar);
	opacity: 1;
}

.section-experiencias .btn-secondary {
	color: var(--color-salar);
	border-color: var(--color-salar);
}

.section-experiencias .btn-secondary:hover,
.section-experiencias .btn-secondary:focus-visible {
	background-color: var(--color-salar);
	border-color: var(--color-salar);
	color: var(--color-obsidiana);
}

.section-experiencias .exp-card__cta,
.section-experiencias .exp-card__link:hover .exp-card__title {
	color: var(--color-logo-azul-deep);
}

/* ---------- Actores: plano azul, composición hueso ---------- */
.section-actores .section-head__eyebrow,
.section-actores .section-head__title,
.section-actores .section-head__lead,
.section-actores__empty p {
	color: var(--color-salar);
}

.section-actores .section-head__eyebrow::before {
	background-color: var(--color-salar);
	opacity: 1;
}

.section-actores .btn-secondary {
	color: var(--color-salar);
	border-color: var(--color-salar);
}

.section-actores .btn-secondary:hover,
.section-actores .btn-secondary:focus-visible {
	background-color: var(--color-salar);
	border-color: var(--color-salar);
	color: var(--color-obsidiana);
}

.section-actores .actor-destacado__sello,
.section-actores .actor-indice__marca {
	color: var(--color-logo-bruno);
}

/* ---------- Relatos: plano azul, panel editorial hueso ---------- */
.section-relatos .section-head__eyebrow,
.section-relatos .section-head__title,
.section-relatos .section-head__lead {
	color: var(--color-salar);
}

.section-relatos .section-head__eyebrow::before {
	background-color: var(--color-salar);
	opacity: 1;
}

.section-relatos .btn-secondary {
	color: var(--color-salar);
	border-color: var(--color-salar);
}

.section-relatos .btn-secondary:hover,
.section-relatos .btn-secondary:focus-visible {
	background-color: var(--color-salar);
	border-color: var(--color-salar);
	color: var(--color-obsidiana);
}

.section-relatos__editorial .relato-principal__badge--inline,
.section-relatos__editorial .relato-secundario__badge {
	color: var(--color-logo-bruno);
}

.section-relatos__editorial .relato-principal__title,
.section-relatos__editorial .relato-secundario__title {
	color: var(--color-obsidiana);
}

.section-relatos__editorial .relato-principal__narrator,
.section-relatos__editorial .relato-principal__excerpt,
.section-relatos__editorial .relato-secundario__narrator,
.section-relatos__editorial .relato-secundario__excerpt {
	color: var(--color-texto-suave);
}

.section-relatos__editorial .relato-principal__cta,
.section-relatos__editorial .relato-secundario__cta,
.section-relatos__editorial .relato-principal__link:hover .relato-principal__title,
.section-relatos__editorial .relato-secundario__link:hover .relato-secundario__title {
	color: var(--color-logo-azul-deep);
}

.section-relatos__editorial .relato-principal__link:hover .relato-principal__cta,
.section-relatos__editorial .relato-secundario__link:hover .relato-secundario__cta {
	color: var(--color-logo-azul-deep);
}

.section-relatos__editorial .relato-secundario {
	border-top-color: rgba(23, 19, 16, 0.15);
}

.section-relatos__editorial .relato-principal__link:focus-visible,
.section-relatos__editorial .relato-secundario__link:focus-visible {
	outline-color: var(--color-logo-azul-deep);
}

/* ---------- Recursos: plano azul, sendero hueso, bruno como acento ---------- */
.section-recursos .section-head__eyebrow,
.section-recursos .section-head__title,
.section-recursos .section-head__lead {
	color: var(--color-salar);
}

.section-recursos .section-head__eyebrow::before {
	background-color: var(--color-salar);
	opacity: 1;
}

.section-recursos .btn-secondary {
	color: var(--color-salar);
	border-color: var(--color-salar);
}

.section-recursos .btn-secondary:hover,
.section-recursos .btn-secondary:focus-visible {
	background-color: var(--color-salar);
	border-color: var(--color-salar);
	color: var(--color-obsidiana);
}

.section-recursos .recurso-parada__marca {
	background-color: var(--color-logo-bruno);
}

.section-recursos .recurso-parada__signatura,
.section-recursos .recurso-parada__formato-label {
	color: var(--color-logo-bruno);
}

.section-recursos .recurso-parada__glyph,
.section-recursos .recurso-parada__meta-sep {
	color: var(--color-gris-600);
}

.section-recursos .recurso-parada__title a:hover,
.section-recursos .recurso-parada__title a:focus-visible,
.section-recursos .recurso-parada__accion {
	color: var(--color-logo-azul-deep);
}

.section-recursos .recurso-parada__title a:focus-visible,
.section-recursos .recurso-parada__accion:focus-visible {
	outline-color: var(--color-logo-azul-deep);
}

/* ---------- Contacto: plano azul, panel hueso ---------- */
.section-contacto__title,
.section-contacto__subtitle,
.section-contacto__desc {
	color: var(--color-salar);
}

.section-contacto__grupo-titulo,
.section-contacto__label,
.section-contacto__icon,
.section-contacto__coda-line {
	color: var(--color-logo-bruno);
}

.section-contacto__grupo-titulo::before {
	background-color: var(--color-logo-bruno);
}

.section-contacto__text,
.section-contacto__form-title {
	color: var(--color-obsidiana);
}

.section-contacto__form-lead {
	color: var(--color-texto-suave);
}

.section-contacto__link {
	color: var(--color-logo-azul-deep);
}

.section-contacto__link:hover,
.section-contacto__link:focus-visible {
	color: var(--color-logo-azul-deep);
}

.section-contacto .ra-contact-form label {
	color: var(--color-obsidiana);
}

.section-contacto .ra-contact-form .wpcf7-submit {
	color: var(--color-salar);
	background-color: var(--color-logo-bruno);
	border-color: var(--color-logo-bruno);
}

.section-contacto .ra-contact-form .wpcf7-submit:hover,
.section-contacto .ra-contact-form .wpcf7-submit:focus-visible {
	color: var(--color-salar);
	background-color: var(--color-logo-azul-deep);
	border-color: var(--color-logo-azul-deep);
}

.section-contacto .ra-contact-form .wpcf7-not-valid-tip {
	color: var(--color-alerta);
}

.section-contacto .ra-contact-form .wpcf7-response-output {
	border-color: rgba(23, 19, 16, 0.2);
	color: var(--color-obsidiana);
}

.section-contacto__coda {
	border-top-color: rgba(23, 19, 16, 0.2);
}

.section-contacto__coda-signature {
	color: var(--color-logo-azul-deep);
}

/* ---------- Foco visible por plano ---------- */
.section-sobre :focus-visible,
.section-experiencias :focus-visible,
.section-actores :focus-visible,
.section-relatos :focus-visible,
.section-recursos :focus-visible,
.section-contacto :focus-visible {
	outline-color: var(--color-salar);
}

/* Dentro de paneles claros → azul-deep */
.section-experiencias .exp-card__link:focus-visible,
.section-actores__composicion :focus-visible,
.section-relatos__editorial :focus-visible,
.section-recursos__sendero :focus-visible,
.section-contacto__panel :focus-visible {
	outline-color: var(--color-logo-azul-deep);
}

/* ==================================================
   Single de Actor — sistema cromático unificado
   (mismo lenguaje que Home, archives y Experiencias)
   --------------------------------------------------
   El plano general detrás de todas las secciones es el
   azul del logo. El hero vive dentro del gran contenedor
   editorial claro (var(--surface-pergamino)) y por eso NO lleva tintas
   salar: sus reglas base ya definen las tintas para
   superficie clara. Aquí solo quedan las superficies y
   tintas salar que se apoyan directamente sobre el azul
   (breadcrumbs, mapa, Experiencias, volver). Solo fondos
   y tintas; no modifica composición, tipografía,
   espaciados ni HTML.

   Tintas AA sobre #0172C2: salar #FBF7F0 4.57:1 ✓,
   blanco #FFFFFF 4.88:1 ✓; arena/bruno ✗ sobre azul
   (reservados a superficies claras). Sobre el contenedor
   var(--surface-pergamino): obsidiana/texto/bruno/azul-deep ✓ AA.

   TODO scoped a body.single-actor.
   ================================================== */

/* ---------- Plano de fondo: azul del logo ---------- */
body.single-actor .ra-breadcrumbs,
body.single-actor .actor-single-hero,
body.single-actor .actor-single-map,
body.single-actor .actor-single-contact,
body.single-actor .actor-single-experiencias,
body.single-actor .actor-single-back {
	background-color: var(--color-logo-azul);
}

/* ---------- Breadcrumb secundario sobre azul ---------- */
/* Pequeño y con jerarquía (actual en blanco semibold, previos salar),
   separadores finos › y filete editorial bajo las migas — mismo lenguaje
   que Relatos/Recursos. Todo scoped al single de Actor. */
body.single-actor .ra-breadcrumbs {
	color: var(--color-salar);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.03em;
	padding: var(--space-md) 0 var(--space-sm);
	border-bottom: 1px solid rgba(251, 247, 240, 0.22);
}

body.single-actor .ra-breadcrumbs a {
	display: inline-block;
	color: var(--color-salar);
	transition:
		color var(--transition-fast),
		transform var(--transition-fast);
}

body.single-actor .ra-breadcrumbs a:hover {
	color: var(--color-blanco);
	transform: translateY(-1px);
}

body.single-actor .ra-breadcrumbs a:focus-visible {
	color: var(--color-blanco);
}

/* Sin movimiento para quienes lo prefieren reducido: el hover conserva el
   cambio de color pero no el lift. */
@media (prefers-reduced-motion: reduce) {
	body.single-actor .ra-breadcrumbs a {
		transition: none;
	}

	body.single-actor .ra-breadcrumbs a:hover {
		transform: none;
	}
}

body.single-actor .ra-breadcrumbs__sep {
	color: var(--color-salar);
	opacity: 0.6;
	font-size: 0.875em;
	margin: 0 var(--space-xs);
}

body.single-actor .ra-breadcrumbs__current {
	color: var(--color-blanco);
	font-weight: 600;
}

/* ---------- Eyebrow (tipo) ---------- */
/* Las tintas del hero viven en las reglas base del contenedor claro:
   bruno (type/epígrafe), obsidiana (título), texto (descripción),
   azul-deep (enlaces). No hay override salar aquí. */

/* ---------- Mapa: título y enlace sobre terracota ---------- */
body.single-actor .ra-single-map__title,
body.single-actor .actor-single-experiencias__title {
	color: var(--color-salar);
}

body.single-actor .ra-single-map__link a {
	color: var(--color-salar);
}

/* ---------- Sección final (Volver a Actores) ---------- */
body.single-actor .actor-single-back__link {
	color: var(--color-salar);
}

body.single-actor .actor-single-back__link:hover,
body.single-actor .actor-single-back__link:focus-visible {
	color: var(--color-blanco);
}

/* ---------- Foco visible ---------- */
/* Sobre azul: salar. Dentro del contenedor editorial claro: azul-deep. */
body.single-actor .ra-breadcrumbs :focus-visible,
body.single-actor .actor-single-map :focus-visible,
body.single-actor .actor-single-back :focus-visible {
	outline-color: var(--color-salar);
}

body.single-actor .actor-single-hero :focus-visible {
	outline-color: var(--color-logo-azul-deep);
}

/* ==========================================================================
   Auth Pages — Login, Register, Lost Password & Reset Password
   (.page-login, .page-register, .page-lost-password,
    .page-reset-password, .ra-auth-form)
   ========================================================================== */

/* --- Encabezado de autenticación (fondo claro continuo) --- */

.page-login__hero,
.page-register__hero,
.page-lost-password__hero,
.page-reset-password__hero,
.page-account__hero {
	text-align: center;
	padding-top: var(--space-xl);
	padding-bottom: var(--space-xl);
}

.page-login__hero .eyebrow,
.page-register__hero .eyebrow,
.page-lost-password__hero .eyebrow,
.page-reset-password__hero .eyebrow,
.page-account__hero .eyebrow {
	color: var(--color-logo-azul-deep);
}

.page-login__title,
.page-register__title,
.page-lost-password__title,
.page-reset-password__title,
.page-account__title {
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-obsidiana);
	margin: var(--space-sm) 0 var(--space-md);
}

.page-login__lead,
.page-register__lead,
.page-lost-password__lead,
.page-reset-password__lead,
.page-account__lead {
	font-family: var(--font-body);
	font-size: var(--fs-lead);
	font-weight: 300;
	max-width: 540px;
	margin: 0 auto;
	line-height: 1.6;
	color: var(--color-texto-suave);
}

/* --- Body --- */

.page-login__body,
.page-register__body,
.page-lost-password__body,
.page-reset-password__body {
	padding: var(--space-lg) 0 var(--space-md);
}

.page-account__body {
	padding: var(--space-lg) 0 var(--space-xl);
}

/* --- Panel del formulario --- */

.ra-auth-form {
	max-width: 480px;
	margin: 0 auto;
	background-color: var(--surface-hueso);
	border: var(--panel-filete);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: clamp(1.25rem, 3vw, 2rem);
}

/* --- Campos --- */

.ra-auth-form__field {
	margin-bottom: var(--space-md);
}

.ra-auth-form__fields-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md);
}

.ra-auth-form label {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-obsidiana);
	margin-bottom: var(--space-xs);
}

.ra-auth-form input[type="text"],
.ra-auth-form input[type="email"],
.ra-auth-form input[type="password"] {
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-obsidiana);
	background-color: var(--color-blanco);
	border: 1px solid var(--color-gris-200);
	border-radius: var(--radius-md);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ra-auth-form input:focus {
	outline: none;
	border-color: var(--color-logo-azul-deep);
	box-shadow: 0 0 0 3px rgba(1, 90, 158, 0.15);
}

.ra-auth-form input[aria-invalid="true"] {
	border-color: var(--color-alerta);
	box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}

/* --- Mensajes de error por campo --- */

.ra-auth-form__error {
	display: block;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	color: var(--color-alerta);
	margin-top: var(--space-xs);
	min-height: 0;
}

.ra-auth-form__error:empty {
	display: none;
}

/* --- Texto de ayuda --- */

.ra-auth-form__help {
	display: block;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	color: var(--color-texto-suave);
	margin-top: var(--space-xs);
}

/* --- Error general (aria-live) --- */

.ra-auth-form__general-error {
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-md);
	font-size: 0.9375rem;
	border: 1px solid var(--color-alerta);
	background-color: #FDF2F2;
	color: var(--color-alerta);
	margin-bottom: var(--space-md);
}

.ra-auth-form__general-error:empty {
	display: none;
}

/* --- Fila: recordarme + olvidé contraseña --- */

.ra-auth-form__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-lg);
	gap: var(--space-md);
}

.ra-auth-form__check {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	color: var(--color-texto);
	cursor: pointer;
}

.ra-auth-form__check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--color-logo-azul-deep);
	cursor: pointer;
}

.ra-auth-form__forgot {
	font-family: var(--font-body);
	font-size: 0.875rem;
	color: var(--color-logo-azul-deep);
	text-decoration: none;
}

.ra-auth-form__forgot:hover,
.ra-auth-form__forgot:focus-visible {
	text-decoration: underline;
}

/* --- Botón submit --- */

.ra-auth-form .btn-primary {
	width: 100%;
	min-height: 48px;
	background-color: var(--color-logo-azul-deep);
	border-color: var(--color-logo-azul-deep);
}

.ra-auth-form .btn-primary:hover {
	background-color: var(--color-logo-azul);
	border-color: var(--color-logo-azul);
}

.ra-auth-form .btn-primary:focus-visible {
	background-color: var(--color-logo-azul);
	border-color: var(--color-logo-azul);
	outline: 3px solid var(--color-salar);
	outline-offset: 2px;
}

.ra-auth-form .btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* --- Enlace alternativo (login ↔ register) --- */

.ra-auth-form__alt {
	text-align: center;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	color: var(--color-texto-suave);
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-gris-200);
}

.ra-auth-form__alt a {
	color: var(--color-logo-azul-deep);
	font-weight: 600;
	text-decoration: none;
}

.ra-auth-form__alt a:hover,
.ra-auth-form__alt a:focus-visible {
	text-decoration: underline;
}

/* --- Estado: usuario ya autenticado --- */

.ra-auth-form__logged-in {
	max-width: 480px;
	margin: 0 auto;
	background-color: var(--surface-hueso);
	border: var(--panel-filete);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: clamp(1.25rem, 3vw, 2rem);
	text-align: center;
}

.ra-auth-form__welcome {
	font-family: var(--font-body);
	font-size: 1.125rem;
	color: var(--color-texto);
	margin-bottom: var(--space-lg);
}

.ra-auth-form__welcome strong {
	color: var(--color-obsidiana);
}

.ra-auth-form__actions {
	display: flex;
	gap: var(--space-md);
	justify-content: center;
	flex-wrap: wrap;
}

/* --- Estado general (fuera del form, aria-live) --- */

.ra-auth-form__status:empty {
	display: none;
}

.ra-auth-form__general-success {
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-md);
	font-size: 0.9375rem;
	border: 1px solid var(--color-exito);
	background-color: var(--surface-hueso);
	color: var(--color-exito);
	margin-bottom: var(--space-md);
}

/* --- Estado: token inválido/vencido --- */

.ra-auth-form__token-status {
	max-width: 480px;
	margin: 0 auto;
	background-color: var(--surface-hueso);
	border: var(--panel-filete);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: clamp(1.25rem, 3vw, 2rem);
	text-align: center;
}

.ra-auth-form__token-message {
	font-family: var(--font-body);
	font-size: 1.125rem;
	color: var(--color-texto);
	margin-bottom: var(--space-lg);
}

/* ==========================================================================
   Mi Cuenta — Panel de información del usuario
   ========================================================================== */

.ra-account-panel {
	max-width: 560px;
	margin: 0 auto;
	background-color: var(--surface-hueso);
	border: var(--panel-filete);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.ra-account-panel__header {
	display: flex;
	gap: var(--space-md);
	align-items: center;
	margin-bottom: var(--space-lg);
}

.ra-account-panel__avatar {
	flex-shrink: 0;
}

.ra-account-panel__avatar-img {
	border-radius: 50%;
	display: block;
}

.ra-account-panel__identity {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	min-width: 0;
}

.ra-account-panel__name {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-obsidiana);
	margin: 0;
}

.ra-account-panel__email {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	color: var(--color-texto-suave);
	margin: 0;
	overflow-wrap: anywhere;
}

.ra-account-panel__details {
	margin: 0 0 var(--space-lg);
}

.ra-account-panel__detail {
	display: flex;
	justify-content: space-between;
	padding: var(--space-sm) 0;
	border-bottom: 1px solid rgba(23, 19, 16, 0.08);
}

.ra-account-panel__detail:last-child {
	border-bottom: none;
}

.ra-account-panel__detail dt {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-texto-suave);
}

.ra-account-panel__detail dd {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	color: var(--color-texto);
	font-weight: 600;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ra-account-panel__actions {
	display: flex;
	justify-content: flex-end;
	padding-top: var(--space-sm);
}

/* --- Responsive (< 640px) --- */

@media (max-width: 640px) {
	.page-login__hero,
	.page-register__hero,
	.page-lost-password__hero,
	.page-reset-password__hero,
	.page-account__hero {
		padding-top: var(--space-lg);
		padding-bottom: var(--space-lg);
	}

	.ra-auth-form,
	.ra-auth-form__logged-in,
	.ra-account-panel {
		border-radius: 0;
		box-shadow: none;
		border-left: none;
		border-right: none;
	}

	.ra-auth-form__fields-row {
		grid-template-columns: 1fr;
	}

	.ra-auth-form__row {
		flex-direction: column;
		align-items: flex-start;
	}

	.ra-account-panel__header {
		flex-direction: column;
		text-align: center;
	}

	.ra-account-panel__detail {
		flex-direction: column;
		gap: var(--space-xs);
	}

	.ra-account-panel__detail dd {
		white-space: normal;
		overflow: visible;
		text-overflow: unset;
	}

	.ra-account-panel__actions {
		justify-content: center;
	}
}

/* ==========================================================================
   Sección completa de comentarios
   ========================================================================== */

.ra-comments__title {
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	font-weight: 700;
	color: var(--color-salar);
	margin-bottom: var(--space-xs);
}

.ra-comments__count {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	color: var(--color-salar);
	opacity: 0.8;
	margin-bottom: var(--space-xl);
}

.ra-comments__empty {
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-salar);
	opacity: 0.8;
	margin-bottom: var(--space-xl);
}

/* --- Listado --- */

.ra-comments__list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-xl);
}

.ra-comment {
	background: var(--bg-pergamino);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	margin-bottom: var(--space-md);
}

.ra-comment:last-child {
	margin-bottom: 0;
}

.ra-comment__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.ra-comment__meta {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.ra-comment__avatar {
	border-radius: 50%;
	flex-shrink: 0;
}

.ra-comment__author {
	min-width: 0;
}

.ra-comment__name {
	font-family: var(--font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-obsidiana);
	display: block;
}

.ra-comment__date {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	color: var(--color-piedra);
	opacity: 0.7;
	display: block;
}

.ra-comment__content {
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-obsidiana);
}

.ra-comment__content p {
	margin-bottom: var(--space-sm);
}

.ra-comment__content p:last-child {
	margin-bottom: 0;
}

.ra-comment__pending {
	font-size: 0.875rem;
	font-style: italic;
	color: var(--color-salar);
	opacity: 0.7;
}

/* --- Paginación --- */

.ra-comments__pagination {
	margin-bottom: var(--space-xl);
	text-align: center;
}

.ra-comments__pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.ra-comments__pagination .nav-links a,
.ra-comments__pagination .nav-links span {
	font-family: var(--font-body);
	font-size: 0.875rem;
	padding: var(--space-xs) var(--space-sm);
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.ra-comments__pagination .nav-links a {
	color: var(--color-salar);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ra-comments__pagination .nav-links a:hover,
.ra-comments__pagination .nav-links a:focus-visible {
	color: var(--color-salar);
	opacity: 0.8;
}

.ra-comments__pagination .nav-links .current {
	font-weight: 700;
	color: var(--color-salar);
	text-decoration: none;
}

/* --- Formulario --- */

.ra-comments__respond {
	background: var(--bg-pergamino);
	border: var(--panel-filete);
	border-radius: var(--radius-lg);
	padding: clamp(1.25rem, 3vw, 2rem);
	margin-top: var(--space-xl);
}

.ra-comments__respond-title {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-obsidiana);
	margin-bottom: var(--space-lg);
}

.ra-comments__form {
	margin: 0;
}

.ra-comments__field {
	margin-bottom: var(--space-md);
}

.ra-comments__field label {
	display: block;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-texto);
	margin-bottom: var(--space-xs);
}

.ra-comments__field textarea {
	display: block;
	width: 100%;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-texto);
	background-color: var(--color-blanco);
	border: 1px solid var(--color-gris-200);
	border-radius: var(--radius-md);
	padding: var(--space-sm) var(--space-md);
	min-height: 120px;
	resize: vertical;
}

.ra-comments__field textarea::placeholder {
	color: var(--color-texto-suave);
	opacity: 1;
}

.ra-comments__field textarea:focus {
	outline: 2px solid var(--color-logo-azul-deep);
	outline-offset: 2px;
	border-color: var(--color-logo-azul-deep);
}

.ra-comments__submit {
	margin-top: var(--space-xs);
	background-color: var(--color-salar);
	color: var(--color-logo-azul-deep);
	border-color: var(--color-salar);
}

.ra-comments__submit:hover {
	background-color: var(--color-terracota);
	border-color: var(--color-terracota);
	color: var(--color-blanco);
}

.ra-comments__submit:focus-visible {
	outline: 2px solid var(--color-salar);
	outline-offset: 2px;
	color: var(--color-logo-azul-deep);
}

.ra-comments__form-note {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	color: var(--color-texto-suave);
	margin-top: var(--space-md);
}

.ra-comments__error {
	display: block;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	color: var(--color-alerta);
	margin-top: var(--space-xs);
}

.ra-comments__error:empty {
	display: none;
}

/* --- CTA login (visitante) --- */

.ra-comments__login-cta {
	padding-top: var(--space-xl);
	padding-bottom: var(--space-sm);
	text-align: center;
	margin-top: var(--space-xl);
}

.ra-comments__login-cta p {
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-salar);
	margin-bottom: var(--space-md);
}

.ra-comments__login-cta .btn {
	background-color: var(--color-salar);
	color: var(--color-logo-azul-deep);
	border-color: var(--color-salar);
}

.ra-comments__login-cta .btn:hover {
	background-color: var(--color-arena);
	border-color: var(--color-arena);
	color: var(--color-logo-azul-deep);
}

.ra-comments__login-cta .btn:focus-visible {
	outline: 2px solid var(--color-salar);
	outline-offset: 2px;
	color: var(--color-logo-azul-deep);
}

/* --- Responsive comments (≤640px) --- */

@media (max-width: 640px) {
	.ra-comments__respond {
		border-radius: 0;
		box-shadow: none;
		border-left: none;
		border-right: none;
	}
}

/* ==========================================================================
   Single — Receta (Ficha individual)
   ========================================================================== */

/* Plano del single — fondo azul del logo (continuidad con Home y Archives). */
.single-receta .site-main {
	background-color: var(--color-logo-azul);
}

/* Foco visible sobre el plano pergamino */
body.single-receta .receta-single-hero :focus-visible,
body.single-receta .receta-single-contexto :focus-visible,
body.single-receta .receta-single-body :focus-visible,
body.single-receta .receta-single-footer :focus-visible {
	outline-color: var(--color-logo-azul-deep);
}

/* --- Hero --- */

.receta-single-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 56vh;
	overflow: hidden;
	background-color: var(--color-obsidiana-calido);
}

.receta-single-hero__media {
	position: absolute;
	inset: 0;
	margin: 0;
}

.receta-single-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.receta-single-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(23, 19, 16, 0.32) 0%,
		rgba(23, 19, 16, 0.5) 48%,
		rgba(23, 19, 16, 0.92) 100%
	);
}

.receta-single-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-top: var(--space-3xl);
	padding-bottom: var(--space-3xl);
}

.receta-single-hero--no-image {
	align-items: flex-start;
	min-height: 0;
	background: linear-gradient(160deg, var(--color-obsidiana-calido) 0%, var(--color-logo-azul-deep) 92%);
}

.receta-single-hero--no-image .receta-single-hero__content {
	padding-bottom: var(--space-3xl);
}

.receta-single-hero__panel {
	position: absolute;
	inset: 0;
	opacity: 0.07;
	pointer-events: none;
	background-image: repeating-linear-gradient(-45deg, var(--color-salar) 0 2px, transparent 2px 22px);
}

.receta-single-hero__breadcrumbs {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	padding: 0;
	margin-bottom: var(--space-lg);
}

.receta-single-hero__breadcrumbs a {
	color: var(--color-logo-arena);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.receta-single-hero__breadcrumbs a:hover {
	color: var(--color-salar);
}

.receta-single-hero__breadcrumbs .ra-breadcrumbs__sep {
	color: var(--color-salar);
	opacity: 0.6;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.receta-single-hero__breadcrumbs .ra-breadcrumbs__current {
	color: var(--color-salar);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.receta-single-hero__title {
	font-family: var(--font-heading);
	font-size: clamp(2.25rem, 7vw, 4.5rem);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.015em;
	color: var(--color-salar);
	max-width: 20ch;
	margin-bottom: var(--space-lg);
	text-wrap: balance;
}

.receta-single-hero__excerpt {
	font-family: var(--font-body);
	font-size: clamp(1.0625rem, 2vw, 1.25rem);
	font-weight: 300;
	line-height: 1.65;
	color: var(--color-salar);
	max-width: 62ch;
	margin-bottom: 0;
	text-wrap: pretty;
}

/* Datos rápidos — fila editorial sobre la imagen */
.receta-single-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: var(--space-xl) 0 0;
	padding-top: var(--space-lg);
	border-top: 1px solid rgba(205, 153, 103, 0.35);
	max-width: 62ch;
}

.receta-single-hero__fact {
	margin: 0;
	padding: 0 var(--space-xl);
	border-left: 1px solid rgba(205, 153, 103, 0.35);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.receta-single-hero__fact:first-child {
	padding-left: 0;
	border-left: 0;
}

.receta-single-hero__fact-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	margin: 0 0 2px;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-logo-arena);
}

.receta-single-hero__fact-icon {
	display: inline-flex;
	align-items: center;
	opacity: 0.85;
}

.receta-single-hero__fact-value {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-salar);
}

@media (min-width: 640px) {
	.receta-single-hero__facts {
		flex-wrap: nowrap;
	}
}

@media (max-width: 639px) {
	.receta-single-hero__fact {
		flex-direction: column;
		justify-content: center;
		padding: var(--space-sm) 0;
		border-left: 0;
		border-bottom: 1px solid rgba(205, 153, 103, 0.25);
	}

	.receta-single-hero__fact:last-child {
		border-bottom: 0;
	}
}

/* --- Contexto cultural --- */

.receta-single-contexto,
.receta-single-body {
	padding-top: var(--space-xl);
	padding-bottom: var(--space-xl);
}

.receta-single-contexto .container {
	max-width: 940px;
	background-color: var(--color-arena);
	border: var(--panel-filete);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-panel);
}

.receta-single-contexto__title {
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 3.5vw, 2.25rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-obsidiana);
	margin-bottom: var(--space-xl);
}

.receta-single-contexto__title::after {
	content: "";
	display: block;
	width: 3rem;
	height: 2px;
	margin-top: var(--space-sm);
	background-color: var(--color-terracota);
}

/* Tipografía de lectura — compartida entre contexto y preparación */
.receta-prose {
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.75;
	color: var(--color-texto);
	max-width: 65ch;
}

.receta-prose > :first-child {
	margin-top: 0;
}

.receta-prose > :last-child {
	margin-bottom: 0;
}

.receta-prose h2,
.receta-prose h3,
.receta-prose h4 {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-obsidiana);
	margin-top: var(--space-2xl);
	margin-bottom: var(--space-md);
}

.receta-prose h2 {
	font-size: clamp(1.375rem, 3vw, 1.75rem);
	line-height: 1.25;
}

.receta-prose h3 {
	font-size: clamp(1.125rem, 2.5vw, 1.375rem);
	line-height: 1.3;
}

.receta-prose p {
	margin-bottom: var(--space-lg);
}

.receta-prose ul,
.receta-prose ol {
	margin-bottom: var(--space-lg);
	padding-left: var(--space-xl);
}

.receta-prose li {
	margin-bottom: var(--space-sm);
}

.receta-prose a {
	color: var(--color-logo-azul-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.receta-prose a:hover {
	color: var(--color-logo-azul);
}

.receta-prose blockquote {
	border-left: 3px solid var(--color-terracota);
	padding-left: var(--space-lg);
	margin: var(--space-xl) 0;
	font-style: italic;
	color: var(--color-texto-suave);
}

.receta-prose strong {
	font-weight: 700;
	color: var(--color-texto);
}

/* Contexto cultural — cuerpo con acento vertical */
.receta-single-contexto__body {
	max-width: 60ch;
	border-left: 3px solid var(--color-terracota);
	padding-left: var(--space-lg);
}

.receta-single-contexto__body p:first-child {
	font-size: 1.1rem;
}

/* --- Body (Ingredientes + Preparación) --- */

.receta-single-body .container {
	max-width: 1080px;
	background-color: var(--surface-hueso);
	border: var(--panel-filete);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-panel);
}

.receta-single-body__eyebrow {
	margin-bottom: var(--space-md);
}

.receta-single-body__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2xl);
}

@media (min-width: 900px) {
	.receta-single-body__grid {
		grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
		gap: var(--space-3xl);
	}
}

/* --- Ingredientes --- */

.receta-single-ingredientes__title {
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 2.5vw, 1.625rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-obsidiana);
	margin-bottom: var(--space-lg);
	padding-bottom: var(--space-md);
	border-bottom: 2px solid var(--color-terracota);
}

.receta-single-ingredientes__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.receta-single-ingredientes__item {
	position: relative;
	padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-texto);
	border-bottom: 1px solid rgba(23, 19, 16, 0.08);
}

.receta-single-ingredientes__item:last-child {
	border-bottom: 0;
}

.receta-single-ingredientes__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--color-terracota);
}

/* --- Preparación --- */

.receta-single-preparacion__title {
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 2.5vw, 1.625rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-obsidiana);
	margin-bottom: var(--space-lg);
	padding-bottom: var(--space-md);
	border-bottom: 2px solid var(--color-terracota);
}

.receta-single-preparacion__body p {
	margin-bottom: var(--space-lg);
}

.receta-single-preparacion__body ul,
.receta-single-preparacion__body ol {
	margin-bottom: var(--space-lg);
	padding-left: var(--space-xl);
}

.receta-single-preparacion__body li {
	margin-bottom: var(--space-sm);
}

.receta-single-preparacion__body h2,
.receta-single-preparacion__body h3,
.receta-single-preparacion__body h4 {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-obsidiana);
}

.receta-single-preparacion__body h2 {
	font-size: clamp(1.375rem, 3vw, 1.75rem);
	line-height: 1.25;
	margin-top: var(--space-2xl);
	margin-bottom: var(--space-md);
}

.receta-single-preparacion__body h3 {
	font-size: clamp(1.125rem, 2.5vw, 1.375rem);
	line-height: 1.3;
	margin-top: var(--space-xl);
	margin-bottom: var(--space-sm);
}

.receta-single-preparacion__body a {
	color: var(--color-logo-azul-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.receta-single-preparacion__body a:hover {
	color: var(--color-logo-azul);
}

.receta-single-preparacion__body blockquote {
	border-left: 3px solid var(--color-terracota);
	padding-left: var(--space-lg);
	margin: var(--space-xl) 0;
	font-style: italic;
	color: var(--color-texto-suave);
}

/* --- Footer (Volver a Recetas) --- */

.receta-single-footer {
	background-color: var(--color-logo-azul);
	padding: var(--space-xl) 0;
	text-align: center;
	border-top: 1px solid rgba(251, 247, 240, 0.25);
}

.recurso-single-footer__back,
.relato-single-footer__back,
.receta-single-footer__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-salar);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.recurso-single-footer__back:hover,
.recurso-single-footer__back:focus-visible,
.relato-single-footer__back:hover,
.relato-single-footer__back:focus-visible,
.receta-single-footer__back:hover,
.receta-single-footer__back:focus-visible {
	color: var(--color-blanco);
	text-decoration: underline;
}

/* --- Responsive: reducción de movimiento --- */

@media (prefers-reduced-motion: reduce) {
	.receta-single-hero,
	.receta-single-hero__content {
		animation: none !important;
		transition: none !important;
	}
}