/**
 * Estilos base del tema Cleopatra.
 * Mobile-first desde 390 px. Ningún color literal: todo por tokens.
 * Puntos de ruptura: 480 · 768 · 1024 · 1440.
 */

/* ---------- Fuentes auto-alojadas (variables, en assets/fonts/) ---------- */
@font-face {
	font-family: "Cinzel";
	src: url("../fonts/cinzel.woff2") format("woff2");
	font-weight: 400 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Lora";
	src: url("../fonts/lora.woff2") format("woff2");
	font-weight: 400 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Lora";
	src: url("../fonts/lora-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

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

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text-primary);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--text-body);
	line-height: var(--leading-body);
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--color-accent);
	text-decoration: none;
}
a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: var(--tracking-display);
	text-transform: uppercase;
	margin: 0 0 0.5em;
	text-wrap: balance;
}
h1, .titulo-h1 { font-size: var(--text-h1); }
h2, .titulo-h2 { font-size: var(--text-h2); }
.display { font-size: var(--text-display); }
.display em,
h1 em {
	font-family: var(--font-body);
	font-style: italic;
	text-transform: none;
	letter-spacing: 0;
	color: var(--color-accent);
}

/* Una etiqueta que es un encabezado (h2/h3) se ve igual que la de un párrafo */
.etiqueta:is(h2, h3) { margin: 1em 0; line-height: var(--leading-body); text-wrap: wrap; }
.etiqueta {
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: 500;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* Accesibilidad: salto al contenido */
.salto-contenido {
	position: absolute;
	left: -999px;
	top: 0;
	z-index: 100;
	padding: 12px 20px;
	background: var(--color-surface);
	color: var(--color-text-primary);
}
.salto-contenido:focus { left: 0; }

/* ---------- Topbar ---------- */
.cabecera__topbar {
	display: none; /* móvil: sus funciones viven en la banda y el cajón */
	align-items: center;
	gap: 22px;
	font-family: var(--font-utility); /* el interruptor de tema lo hereda vía font: inherit */
	height: 44px;
	padding: 0 clamp(18px, 4vw, 56px);
	border-bottom: 1px solid var(--color-border);
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
	white-space: nowrap; /* con la altura fija de 44 px, un salto de línea desborda */
}
/* Tramo tableta: cabe todo en una línea a costa de hueco y cuerpo */
@media (min-width: 768px) and (max-width: 919px) {
	.cabecera__topbar { gap: 13px; font-size: 0.88rem; letter-spacing: 0.04em; }
}
.cabecera__ciudad {
	font-size: var(--text-label);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.cabecera__hueco { flex-grow: 1; }
.cabecera__sep { opacity: 0.4; }
.cabecera__telefono { letter-spacing: 0.08em; }

/* ---------- Interruptor de tema ---------- */
.interruptor-tema {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: var(--tap-target);
	padding: 0;
	border: none;
	background: none;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	cursor: pointer;
}
.interruptor-tema:hover { color: var(--color-text-primary); }
/* La etiqueta anuncia el tema al que se cambiaría, no el actual */
.interruptor-tema__a-claro { display: none; }
:root[data-theme="dark"] .interruptor-tema__a-oscuro { display: none; }
:root[data-theme="dark"] .interruptor-tema__a-claro { display: inline; }

/* ---------- Banda de marca ---------- */
.cabecera__banda {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 62px;
	padding: 0 16px;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
}
.marca { display: flex; align-items: center; margin: 0 auto; }
/* El logo cambia de tinta con el tema (burdeos en claro, marfil en oscuro) sin cargar dos ficheros:
   la forma es el SVG, usado como máscara, y el color sale del token --color-logo. La proporción es
   la del SVG (2172 × 724). */
.marca__logo {
	display: block;
	height: 41px;
	aspect-ratio: 3 / 1;
	background-color: var(--color-logo);
	-webkit-mask: url("../img/logo-marfil.svg") center / contain no-repeat;
	mask: url("../img/logo-marfil.svg") center / contain no-repeat;
}
/* Contraste forzado: sin esto el sistema pinta el fondo con el color del lienzo y el logo desaparece */
@media (forced-colors: active) {
	.marca__logo { forced-color-adjust: none; background-color: CanvasText; }
}
.marca:hover { text-decoration: none; }

/* Navegación de escritorio: oculta en móvil */
.nav-principal { display: none; }
.nav-principal__lista {
	display: flex;
	gap: 38px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-utility);
	font-size: 0.9rem;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}
.nav-principal__lista a { color: var(--color-text-secondary); }
.nav-principal__lista a:hover { color: var(--color-text-primary); text-decoration: none; }
.nav-principal__lista .current-menu-item > a,
.nav-principal__lista .current_page_item > a {
	color: var(--color-text-primary);
	padding-bottom: 3px;
	border-bottom: 1px solid var(--color-accent-decor);
}

/* ---------- Menú móvil (details/summary, sin JavaScript) ---------- */
.menu-movil { position: relative; }
.menu-movil > summary {
	list-style: none;
	display: flex;
	align-items: center;
	min-height: var(--tap-target);
	min-width: var(--tap-target);
	cursor: pointer;
	color: var(--color-text-primary);
}
.menu-movil > summary::-webkit-details-marker { display: none; }
.menu-movil__panel {
	position: absolute;
	left: -18px;
	top: calc(100% + 9px);
	z-index: 50;
	min-width: 260px;
	padding: 10px 22px 18px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
}
.menu-movil__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-utility);
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.menu-movil__lista a {
	display: flex;
	align-items: center;
	min-height: var(--tap-target);
	color: var(--color-text-primary);
}
.menu-movil__extras {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	gap: 4px;
	/* Mismas utilidades que la topbar de escritorio (tema y teléfono), y por
	   tanto misma tipografía. El interruptor la hereda vía font: inherit. */
	font-family: var(--font-utility);
	font-size: 0.9rem;
	color: var(--color-text-muted);
}
/* Regla 7: ningún objetivo táctil por debajo de 44 px. El interruptor ya
   los trae de serie; el teléfono y el idioma los necesitan aquí. */
.menu-movil__extras a {
	display: flex;
	align-items: center;
	min-height: var(--tap-target);
}
.menu-movil__horario { padding-top: 4px; }

/* El foco y los saltos no quedan bajo las barras fijas: los chips de filtros (arriba) y la barra de contacto (abajo), solo en móvil */
@media (max-width: 767px) {
	html:has(.filtros__chips) { scroll-padding-top: 76px; }
	html:has(.barra-contacto) { scroll-padding-bottom: 96px; }
}

/* ---------- Contenido y pie ---------- */
.contenido { min-height: 55vh; }
.flujo {
	max-width: 1328px;
	margin: 0 auto;
	padding: 26px 18px 56px;
}

.pie {
	border-top: 1px solid var(--color-border);
	background: var(--color-surface-2);
	color: var(--color-text-secondary);
	font-size: var(--text-small);
}
.pie__interior {
	max-width: 1328px;
	margin: 0 auto;
	padding: 36px 18px 44px;
}
.pie__marca {
	font-family: var(--font-display);
	font-size: 1.25rem;
	letter-spacing: var(--tracking-brand);
	text-transform: uppercase;
	color: var(--color-text-primary);
	margin: 0 0 10px;
}
.pie__nota, .pie__mayores { margin: 0 0 6px; }
.pie__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
.pie__lista a { color: var(--color-text-muted); }

/* ---------- Puntos de ruptura ---------- */

/* ≥ 768 px: aparece la topbar y la banda crece */
@media (min-width: 768px) {
	.cabecera__topbar { display: flex; }
	.cabecera__banda {
		height: 86px;
		padding: 0 clamp(18px, 4vw, 56px);
		gap: 28px;
	}
	.marca { margin: 0; }
	.marca__logo { height: 58px; }
	/* Portada: logo centrado y protagonista, navegación debajo */
	.home .cabecera__banda {
		height: auto;
		flex-direction: column;
		justify-content: center;
		gap: 18px;
		padding-top: 34px;
		padding-bottom: 22px;
	}
	.home .marca { margin: 0 auto; }
	.home .marca__logo { height: 83px; }
	.flujo { padding: 32px clamp(18px, 4vw, 56px) 64px; }
}

/* 768–1023 px: seis elementos de menú no caben junto al logo, así que en
   tablet sigue el menú desplegable del móvil. En la portada el logo se
   queda centrado y el botón del menú va a la izquierda. */
@media (min-width: 768px) and (max-width: 1023px) {
	.home .cabecera__banda { position: relative; }
	.home .menu-movil { position: absolute; left: clamp(18px, 4vw, 56px); top: 50%; transform: translateY(-50%); }
}

/* ≥ 1024 px: navegación de escritorio, siempre en una línea */
@media (min-width: 1024px) {
	.menu-movil { display: none; }
	.nav-principal { display: block; margin-left: auto; }
	.home .nav-principal { margin: 0 auto; }
	.nav-principal__lista a { white-space: nowrap; }
}

/* 1024–1279 px: hueco menor para que los seis elementos quepan */
@media (min-width: 1024px) and (max-width: 1279px) {
	.nav-principal__lista { gap: 24px; }
}

/* Preferencias del sistema: sin animaciones para quien las limita */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Rejilla del listado: 2 / 3 / 4 columnas, nunca una ---------- */
.listado__cabecera { padding-bottom: 8px; }
.listado__recuento { color: var(--color-text-muted); font-size: var(--text-small); margin: 0; }
.rejilla-fichas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: 22px;
}
@media (min-width: 768px)  { .rejilla-fichas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1440px) { .rejilla-fichas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }

/* ---------- Tarjeta ---------- */
.tarjeta { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); }
.tarjeta__foto { position: relative; display: block; aspect-ratio: 3 / 4; background: var(--color-surface-2); overflow: hidden; }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta__verificada {
	position: absolute; top: 12px; left: 12px;
	display: inline-flex; align-items: center; gap: 6px;
	background: color-mix(in srgb, var(--color-bg) 82%, transparent);
	border: 1px solid color-mix(in srgb, var(--color-accent-decor) 40%, transparent);
	padding: 4px 9px;
	font-size: 0.71875rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--color-accent);
}
/* Los dos distintivos comparten una fila: nunca se solapan en tarjetas estrechas. */
.tarjeta__distintivos {
	position: absolute; inset: 12px 12px auto 12px;
	display: flex; justify-content: space-between; align-items: flex-start;
	gap: 6px; flex-wrap: wrap;
	pointer-events: none;
}
.tarjeta__ahora {
	position: static;
	margin-left: auto; /* sin distintivo de vídeo sigue pegado a la derecha */
	display: inline-flex; align-items: center; gap: 6px;
	background: color-mix(in srgb, var(--color-surface) 88%, transparent);
	padding: 4px 9px;
	font-family: var(--font-ui);
	font-size: var(--text-label); color: var(--color-available);
}
.tarjeta__ahora--luego { color: var(--color-text-secondary); }
.tarjeta__video {
	position: static;
	display: inline-flex; align-items: center; gap: 5px;
	background: color-mix(in srgb, var(--color-surface) 88%, transparent);
	padding: 4px 9px;
	font-family: var(--font-ui); font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--color-text-primary);
}
.tarjeta__video svg { width: 12px; height: 12px; }
.tarjeta__distintivos { z-index: 1; }
/* Ficha no disponible: las fotos quedan tras un cristal translúcido y una banda inferior lo dice. */
.cristal-no-disponible {
	position: absolute; inset: 0;
	background: color-mix(in srgb, var(--color-surface) 38%, transparent);
	-webkit-backdrop-filter: blur(3px) saturate(0.55);
	backdrop-filter: blur(3px) saturate(0.55);
	pointer-events: none;
}
.banda-no-disponible {
	position: absolute; inset: auto 0 0 0;
	display: flex; align-items: center; justify-content: center;
	min-height: var(--tap-target);
	padding: 10px 12px;
	background: color-mix(in srgb, var(--color-bg) 86%, transparent);
	border-top: 1px solid color-mix(in srgb, var(--color-accent-decor) 40%, transparent);
	font-family: var(--font-ui); font-size: var(--text-label); letter-spacing: 0.06em; text-align: center; text-transform: uppercase;
	color: var(--color-text-primary);
	pointer-events: none;
}
.galeria__marco--no-disponible .galeria__contador { bottom: calc(var(--tap-target) + 12px); }
.punto { width: 6px; height: 6px; border-radius: 50%; background: var(--color-available); display: inline-block; }
.tarjeta__cuerpo { display: flex; flex-direction: column; gap: 10px; padding: 13px 14px 15px; }
.tarjeta__linea-nombre { display: flex; align-items: baseline; gap: 9px; }
.tarjeta__nombre { font-family: var(--font-utility); font-size: var(--text-name); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-primary); }
.tarjeta__nombre:hover { text-decoration: none; color: var(--color-accent); }
.tarjeta__edad { font-size: 0.875rem; color: var(--color-text-muted); }
.tarjeta__etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etiqueta-termino {
	font-family: var(--font-ui);
	font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--color-text-secondary); border: 1px solid var(--color-border-strong);
	padding: 4px 8px;
}
.etiqueta-termino:hover { color: var(--color-text-primary); border-color: var(--color-text-muted); text-decoration: none; }
.tarjeta__titular {
	margin: -3px 0 0;
	font-size: 0.8125rem;
	color: var(--color-accent);
}
/* El resumen se corta a tres líneas para que la rejilla no quede dentada:
   las biografías no miden todas lo mismo. */
.tarjeta__resumen {
	margin: 0;
	padding-top: 9px;
	border-top: 1px solid var(--color-border);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--color-text-muted);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* ---------- Botones ---------- */
.boton {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: var(--tap-contact);
	padding: 15px 20px;
	font-family: var(--font-ui);
	font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.boton:hover { text-decoration: none; }
.boton--principal { background: var(--color-cta); color: var(--color-cta-text); flex-grow: 1; }
.boton--principal:hover { filter: brightness(1.12); }
.boton--secundario { border: 1px solid var(--color-border-strong); color: var(--color-text-primary); background: var(--color-surface); }

/* ---------- Ficha ---------- */
.ficha { display: flex; flex-direction: column; gap: 18px; }
.ficha__galeria { display: flex; flex-direction: column; gap: 12px; }

/* Galería (03/09, como Pasarela): foto entera con la altura de cada imagen,
   rejilla con todas las miniaturas (4 / 6 / 3 columnas) y visor a pantalla
   completa con <dialog>. La tira desliza por scroll-snap; el JS mantiene
   contador, miniatura activa, la proporción del marco y el visor. Sin JS,
   la foto grande enlaza al archivo original. */
.galeria { display: flex; flex-direction: column; gap: 12px; }
.galeria__marco {
	position: relative;
	aspect-ratio: var(--galeria-ratio, 3 / 4);
	max-height: min(80vh, 620px);
	border: 1px solid color-mix(in srgb, var(--color-accent-decor) 22%, transparent);
	background: var(--color-surface-2);
}
.galeria__tira {
	position: relative;
	display: flex;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.galeria__tira::-webkit-scrollbar { display: none; }
.galeria__foto {
	flex: 0 0 100%;
	margin: 0;
	height: 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}
.galeria__abrir { display: block; height: 100%; cursor: zoom-in; }
.galeria__foto img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.galeria__foto--video .galeria__abrir { position: relative; }
.galeria__play {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	pointer-events: none; color: var(--color-sobre-foto);
}
.galeria__play svg {
	width: 64px; height: 64px; padding: 18px; box-sizing: border-box;
	border-radius: 50%;
	background: color-mix(in srgb, var(--color-scrim) 55%, transparent);
	border: 1px solid color-mix(in srgb, var(--color-sobre-foto) 40%, transparent);
}
.galeria__play--mini svg { width: 30px; height: 30px; padding: 8px; }
.galeria__miniatura--video img { filter: saturate(0.85); }
.galeria__contador {
	position: absolute; right: 12px; bottom: 12px;
	padding: 4px 10px;
	background: color-mix(in srgb, var(--color-bg) 78%, transparent);
	color: var(--color-text-primary);
	font-family: var(--font-ui); font-size: 0.8125rem; letter-spacing: 0.08em;
}
.galeria__flecha {
	display: none; /* móvil: se desliza con el dedo */
	position: absolute; top: 50%; transform: translateY(-50%);
	width: var(--tap-target); height: var(--tap-target);
	align-items: center; justify-content: center;
	border: 1px solid var(--color-border-strong);
	background: color-mix(in srgb, var(--color-bg) 78%, transparent);
	color: var(--color-text-primary);
	cursor: pointer; padding: 0;
}
.galeria__flecha svg { width: 20px; height: 20px; }
.galeria__flecha--ant { left: 12px; }
.galeria__flecha--sig { right: 12px; }
.galeria__miniaturas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.galeria__miniatura {
	position: relative; display: block;
	aspect-ratio: 1; overflow: hidden;
	padding: 0; border: 1px solid var(--color-border);
	background: none; cursor: pointer;
}
.galeria__miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria__miniatura.es-activa { border-color: var(--color-accent); outline: 1px solid var(--color-accent); outline-offset: -1px; }
@media (min-width: 768px) {
	.galeria__marco { max-height: 80vh; }
	.galeria__miniaturas { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
}
@media (min-width: 900px) {
	.galeria__flecha { display: inline-flex; }
	.galeria__miniaturas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}

/* Visor a pantalla completa (<dialog>): fondo scrim en los dos temas. El navegador da al <dialog> «height: fit-content»:
   sin fijar aquí su alto, la foto se pintaba a su tamaño natural (más alta que la ventana) en vez de caber en ella. */
.visor {
	position: fixed; inset: 0; margin: 0;
	width: 100%; height: 100%; height: 100dvh;
	max-width: none; max-height: none;
	border: 0; padding: 0; overflow: hidden;
	background: var(--color-scrim); color: var(--color-sobre-foto);
}
.visor::backdrop { background: var(--color-scrim); }
.visor__barra {
	position: absolute; inset: 0 0 auto 0; z-index: 1;
	display: flex; justify-content: space-between; align-items: center;
	padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
	pointer-events: none; /* el fondo de la barra no tapa el clic que cierra */
}
.visor__contador, .visor__cerrar { pointer-events: auto; }
.visor__contador {
	padding: 4px 10px;
	background: color-mix(in srgb, var(--color-scrim) 60%, transparent);
	font-family: var(--font-ui); font-size: 0.875rem; letter-spacing: 0.08em;
}
.visor__cerrar, .visor__flecha {
	display: inline-flex; align-items: center; justify-content: center;
	width: var(--tap-target); height: var(--tap-target); padding: 0;
	border: 1px solid color-mix(in srgb, var(--color-sobre-foto) 35%, transparent);
	background: color-mix(in srgb, var(--color-scrim) 60%, transparent);
	color: var(--color-sobre-foto); cursor: pointer;
}
.visor__cerrar svg, .visor__flecha svg { width: 20px; height: 20px; }
.visor__cerrar:focus-visible, .visor__flecha:focus-visible { outline: 2px solid var(--color-sobre-foto); outline-offset: 2px; }
.visor__tira {
	position: relative;
	display: flex; height: 100%;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	overscroll-behavior: contain;
}
.visor__tira::-webkit-scrollbar { display: none; }
.visor__foto {
	flex: 0 0 100%; margin: 0; height: 100%;
	/* la fila mide exactamente el alto de la ventana: así «max-height: 100%» de la foto se resuelve y no la agranda su tamaño natural */
	display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center;
	scroll-snap-align: center; scroll-snap-stop: always;
}
.visor__foto img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.visor__foto--video video { max-width: 100%; max-height: 100%; width: auto; height: auto; background: var(--color-scrim); }
/* Flechas a los lados también en el móvil (además de deslizar con el dedo) */
.visor__flecha { position: absolute; top: 50%; transform: translateY(-50%); }
.visor__flecha--ant { left: max(12px, env(safe-area-inset-left)); }
.visor__flecha--sig { right: max(12px, env(safe-area-inset-right)); }
@media (min-width: 900px) {
	.visor__flecha--ant { left: 16px; }
	.visor__flecha--sig { right: 16px; }
}

.ficha__panel { display: flex; flex-direction: column; border: 1px solid var(--color-border); background: var(--color-surface-2); }
.ficha__cabecera { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; padding: 22px 22px 0; }
.ficha__nombre { font-family: var(--font-utility); font-weight: 700; font-size: clamp(1.625rem, 1.35rem + 1.1vw, 2.25rem); letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.1; margin: 0; }
.ficha__edad { font-size: 1.0625rem; color: var(--color-text-muted); }
.ficha__subtitulo { margin: 8px 22px 0; font-style: italic; font-size: var(--text-body); line-height: 1.5; color: var(--color-text-muted); }
.ficha__dispo-mini { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 0.9rem; color: var(--color-text-secondary); }
.ficha__dispo-mini.es-ahora { color: var(--color-available); }

.ficha__verificacion {
	display: grid; grid-template-columns: auto 1fr; grid-auto-flow: column; align-items: center; column-gap: 10px;
	grid-template-rows: auto auto;
	margin: 16px 22px 0; padding: 11px 14px;
	border: 1px solid color-mix(in srgb, var(--color-accent-decor) 35%, transparent);
	background: color-mix(in srgb, var(--color-accent-decor) 6%, transparent);
	color: var(--color-accent);
}
.ficha__verificacion svg { grid-row: span 2; }
.ficha__verificacion-titulo { font-size: 0.9rem; }
.ficha__verificacion-fecha { font-size: 0.8125rem; color: var(--color-text-muted); }

.ficha__disponibilidad {
	display: none; /* móvil: la versión mini vive en la cabecera */
	align-items: center; gap: 12px;
	margin-top: 16px; padding: 16px 22px;
	border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
	background: color-mix(in srgb, var(--color-available) 5%, transparent);
}
.ficha__disponibilidad .punto { width: 8px; height: 8px; }
.ficha__disponibilidad-texto { color: var(--color-available); font-size: var(--text-body); }
.ficha__disponibilidad-detalle { font-size: 0.9rem; color: var(--color-text-muted); }

/* Bloques de la columna derecha (características, servicios, tarifas) */
.ficha__bloque { padding: 18px 22px; border-top: 1px solid var(--color-border); }
.ficha__bloque > .etiqueta { margin: 0; }
.ficha__tarifas-lista { margin: 12px 0 0; }
.ficha__tarifa { display: flex; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--color-border); }
.ficha__tarifa:last-child { border-bottom: none; }
.ficha__tarifa dt { font-size: var(--text-small); color: var(--color-text-secondary); }
.ficha__tarifa dd { margin-left: auto; font-size: 1.125rem; color: var(--color-text-primary); }
.etiqueta--acento { color: var(--color-accent); }
.ficha__taxi {
	display: flex; align-items: center; gap: 9px;
	margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--color-border);
	font-size: 0.875rem; color: var(--color-text-muted);
}
.ficha__taxi svg { color: var(--color-available); flex-shrink: 0; }

/* Características: dos columnas, el rótulo pequeño sobre el dato. Solo salen las que tienen dato. */
.ficha__datos-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; margin: 6px 0 0; }
.ficha__dato { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 1px; min-width: 0; min-height: calc(var(--tap-target) + 14px); padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.ficha__dato:last-child, .ficha__dato:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.ficha__dato-k { margin: 0; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.ficha__dato-v { margin: 0; font-size: var(--text-body); color: var(--color-text-primary); overflow-wrap: anywhere; }
/* inline-flex + min-height: un enlace en línea solo mide la caja de línea (~28 px). */
.ficha__dato-enlace { display: inline-flex; align-items: center; min-height: var(--tap-target); color: var(--color-text-primary); text-decoration: underline; text-decoration-color: var(--color-border); text-underline-offset: 3px; }
.ficha__dato-enlace:hover, .ficha__dato-enlace:focus-visible { color: var(--color-accent); text-decoration-color: var(--color-accent); }

.ficha__cta { display: none; flex-direction: column; gap: 11px; padding: 20px 22px 24px; border-top: 1px solid var(--color-border); }
.ficha__nota-discrecion { margin: 6px 0 0; font-size: 0.84rem; color: var(--color-text-muted); text-align: center; line-height: 1.6; }

.ficha__cuerpo { max-width: 70ch; }
.prosa p { color: var(--color-text-secondary); line-height: 1.8; }
/* Servicios: lista a dos columnas, cada uno enlaza a su página */
.ficha__servicios-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; margin: 6px 0 0; padding: 0; list-style: none; }
.ficha__servicio { display: flex; align-items: center; gap: 10px; min-height: var(--tap-target); color: var(--color-text-primary); }
.ficha__servicio::before { content: ""; flex: none; width: 5px; height: 5px; background: var(--color-accent-decor); }
.ficha__servicio:hover, .ficha__servicio:focus-visible { color: var(--color-accent); text-decoration: none; }

.pasos-hotel { border: 1px solid var(--color-border); background: var(--color-surface-2); padding: 26px 24px; margin: 8px 0 30px; }
.pasos-hotel__titulo { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin: 0 0 18px; }
.pasos-hotel__rejilla { display: grid; gap: 22px; }
.paso { display: flex; flex-direction: column; gap: 7px; }
.paso__numero { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-accent); }
.paso__titulo { font-size: var(--text-small); color: var(--color-text-primary); }
.paso p { margin: 0; font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.65; }

/* Barra de contacto fija: solo móvil. Una banda a todo el ancho abajo, con los botones (52 px, solo icono) repartidos
   a partes iguales; la burbuja del chat se coloca justo encima de la banda (más abajo). El verde y el azul salen de
   tokens: el logo blanco tiene que llegar a 3:1. */
.barra-contacto {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
	display: flex; gap: 10px;
	padding: 10px 18px 12px;
	background: var(--color-bg);
	border-top: 1px solid var(--color-border);
}
.barra-contacto__boton {
	flex: 1 1 0; min-width: 0;
	display: inline-flex; align-items: center; justify-content: center;
	height: var(--tap-contact);
	border: 1px solid transparent; /* en modo de contraste forzado se sigue viendo el botón */
	color: var(--color-cta-text);
}
.barra-contacto__boton:hover { text-decoration: none; filter: brightness(1.12); }
.barra-contacto__boton--whatsapp { background: var(--color-whatsapp); }
.barra-contacto__boton--telegram { background: var(--color-telegram); }
.barra-contacto__boton--tel { background: var(--color-cta); }
.single-escort .contenido { padding-bottom: 96px; } /* que la barra no tape el final */

/* En el resto de páginas la barra espera fuera de la pantalla y entra al bajar (cleopatra_scripts_pie). Sin
   JavaScript no hay .con-js y se ve siempre. Oculta no se tabula ni la anuncian los lectores de pantalla. */
.con-js .barra-contacto--auto {
	visibility: hidden; opacity: 0; transform: translateY(100%);
	transition: transform 0.2s ease, opacity 0.2s ease, visibility 0s linear 0.2s;
}
.con-js .barra-contacto--auto.es-visible { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
@media (max-width: 767px) {
	html:has(.barra-contacto--auto) .pie__interior { padding-bottom: 104px; } /* que no tape el final del pie */

	/* El botón flotante del chatbot (widget de terceros, #cbw-chat-root, abajo a la derecha) quedaba encima del
	   botón de llamar. Mientras la banda se ve, se sube justo encima de ella (banda de 75 px = 1 + 10 + 52 + 12,
	   más 12 px de hueco); sin la banda vuelve a su sitio. Lleva !important porque el widget fija su posición con
	   el suyo. El panel abierto del chat ya queda por encima de la barra (z-index del widget). */
	html:has(.barra-contacto--auto.es-visible) #cbw-chat-root,
	html:has(.barra-contacto:not(.barra-contacto--auto)) #cbw-chat-root { bottom: calc(var(--tap-contact) + 35px) !important; }
}

@media (min-width: 768px) {
	.barra-contacto { display: none; }
	.ficha__cta { display: flex; }
	.ficha__disponibilidad { display: flex; }
	.ficha__dispo-mini { display: none; }
	.single-escort .contenido { padding-bottom: 0; }
	.pasos-hotel__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
	.ficha__miniaturas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ≥1024: galería + panel a dos columnas; el panel se queda fijo al hacer scroll */
@media (min-width: 1024px) {
	.ficha {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(360px, 452px);
		gap: clamp(28px, 4vw, 56px);
		align-items: start;
	}
	/* La columna derecha es larga (características, servicios y tarifas): no se queda fija, y ocupa las dos filas de la
	   cuadrícula para que la biografía suba justo debajo de las miniaturas, sin hueco. */
	.ficha__galeria { grid-column: 1; grid-row: 1; }
	.ficha__panel { grid-column: 2; grid-row: 1 / span 2; }
	.ficha__cuerpo { grid-column: 1; }
}

/* ---------- Filtros del listado ---------- */
.filtros { margin: 18px 0 4px; }
.filtros__chips {
	position: sticky; top: 0; z-index: 30;
	display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
	padding: 12px 0;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}
.filtros__rotulo { margin-right: 4px; }
.chip {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: var(--tap-target);
	padding: 9px 15px;
	border: 1px solid var(--color-border-strong);
	color: var(--color-text-secondary);
	font-size: 0.875rem;
	cursor: pointer;
}
.chip:hover { color: var(--color-text-primary); text-decoration: none; }
.chip .punto { background: var(--color-available); }
.chip--activo { border-color: var(--color-accent); color: var(--color-accent); }
.chip--activo-verde {
	border-color: color-mix(in srgb, var(--color-available) 50%, transparent);
	background: color-mix(in srgb, var(--color-available) 12%, transparent);
	color: var(--color-available);
}
.chip__cuenta {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 20px; height: 20px; padding: 0 5px;
	background: var(--color-accent-decor); color: var(--color-bg);
	border-radius: 10px; font-size: 0.75rem;
}
.filtros__quitar { font-size: 0.875rem; color: var(--color-text-muted); }
.filtros__solo-tablet { display: none; }

/* Cajón: pantalla completa en móvil, panel flotante en tablet */
.cajon-filtros > summary { list-style: none; }
.cajon-filtros > summary::-webkit-details-marker { display: none; }
.cajon-filtros[open] .cajon-filtros__panel {
	position: fixed; inset: 0; z-index: 60;
	background: var(--color-bg);
	padding: 18px;
	overflow-y: auto;
	display: flex; flex-direction: column;
}
.cajon-filtros__panel form { display: flex; flex-direction: column; flex-grow: 1; }
.cajon-filtros__cabecera {
	display: flex; align-items: baseline; justify-content: space-between;
	padding-bottom: 14px; margin-bottom: 6px;
	border-bottom: 1px solid var(--color-border);
}
.cajon-filtros__titulo { font-family: var(--font-display); font-size: 1.5rem; }
.cajon-filtros__limpiar { font-size: 0.875rem; color: var(--color-text-muted); }
.cajon-filtros__acciones { display: inline-flex; align-items: center; gap: 14px; }
/* Cierra el cajón sin aplicar nada. Solo cuando hay JavaScript y solo en móvil: allí el panel ocupa toda
   la pantalla y tapa el botón «Filtros»; en tableta es un panel flotante y ese botón sigue a la vista. */
.cajon-filtros__cerrar {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: var(--tap-target); height: var(--tap-target); padding: 0; margin: -8px -10px -8px 0;
	border: 0; background: none; color: var(--color-text-primary); cursor: pointer;
}
.cajon-filtros__cerrar[hidden] { display: none; }
.cajon-filtros__cerrar svg { width: 20px; height: 20px; }
@media (min-width: 768px) { .cajon-filtros__cerrar { display: none; } }
.cajon-filtros__campos { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; }
.cajon-filtros__ver { margin-top: 18px; width: 100%; }

.filtro-campo { display: flex; flex-direction: column; gap: 5px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.filtro-campo__rotulo { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); }
.filtro-campo select {
	appearance: none;
	background: transparent; border: none; padding: 4px 0;
	min-height: var(--tap-target);
	color: var(--color-text-primary);
	font: inherit; font-size: var(--text-body);
	cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
	background-position: right 12px top 50%, right 6px top 50%;
	background-size: 6px 6px;
	background-repeat: no-repeat;
}
.filtro-campo select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.filtro-grupo { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--color-border); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); }

/* El panel de cinco campos: solo escritorio */
.filtros__panel { display: none; }

@media (min-width: 768px) {
	.filtros__solo-tablet { display: inline-flex; }
	.filtros__chips { position: static; }
	/* el cajón deja de ser pantalla completa: panel anclado */
	.cajon-filtros { position: relative; }
	.cajon-filtros[open] .cajon-filtros__panel {
		position: absolute; inset: auto; right: 0; top: calc(100% + 8px);
		width: 340px; max-height: 70vh;
		border: 1px solid var(--color-border);
		background: var(--color-surface);
		padding: 20px 22px;
	}
}

@media (min-width: 1024px) {
	.filtros__solo-tablet, .cajon-filtros { display: none; }
	.filtros__panel {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 1px;
		background: var(--color-border);
		border: 1px solid var(--color-border);
		margin-top: 14px;
	}
	.filtros__panel .filtro-campo { background: var(--color-surface-2); border-bottom: none; padding: 15px 20px; }
	.filtros__aplicar { grid-column: -2; margin: 10px; }
	.filtros__rasgos { grid-column: 1 / -1; background: var(--color-surface-2); }
	.filtros__rasgos-titulo { list-style: none; cursor: pointer; padding: 14px 20px; min-height: 44px; display: flex; align-items: center; gap: 8px; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); }
	.filtros__rasgos-titulo::-webkit-details-marker { display: none; }
	.filtros__rasgos-titulo::before { content: ''; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; }
	.filtros__rasgos[open] .filtros__rasgos-titulo::before { transform: rotate(45deg); }
	.filtros__rasgos-campos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--color-border); border-top: 1px solid var(--color-border); }
}

/* ---------- Páginas de taxonomía ---------- */
.migas { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0 18px; font-size: 0.875rem; color: var(--color-text-muted); }
.migas a { color: var(--color-text-muted); }
.migas a:hover { color: var(--color-text-primary); }
.migas__actual { color: var(--color-text-secondary); }

.zona__cabecera { display: flex; flex-direction: column; gap: 22px; margin-bottom: 8px; }
.zona__entradilla { margin: 0; font-size: 1.125rem; color: var(--color-text-secondary); line-height: 1.65; max-width: 54ch; }
.zona__cifras { display: flex; gap: 14px; }
.cifra {
	flex-grow: 1; max-width: 200px;
	display: flex; flex-direction: column; gap: 4px;
	border: 1px solid var(--color-border); background: var(--color-surface-2);
	padding: 16px 20px;
}
.cifra__numero { font-family: var(--font-display); font-size: 2rem; line-height: 1; }
.cifra__rotulo { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); }
.cifra--verde { border-color: color-mix(in srgb, var(--color-available) 35%, transparent); background: color-mix(in srgb, var(--color-available) 5%, transparent); }
.cifra--verde .cifra__numero { color: var(--color-available); }

/* El bloque SEO: íntegro siempre, nunca recortado por JavaScript */
.bloque-seo {
	margin-top: 56px; padding-top: 40px;
	border-top: 1px solid var(--color-border);
	max-width: 70ch;
}
.bloque-seo h2, .bloque-seo h3 { font-family: var(--font-display); font-weight: 300; }

.faq { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--color-border); }
.faq__rejilla { display: grid; gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); margin-top: 10px; }
.faq__caja { background: var(--color-surface-2); padding: 24px 26px; }
.faq__pregunta { font-family: var(--font-ui); font-weight: 500; font-size: 1.0625rem; margin: 0 0 10px; }
.faq__respuesta { margin: 0; font-size: var(--text-small); color: var(--color-text-secondary); line-height: 1.7; }

.populares { margin: 48px 0 10px; padding-top: 32px; border-top: 1px solid var(--color-border); }
.populares__lista { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

@media (min-width: 768px) {
	.faq__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.zona__cabecera { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

/* ---------- Portada ---------- */
.hero {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	max-width: 1328px; margin: 0 auto;
	padding: 40px 18px 30px;
}
.hero__kicker { margin: 0 0 16px; display: flex; align-items: center; gap: 14px; }
.hero__kicker::before { content: ""; width: 34px; height: 1px; background: var(--color-accent-decor); }
.hero .display { margin: 0 0 18px; }
.hero__entradilla { margin: 0 auto 26px; font-style: italic; font-size: 1.125rem; color: var(--color-text-secondary); line-height: 1.65; max-width: 52ch; }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

.cifras {
	display: flex;
	gap: 1px;
	background: var(--color-border);
	border: 1px solid var(--color-border);
	max-width: 420px;
	margin: 30px auto 0;
	width: 100%;
}
.cifras__celda {
	flex: 1;
	display: flex; flex-direction: column; gap: 3px;
	background: var(--color-surface);
	padding: 16px 8px;
	text-align: center;
}
.cifras__numero { font-family: var(--font-display); font-size: clamp(1.0625rem, 0.9rem + 0.7vw, 1.625rem); color: var(--color-accent); }
.cifras__rotulo { font-family: var(--font-ui); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); }
.hero__ctas .boton--principal { flex-grow: 0; }
.punto--oscuro { background: var(--color-bg); }
/* Cabecera de foto (referencia La Suite): la foto del chalet a sangre
   completa con el logo marfil centrado encima. El velo y el texto usan
   los tokens sobre-foto, constantes en ambos temas. */
.portada-foto {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	min-height: clamp(430px, 66vh, 660px);
	overflow: hidden;
}
/* El encuadre (object-position) está afinado a la foto actual, con los
   labios a la derecha del cuadro: así sobreviven al recorte vertical del
   móvil. Si se cambia la foto de portada, revisar este valor. */
.portada-foto__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.portada-foto::after { content: ""; position: absolute; inset: 0; background: var(--color-velo-foto); }
.portada-foto__contenido {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; align-items: center;
	text-align: center; gap: 20px;
	padding: 56px 18px;
	max-width: 760px;
}
.portada-foto__logo { height: clamp(58px, 9vw, 94px); width: auto; }
.portada-foto__titulo { margin: 0; color: var(--color-sobre-foto); }
.portada-foto__entradilla {
	margin: 0;
	font-style: italic; font-size: 1.125rem; line-height: 1.65;
	color: var(--color-sobre-foto);
	max-width: 52ch;
}
.portada-foto .boton--secundario {
	background: transparent;
	border-color: var(--color-sobre-foto);
	color: var(--color-sobre-foto);
}
/* En la portada con foto, la banda pierde el logo y centra la navegación */
.cabecera--sobre-foto .marca { display: none; }
.cabecera--sobre-foto .nav-principal { margin-left: auto; margin-right: auto; }
.hero.hero--solo-cifras { padding-top: 26px; padding-bottom: 26px; }
.hero--solo-cifras .cifras { margin-top: 0; }

.franja-ahora {
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	background: var(--color-surface-2);
}
.franja-ahora__interior { max-width: 1328px; margin: 0 auto; padding: 30px 18px; }
.franja-ahora__cabecera { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.franja-ahora__cabecera .punto { width: 8px; height: 8px; }
.franja-ahora__titulo { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin: 0; }
.franja-ahora__ver { margin-left: auto; color: var(--color-accent); }
.franja-ahora__lista {
	display: flex; gap: 12px;
	overflow-x: auto;
	scrollbar-width: none;
	margin: 0 -18px; padding: 0 18px;
}
.franja-ahora__lista::-webkit-scrollbar { display: none; }
.mini-ficha {
	flex-shrink: 0; width: 250px;
	display: flex; gap: 14px; align-items: center;
	padding: 14px;
	border: 1px solid var(--color-border); background: var(--color-surface);
	color: var(--color-text-primary);
}
.mini-ficha:hover { text-decoration: none; border-color: var(--color-border-strong); }
.mini-ficha__foto { width: 56px; height: 70px; flex-shrink: 0; overflow: hidden; background: var(--color-surface-2); }
.mini-ficha__foto img { width: 100%; height: 100%; object-fit: cover; }
.mini-ficha__datos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mini-ficha__nombre { font-family: var(--font-utility); font-weight: 700; font-size: var(--text-body); }
.mini-ficha__zona { font-size: 0.84rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-ficha__estado { font-size: 0.84rem; color: var(--color-available); }

.seleccion { padding-top: var(--espacio-seccion); padding-bottom: 0; }
.seleccion__cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; margin-bottom: 26px; }
.seleccion__cabecera .titulo-h2 { margin: 6px 0 0; }
.seleccion__ver { margin-left: auto; color: var(--color-accent); padding-bottom: 6px; border-bottom: 1px solid var(--color-border-strong); white-space: nowrap; }
.seleccion__ver:hover { text-decoration: none; border-color: var(--color-accent); }

.confianza { padding-top: var(--espacio-seccion); padding-bottom: 0; }
.confianza__rejilla { display: grid; gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); }
.pilar { background: var(--color-surface-2); padding: 34px 30px; display: flex; flex-direction: column; gap: 14px; }
.pilar svg { color: var(--color-accent); }
.pilar__titulo { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin: 0; }
.pilar p { margin: 0; color: var(--color-text-secondary); line-height: 1.7; }

.zonas { padding-top: var(--espacio-seccion); padding-bottom: var(--espacio-seccion); display: flex; flex-direction: column; gap: 30px; }
.zonas__texto { margin: 10px 0 0; color: var(--color-text-secondary); line-height: 1.7; max-width: 44ch; }
.zonas__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); }
.zona-celda { background: var(--color-surface-2); padding: 20px 22px; display: flex; flex-direction: column; gap: 5px; color: var(--color-text-primary); }
.zona-celda:hover { text-decoration: none; background: var(--color-surface); }
.zona-celda__nombre { font-family: var(--font-display); font-size: 1.3125rem; }
.zona-celda__cuenta { font-size: 0.84rem; color: var(--color-text-muted); }

/* Celdas de zona con foto: retrato al fondo y velo inferior para el texto */
.zona-celda--foto { position: relative; overflow: hidden; min-height: 216px; justify-content: flex-end; }
.zona-celda__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.zona-celda--foto::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(
		to top,
		var(--color-surface-2) 12%,
		color-mix(in srgb, var(--color-surface-2) 62%, transparent) 46%,
		transparent 72%
	);
}
.zona-celda--foto .zona-celda__nombre,
.zona-celda--foto .zona-celda__cuenta { position: relative; z-index: 1; }
.zona-celda--foto:hover .zona-celda__fondo { transform: scale(1.03); transition: transform 0.4s ease; }

/* Texto de la portada (bloque SEO): prosa a una columna legible, tras las zonas */
.texto-portada { padding-top: 0; padding-bottom: var(--espacio-seccion); }
.texto-portada__cuerpo { max-width: 72ch; }
.texto-portada h2 { margin: 2.2em 0 0.6em; }
.texto-portada h2:first-child { margin-top: 0; }
.texto-portada h3 { margin: 1.6em 0 0.4em; font-size: 1.125rem; }
.texto-portada p { margin: 0 0 1em; color: var(--color-text-secondary); line-height: 1.8; }
.texto-portada a { color: var(--color-accent); text-decoration: underline; }

/* La casa: banda con la foto real del chalet */
.chalet {
	display: flex; flex-direction: column;
	max-width: 1328px; margin: var(--espacio-seccion) auto 0;
	padding: 0 18px;
	gap: 22px;
}
.chalet__foto { margin: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--color-accent-decor) 22%, transparent); }
.chalet__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chalet__parrafo { margin: 12px 0 0; color: var(--color-text-secondary); line-height: 1.7; max-width: 46ch; }
@media (min-width: 900px) {
	.chalet {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr);
		gap: clamp(32px, 5vw, 72px);
		align-items: center;
		padding: 0 clamp(18px, 4vw, 56px);
	}
	.chalet__foto { aspect-ratio: 3 / 2; }
}

@media (min-width: 768px) {
	.hero { padding: 56px clamp(18px, 4vw, 56px) 64px; }
	.confianza__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pilar { padding: 44px 38px; }
	.zonas__rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.zonas { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 72px; align-items: start; }
	.franja-ahora__lista { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; }
	.mini-ficha { width: auto; }
}

.zona__salidas { margin: 18px 0 6px; font-style: italic; color: var(--color-text-secondary); }

/* ---------- Páginas ---------- */
.pagina__contenido { max-width: 70ch; }
.pagina__contenido h2 { margin-top: 1.6em; }
.pagina__contenido table { width: 100%; border-collapse: collapse; margin: 20px 0; border: 1px solid var(--color-border); background: var(--color-surface); }
.pagina__contenido th {
	text-align: left; font-family: var(--font-ui); font-weight: 500;
	font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
	color: var(--color-text-muted); padding: 12px 16px; border-bottom: 1px solid var(--color-border-strong);
	background: var(--color-surface-2);
}
.pagina__contenido td { padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.pagina__contenido tr:last-child td { border-bottom: none; }
.pagina__contenido td:last-child { text-align: right; font-size: 1.0625rem; color: var(--color-accent); white-space: nowrap; }
.pilar__enlace { font-family: var(--font-ui); font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; margin-top: 4px; }

/* ---------- Blog ---------- */
.rejilla-entradas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 26px;
	margin-top: 24px;
}
.entrada { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); }
.entrada__imagen { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-surface-2); }
.entrada__imagen img { width: 100%; height: 100%; object-fit: cover; }
.entrada__cuerpo { display: flex; flex-direction: column; gap: 9px; padding: 18px 20px 20px; }
.entrada__categoria {
	align-self: flex-start;
	font-family: var(--font-ui); font-size: var(--text-label);
	letter-spacing: var(--tracking-label); text-transform: uppercase;
	color: var(--color-accent);
}
.entrada__titulo {
	font-family: var(--font-body); font-weight: 500;
	font-size: 1.125rem; line-height: 1.4;
	letter-spacing: 0; text-transform: none;
	margin: 0;
}
.entrada__titulo a { color: var(--color-text-primary); }
.entrada__titulo a:hover { color: var(--color-accent); text-decoration: none; }
.entrada__fecha { font-family: var(--font-ui); font-size: 0.8125rem; color: var(--color-text-muted); }

.articulo__cabecera { display: flex; flex-direction: column; gap: 10px; max-width: 70ch; }
.articulo__titulo {
	font-family: var(--font-body); font-weight: 500;
	font-size: clamp(1.5rem, 1.25rem + 1vw, 2.25rem); line-height: 1.25;
	letter-spacing: 0; text-transform: none;
	margin: 0;
}
.articulo__portada { margin: 26px 0 0; max-width: 70ch; border: 1px solid var(--color-border); }
.articulo__contenido { max-width: 70ch; margin-top: 26px; }
.articulo__contenido img { border: 1px solid var(--color-border); height: auto; }
.articulo__contenido h2, .articulo__contenido h3 { font-family: var(--font-body); font-weight: 500; text-transform: none; letter-spacing: 0; }
.articulo__navegacion {
	display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
	max-width: 70ch; margin-top: 40px; padding-top: 22px;
	border-top: 1px solid var(--color-border);
	font-size: var(--text-small);
}
.articulo__siguiente { margin-left: auto; text-align: right; }

/* ---------- Aviso de mayores de 18 ---------- */
.aviso-edad {
	position: fixed; inset: 0; z-index: 90;
	display: flex; align-items: center; justify-content: center;
	padding: 18px;
	background: color-mix(in srgb, var(--color-bg) 92%, transparent);
	backdrop-filter: blur(6px);
}
:root[data-edad="ok"] .aviso-edad { display: none; }
.aviso-edad__caja {
	max-width: 480px; width: 100%;
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	padding: 36px 32px;
	text-align: center;
}
.aviso-edad__marca { font-family: var(--font-display); font-size: 1.3125rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 16px; }
.aviso-edad__titulo { font-family: var(--font-display); font-weight: 400; font-size: 1.3125rem; line-height: 1.2; letter-spacing: var(--tracking-display); text-transform: uppercase; text-wrap: balance; margin: 0 0 12px; }
.aviso-edad__texto { font-size: var(--text-small); color: var(--color-text-secondary); margin: 0 0 22px; }
.aviso-edad__botones { display: flex; flex-direction: column; gap: 10px; }

/* Texto solo para lectores de pantalla */
.visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Formularios propios (casting, contacto) ---------- */
.formulario { max-width: 640px; margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--color-border); }
.formulario, .formulario-aviso { scroll-margin-top: 16px; }
.formulario__titulo { font-family: var(--font-display); font-weight: 400; font-size: var(--text-h2); margin: 0 0 22px; }
.formulario__campos { display: flex; flex-direction: column; gap: 22px; }
.formulario__campo { display: flex; flex-direction: column; gap: 8px; }
.formulario__rotulo { font-family: var(--font-ui); font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-secondary); }
.formulario__control {
	min-height: var(--tap-target);
	padding: 10px 14px;
	font-family: var(--font-body);
	font-size: var(--text-body);
	color: var(--color-text-primary);
	background: var(--color-surface);
	border: 1px solid var(--color-border-control);
	border-radius: 0;
}
.formulario__control--texto { min-height: 150px; resize: vertical; }
.formulario__control--archivo { padding: 8px; font-family: var(--font-ui); font-size: var(--text-small); }
.formulario__control--archivo::file-selector-button {
	min-height: 40px;
	margin-right: 14px;
	padding: 0 16px;
	font-family: var(--font-ui);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-primary);
	background: var(--color-surface-2);
	border: 1px solid var(--color-border-control);
	cursor: pointer;
}
.formulario__control:focus-visible,
.formulario__casilla input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.formulario__campo--error .formulario__control { border-color: var(--color-accent); }
.formulario__ayuda { margin: 0; font-size: var(--text-small); color: var(--color-text-muted); }
.formulario__error { margin: 0; font-size: var(--text-small); color: var(--color-accent); }
.formulario__casilla { display: flex; align-items: center; gap: 12px; min-height: var(--tap-target); cursor: pointer; color: var(--color-text-secondary); }
.formulario__casilla input { flex-shrink: 0; width: 22px; height: 22px; margin: 0; accent-color: var(--color-accent); }
.formulario__casilla a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.formulario__enviar { flex-grow: 0; width: 100%; border: 0; cursor: pointer; }
.formulario-aviso { max-width: 640px; margin: 30px 0 0; padding: 20px 22px; border: 1px solid var(--color-border-strong); background: var(--color-surface-2); }
.formulario .formulario-aviso { margin: 0 0 22px; }
.formulario-aviso--error { border-color: var(--color-accent); }
.formulario-aviso__titulo { margin: 0; font-family: var(--font-display); font-size: 1.125rem; color: var(--color-text-primary); }
.formulario-aviso__lista { margin: 10px 0 0; padding-left: 20px; color: var(--color-text-secondary); }
.formulario-aviso__lista li + li { margin-top: 6px; }
.formulario-aviso__lista a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) {
	.formulario__enviar { align-self: flex-start; width: auto; min-width: 280px; }
}

/* ---------- Objetivos táctiles (CLAUDE.md, regla 7; sala limpia, plan 5) ----------
   Todo lo que se toca mide al menos var(--tap-target) de alto y de ancho
   (tests/verificar-toque.mjs). En los enlaces de texto, la zona que se puede tocar crece con
   relleno y un margen negativo igual, así que lo que se ve no se mueve; max() y min() evitan
   tocar lo que ya llega. */
.migas a,
.tarjeta__nombre,
.cabecera__topbar a,
.cajon-filtros__limpiar {
	display: inline-block;
	padding: max(0px, (var(--tap-target) - 1lh) / 2) 11px;
	margin: min(0px, (1lh - var(--tap-target)) / 2) -11px;
}
.franja-ahora__ver,
.entrada__categoria {
	display: inline-block;
	padding-block: max(0px, (var(--tap-target) - 1lh) / 2);
	margin-block: min(0px, (1lh - var(--tap-target)) / 2);
}
.pilar__enlace {
	padding-block: max(0px, (var(--tap-target) - 1lh) / 2);
	margin-block: calc(4px + min(0px, (1lh - var(--tap-target)) / 2)) min(0px, (1lh - var(--tap-target)) / 2);
}
/* «Ver todas las acompañantes» crece solo hacia arriba: su raya de abajo no se mueve. */
.seleccion__ver {
	padding-top: max(6px, var(--tap-target) - 1lh - 7px);
	margin-top: min(0px, 1lh + 7px - var(--tap-target));
}
.marca {
	padding-block: max(0px, (var(--tap-target) - 41px) / 2);
	margin-block: min(0px, (41px - var(--tap-target)) / 2);
}
/* Etiquetas: se tocan en 44 px y se ven como antes; el borde lo pinta un ::before. */
.etiqueta-termino {
	position: relative;
	display: inline-block;
	border: 0;
	padding: max(5px, (var(--tap-target) - 1lh) / 2) 9px;
	margin-block: min(0px, (1lh + 10px - var(--tap-target)) / 2);
}
.etiqueta-termino::before {
	content: "";
	position: absolute;
	inset: max(0px, (var(--tap-target) - 1lh - 10px) / 2) 0;
	border: 1px solid var(--color-border-strong);
	pointer-events: none;
}
.etiqueta-termino:hover::before { border-color: var(--color-text-muted); }