/**
 * Estilos base del tema Enigma.
 * 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/) ---------- */
/* Las del libro de marca (DEC-41). Manrope y Cormorant se precargan en la
   cabecera (enigma_precargar_fuentes()). */
@font-face {
	font-family: "Cormorant Garamond";
	src: url("../fonts/cormorant-garamond.woff2") format("woff2");
	font-weight: 400 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Cormorant Garamond";
	src: url("../fonts/cormorant-garamond-cursiva.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Manrope";
	src: url("../fonts/manrope.woff2") format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}
/* Respaldos con las medidas de las del libro (m-11): mientras llegan, se pinta
   con una fuente del sistema del mismo ancho y la misma altura de línea, así
   que al cambiar de letra la página no salta. Medidas en Chrome con un texto
   de la portada (ancho, ascendente y descendente a 100 px): Manrope frente a
   Arial, 1,012; Cormorant frente a Times New Roman, 0,955. En Android, sin
   esas fuentes, no hay respaldo y queda la precarga. */
@font-face {
	font-family: "Manrope respaldo";
	src: local("Arial"), local("Helvetica"), local("Liberation Sans");
	size-adjust: 101.2%;
	ascent-override: 105.7%;
	descent-override: 29.6%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Cormorant respaldo";
	src: local("Times New Roman"), local("Times"), local("Liberation Serif");
	size-adjust: 95.5%;
	ascent-override: 96.3%;
	descent-override: 30.4%;
	line-gap-override: 0%;
}

/* ---------- 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;
}

/* Títulos en Cormorant, en minúscula y sin espaciar, como el libro */
h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: var(--tracking-display);
	margin: 0 0 0.5em;
	text-wrap: balance;
}
h3 { font-weight: 500; }
h1, .titulo-h1 { font-size: var(--text-h1); }
h2, .titulo-h2 { font-size: var(--text-h2); }
.display { font-size: var(--text-display); line-height: 1; }
.display em,
h1 em {
	font-style: italic;
	color: var(--color-accent);
}

/* Rótulo: la voz del libro («08 / PALETA»), Manrope espaciada en mayúsculas */
.etiqueta {
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-rotulo);
}

/* 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: 18px;
	height: 44px;
	padding: 0 clamp(18px, 4vw, 56px);
	border-bottom: 1px solid var(--color-border);
	font-family: var(--font-utility); /* el interruptor de tema lo hereda vía font: inherit */
	font-size: 0.8125rem;
	font-weight: 500;
	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 */
}
.cabecera__topbar a { display: inline-flex; align-items: center; min-height: var(--tap-target); color: var(--color-text-primary); }
.cabecera__ciudad {
	font-size: var(--text-label);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}
.cabecera__hueco { flex-grow: 1; }
.cabecera__sep { opacity: 0.5; }
.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: logotipo con la E integrada (DEC-59, DEC-62) ----------
 * Móvil y tableta: «ENIGMA» a 150 px de dibujo. Portátil (≥ 1024): a 176 px y
 * el menú al lado. Ordenador (≥ 1280): «ENIGMA escorts» a 270 px. Son los
 * tamaños mínimos del logotipo integrado (design/style_guide.md). */
.cabecera__banda {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 16px;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}
.marca { display: flex; align-items: center; min-height: var(--tap-target); margin: 0 auto; color: var(--color-logo); }
.marca:hover { text-decoration: none; }
.marca__logo { display: block; height: auto; overflow: visible; }
.marca__logo--nombre { width: 150px; }
.marca__logo--horizontal { display: none; width: 270px; }
/* En el móvil, el logotipo va centrado: un hueco igual al botón del menú lo equilibra */
.cabecera__banda::after { content: ""; flex: 0 0 var(--tap-target); }

/* Navegación de escritorio: oculta hasta 1024 px (la etiqueta «Servicios de
   nuestras escorts» es larga: el menú no cabe antes al lado del logotipo) */
.nav-principal { display: none; }
.nav-principal__lista {
	display: flex;
	flex-wrap: wrap; /* si una etiqueta no cabe, el menú baja de línea en vez de desbordar */
	justify-content: flex-end;
	gap: 0 30px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-utility);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--tracking-nav);
	text-transform: uppercase;
}
.nav-principal__lista > li > a { display: inline-flex; align-items: center; min-height: var(--tap-target); 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);
	box-shadow: inset 0 -1px 0 var(--color-accent);
}

/* ---------- 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: -16px;
	top: calc(100% + 29px);
	z-index: 50;
	min-width: 280px;
	padding: 10px 22px 18px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	box-shadow: var(--sombra-panel);
}
.menu-movil__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-utility);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: var(--tracking-nav);
	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.875rem;
	color: var(--color-text-muted);
}
/* 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; }

/* ---------- 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: 48px 18px 44px;
}
/* El logotipo integrado «ENIGMA escorts» a 300 px (DEC-62: no hay versión
   vertical), con su área de protección (44 px) debajo */
.pie__marca { display: inline-block; margin: 0 0 44px; color: var(--color-logo); }
.pie__marca:hover { text-decoration: none; }
.pie__logo { display: block; width: 300px; max-width: 100%; height: auto; }
.pie__nota, .pie__mayores { margin: 0 0 6px; }
/* Enlaces del pie con 44 px de alto (m-10): antes medían 19 */
.pie__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}
.pie__lista a { display: inline-flex; align-items: center; min-height: var(--tap-target); color: var(--color-text-secondary); }
.pie__lista a:hover { color: var(--color-text-primary); }

/* ---------- Puntos de ruptura de la cabecera ---------- */

/* ≥ 768 px: aparece la topbar */
@media (min-width: 768px) {
	.cabecera__topbar { display: flex; }
	.flujo { padding: 32px clamp(18px, 4vw, 56px) 64px; }
}

/* ≥ 1024 px: menú al lado del logotipo */
@media (min-width: 1024px) {
	.cabecera__banda { gap: 28px; padding: 26px clamp(18px, 4vw, 56px); } /* + 6 px del enlace = x (32) */
	.cabecera__banda::after { display: none; }
	.marca { margin: 0; }
	.marca__logo--nombre { width: 176px; }
	.menu-movil { display: none; }
	.nav-principal { display: block; margin-left: auto; }
}

/* ≥ 1280 px: «ENIGMA escorts» */
@media (min-width: 1280px) {
	.cabecera__banda { padding-block: 34px; }
	.marca__logo--nombre { display: none; }
	.marca__logo--horizontal { display: block; }
}

/* 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; }
/* ---------- Movimiento (UJ-16) ----------
 * Entradas escalonadas del catálogo, la ficha y la portada. «asentarse» solo
 * mueve, sin fundido: es para los candidatos a LCP (que no partan de opacidad 0).
 * Sin movimiento para quien lo limita (la regla de prefers-reduced-motion). */
@keyframes entrar { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes asentarse { from { transform: translateY(22px); } to { transform: none; } }
/* Catálogo (UJ-16): el título más grande y el recuento como frase, en la tinta completa. */
.post-type-archive-escort .listado__cabecera .titulo-h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); line-height: 1; margin-bottom: 0; }
.post-type-archive-escort .listado__recuento { margin: 14px 0 0; font-size: 1.1875rem; color: var(--color-text-primary); }
/* Entrada escalonada del título, el recuento y las tarjetas. El título y la
   primera tarjeta (candidatos a LCP) solo se mueven. Los filtros no se animan:
   una animación de «transform» haría de su cajón fijo (móvil) un cajón dentro
   de la caja de los filtros. */
.post-type-archive-escort .listado__cabecera > *,
.post-type-archive-escort .rejilla-fichas > .tarjeta { animation: entrar 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.post-type-archive-escort .listado__cabecera .titulo-h1,
.post-type-archive-escort .rejilla-fichas > .tarjeta:first-child { animation-name: asentarse; }
.post-type-archive-escort .listado__recuento { animation-delay: 0.06s; }
.post-type-archive-escort .rejilla-fichas > .tarjeta:nth-child(4n + 2) { animation-delay: 0.08s; }
.post-type-archive-escort .rejilla-fichas > .tarjeta:nth-child(4n + 3) { animation-delay: 0.16s; }
.post-type-archive-escort .rejilla-fichas > .tarjeta:nth-child(4n + 4) { animation-delay: 0.24s; }
.rejilla-fichas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 36px 14px;
	margin-top: 22px;
}
@media (min-width: 768px)  { .rejilla-fichas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 20px; } }
@media (min-width: 1440px) { .rejilla-fichas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 24px; } }

/* ---------- Tarjeta (UJ-16, DEC-62) ----------
 * La foto sola, sin paspartú, filete ni sombra; debajo, el nombre grande con
 * su estado en la misma línea, una línea con sus datos, el titular y el
 * resumen. */
.tarjeta { display: flex; flex-direction: column; }
.tarjeta__foto {
	position: relative; display: block;
	aspect-ratio: 3 / 4; overflow: hidden;
	background: var(--color-surface-2);
}
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (hover: hover) { .tarjeta:hover .tarjeta__foto img { transform: scale(1.035); } }
.punto { width: 7px; height: 7px; border-radius: 50%; background: var(--color-available); display: inline-block; }
.tarjeta__cuerpo { display: flex; flex-direction: column; padding: 10px 0 0; }
.tarjeta__linea-nombre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 12px; }
/* El nombre con 44 px de alto para el dedo (m-10). */
.tarjeta__nombre {
	display: inline-flex; align-items: center; min-height: var(--tap-target);
	font-family: var(--font-display); font-size: clamp(1.5rem, 1.3rem + 0.7vw, 2rem); font-weight: 500; line-height: 1.05;
	color: var(--color-text-primary);
}
.tarjeta__nombre:hover { text-decoration: none; color: var(--color-accent); }
.tarjeta__estado { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; color: var(--color-available); }
.tarjeta__estado--luego { font-size: 0.875rem; color: var(--color-text-secondary); }
/* Los términos, enlaces dentro de la frase (excepción de WCAG 2.5.8 al objetivo de 44 px).
   Llevan subrayado fino, en oro (--color-accent-decor) como los enlaces de la ficha: sin él,
   en el móvil (sin hover) no se distinguirían del texto (WCAG 1.4.1; UJ-16, decisión del
   usuario). */
.tarjeta__meta { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--color-text-secondary); }
.tarjeta__meta a { color: inherit; text-decoration: underline; text-decoration-color: var(--color-accent-decor); text-underline-offset: 3px; }
.tarjeta__meta a:hover, .tarjeta__meta a:focus-visible { color: var(--color-text-primary); text-decoration-color: var(--color-accent); }
.tarjeta__titular { margin: 4px 0 0; font-size: 0.8125rem; color: var(--color-accent); }
/* El resumen se corta a dos líneas para que la rejilla no quede dentada:
   las biografías no miden todas lo mismo. */
.tarjeta__resumen {
	margin: 6px 0 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--color-text-secondary);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}
/* Etiqueta de término, siempre con su alto táctil (m-10): en las listas
   (gustos, búsquedas populares, servicios de la ficha, temas del blog, 404),
   una cajita con borde. */
.etiqueta-termino {
	display: inline-flex; align-items: center; min-height: var(--tap-target);
	padding: 0 16px;
	border: 1px solid var(--color-border-strong);
	font-family: var(--font-ui); font-size: 0.875rem; font-weight: 500;
	color: var(--color-text-primary);
}
.etiqueta-termino:hover { border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; }

/* ---------- Botones ---------- */
.boton {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: var(--tap-contact);
	padding: 14px 26px;
	border: 1px solid transparent;
	font-family: var(--font-ui);
	font-size: 0.8125rem; font-weight: 600; letter-spacing: var(--tracking-nav); text-transform: uppercase;
	cursor: pointer;
}
.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.15); }
.boton--secundario { border-color: var(--color-border-strong); color: var(--color-text-primary); background: transparent; }
.boton--secundario:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ---------- Ficha (UJ-03, DEC-40; UJ-16, DEC-62) ----------
 * Ordenador (≥ 900): el panel (nombre, estado, datos, contacto) a la izquierda
 * (5/12) y las dos primeras fotos a la derecha (7/12); debajo, el resto en una
 * rejilla de 3 columnas (4 desde 1100) del mismo alto, con las apaisadas y el
 * vídeo a doble ancho. Móvil: primero la tira de fotos, que se desliza con el
 * dedo y deja asomar la siguiente, con su contador; después el panel. La lista
 * de fotos es una sola (`.galeria`): en el móvil, `.galeria__par` y
 * `.galeria__mas` no pintan caja y sus fotos son de la tira; en el ordenador,
 * la que no pinta caja es `.galeria`. En la tira y la rejilla las fotos se
 * recortan a una forma común (encuadradas por arriba, donde va la cara); en el
 * visor se ven enteras. */
.ficha { display: flex; flex-direction: column; gap: 18px; }
.ficha__vista { display: flex; flex-direction: column; }
.galeria {
	order: -1; position: relative;
	display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	margin: 0 -18px; padding: 0 18px; scroll-padding-inline: 18px;
}
.galeria::-webkit-scrollbar { display: none; }
.galeria__par, .galeria__mas { display: contents; }
.galeria__foto {
	position: relative; flex: 0 0 82%; margin: 0; overflow: hidden;
	aspect-ratio: 2 / 3; background: var(--color-surface-2);
	scroll-snap-align: start;
}
.galeria__abrir { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.galeria__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (hover: hover) { .galeria__abrir:hover img { transform: scale(1.035); } }
/* Foco del teclado en una foto: la figura recorta lo que sale de ella (overflow:
 * hidden, que necesita el acercamiento) y el enlace la ocupa entera, así que el
 * contorno general (por fuera) no se vería. Va por dentro: contorno marfil de
 * 2 px y, a cada lado, un filete de scrim (en un ::after, porque la sombra
 * interior del propio enlace quedaría bajo la foto), para que se lea sobre
 * fotos claras y oscuras. En colores forzados no hay sombras: queda el contorno. */
.galeria__abrir:focus-visible { outline: 2px solid var(--color-sobre-foto); outline-offset: -4px; }
.galeria__abrir:focus-visible::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	box-shadow: inset 0 0 0 2px var(--color-scrim), inset 0 0 0 4px var(--color-sobre-foto), inset 0 0 0 6px var(--color-scrim);
}
.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__contador { order: -1; margin: 10px 0 0; font-size: 0.9375rem; color: var(--color-text-secondary); }
/* Sin JavaScript el contador no seguiría a la foto y se quedaría en «1 de N»: solo se ve con JS (la clase con-js la pone el script en línea del <head>). */
:root:not(.con-js) .galeria__contador { display: none; }
@media (min-width: 560px) { .galeria__foto { flex-basis: 44%; } }

/* Visor a pantalla completa (<dialog>): fondo scrim en los dos temas */
.visor {
	position: fixed; inset: 0; margin: 0;
	max-width: none; max-height: none;
	/* El <dialog> modal trae width/height: fit-content del navegador: sin esto mide lo que la foto, no la pantalla. */
	width: 100%; height: 100%;
	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) 70%, 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) 70%, 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%;
	display: grid; place-items: center;
	/* Una sola celda del tamaño de la figura: no crece con la foto, así que el max-height: 100% de la imagen se cumple. */
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	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); }
.visor__flecha { display: none; position: absolute; top: 50%; transform: translateY(-50%); }
@media (min-width: 900px) {
	.visor__flecha { display: inline-flex; }
	.visor__flecha--ant { left: 16px; }
	.visor__flecha--sig { right: 16px; }
}

.ficha__panel { display: flex; flex-direction: column; padding-top: 22px; }
.ficha__nombre {
	margin: 0; font-family: var(--font-display); font-weight: 400;
	font-size: clamp(3.25rem, 1.8rem + 5vw, 6rem); line-height: 0.95; letter-spacing: -0.01em;
	color: var(--color-text-primary);
}
.ficha__estado { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 18px 0 0; font-size: 1.1875rem; color: var(--color-text-primary); }
.ficha__estado.es-ahora { color: var(--color-available); }
.ficha__estado .punto { width: 9px; height: 9px; }
.ficha__estado-detalle { font-size: 1rem; color: var(--color-text-secondary); }
.ficha__subtitulo { margin: 14px 0 0; font-family: var(--font-display); font-style: italic; font-size: 1.375rem; line-height: 1.35; color: var(--color-text-secondary); }

/* Estancia (UJ-03): «Próximamente», «Últimos días», fecha de las fotos */
.ficha__estancia { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.ficha__estancia-etiqueta {
	padding: 4px 10px; font-size: 0.8125rem; letter-spacing: 0.04em;
	border: 1px solid var(--color-border); color: var(--color-text-secondary);
}
.ficha__estancia-etiqueta--proxima,
.ficha__estancia-etiqueta--ultimos { border-color: var(--color-accent); color: var(--color-accent); }

.ficha__tarifas { margin: 22px 0 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); }

/* Datos: una lista sin cajas; los términos, enlazados a su landing con 44 px de alto (m-10). */
.ficha__datos { margin: 20px 0 0; }
.ficha__dato { display: flex; align-items: center; gap: 16px; min-height: var(--tap-target); font-size: 1.0625rem; }
.ficha__dato-k { min-width: 8rem; flex-shrink: 0; color: var(--color-text-secondary); }
.ficha__dato-v { margin: 0; color: var(--color-text-primary); }
.ficha__dato-enlace, .ficha__telegram, .ficha__primera-vez a, .ficha__chalet-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-accent-decor); text-underline-offset: 0.3em;
}
.ficha__dato-enlace:hover, .ficha__telegram:hover, .ficha__primera-vez a:hover, .ficha__chalet-enlace:hover,
.ficha__dato-enlace:focus-visible, .ficha__telegram:focus-visible, .ficha__primera-vez a:focus-visible, .ficha__chalet-enlace:focus-visible { color: var(--color-accent); }

/* Contacto: en el móvil lo lleva la barra fija de abajo (se enseña desde 768 px) */
.ficha__cta { display: none; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 30px 0 0; }
.ficha__cta .boton { flex-grow: 0; }
.ficha__cta-titulo { flex-basis: 100%; margin: 0; font-size: var(--text-small); color: var(--color-text-secondary); }
.ficha__telegram { font-size: 1.0625rem; }
.ficha__primera-vez { margin: 18px 0 0; font-size: 0.9375rem; color: var(--color-text-secondary); }

/* Entrada escalonada del panel y de las dos fotos de arriba; el nombre (candidato a LCP), sin fundido */
.ficha__panel > * { animation: entrar 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.ficha__panel > .ficha__nombre { animation-name: asentarse; }
.ficha__panel > :nth-child(2) { animation-delay: 0.06s; }
.ficha__panel > :nth-child(3) { animation-delay: 0.12s; }
.ficha__panel > :nth-child(4) { animation-delay: 0.18s; }
.ficha__panel > :nth-child(n + 5) { animation-delay: 0.24s; }

/* «Sobre…» con servicios, zonas y modalidad; al lado, el chalet y la salida a hotel */
.ficha__cuerpo { display: grid; gap: 40px; margin-top: clamp(56px, 8vw, 120px); }
.ficha__sobre .titulo-h2 { margin-top: 0; font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.75rem); }
.ficha__sobre .prosa { max-width: 60ch; }
.ficha__sobre .prosa p { color: var(--color-text-primary); font-size: 1.125rem; line-height: 1.65; }
.prosa p { color: var(--color-text-secondary); line-height: 1.8; }
.ficha__servicios { margin: 26px 0 0; }
.ficha__servicios-lista { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ficha__aparte { display: grid; gap: 14px; align-content: start; }
.ficha__chalet, .pasos-hotel { background: var(--color-surface-2); padding: 26px 28px; }
.ficha__chalet-titulo, .pasos-hotel__titulo { margin: 0 0 12px; font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1.1; color: var(--color-text-primary); }
.ficha__chalet p, .pasos-hotel__lista li { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--color-text-primary); }
.ficha__chalet-enlace { margin-top: 6px; }
.pasos-hotel__lista { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; }
.pasos-hotel__lista strong { font-weight: 600; }

/* Migas de la ficha y aviso de «se ha ido» (DEC-40) */
.ficha__migas { padding-bottom: 0; }
.ficha__se-fue {
	display: flex; flex-direction: column; gap: 14px;
	padding: 22px 18px; border: 1px solid var(--color-border-strong); background: var(--color-surface-2);
}
.ficha__se-fue-titulo {
	font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 1.5rem + 1vw, 2.375rem); margin: 0;
	line-height: 1.1; letter-spacing: var(--tracking-display); text-wrap: balance; color: var(--color-text-primary);
}
.ficha__se-fue-texto { margin: 0; color: var(--color-text-secondary); }
.ficha__se-fue-todas { align-self: flex-start; }

/* Fichas relacionadas y parecidas del aviso de «se ha ido»: 4 tarjetas; con tres columnas, la cuarta sobra */
.ficha-relacionadas { padding-top: 0; }
@media (min-width: 768px) and (max-width: 1439px) {
	.ficha-relacionadas .tarjeta:nth-child(4), .ficha__se-fue .tarjeta:nth-child(4) { display: none; }
}

/* Barra de contacto fija: solo móvil, 52 px, en el pulgar */
.barra-contacto {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
	display: flex; gap: 10px;
	padding: 16px 18px 22px;
	background: linear-gradient(to top, var(--color-bg) 68%, transparent);
}
.single-escort .contenido { padding-bottom: 96px; } /* que la barra no tape el final */
.barra-contacto__icono { flex: 0 0 auto; padding-left: 16px; padding-right: 16px; }
.barra-contacto .boton--principal { background: var(--color-llamada); color: var(--color-llamada-text); }
.barra-contacto .boton--secundario { background: var(--color-bg); }

@media (min-width: 768px) {
	.barra-contacto { display: none; }
	.ficha__cta { display: flex; }
	.single-escort .contenido { padding-bottom: 0; }
}

/* Ordenador: el panel a la izquierda y las dos primeras fotos a la derecha; el resto, debajo */
@media (min-width: 900px) {
	.ficha__vista {
		display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: clamp(32px, 4vw, 64px); row-gap: 12px; align-items: start;
	}
	.ficha__panel { grid-column: 1; grid-row: 1; padding-top: 6px; }
	.galeria { display: contents; }
	.galeria__par { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.galeria__par--sola { grid-template-columns: minmax(0, 1fr); }
	.galeria__par--sola .galeria__foto { aspect-ratio: 4 / 5; }
	.galeria__par--sola .galeria__foto.es-apaisada, .galeria__par--sola .galeria__foto--video { aspect-ratio: 3 / 2; }
	.galeria__mas { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 12px; }
	/* Las apaisadas y el vídeo: dos columnas, con el alto de las verticales (dos de 2:3 y el hueco) */
	.galeria__mas .es-apaisada, .galeria__mas .galeria__foto--video { grid-column: span 2; aspect-ratio: 1.37; }
	.galeria__contador { display: none; }
	.galeria__par .galeria__foto { animation: entrar 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: 0.2s; }
	.galeria__par .galeria__foto:first-child { animation-name: asentarse; animation-delay: 0.1s; }
	.ficha__cuerpo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 80px); }
}
@media (min-width: 1100px) { .galeria__mas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Filtros del listado ---------- */
.filtros { margin: 26px 0 4px; }
.filtros__chips {
	position: sticky; top: 0; z-index: 30;
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 10px 0;
	background: var(--color-bg);
}
/* Chips sin caja ni mayúsculas, sobre un paso de tono (UJ-16). Los activos
   (abajo) se distinguen por su borde y su color; el fondo del hover solo lo
   llevan los no activos, o pisaría (0,2,0 contra 0,1,0) el de los activos. */
.chip {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: var(--tap-target);
	padding: 0 18px;
	border: 1px solid transparent;
	background: var(--color-surface-2);
	color: var(--color-text-primary);
	font-size: 0.9375rem;
	cursor: pointer;
}
.chip:hover { text-decoration: none; }
.chip:not(.chip--activo):not(.chip--activo-verde):hover { background: var(--color-surface); }
.chip .punto { background: var(--color-available); }
.chip--activo { border-color: var(--color-accent); background: var(--color-bg); 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); color: var(--color-accent-text);
	border-radius: 10px; font-size: 0.75rem; font-weight: 600;
}
.filtros__quitar { display: inline-flex; align-items: center; min-height: var(--tap-target); font-size: 0.875rem; color: var(--color-text-muted); }

/* Filtros activos: cada chip quita el suyo */
.filtros-activos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.filtros-activos__chip { gap: 10px; }

/* Catálogo sin resultados: siempre con una salida */
.listado-vacio { margin-top: 22px; padding: 28px 22px; border: 1px solid var(--color-border); background: var(--color-surface); }
.listado-vacio__titulo { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.75rem; color: var(--color-text-primary); }
.listado-vacio p { margin: 0 0 18px; color: var(--color-text-secondary); }

/* Cajón: pantalla completa en móvil, panel flotante en tablet */
/* La barra pegajosa crea su propia capa (30), por debajo de la barra de llamada
   (40): con el cajón abierto sube por encima, o la llamada tapa «Ver N escorts». */
.filtros__chips:has(.cajon-filtros[open]) { z-index: 70; }
.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.875rem; }
.cajon-filtros__limpiar { display: inline-flex; align-items: center; min-height: var(--tap-target); font-size: 0.875rem; color: var(--color-text-muted); }
.cajon-filtros__campos { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; }
.cajon-filtros__ver { margin-top: 18px; width: 100%; }

.filtro-campo { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 12px 0; }
.filtro-campo__rotulo { font-size: 0.875rem; color: var(--color-text-secondary); }
.filtro-campo select {
	appearance: none;
	background: transparent; border: none; padding: 4px 28px 4px 0;
	min-height: var(--tap-target);
	color: var(--color-text-primary);
	font: inherit; font-size: var(--text-body);
	cursor: pointer;
}
.filtro-campo select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* La flecha del desplegable, con tokens (no una imagen) */
.filtro-campo::after {
	content: ""; position: absolute; right: 18px; bottom: 30px; width: 7px; height: 7px; pointer-events: none;
	border-right: 1.5px solid var(--color-text-secondary); border-bottom: 1.5px solid var(--color-text-secondary);
	transform: rotate(45deg);
}
.filtro-grupo { margin: 14px 0 0; padding-top: 12px; font-size: 0.875rem; color: var(--color-text-secondary); }

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

@media (min-width: 768px) {
	.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) {
	.cajon-filtros { display: none; }
	/* Una sola fila: «Disponible ahora» a la izquierda y los campos a la derecha */
	.filtros { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: start; }
	.filtros__chips { padding: 0; }
	.filtros__chips .chip { min-height: 74px; }
	.filtros-activos { grid-column: 1 / -1; }
	.filtros__panel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
	.filtros__panel .filtro-campo { background: var(--color-surface-2); padding: 8px 18px 2px; gap: 0; }
	.filtros__panel .filtro-campo::after { bottom: 24px; }
	.filtros__aplicar { grid-column: -2; }
	/* Con JavaScript el panel se envía solo al elegir con el ratón; con el teclado, con este botón */
	.con-js .filtros__panel:not(.filtros__panel--teclado) .filtros__aplicar { display: none; }
	.filtros__rasgos { grid-column: 1 / -1; }
	.filtros__rasgos-titulo {
		list-style: none; cursor: pointer; display: flex; align-items: center; min-height: var(--tap-target); padding: 0;
		font-size: 0.9375rem; color: var(--color-text-primary);
		text-decoration: underline; text-decoration-color: var(--color-accent-decor); text-underline-offset: 0.3em;
	}
	.filtros__rasgos-titulo::-webkit-details-marker { display: none; }
	.filtros__rasgos-campos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
	.filtros__rasgos-campos .filtro-campo { background: var(--color-surface-2); padding: 12px 18px 8px; }
}

/* ---------- Páginas de taxonomía ---------- */
.migas { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; padding: 0 0 12px; font-size: 0.875rem; color: var(--color-text-muted); }
.migas a { display: inline-flex; align-items: center; min-height: var(--tap-target); 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: 2.5rem; line-height: 1; }
.cifra__rotulo { font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-rotulo); }
.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. Sin filete:
   letra más grande, en la tinta completa (UJ-16). Lo comparten el catálogo
   y las landings. */
.bloque-seo { margin-top: clamp(80px, 9vw, 140px); max-width: 64ch; }
.bloque-seo > :first-child { margin-top: 0; }
.bloque-seo h2, .bloque-seo h3 { font-family: var(--font-display); font-weight: 400; }
.bloque-seo h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); margin-top: 1.6em; }
.bloque-seo p, .bloque-seo li { color: var(--color-text-primary); font-size: 1.0625rem; line-height: 1.65; }

/* Preguntas frecuentes sin cajas ni filetes (UJ-16): a dos columnas desde 900 px.
   Salen en el catálogo, las landings, la portada y las páginas. */
.faq { margin-top: clamp(80px, 9vw, 140px); }
.faq__rejilla { display: grid; gap: 36px 56px; margin-top: 28px; }
.faq__pregunta { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.15; margin: 0 0 10px; }
.faq__respuesta { margin: 0; font-size: 1.0625rem; color: var(--color-text-primary); line-height: 1.6; }
@media (min-width: 900px) {
	.faq__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Con un número impar de preguntas, la última ocupa el ancho entero (con su línea de lectura cómoda). */
	.faq__caja:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 75ch; }
}

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

/* Landing sin fichas (DEC-42): aviso, disponibles hoy y salida al catálogo */
.landing-vacia { margin-top: 22px; }
.landing-vacia__titulo { margin: 0 0 18px; max-width: 54ch; font-size: 1.0625rem; line-height: 1.6; color: var(--color-text-secondary); }
.landing-vacia__subtitulo { margin: 0 0 14px; font-family: var(--font-ui); font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-rotulo); }
.landing-vacia__boton { margin-top: 22px; }

@media (min-width: 768px) {
	.zona__cabecera { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

/* ---------- Portada «Pasarela» (UJ-16, DEC-62, DEC-63) ----------
 * Las cuatro poses (las fotos de la maqueta con la cara en sombra, DEC-63),
 * sueltas, sobre una luz de estudio que se difumina hacia los bordes: en el
 * oscuro, marfil que se apaga hacia el carbón; en el claro, la luz es del color
 * del fondo y la chica queda sobre la página. Las fotos se multiplican sobre esa
 * luz (su fondo blanco desaparece): solo valen fotos con el fondo blanco o casi
 * blanco; las de ahora llevan un degradado gris leve abajo y a la derecha, que
 * con multiply se nota como una sombra suave. En el móvil, las poses arriba y el
 * titular debajo; desde 1100 px, y en una tableta o un portátil pequeño
 * apaisados (desde 900 x 500 px), el titular a la izquierda.
 * Al cargar entran escalonadas, pero ni el H1 ni la primera pose parten de
 * opacidad 0: uno de los dos es el LCP (solo se mueven). */
.pasarela {
	--margen: 18px;
	display: grid; grid-template-columns: minmax(0, 1fr);
	max-width: 1328px; margin: 0 auto; padding: 52px var(--margen) 56px;
	overflow-x: clip; /* el difuminado no puede ensanchar la página */
}
.pasarela__estudio {
	position: relative; isolation: isolate; order: -1;
	display: flex; align-items: flex-end; justify-content: center;
	margin-inline: calc(var(--margen) * -1); padding: 40px 22px 30px;
}
/* La luz sobrepasa el borde de arriba de las fotos en dos desvíos del blur (ahí está al
   98 %): si se difuminase antes de llegar, el multiply no fundiría las fotos con ella y
   se vería un borde recto. En el móvil también saca 10 px por la derecha (la máscara de
   las poses remata el resto); en el escritorio no: su cola llegaría al recorte de
   .pasarela (overflow-x: clip, 56 px más allá del estudio con la ventana a más de
   1328 px) y se cortaría en seco. En una columna, los 52 px de relleno de arriba de
   .pasarela dejan la cola de arriba lejos de la raya de la cabecera; en dos columnas
   (40 px), desde unos 1366 px la aclara unos 3 niveles, sin tapar nada. */
.pasarela__estudio::before {
	content: ""; position: absolute; inset: -4px -10px 8px 6px; z-index: -1;
	background: var(--color-luz-estudio); filter: blur(22px);
}
/* Cuatro de ancho igual que se solapan: los cuerpos no se pisan. */
.pasarela__pose { display: block; flex: 0 0 33.56%; min-width: 0; }
.pasarela__pose + .pasarela__pose { margin-left: -11.41%; }
.pasarela__pose img {
	width: 100%; height: auto; aspect-ratio: 1025 / 1600; object-fit: cover;
	mix-blend-mode: multiply; filter: brightness(1.16) contrast(1.06);
	/* Máscara: funde con la luz el suelo del estudio (abajo), el borde de arriba y el de la
	   derecha. El de la derecha solo se ve en la 4.ª pose (las otras quedan debajo de la
	   siguiente, y la 1.ª lleva su propia máscara); su 12 % deja libre la figura, que acaba
	   en el 79 % del ancho. Arriba solo el 1,5 %, porque las cabezas llegan al borde de la
	   foto; sin él, el borde de arriba pasa de 2 a 5-6 niveles. */
	-webkit-mask-image: linear-gradient(to bottom, transparent, var(--mascara-opaca) 1.5%, var(--mascara-opaca) 95%, transparent), linear-gradient(to left, transparent, var(--mascara-opaca) 12%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to bottom, transparent, var(--mascara-opaca) 1.5%, var(--mascara-opaca) 95%, transparent), linear-gradient(to left, transparent, var(--mascara-opaca) 12%);
	mask-composite: intersect;
	animation: entrar 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
/* La primera (la del pedestal) entra desde la luz en lugar de cortarse en seco. */
.pasarela__pose:first-child img {
	-webkit-mask-image: linear-gradient(to right, transparent, var(--mascara-opaca) 26%), linear-gradient(to bottom, transparent, var(--mascara-opaca) 1.5%, var(--mascara-opaca) 95%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent, var(--mascara-opaca) 26%), linear-gradient(to bottom, transparent, var(--mascara-opaca) 1.5%, var(--mascara-opaca) 95%, transparent);
	mask-composite: intersect;
	animation-name: asentarse;
}
.pasarela__pose:nth-child(2) img { animation-delay: 0.08s; }
.pasarela__pose:nth-child(3) img { animation-delay: 0.16s; }
.pasarela__pose:nth-child(4) img { animation-delay: 0.24s; }

.pasarela__texto { padding-top: 30px; }
.pasarela__texto > * { animation: entrar 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.pasarela__titulo {
	margin: 0; max-width: 16ch; font-size: clamp(2.375rem, 1.6rem + 2.6vw, 3.4rem); line-height: 1.02;
	color: var(--color-text-primary); text-wrap: balance;
	animation-name: asentarse;
}
.pasarela__entradilla {
	margin: 18px 0 0; max-width: 44ch; text-wrap: pretty;
	font-size: 1.1875rem; line-height: 1.55; color: var(--color-text-primary);
	animation-delay: 0.08s;
}
.pasarela__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 28px 0 0; animation-delay: 0.16s; }
.pasarela__acciones .boton { flex-grow: 0; }
.pasarela__telefono {
	display: inline-flex; align-items: center; min-height: var(--tap-target);
	color: var(--color-text-primary); font-size: 1.0625rem;
	text-decoration: underline; text-decoration-color: var(--color-accent-decor); text-underline-offset: 0.3em;
}
.pasarela__telefono:hover { color: var(--color-accent); }
/* Las animaciones «entrar» y «asentarse» están en la sección «Movimiento» de este fichero. */
/* En el móvil el teléfono ya está en la barra de llamada de abajo. */
@media (max-width: 767.98px) { .pasarela__telefono { display: none; } }
@media (min-width: 900px) {
	.pasarela { --margen: clamp(18px, 4vw, 56px); }
	.pasarela__texto { padding-top: 44px; }
}
/* Ordenador, y tableta o portátil pequeño apaisados (desde 900 px de ancho y
 * 500 de alto: ni el móvil en horizontal ni las ventanas estrechas, donde las
 * poses quedarían diminutas): el titular a la izquierda y la luz de estudio a la
 * derecha. Así el titular y el botón entran enteros en la primera pantalla; con
 * las poses arriba, a 1024 x 768 quedaban debajo. El `sizes` de las poses
 * (functions.php) lleva la misma condición. */
@media (min-width: 1100px), (min-width: 900px) and (min-height: 500px) and (orientation: landscape) {
	.pasarela {
		grid-template-columns: minmax(340px, 25rem) minmax(0, 1fr); column-gap: clamp(40px, 4.5vw, 72px);
		align-items: center; padding-top: 40px; padding-bottom: 24px;
	}
	.pasarela__texto { padding: 48px 0 56px; }
	.pasarela__entradilla { max-width: 34ch; }
	.pasarela__estudio { order: 0; align-self: center; margin-inline: 0; padding: 48px 36px 36px; }
	.pasarela__estudio::before { inset: -8px 8px 8px 8px; filter: blur(28px); }
}

.cifras {
	display: flex;
	gap: 1px;
	background: var(--color-border);
	border: 1px solid var(--color-border);
	max-width: 760px;
	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.375rem, 1.1rem + 1vw, 2rem); color: var(--color-accent); }
.cifras__rotulo { font-family: var(--font-ui); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-rotulo); }
.punto--oscuro { background: var(--color-bg); }

.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.875rem; margin: 0; }
.franja-ahora__ver { margin-left: auto; display: inline-flex; align-items: center; min-height: var(--tap-target); 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-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: 56px; }
.seleccion__cabecera { display: flex; align-items: flex-end; gap: 24px; margin-bottom: 26px; }
.seleccion__cabecera .titulo-h2 { margin: 6px 0 0; }
.seleccion__ver { margin-left: auto; display: inline-flex; align-items: center; min-height: var(--tap-target); color: var(--color-accent); border-bottom: 1px solid currentColor; white-space: nowrap; }
.seleccion__ver:hover { text-decoration: none; border-color: var(--color-accent); }

.confianza { padding-top: 64px; }
.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.875rem; margin: 0; }
.pilar p { margin: 0; color: var(--color-text-secondary); line-height: 1.7; }

.zonas { padding-top: 64px; padding-bottom: 26px; 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-weight: 500; font-size: 1.625rem; }
.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; }

/* La casa: banda con la foto real del chalet */
.chalet {
	display: flex; flex-direction: column;
	max-width: 1328px; margin: 0 auto;
	padding: 0 18px;
	gap: 22px;
}
.chalet__foto { margin: 0; overflow: hidden; border: 1px solid var(--color-border); }
.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) {
	.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; }
}

/* ---------- 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; }

/* Páginas de la agencia (UJ-06, DEC-44) */
.pagina__entradilla { margin: 0 0 8px; max-width: 60ch; font-size: 1.125rem; color: var(--color-text-secondary); line-height: 1.65; }
.pagina__contenido ul, .pagina__contenido ol { padding-left: 1.3em; color: var(--color-text-secondary); line-height: 1.8; }
.pagina__contenido li + li { margin-top: 6px; }
.pagina__contenido .boton { margin: 4px 0 8px; }
.pagina__escorts { margin: 34px 0 10px; }
.galeria-pagina { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 22px 0 6px; }
.galeria-pagina__foto { margin: 0; background: var(--color-surface-2); }
.galeria-pagina__foto--grande { grid-column: 1 / -1; }
.galeria-pagina__foto img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }

/* Índice de servicios */
.pagina__contenido .indice-servicios { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); }
.pagina__contenido .indice-servicios li { margin: 0; background: var(--color-surface); padding: 14px 18px; display: flex; flex-direction: column; gap: 3px; }
.indice-servicios a { display: inline-flex; align-items: center; min-height: var(--tap-target); font-family: var(--font-ui); font-weight: 500; color: var(--color-text-primary); }
.indice-servicios span { font-size: var(--text-small); color: var(--color-text-secondary); line-height: 1.6; }

/* Bloque de contacto */
.bloque-contacto { display: flex; flex-direction: column; gap: 10px; margin: 22px 0 8px; max-width: 480px; }
.bloque-contacto__horario { margin: 4px 0 0; font-size: var(--text-small); color: var(--color-text-muted); }

/* Formularios */
.formulario { margin: 18px 0 8px; max-width: 640px; scroll-margin-top: 90px; }
.formulario__form { display: flex; flex-direction: column; gap: 18px; padding: 24px 20px 26px; border: 1px solid var(--color-border); background: var(--color-surface); }
.formulario__aviso { margin: 0 0 14px; font-size: var(--text-small); line-height: 1.6; }
.formulario__aviso:empty { display: none; }
.formulario__aviso--ok { padding: 18px 20px; border-left: 3px solid var(--color-available); background: var(--color-surface-2); color: var(--color-text-primary); }
.formulario__aviso--error { color: var(--color-error); }
.formulario__aviso:focus { outline: none; }
.formulario__fila { display: grid; gap: 18px; }
.formulario__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario__enviar { align-self: flex-start; min-width: 220px; }
.formulario__enviar:disabled { opacity: 0.7; cursor: progress; }
.campo { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.campo--grupo { border: 0; padding: 0; min-width: 0; }
.campo__etiqueta { font-family: var(--font-ui); font-size: var(--text-small); font-weight: 500; color: var(--color-text-primary); }
.campo__opcional { font-weight: 400; color: var(--color-text-muted); }
.campo__control {
	width: 100%; min-height: var(--tap-target); padding: 10px 12px;
	font: inherit; font-size: 1rem; color: var(--color-text-primary);
	background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: 0;
}
textarea.campo__control { resize: vertical; line-height: 1.6; }
.campo__control--fichero { padding: 9px 10px; background: var(--color-surface-2); }
.campo__control:focus-visible, .campo__casilla:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.campo__ayuda { font-size: 0.875rem; color: var(--color-text-muted); }
.campo__error { font-size: 0.9rem; color: var(--color-error); }
.campo__error:empty { display: none; }
.campo--error > .campo__control, .campo--error .formulario__fila .campo__control { border-color: var(--color-error); }
/* La casilla mide 24 px, pero su texto es parte del mismo control (label for)
   y la fila entera tiene 44 px de alto: el dedo acierta pulsando la casilla o
   la frase (m-10). */
.campo--casilla { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0 12px; font-size: var(--text-small); color: var(--color-text-secondary); }
.campo--casilla label { flex: 1; min-width: 0; min-height: var(--tap-target); display: flex; align-items: center; padding: 6px 0; cursor: pointer; }
.campo--casilla .campo__error { flex-basis: 100%; }
.campo__casilla { width: 24px; height: 24px; margin: 0; flex-shrink: 0; accent-color: var(--color-accent); cursor: pointer; }

/* 404 */
.pagina-404__enlaces { margin-top: 40px; }
.pagina-404__rotulo { margin: 0 0 12px; font-family: var(--font-ui); font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-rotulo); }

@media (min-width: 768px) {
	.indice-servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bloque-contacto { flex-direction: row; flex-wrap: wrap; max-width: none; }
	.bloque-contacto .boton { flex-grow: 0; }
	.bloque-contacto__horario { flex-basis: 100%; }
	.formulario__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.formulario__form { padding: 30px 30px 32px; }
	.galeria-pagina { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.galeria-pagina__foto--grande { grid-column: span 2; grid-row: span 2; }
	.galeria-pagina__foto--grande img { aspect-ratio: auto; }
}

/* ---------- 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;
	display: inline-flex; align-items: center; min-height: var(--tap-target);
	font-family: var(--font-ui); font-size: var(--text-label); font-weight: 600;
	letter-spacing: var(--tracking-label); text-transform: uppercase;
	color: var(--color-rotulo);
}
.entrada__titulo {
	font-family: var(--font-display); font-weight: 500;
	font-size: 1.5rem; line-height: 1.15;
	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-display); font-weight: 400;
	font-size: var(--text-h1); line-height: 1.08;
	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-display); }

/* Blog (UJ-05, DEC-43): temas, pie de la entrada y estado vacío */
.temas-blog { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.temas-blog .etiqueta-termino[aria-current="page"] { border-color: var(--color-accent); color: var(--color-accent); }
/* En el móvil, una fila que se desliza: apilados, los 8 temas tapaban la primera entrada */
@media (max-width: 767px) {
	.temas-blog { flex-wrap: nowrap; overflow-x: auto; margin-inline: -18px; padding-inline: 18px; scrollbar-width: none; }
	.temas-blog::-webkit-scrollbar { display: none; }
	.temas-blog .etiqueta-termino { flex: 0 0 auto; white-space: nowrap; }
}
.listado__vacio { margin: 24px 0 18px; color: var(--color-text-secondary); }

.articulo__seccion { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--color-border); }
.articulo__seccion .titulo-h2 { margin: 0; }
.enlaces-landing { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.enlaces-landing__enlace {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	min-height: var(--tap-target); padding: 12px 16px;
	border: 1px solid var(--color-border-strong); background: var(--color-surface);
	color: var(--color-text-primary); font-family: var(--font-ui);
}
.enlaces-landing__enlace::after { content: "→"; color: var(--color-accent); }
.enlaces-landing__enlace:hover { border-color: var(--color-text-muted); text-decoration: none; }
.rejilla-entradas--relacionadas { margin-top: 18px; }
@media (max-width: 767px) {
	.rejilla-entradas--relacionadas { gap: 12px; }
	.rejilla-entradas--relacionadas .entrada { flex-direction: row; }
	.rejilla-entradas--relacionadas .entrada__imagen { flex: 0 0 120px; aspect-ratio: 1; }
	.rejilla-entradas--relacionadas .entrada__cuerpo { gap: 6px; padding: 12px 14px; }
	.rejilla-entradas--relacionadas .entrada__titulo { font-size: 1rem; }
}
.blog-escorts__subtitulo { margin: 0; }
.blog-escorts__boton { margin-top: 22px; }
@media (min-width: 768px) {
	.enlaces-landing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rejilla-fichas--cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rejilla-entradas--relacionadas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.rejilla-fichas--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Paginación de los listados (blog, catálogo, landings): botones táctiles */
.pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 32px; }
.page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: var(--tap-target); min-height: var(--tap-target); padding: 0 12px;
	color: var(--color-text-secondary);
	font-family: var(--font-ui); font-size: 1.0625rem;
}
a.page-numbers:hover { color: var(--color-text-primary); text-decoration: underline; text-underline-offset: 0.35em; }
.page-numbers.current { color: var(--color-text-primary); text-decoration: underline; text-decoration-color: var(--color-accent-decor); text-underline-offset: 0.35em; }
.page-numbers.dots { min-width: 0; padding: 0 4px; }

/* ---------- 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;
}
/* El monograma a 64 px (mínimo del libro: 48), con un cuarto de su altura de margen */
.aviso-edad__marca { display: flex; justify-content: center; margin: 0 0 18px; color: var(--color-logo); }
.aviso-edad__logo { display: block; width: 64px; height: auto; }
/* El título es un párrafo (el H1 de la página va primero) con la letra de los títulos */
.aviso-edad__titulo {
	font-family: var(--font-display); font-size: 1.875rem; line-height: 1.1;
	letter-spacing: var(--tracking-display); text-wrap: balance;
	color: var(--color-text-primary); 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; }
.aviso-edad__nota { font-size: 0.8125rem; line-height: 1.5; color: var(--color-text-muted); margin: 18px 0 0; }
.aviso-edad__nota a { color: inherit; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.aviso-edad__nota a:hover { color: var(--color-text-primary); }

/* 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; }

/* ---------- Portada, menú y pie (UJ-01) ---------- */

/* Submenú (Zonas): en escritorio, desplegable al pasar o al tabular; en el móvil, lista sangrada */
.nav-principal__lista > li { position: relative; }
.nav-principal__lista .sub-menu {
	display: none;
	position: absolute; left: -16px; top: 100%; z-index: 50;
	min-width: 240px; margin: 0; padding: 10px 16px;
	list-style: none; text-transform: none; letter-spacing: 0;
	background: var(--color-surface); border: 1px solid var(--color-border);
}
.nav-principal__lista li:hover > .sub-menu,
.nav-principal__lista li:focus-within > .sub-menu { display: block; }
.nav-principal__lista .sub-menu a { display: flex; align-items: center; min-height: var(--tap-target); }
.menu-movil__lista .sub-menu {
	margin: 0 0 6px; padding: 0 0 0 14px;
	list-style: none; text-transform: none; letter-spacing: 0;
	border-left: 1px solid var(--color-border);
}
.menu-movil__lista .sub-menu a { min-height: var(--tap-target); color: var(--color-text-secondary); }

/* Texto de la portada: columna de lectura; zonas y gustos como etiquetas enlazadas */
.portada-texto .prosa { max-width: 760px; }
.prosa .lista-zonas, .gustos__lista {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin: 14px 0 0; padding: 0; list-style: none;
}
.prosa .lista-zonas { margin-bottom: 32px; }
.prosa .lista-zonas a {
	display: inline-flex; align-items: center; min-height: var(--tap-target); padding: 0 14px;
	border: 1px solid var(--color-border); color: var(--color-text-secondary);
}
.prosa .lista-zonas a:hover { color: var(--color-text-primary); border-color: var(--color-text-muted); text-decoration: none; }

/* Pie: familias plegadas */
.pie__familias { display: grid; gap: 4px; margin: 6px 0 22px; }
.pie__familia > summary {
	min-height: var(--tap-target); display: flex; align-items: center; cursor: pointer;
	color: var(--color-text-primary); font-family: var(--font-utility); font-weight: 600;
	letter-spacing: var(--tracking-label); text-transform: uppercase; font-size: var(--text-label);
}
.pie__familia .pie__lista { margin: 4px 0 12px; }
.pie__agencia .pie__lista { margin: 0 0 18px; }
.pie__nota a { color: var(--color-text-primary); }

/* Cabeceras de sección en el móvil: el enlace baja si no cabe (no desborda) */
@media (max-width: 767px) {
	.seleccion__cabecera { flex-wrap: wrap; }
	.seleccion__ver { margin-left: 0; }
}

/* La barra de llamada fija (móvil) no tapa el final de ninguna página */
.contenido { padding-bottom: 96px; }
.barra-contacto__llamar { flex: 1; justify-content: center; }
@media (min-width: 768px) {
	.contenido { padding-bottom: 0; }
	.pie__familias { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
	.pie__familia[open] { grid-column: auto; }
}