/*
Theme Name:   Joey Rocks
Theme URI:    https://www.joeyrocks.com/
Description:  Tema hijo de GeneratePress para joeyrocks.com. Todo el diseño vive aquí — no hay CSS en los bloques de contenido ni inyectado desde PHP. Estructura de cabecera, hero, pie y menú móvil calcada de santswebdesign.com.
Author:       Sants Web Design
Author URI:   https://santswebdesign.com/
Template:     generatepress
Version:      1.0.0
Text Domain:  joeyrocks
*/

/* =========================================================================
   0a. TIPOGRAFÍA AUTOALOJADA
   -------------------------------------------------------------------------
   Dos familias, las dos con licencia OFL y servidas desde este tema. Ni
   Google Fonts ni llamadas a terceros, así que no hacen falta cookies ni
   aviso por ellas.

     Anton    titulares. Condensada y muy gruesa, dialoga con el logo
     Barlow   texto, menú y botones. Cuatro pesos — 400, 500, 600 y 700

   Subconjunto latino de Google, 108 KB los cinco archivos.
   ========================================================================= */

@font-face {
	font-family: 'Anton';
	src: url('fuentes/anton-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Barlow';
	src: url('fuentes/barlow-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Barlow';
	src: url('fuentes/barlow-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Barlow';
	src: url('fuentes/barlow-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Barlow';
	src: url('fuentes/barlow-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* =========================================================================
   0. DE DÓNDE SALEN LOS COLORES, Y LAS MEDIDAS
   -------------------------------------------------------------------------
   El COLOR no se declara aquí. Se declara en Personalizar → Colores →
   Colores globales, y GeneratePress lo publica como variables CSS. Este
   archivo solo las consume.

     --contrast     #0d0a0b   fondo principal, el negro con matiz granate
     --contrast-2   #171214   fondo de tarjetas, pie y secciones alternas
     --contrast-3   #241c1f   bordes y separadores sobre negro
     --base         #bfb3b7   texto secundario      9,71:1 sobre --contrast
     --base-2       #f5efe9   texto corrido        17,28:1 sobre --contrast
     --base-3       #ffffff   titulares
     --accent       #d20459   el rosa del logo, medido en el propio archivo
     --accent-2     #a80347   rosa en hover
     --accent-3     #ff4f8f   rosa para TEXTO sobre negro, 6,35:1

   LA REGLA DEL ROSA. El rosa de marca sobre negro da 3,66:1. Vale para
   titulares grandes y para elementos gráficos (el mínimo ahí es 3:1), pero
   NO para texto normal, que pide 4,5:1. Para texto rosa se usa --accent-3.
   Como fondo, el rosa de marca con texto blanco encima da 5,38:1.

   Lo que SÍ vive aquí son las medidas que el Personalizador no cubre —
   tipografía, espaciado y forma. Si un valor no está en esta lista, no se usa.
   ========================================================================= */

:root {
	/* --- Tipografía ------------------------------------------------------ */
	--jr-fuente-titulo:      'Anton', Impact, 'Arial Narrow Bold', sans-serif;
	--jr-fuente:             'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Cuatro escalones de texto y ninguno más. Antes había 13, 15, 17 y 18
	   sin regla — ahora cada uno tiene su trabajo.
	     xs    14  etiquetas en mayúscula espaciada (antetítulos, títulos del pie)
	     s     16  datos secundarios (listas, pie, aviso legal del formulario)
	     card  17  texto dentro de tarjetas
	     base  18  texto corrido
	     m     20  entradillas y datos destacados */
	--jr-txt-xs:             0.875rem;
	--jr-txt-s:              1rem;
	--jr-txt-card:           1.0625rem;
	--jr-txt-base:           1.125rem;
	--jr-txt-m:              1.25rem;
	--jr-txt-interfaz:       0.9375rem;   /* menú y botones, 15 en negrita */

	/* Titulares fluidos. clamp(mínimo, recta entre 390 y 1440 px, máximo).
	   El del hero baja de 92 a 76 px — a 92 ocupaba cuatro líneas y empujaba
	   los botones fuera de la primera pantalla. */
	--jr-titulo-hero:        clamp(2.625rem, 1.75rem + 3.6vw, 4.75rem);
	--jr-titulo-2:           clamp(2.125rem, 1.6rem + 2.2vw, 3.5rem);
	--jr-titulo-3:           clamp(1.375rem, 1.25rem + 0.5vw, 1.75rem);

	--jr-interlineado:       1.65;
	--jr-interlineado-titulo: 1.02;

	/* --- Espaciado. Escala de 8 ----------------------------------------- */
	--jr-esp-1:              0.5rem;
	--jr-esp-2:              1rem;
	--jr-esp-3:              1.5rem;
	--jr-esp-4:              2rem;
	--jr-esp-6:              3rem;
	--jr-esp-8:              4rem;
	--jr-esp-12:             6rem;

	/* El aire vertical de cada sección, igual en todas. De 72 a 128 px. */
	--jr-seccion:            clamp(4.5rem, 3.4rem + 4.5vw, 8rem);

	/* Del bloque de titular al contenido de la sección. */
	--jr-ritmo-bloque:       clamp(2.5rem, 2rem + 2vw, 4rem);

	/* Tres medidas que se repiten en toda la página. Antes cada tarjeta y
	   cada rejilla llevaba la suya. */
	--jr-pad-tarjeta:        clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	--jr-hueco:              clamp(1rem, 0.8rem + 0.6vw, 1.5rem);      /* entre tarjetas */
	--jr-hueco-columnas:     clamp(2.5rem, 1.2rem + 4vw, 5rem);       /* entre texto e imagen */

	/* --- Medidas --------------------------------------------------------- */
	--jr-ancho-max:          1200px;
	--jr-ancho-texto:        62ch;

	/* El aire lateral. Cabecera, hero, secciones y pie lo comparten, así el
	   logo, el titular del hero y cada sección arrancan en la misma vertical. */
	--jr-borde-lateral:      30px;

	/* --- Forma ----------------------------------------------------------- */
	/* Dos radios. El pequeño para lo que se pulsa o se rellena (botones,
	   campos, logo), el grande para lo que enmarca (tarjetas, fotos, mapa).
	   La única excepción es el cartel del hero, que es un papel pegado. */
	--jr-radio:              4px;
	--jr-radio-grande:       10px;
	--jr-borde:              1px solid var(--contrast-3);
	--jr-sombra-cartel:      14px 14px 0 var(--accent);
	--jr-transicion:         0.2s ease;

	/* Alto de la cabecera, para que un ancla no quede debajo de ella al
	   saltar. Medido: 88 px en escritorio, 80 en móvil. */
	--jr-alto-cabecera:      88px;
}

/* Medido el 03/10/2026 — 91 px en móvil con el logo a 56. Con 80 el ancla
   dejaba la sección 3 px debajo de la cabecera. */
@media (max-width: 1024px) {
	:root {
		--jr-alto-cabecera: 92px;
	}
}

@media (max-width: 600px) {
	:root {
		--jr-borde-lateral: 20px;
	}
}

/* =========================================================================
   1. BASE
   ========================================================================= */

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--jr-alto-cabecera) + 8px);
}

.admin-bar {
	scroll-padding-top: calc(var(--jr-alto-cabecera) + 40px);
}

body {
	background-color: var(--contrast);
	color: var(--base-2);
	font-family: var(--jr-fuente);
	font-size: var(--jr-txt-base);
	line-height: var(--jr-interlineado);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
select,
textarea,
.main-navigation a,
.wp-element-button {
	font-family: var(--jr-fuente);
}

h1,
h2,
h3,
h4 {
	font-family: var(--jr-fuente-titulo);
	font-weight: 400;
	line-height: var(--jr-interlineado-titulo);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--base-3);
}

/* Lo mismo por clase. En el editor, add_editor_style() convierte «h1» en
   «.editor-styles-wrapper h1», que empata con la hoja del editor de
   GeneratePress y pierde por orden de carga — los titulares salían finos y
   en minúscula mientras se editaba. Una clase pesa más que una etiqueta y
   gana en los dos sitios sin !important. */
.jr-hero__titulo,
.jr-titulo,
.jr-rasgo__titulo,
.jr-sala__nombre,
.jr-formulario__titulo {
	font-family: var(--jr-fuente-titulo);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--base-3);
}

a {
	color: var(--accent-3);
	transition: color var(--jr-transicion);
}

a:hover {
	color: var(--base-3);
}

::selection {
	background-color: var(--accent);
	color: var(--base-3);
}

/* Foco visible en toda la web. Blanco sobre negro, 21:1. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--base-3);
	outline-offset: 3px;
}

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

/* =========================================================================
   2. CABECERA
   -------------------------------------------------------------------------
   Calcada de santswebdesign.com — cabecera fija con position:sticky, logo
   a la izquierda, menú centrado y botón de acción a la derecha. Método de
   OGAL Web Design, «Modern Navigation Layouts for GeneratePress».

   Requisito en el Personalizador — Navegación principal, Ubicación =
   Flotar a la derecha. Todo el reparto va de 1025 px para arriba. Por
   debajo manda el panel lateral de GP Premium.
   ========================================================================= */

.site-header {
	background-color: rgba(13, 10, 11, 0.94);
	border-bottom: 1px solid var(--contrast-3);
	position: sticky;
	top: 0;
	z-index: 100;
}

/* El fondo translúcido deja ver lo que pasa por debajo al bajar. Solo donde
   el navegador sabe desenfocar, si no queda sólido. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.site-header {
		background-color: rgba(13, 10, 11, 0.82);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}
}

.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

@media (min-width: 1025px) {

	.nav-float-right #site-navigation {
		margin-left: 0;
	}

	.main-navigation,
	#primary-menu {
		width: 100%;
	}

	.site-header .inside-header {
		position: relative;
	}

	/* El logo sale del flujo y se ancla a la izquierda, así el centro del
	   menú coincide con el centro de la pantalla. z-index por encima de la
	   navegación o el <ul> del menú se come el clic del logo. */
	.site-header .inside-header > .site-branding-container,
	.site-header .inside-header > .site-logo {
		position: absolute;
		left: var(--jr-borde-lateral);
		top: 50%;
		transform: translateY(-50%);
		z-index: 101;
	}

	.site-header .main-navigation,
	.site-header .inside-navigation,
	.site-header .main-nav,
	.site-header .main-nav > ul {
		position: static;
	}

	/* El mismo hueco a los dos lados, para que el menú siga centrado en la
	   pantalla pero sin meterse debajo del logo ni del botón. Aquí hace falta
	   y en santswebdesign.com no — son cinco enlaces más largos que los suyos,
	   y centrados en los 1200 px el primero caía debajo del logo, que va
	   fuera del flujo. 170 px = el botón de acción (142) más aire. */
	.site-header .main-nav > ul {
		justify-content: center;
		padding-left: 170px;
		padding-right: 170px;
	}

	.site-header .main-nav > ul > li.jr-cta {
		position: absolute;
		right: var(--jr-borde-lateral);
		top: 50%;
		transform: translateY(-50%);
		margin-left: 0;
	}
}

.main-navigation .inside-navigation,
.main-navigation:not(.slideout-navigation) .main-nav > ul {
	justify-content: center;
	flex-wrap: nowrap;
}

.site-header .inside-header {
	padding: 12px var(--jr-borde-lateral);
	max-width: var(--jr-ancho-max);
	margin-left: auto;
	margin-right: auto;
	display: flex;
	align-items: center;
	min-height: calc(var(--jr-alto-cabecera) - 1px);
}

/* --- Logo ---------------------------------------------------------------- */

/* El logo es un cuadrado rosa con la pared de ladrillo, así que funciona como
   sello. El ancho lo fija GeneratePress, 64 px. Esquinas apenas redondeadas
   para que no parezca recortado a cuchillo sobre el negro. */
.site-logo img,
.site-header .header-image {
	display: block;
	height: auto;
	max-width: none;
	flex-shrink: 0;
	border-radius: var(--jr-radio);
	transition: transform var(--jr-transicion);
}

.site-logo a:hover img {
	transform: rotate(-4deg) scale(1.04);
}

/* --- Navegación ---------------------------------------------------------- */

.main-navigation,
.main-navigation ul ul {
	background-color: transparent;
}

.main-navigation .main-nav > ul > li > a {
	position: relative;
	color: var(--base-2);
	font-size: var(--jr-txt-interfaz);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding-left: var(--jr-esp-2);
	padding-right: var(--jr-esp-2);
	line-height: 1.4;
	opacity: 0.86;
	transition: opacity var(--jr-transicion), color var(--jr-transicion);
}

.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li > a:focus {
	opacity: 1;
	color: var(--base-3);
}

/* Entre 1025 y 1240 px el menú va justo de sitio. Se recorta el aire entre
   enlaces, no la letra. */
@media (min-width: 1025px) and (max-width: 1240px) {
	.main-navigation .main-nav > ul > li:not(.jr-cta) > a {
		padding-left: 0.7rem;
		padding-right: 0.7rem;
		letter-spacing: 0.05em;
	}

	.main-navigation .main-nav > ul > li > a::after {
		left: 0.7rem;
		right: 0.7rem;
	}
}

/* La marca rosa bajo el enlace. No ocupa sitio en el flujo y crece desde el
   centro. Es un elemento gráfico, así que le basta 3:1 — da 3,66:1. */
.main-navigation .main-nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: var(--jr-esp-2);
	right: var(--jr-esp-2);
	bottom: 0.15em;
	height: 3px;
	border-radius: 2px;
	background-color: var(--accent);
	transform: scaleX(0);
	transition: transform var(--jr-transicion);
}

.main-navigation .main-nav > ul > li > a:hover::after,
.main-navigation .main-nav > ul > li > a:focus-visible::after {
	transform: scaleX(1);
}

/* --- Botón de acción ----------------------------------------------------- */

.main-navigation .main-nav > ul > li.jr-cta > a {
	background-color: var(--accent);
	color: var(--base-3);
	border-radius: var(--jr-radio);
	padding: 0.75em 1.5em;
	margin-left: var(--jr-esp-2);
	font-weight: 700;
	line-height: 1.2;
	opacity: 1;
	transition: background-color var(--jr-transicion), color var(--jr-transicion);
}

.main-navigation .main-nav > ul > li.jr-cta > a::after {
	display: none;
}

.main-navigation .main-nav > ul > li.jr-cta > a:hover,
.main-navigation .main-nav > ul > li.jr-cta > a:focus {
	background-color: var(--base-3);
	color: var(--contrast);
}

.site-header a:focus-visible {
	outline: 2px solid var(--base-3);
	outline-offset: 3px;
}

.main-navigation .menu-toggle,
.main-navigation .mobile-bar-items a {
	color: var(--base-3);
}

/* La palabra «Menú» junto a la hamburguesa. En santswebdesign.com va solo el
   icono. Se oculta a la vista pero NO a los lectores de pantalla, porque es
   el nombre accesible del botón — sin ella el botón se anunciaría vacío. */
.menu-toggle .mobile-menu {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
   3. PÁGINAS MAQUETADAS CON SECCIONES
   -------------------------------------------------------------------------
   Calcado de santswebdesign.com. Cuelga de .jr-maquetado, que el tema hijo
   pone a cualquier página con secciones. Se quitan los márgenes y la caja
   que GeneratePress pone alrededor del contenido, y el contenedor pasa a
   ocupar todo el ancho — así las secciones ya son anchas por sí solas y no
   hace falta sacar nada con 100vw, que mete scroll lateral con barra visible.
   ========================================================================= */

.jr-maquetado .site-content,
.jr-maquetado .site-main,
.jr-maquetado .content-area,
.jr-maquetado .entry-content,
.jr-maquetado .inside-article {
	margin: 0;
	padding: 0;
}

.jr-maquetado .entry-header {
	display: none;
}

.jr-maquetado .inside-article,
.jr-maquetado .site-main {
	background-color: transparent;
	box-shadow: none;
}

/* Ojo con .grid-container. La cabecera y el pie de GeneratePress también la
   llevan, así que se apunta solo a #page y al contenido. Con el selector
   genérico la cabecera perdía su límite de 1200 px y desbordaba 60 px. */
.jr-maquetado #page.grid-container,
.jr-maquetado .site-content,
.jr-maquetado .content-area,
.jr-maquetado .site-main {
	width: 100%;
	max-width: none;
}

.jr-maquetado .site-content {
	display: block;
}

/* =========================================================================
   4. SECCIONES
   -------------------------------------------------------------------------
   Cada franja es un <section class="jr-seccion">, a todo el ancho, con un
   .jr-seccion__inner dentro que pone el límite de 1200 px y el aire lateral.
   El bloque de titular es siempre el mismo — antetítulo, titular y
   entradilla — para que todas las secciones arranquen igual.
   ========================================================================= */

.jr-seccion {
	position: relative;
	padding-top: var(--jr-seccion);
	padding-bottom: var(--jr-seccion);
	background-color: var(--contrast);
}

.jr-seccion--alterna {
	background-color: var(--contrast-2);
}

.jr-seccion__inner {
	max-width: var(--jr-ancho-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--jr-borde-lateral);
	padding-right: var(--jr-borde-lateral);
}

.jr-cabeza {
	max-width: 46rem;
	margin-bottom: var(--jr-ritmo-bloque);
}

.jr-cabeza--centro {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* El antetítulo, con el filete rosa delante — el mismo trazo que enmarca
   «LOCALES DE ENSAYO» en el logo. */
.jr-antetitulo {
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
	margin: 0 0 var(--jr-esp-2);
	font-family: var(--jr-fuente);
	font-size: var(--jr-txt-xs);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent-3);
}

.jr-antetitulo::before {
	content: "";
	width: 2rem;
	height: 2px;
	background-color: var(--accent);
	flex-shrink: 0;
}

.jr-cabeza--centro .jr-antetitulo::after {
	content: "";
	width: 2rem;
	height: 2px;
	background-color: var(--accent);
	flex-shrink: 0;
}

.jr-titulo {
	font-size: var(--jr-titulo-2);
	margin: 0 0 var(--jr-esp-3);
}

.jr-titulo:last-child {
	margin-bottom: 0;
}

.jr-entradilla {
	font-size: var(--jr-txt-m);
	line-height: 1.6;
	color: var(--base);
	max-width: var(--jr-ancho-texto);
	margin: 0;
}

.jr-cabeza--centro .jr-entradilla {
	margin-left: auto;
	margin-right: auto;
}

.jr-texto {
	max-width: var(--jr-ancho-texto);
	margin: 0 0 var(--jr-esp-3);
	color: var(--base-2);
}

.jr-texto:last-child {
	margin-bottom: 0;
}

/* =========================================================================
   5. BOTONES
   -------------------------------------------------------------------------
   Un solo rosa de acción. Blanco sobre --accent da 5,38:1 y sobre --accent-2
   7,58:1. El botón fantasma lleva borde blanco, 17:1 sobre el negro.
   ========================================================================= */

.jr-acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jr-esp-2);
}

.jr-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-height: 52px;
	padding: 0.85em 1.75em;
	border: 2px solid var(--accent);
	border-radius: var(--jr-radio);
	background-color: var(--accent);
	color: var(--base-3);
	font-family: var(--jr-fuente);
	font-size: var(--jr-txt-interfaz);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--jr-transicion), border-color var(--jr-transicion), color var(--jr-transicion), transform var(--jr-transicion);
}

.jr-boton:hover,
.jr-boton:focus {
	background-color: var(--accent-2);
	border-color: var(--accent-2);
	color: var(--base-3);
	transform: translateY(-2px);
}

.jr-boton--fantasma {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.55);
}

.jr-boton--fantasma:hover,
.jr-boton--fantasma:focus {
	background-color: var(--base-3);
	border-color: var(--base-3);
	color: var(--contrast);
}

.jr-boton .gb-shape,
.jr-boton svg {
	width: 1.15em;
	height: 1.15em;
	flex-shrink: 0;
	fill: currentColor;
}

/* =========================================================================
   6. HERO
   -------------------------------------------------------------------------
   Misma estructura que el de santswebdesign.com — una section a todo el
   ancho, un __inner limitado a 1200 px con el mismo aire lateral que la
   cabecera, y la tipografía fluida con clamp. Aquí el inner va a dos
   columnas, texto a la izquierda y el cartel de la marca a la derecha.

   El cartel es la pared de ladrillo con los dos rockeros, la imagen propia
   de la marca. Mide 1001 x 556, así que no se estira a todo el ancho — a
   pantalla completa se vería borroso. Enmarcado como un cartel pegado en la
   pared, girado un pelo y con la sombra plana en rosa.

   En escritorio el hero ocupa la primera pantalla menos la cabecera. Con
   min-height, no height, para que si el texto crece el hero crezca con él.
   ========================================================================= */

.jr-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--contrast);
	background-image:
		radial-gradient(60rem 40rem at 85% 30%, rgba(210, 4, 89, 0.22), transparent 60%),
		radial-gradient(40rem 30rem at 0% 100%, rgba(210, 4, 89, 0.10), transparent 60%);
	padding-top: clamp(2rem, 1rem + 2.5vw, 3.5rem);
	padding-bottom: 0;
}

/* Sin altura forzada. Antes llevaba min-height de pantalla completa y, con el
   titular a 92 px, los botones caían en el píxel 958 de una pantalla de 900.
   Ahora la altura la da el contenido, y a 1440 x 900 caben titular, texto,
   botones y la banda de datos. */
/* El cartel va delante del texto, a petición de Carolina (ronda 1, 03/10/2026),
   así que su columna es la primera. */
.jr-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
	align-items: center;
	gap: var(--jr-hueco-columnas);
	max-width: var(--jr-ancho-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--jr-borde-lateral);
	padding-right: var(--jr-borde-lateral);
	padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.jr-hero__antetitulo {
	margin-bottom: var(--jr-esp-3);
}

/* Sin text-wrap: balance. Con él partía «LOCALES / DE ENSAYO» en dos líneas
   cortas. Así queda «LOCALES DE ENSAYO / INSONORIZADOS / JOEY ROCKS!». */
.jr-hero__titulo {
	font-size: var(--jr-titulo-hero);
	line-height: 0.98;
	margin: 0 0 var(--jr-esp-3);
}

/* El nombre de la marca dentro del H1. Es texto grande — 44 px en móvil y 92
   en escritorio — así que el rosa claro le sobra, 6,35:1. */
.jr-hero__marca {
	display: block;
	color: var(--accent-3);
}

.jr-hero__lugar {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 var(--jr-esp-3);
	font-size: var(--jr-txt-m);
	font-weight: 600;
	color: var(--base-3);
}

.jr-hero__lugar .gb-shape,
.jr-hero__lugar svg {
	width: 1.1em;
	height: 1.1em;
	fill: var(--accent-3);
	flex-shrink: 0;
}

.jr-hero__texto {
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	line-height: 1.7;
	color: var(--base);
	max-width: 52ch;
	margin: 0 0 var(--jr-esp-2);
}

.jr-hero__texto:last-of-type {
	margin-bottom: var(--jr-esp-4);
}

/* Texto del hero alineado a la derecha en escritorio, por decisión de Marc
   (03/10/2026). Con el cartel a la izquierda, el bloque se apoya en el borde
   derecho y los dos hacen de marco. El filete del antetítulo pasa detrás
   del texto para cerrar contra el borde. En móvil y tableta sigue a la
   izquierda, que a todo el ancho se lee mejor. */
@media (min-width: 1025px) {
	.jr-hero__contenido {
		text-align: right;
	}

	.jr-hero__antetitulo::before {
		order: 2;
	}

	.jr-hero__lugar,
	.jr-hero .jr-acciones {
		justify-content: flex-end;
	}

	.jr-hero__texto {
		margin-left: auto;
	}
}

/* --- El cartel ----------------------------------------------------------- */

/* Con tope de ancho y pegado a la derecha, para que acompañe al titular y no
   le dispute la vista. Antes llenaba la columna entera. */
.jr-hero__cartel {
	position: relative;
	justify-self: start;
	width: 100%;
	max-width: 520px;
	margin: 0;
	transform: rotate(1.5deg);
	transition: transform 0.4s ease;
}

.jr-hero__cartel:hover {
	transform: rotate(0deg);
}

.jr-hero__cartel img {
	width: 100%;
	aspect-ratio: 1001 / 556;
	object-fit: cover;
	border: 3px solid var(--base-3);
	border-radius: 2px;
	box-shadow: var(--jr-sombra-cartel);
}

/* La cinta de pegar el cartel a la pared, arriba en el centro. Decorativa,
   no lleva texto ni la lee un lector de pantalla. */
.jr-hero__cartel::before {
	content: "";
	position: absolute;
	top: -14px;
	left: 50%;
	width: 110px;
	height: 28px;
	transform: translateX(-50%) rotate(-3deg);
	background-color: rgba(245, 239, 233, 0.82);
	z-index: 1;
}

/* --- La barra de datos --------------------------------------------------- */

/* Cuatro datos que salen literalmente de sus textos, en una banda que cierra
   la primera pantalla. */
.jr-datos {
	position: relative;
	border-top: 1px solid var(--contrast-3);
	background-color: rgba(23, 18, 20, 0.7);
}

.jr-datos__lista {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: var(--jr-ancho-max);
	margin: 0 auto;
	padding: 0 var(--jr-borde-lateral);
	list-style: none;
}

.jr-datos__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 1.25rem var(--jr-esp-3);
	font-size: var(--jr-txt-interfaz);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.35;
	color: var(--base-2);
	border-left: 1px solid var(--contrast-3);
}

.jr-datos__item:first-child {
	border-left: 0;
	padding-left: 0;
}

.jr-datos__item .gb-shape,
.jr-datos__item svg {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	fill: none;
	stroke: var(--accent-3);
}

@media (max-width: 1024px) {
	.jr-hero__inner {
		grid-template-columns: 1fr;
		text-align: left;
	}

	.jr-hero__cartel {
		justify-self: start;
		max-width: 560px;
		margin-top: var(--jr-esp-2);
		margin-bottom: var(--jr-esp-2);
	}

	.jr-datos__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jr-datos__item:nth-child(3) {
		border-left: 0;
		padding-left: 0;
	}

	.jr-datos__item:nth-child(n+3) {
		border-top: 1px solid var(--contrast-3);
	}
}

@media (max-width: 600px) {
	.jr-hero__cartel {
		transform: rotate(1.5deg);
		margin-right: 14px;
	}

	.jr-hero__cartel img {
		box-shadow: 10px 10px 0 var(--accent);
	}

	.jr-datos__item {
		padding: 1.15rem 0.75rem;
		font-size: var(--jr-txt-xs);
		letter-spacing: 0.02em;
	}

	.jr-datos__item .gb-shape,
	.jr-datos__item svg {
		width: 24px;
		height: 24px;
	}

	.jr-hero .jr-acciones .jr-boton {
		width: 100%;
	}
}

/* =========================================================================
   7. EL PROYECTO — «DE FANS PARA MÚSICOS»
   -------------------------------------------------------------------------
   Foto vertical del graffiti a la izquierda, texto a la derecha. La cita
   destacada es la frase de ella, en grande.
   ========================================================================= */

.jr-proyecto__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: var(--jr-hueco-columnas);
	align-items: center;
}

.jr-proyecto__foto {
	position: relative;
	margin: 0;
}

.jr-proyecto__foto img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--jr-radio-grande);
}

/* El marco rosa desplazado, la misma sombra plana del cartel del hero pero
   por detrás, para que las dos imágenes hablen el mismo idioma. */
.jr-proyecto__foto::after {
	content: "";
	position: absolute;
	inset: 18px -18px -18px 18px;
	border: 2px solid var(--accent);
	border-radius: var(--jr-radio-grande);
	z-index: -1;
}

.jr-proyecto__texto {
	position: relative;
	z-index: 1;
}

.jr-cita {
	margin: 0 0 var(--jr-esp-4);
	padding-left: var(--jr-esp-3);
	border-left: 4px solid var(--accent);
	font-family: var(--jr-fuente);
	font-size: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem);
	font-weight: 500;
	line-height: 1.5;
	color: var(--base-3);
}

/* --- Quiénes somos (ronda 1) ---------------------------------------------
   Va dentro de la misma sección, debajo, separado por un filete. La
   ilustración es pequeña a propósito — acompaña al relato, no lo tapa. */
.jr-origen {
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	gap: var(--jr-hueco-columnas);
	align-items: center;
	margin-top: var(--jr-ritmo-bloque);
	padding-top: var(--jr-ritmo-bloque);
	border-top: var(--jr-borde);
}

.jr-origen__ilustracion {
	margin: 0;
}

.jr-origen__ilustracion img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--jr-radio-grande);
}

.jr-origen__titulo {
	font-size: var(--jr-titulo-3);
	margin: 0 0 var(--jr-esp-2);
}

.jr-origen__relato {
	max-width: var(--jr-ancho-texto);
	margin: 0 0 var(--jr-esp-3);
	font-size: var(--jr-txt-base);
	line-height: 1.7;
	color: var(--base-2);
}

.jr-origen__videos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* Los dos vídeos de Ramones. Enlaces, no reproductores incrustados — un
   iframe de YouTube carga medio mega y deja cookies de Google. */
.jr-enlace-video {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.5rem 1rem;
	border: var(--jr-borde);
	border-radius: 999px;
	color: var(--base-2);
	font-size: var(--jr-txt-s);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: border-color var(--jr-transicion), color var(--jr-transicion);
}

.jr-enlace-video .gb-shape {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--accent);
	color: var(--base-3);
}

.jr-enlace-video .gb-shape svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.jr-enlace-video:hover {
	border-color: var(--accent);
	color: var(--base-3);
}

/* --- Medios (ronda 1) ----------------------------------------------------- */

.jr-medios {
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	gap: var(--jr-hueco-columnas);
	align-items: start;
	margin-top: var(--jr-esp-6);
}

.jr-medios__titulo {
	margin: 0;
	padding-top: 0.9rem;
	font-family: var(--jr-fuente);
	font-size: var(--jr-txt-xs);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent-3);
}

/* Tres por fila en escritorio, dos en tableta y una en móvil. */
.jr-medios__lista {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--jr-hueco);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Medios crece solo (06/10/2026). Carolina añadirá entrevistas duplicando una
   tarjeta, así que la rejilla tiene que cuadrar con cualquier número sin que
   nadie toque el CSS. En escritorio va sobre 6 columnas y cada tarjeta ocupa
   2, o sea 3 por fila. Si la última fila se queda con 2, ocupan media fila
   cada una, y si se queda con 1, ocupa la fila entera. Nunca queda un hueco. */
@media (min-width: 901px) {
	.jr-medios__lista {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.jr-medio {
		grid-column: span 2;
	}

	.jr-medio:nth-child(3n+1):nth-last-child(2),
	.jr-medio:nth-child(3n+2):last-child {
		grid-column: span 3;
	}

	.jr-medio:nth-child(3n+1):last-child {
		grid-column: span 6;
	}
}

.jr-medio {
	margin: 0;
}

.jr-medio__enlace {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	height: 100%;
	padding: var(--jr-esp-2) var(--jr-esp-3);
	background-color: var(--contrast-2);
	border: var(--jr-borde);
	border-radius: var(--jr-radio-grande);
	color: var(--base-3);
	font-size: var(--jr-txt-card);
	font-weight: 600;
	line-height: 1.45;
	text-decoration: none;
	transition: border-color var(--jr-transicion);
}

.jr-medio__enlace::after {
	content: "→";
	color: var(--accent-3);
	transition: transform var(--jr-transicion);
}

.jr-medio__enlace:hover {
	border-color: var(--accent);
	color: var(--base-3);
}

.jr-medio__enlace:hover::after {
	transform: translateX(4px);
}

.jr-medio__fuente {
	font-size: var(--jr-txt-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--base);
}

@media (max-width: 900px) {
	.jr-origen,
	.jr-medios {
		grid-template-columns: 1fr;
	}

	.jr-origen {
		gap: var(--jr-esp-3);
	}

	.jr-origen__ilustracion {
		max-width: 200px;
	}

	.jr-medios {
		gap: var(--jr-esp-2);
	}

	.jr-medios__titulo {
		padding-top: 0;
	}

	.jr-medios__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Con un número impar de medios, el último ocupa la fila entera. */
	.jr-medio:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

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

@media (max-width: 900px) {
	.jr-proyecto__rejilla {
		grid-template-columns: 1fr;
	}

	.jr-proyecto__foto {
		max-width: 420px;
		margin-right: 18px;
	}
}

/* =========================================================================
   8. CARACTERÍSTICAS
   -------------------------------------------------------------------------
   Seis tarjetas, una por cada cosa que ella cuenta de las salas. Icono,
   título corto en Anton y su frase debajo. La rejilla las estira a la misma
   altura por fila, y el contenido arranca siempre arriba.
   ========================================================================= */

.jr-rasgos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--jr-hueco);
}

.jr-rasgo {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--jr-pad-tarjeta);
	background-color: var(--contrast);
	border: var(--jr-borde);
	border-radius: var(--jr-radio-grande);
	transition: border-color var(--jr-transicion), transform var(--jr-transicion);
}

/* El filete rosa de arriba aparece al pasar por encima. Arranca y acaba a
   la misma distancia del borde que el texto. */
.jr-rasgo::before {
	content: "";
	position: absolute;
	top: -1px;
	left: var(--jr-pad-tarjeta);
	right: var(--jr-pad-tarjeta);
	height: 3px;
	background-color: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.jr-rasgo:hover {
	border-color: rgba(210, 4, 89, 0.5);
	transform: translateY(-4px);
}

.jr-rasgo:hover::before {
	transform: scaleX(1);
}

.jr-rasgo__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--jr-esp-3);
	border-radius: 50%;
	background-color: rgba(210, 4, 89, 0.14);
}

.jr-rasgo__icono svg {
	width: 28px;
	height: 28px;
	fill: none;
	stroke: var(--accent-3);
}

.jr-rasgo__titulo {
	font-size: var(--jr-titulo-3);
	line-height: 1.05;
	margin: 0 0 0.75rem;
}

.jr-rasgo__texto {
	margin: 0;
	font-size: var(--jr-txt-card);
	line-height: 1.65;
	color: var(--base);
}

/* La séptima tarjeta, zona de descanso (ronda 2, 04/10/2026). Ocupa la fila
   entera para que la rejilla no quede coja — 3+3+1 en escritorio, 2+2+2+1
   en tableta. A todo el ancho el icono pasa a la izquierda y el título y el
   texto a su lado, para no dejar una caja ancha casi vacía. Por debajo de
   640 manda la regla común de las tarjetas apiladas. */
@media (min-width: 641px) {
	.jr-rasgo--ancha {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		column-gap: var(--jr-esp-3);
		align-items: center;
	}

	.jr-rasgo--ancha .jr-rasgo__icono {
		grid-row: 1 / 3;
		margin: 0;
	}

	.jr-rasgo--ancha .jr-rasgo__titulo {
		align-self: end;
	}

	.jr-rasgo--ancha .jr-rasgo__texto {
		align-self: start;
	}
}

@media (max-width: 1024px) {
	.jr-rasgos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Apiladas, el icono va al lado del título y no encima. Seis tarjetas de una
   en una con el icono arriba eran casi tres pantallas de móvil. */
@media (max-width: 640px) {
	.jr-rasgos {
		grid-template-columns: 1fr;
	}

	.jr-rasgo {
		display: grid;
		grid-template-columns: 48px 1fr;
		column-gap: var(--jr-esp-2);
		align-items: center;
	}

	.jr-rasgo__icono {
		width: 48px;
		height: 48px;
		margin: 0;
	}

	.jr-rasgo__icono svg {
		width: 24px;
		height: 24px;
	}

	.jr-rasgo__titulo {
		margin: 0;
	}

	.jr-rasgo__texto {
		grid-column: 1 / -1;
		margin-top: 0.75rem;
	}
}

/* =========================================================================
   9. SALAS
   -------------------------------------------------------------------------
   Foto de la sala a la izquierda y las dos fichas apiladas a la derecha, a
   la misma altura que la foto. Así se lee como una composición y no como
   una foto con dos cajas debajo.

   Cada ficha lleva el dato que importa en grande — el nombre en rosa y los
   metros al lado — y la frase de ella debajo. Va colgado de #salas porque
   .jr-seccion__inner lo comparten todas las secciones.
   ========================================================================= */

#salas .jr-seccion__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	grid-template-areas:
		"cabeza       cabeza"
		"foto         fichas"
		"modalidades  modalidades";
	column-gap: var(--jr-hueco);
}

#salas .jr-cabeza {
	grid-area: cabeza;
}

.jr-salas__foto {
	grid-area: foto;
	position: relative;
	margin: 0;
	min-height: 360px;
	border-radius: var(--jr-radio-grande);
	overflow: hidden;
}

.jr-salas__foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jr-salas__fichas {
	grid-area: fichas;
	display: grid;
	grid-auto-rows: 1fr;
	gap: var(--jr-hueco);
}

/* Con cuatro fichas o más (06/10/2026). Apiladas junto a la foto la
   estiraban hasta más de 1.200 px de alto. A partir de la cuarta, la foto
   pasa arriba a todo el ancho y las fichas van debajo de dos en dos. Si
   queda una suelta al final, ocupa la fila entera. */
@media (min-width: 901px) {
	#salas .jr-seccion__inner:has(.jr-salas__fichas > :nth-child(4)) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"cabeza"
			"foto"
			"fichas"
			"modalidades";
		row-gap: var(--jr-hueco);
	}

	#salas .jr-seccion__inner:has(.jr-salas__fichas > :nth-child(4)) .jr-salas__foto {
		min-height: 0;
		aspect-ratio: 16 / 7;
	}

	.jr-salas__fichas:has(> :nth-child(4)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jr-salas__fichas:has(> :nth-child(4)) > .jr-sala:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	#salas .jr-seccion__inner:has(.jr-salas__fichas > :nth-child(4)) .jr-modalidades {
		margin-top: 0;
	}
}

.jr-sala {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"nombre medida"
		"texto  texto"
		"accion accion";
	grid-template-rows: auto 1fr auto;
	column-gap: var(--jr-esp-2);
	align-items: end;
	padding: var(--jr-pad-tarjeta);
	background-color: var(--contrast-2);
	border: var(--jr-borde);
	border-radius: var(--jr-radio-grande);
	transition: border-color var(--jr-transicion);
}

.jr-sala:hover {
	border-color: rgba(210, 4, 89, 0.5);
}

.jr-sala__nombre {
	grid-area: nombre;
	margin: 0;
	font-size: clamp(3.75rem, 3rem + 2.6vw, 5.5rem);
	line-height: 0.82;
	color: var(--accent);
	letter-spacing: -0.01em;
}

/* Los metros, en la misma letra que el nombre y en blanco. Antes iban en
   una pastilla de 15 px y era el dato que más se buscaba. */
.jr-sala__medida {
	grid-area: medida;
	margin: 0;
	padding-bottom: 0.15em;
	font-family: var(--jr-fuente-titulo);
	font-size: clamp(1.625rem, 1.4rem + 0.8vw, 2.125rem);
	line-height: 1;
	color: var(--base-3);
}

.jr-sala__texto {
	grid-area: texto;
	align-self: start;
	margin: var(--jr-esp-3) 0 var(--jr-esp-3);
	font-size: var(--jr-txt-card);
	line-height: 1.6;
	color: var(--base-2);
}

.jr-sala__accion {
	grid-area: accion;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-height: 44px;
	font-size: var(--jr-txt-interfaz);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--accent-3);
}

.jr-sala__accion::after {
	content: "→";
	transition: transform var(--jr-transicion);
}

.jr-sala__accion:hover {
	color: var(--base-3);
}

.jr-sala__accion:hover::after {
	transform: translateX(4px);
}

/* El X2 llega sin frase (pendiente de Carolina). El botón baja solo al pie
   de la ficha gracias a la fila elástica, y aquí se le da el mismo aire que
   tendría con texto encima. */
.jr-sala--sin-texto .jr-sala__accion {
	margin-top: var(--jr-esp-3);
}

/* --- Modalidades de alquiler (ronda 1) -----------------------------------
   Una banda bajo la foto y las fichas, con las tres modalidades en fila y la
   nota de Carolina debajo. */
.jr-modalidades {
	grid-area: modalidades;
	margin-top: var(--jr-hueco);
	padding: var(--jr-pad-tarjeta);
	background-color: var(--contrast-2);
	border: var(--jr-borde);
	border-left: 4px solid var(--accent);
	border-radius: var(--jr-radio-grande);
}

.jr-modalidades__titulo {
	margin: 0 0 var(--jr-esp-2);
	font-family: var(--jr-fuente);
	font-size: var(--jr-txt-xs);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent-3);
	line-height: 1.4;
}

.jr-modalidades__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 var(--jr-esp-2);
	padding: 0;
	list-style: none;
}

.jr-modalidades__item {
	margin: 0;
	padding: 0.55rem 1.1rem;
	border-radius: 999px;
	background-color: var(--contrast);
	border: var(--jr-borde);
	color: var(--base-3);
	font-size: var(--jr-txt-s);
	font-weight: 600;
	line-height: 1.35;
}

.jr-modalidades__nota {
	margin: 0;
	font-size: var(--jr-txt-s);
	line-height: 1.6;
	color: var(--base);
}

.jr-modalidades__nota a {
	font-weight: 700;
}

@media (max-width: 900px) {
	#salas .jr-seccion__inner {
		grid-template-columns: 1fr;
		grid-template-areas:
			"cabeza"
			"foto"
			"fichas"
			"modalidades";
		row-gap: var(--jr-hueco);
	}

	.jr-modalidades {
		margin-top: 0;
	}

	.jr-salas__foto {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.jr-salas__fichas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: auto;
	}

	/* Con un número impar de fichas, la última ocupa la fila entera. Con las
	   tres salas de hoy la X2 quedaba sola a media fila. */
	.jr-salas__fichas > .jr-sala:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

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

/* =========================================================================
   10. GALERÍA
   -------------------------------------------------------------------------
   Once fotos en un mosaico de cuatro columnas y cuatro filas cerradas, sin
   huecos. El orden de los bloques es el que lo cuadra — ancha, alta, alta,
   dos sueltas, ancha, ancha y cuatro sueltas. grid-auto-flow: dense está
   por si alguien añade o quita una foto, para que rellene en vez de dejar
   un agujero.

   En móvil va a dos columnas y las altas pasan a una sola fila, así queda
   una sucesión ordenada de parejas y franjas anchas.

   Sin carrusel ni ventana modal a propósito — los dos necesitan JavaScript
   para ser accesibles con teclado, y la galería se entiende sin ellos.
   ========================================================================= */

.jr-galeria {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: clamp(150px, 7rem + 7vw, 240px);
	grid-auto-flow: dense;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jr-galeria__item {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--jr-radio-grande);
	background-color: var(--contrast);
}

.jr-galeria__item--alta {
	grid-row: span 2;
}

.jr-galeria__item--ancha {
	grid-column: span 2;
}

.jr-galeria__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.jr-galeria__item:hover img {
	transform: scale(1.04);
}

@media (max-width: 900px) {
	.jr-galeria {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: clamp(140px, 6rem + 14vw, 220px);
		gap: 10px;
	}

	/* Las verticales pasan a casilla cuadrada y el recorte centrado le cortaba
	   la cabeza al rockero del graffiti. Se encuadran por arriba. */
	.jr-galeria__item--alta {
		grid-row: span 1;
	}

	.jr-galeria__item--alta img {
		object-position: 50% 15%;
	}
}

/* =========================================================================
   11. DÓNDE ESTAMOS
   -------------------------------------------------------------------------
   Dirección y accesos a la izquierda, mapa a la derecha, a medias. Los tres
   transportes van en un solo panel de filas — tipo, líneas — en vez de tres
   tarjetas de 133 px que partían cada línea en dos.

   El mapa es una imagen enlazada a Google Maps, igual que en su web. No es
   un iframe, así que no carga nada de Google ni deja cookies.
   ========================================================================= */

.jr-ubicacion__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--jr-hueco-columnas);
	align-items: center;
}

.jr-direccion {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0 0 var(--jr-esp-4);
	font-size: var(--jr-txt-m);
	font-weight: 600;
	line-height: 1.5;
	color: var(--base-3);
}

.jr-direccion svg,
.jr-direccion .gb-shape {
	width: 26px;
	height: 26px;
	margin-top: 0.15em;
	flex-shrink: 0;
	fill: var(--accent-3);
}

.jr-transportes {
	margin-bottom: var(--jr-esp-4);
	background-color: var(--contrast-2);
	border: var(--jr-borde);
	border-radius: var(--jr-radio-grande);
	overflow: hidden;
}

.jr-transporte {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: var(--jr-esp-2);
	padding: 1.1rem var(--jr-esp-3);
	border-bottom: var(--jr-borde);
}

.jr-transporte:last-child {
	border-bottom: 0;
}

.jr-transporte__titulo {
	margin: 0;
	padding-top: 0.2em;
	font-family: var(--jr-fuente);
	font-size: var(--jr-txt-xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent-3);
	line-height: 1.4;
}

.jr-transporte__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--jr-txt-s);
	line-height: 1.5;
	color: var(--base-2);
}

.jr-transporte__lista li {
	margin: 0 0 0.3rem;
}

.jr-transporte__lista li:last-child {
	margin-bottom: 0;
}

.jr-mapa {
	display: block;
	position: relative;
	border-radius: var(--jr-radio-grande);
	overflow: hidden;
	border: 3px solid var(--base-3);
	box-shadow: var(--jr-sombra-cartel);
}

/* 4:3 en vez del 1000 x 570 del archivo. A media columna el mapa apaisado se
   quedaba en 316 px de alto junto a un bloque de texto de casi el doble, y
   parecía un adorno. El recorte es por los lados y la chincheta queda en
   el centro. */
.jr-mapa img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.jr-mapa:hover img {
	transform: scale(1.03);
}

/* --- Fachada y mapa, a la par (ronda 1) ----------------------------------
   La foto de la fachada que mandó Carolina junto al mapa, las dos a la misma
   proporción. Así se ve a la vez cómo es la entrada y dónde está. */
.jr-ubicacion__imagenes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--jr-hueco);
	align-items: start;
}

.jr-fachada {
	margin: 0;
	border-radius: var(--jr-radio-grande);
	overflow: hidden;
}

.jr-fachada img,
.jr-ubicacion__imagenes .jr-mapa img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.jr-ubicacion__imagenes .jr-mapa {
	margin-right: 0;
	box-shadow: 10px 10px 0 var(--accent);
}

@media (max-width: 1024px) {
	.jr-ubicacion__rejilla {
		grid-template-columns: 1fr;
	}

	.jr-mapa {
		margin-right: 14px;
	}

	.jr-mapa img {
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 480px) {
	.jr-transporte {
		grid-template-columns: 1fr;
		gap: 0.4rem;
	}
}

/* =========================================================================
   12. CONTACTO Y FORMULARIO
   -------------------------------------------------------------------------
   El cierre de la página. Los canales directos a la izquierda y el
   formulario de Contact Form 7 a la derecha, en una tarjeta.
   ========================================================================= */

.jr-contacto {
	background-image: radial-gradient(50rem 30rem at 100% 0%, rgba(210, 4, 89, 0.18), transparent 60%);
}

.jr-contacto__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: var(--jr-hueco-columnas);
	align-items: start;
}

/* La regla de las tarjetas en toda la página — fondo contrario al de su
   sección. Contacto es una sección alterna, así que canales y formulario van
   en el negro principal, igual que las tarjetas de Características. Antes
   iban en el mismo tono que la sección y solo los separaba el borde. */
.jr-canales {
	display: grid;
	gap: var(--jr-hueco);
	margin: var(--jr-esp-4) 0 0;
	padding: 0;
	list-style: none;
}

.jr-canal {
	margin: 0;
}

.jr-canal__enlace {
	display: flex;
	align-items: center;
	gap: var(--jr-esp-2);
	padding: var(--jr-esp-2) var(--jr-esp-3);
	background-color: var(--contrast);
	border: var(--jr-borde);
	border-radius: var(--jr-radio-grande);
	color: var(--base-3);
	font-size: var(--jr-txt-m);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: border-color var(--jr-transicion), transform var(--jr-transicion);
	overflow-wrap: break-word;
}

/* En móvil estrecho el correo y el WhatsApp no cabían a 20 px en una línea. */
@media (max-width: 420px) {
	.jr-canal__enlace {
		gap: 0.75rem;
		padding: 0.875rem 1rem;
		font-size: var(--jr-txt-s);
	}

	.jr-canal__enlace .gb-shape {
		width: 40px;
		height: 40px;
	}
}

.jr-canal__enlace:hover {
	border-color: var(--accent);
	color: var(--base-3);
	transform: translateX(4px);
}

/* El círculo es el envoltorio .gb-shape y el SVG va dentro. Pintar los dos
   sacaba dos círculos montados uno encima de otro. */
.jr-canal__enlace .gb-shape {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--accent);
	color: var(--base-3);
}

.jr-canal__enlace .gb-shape svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.jr-formulario {
	padding: var(--jr-pad-tarjeta);
	background-color: var(--contrast);
	border: var(--jr-borde);
	border-top: 4px solid var(--accent);
	border-radius: var(--jr-radio-grande);
}

.jr-formulario__titulo {
	font-size: var(--jr-titulo-3);
	margin: 0 0 var(--jr-esp-3);
}

/* --- Contact Form 7 ------------------------------------------------------ */

.wpcf7 form > p,
.wpcf7 .jr-campo {
	margin: 0 0 var(--jr-esp-3);
}

.wpcf7 label {
	display: block;
	font-size: var(--jr-txt-s);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--base-2);
}

.wpcf7 .jr-campo br {
	display: none;
}

.wpcf7 .wpcf7-form-control-wrap {
	display: block;
	margin-top: 0.4rem;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	min-height: 52px;
	padding: 0.8rem 1rem;
	background-color: var(--contrast-2);
	border: 1px solid #4a3d42;
	border-radius: var(--jr-radio);
	color: var(--base-3);
	font-size: var(--jr-txt-base);
	line-height: 1.4;
	transition: border-color var(--jr-transicion), box-shadow var(--jr-transicion);
}

.wpcf7 textarea {
	min-height: 150px;
	resize: vertical;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
	border-color: var(--accent-3);
	box-shadow: 0 0 0 3px rgba(255, 79, 143, 0.25);
	outline: none;
}

.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible {
	outline: 2px solid var(--base-3);
	outline-offset: 2px;
}

.jr-campos-pareja {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--jr-esp-3);
}

.jr-campos-pareja .jr-campo {
	margin-bottom: 0;
}

.jr-campos-pareja + .jr-campo,
.jr-campos-pareja {
	margin-bottom: var(--jr-esp-3);
}

.wpcf7 .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.wpcf7 .wpcf7-acceptance label {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	font-size: var(--jr-txt-s);
	font-weight: 400;
	line-height: 1.55;
	color: var(--base);
	cursor: pointer;
}

.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
	width: 24px;
	height: 24px;
	margin: 0.1em 0 0;
	flex-shrink: 0;
	accent-color: var(--accent);
}

.wpcf7 .wpcf7-submit {
	width: 100%;
	min-height: 56px;
	padding: 1rem 1.75rem;
	border: 0;
	border-radius: var(--jr-radio);
	background-color: var(--accent);
	color: var(--base-3);
	font-size: var(--jr-txt-interfaz);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--jr-transicion);
}

.wpcf7 .wpcf7-submit:hover,
.wpcf7 .wpcf7-submit:focus {
	background-color: var(--accent-2);
}

/* El spinner de CF7 ocupa sitio aunque esté oculto y dejaba 40 px de aire
   muertos bajo el botón. Se quita, y el aviso de «enviando» lo da el propio
   botón mientras el formulario lleva la clase submitting. */
.wpcf7 .wpcf7-spinner {
	display: none;
}

.wpcf7 form.submitting .wpcf7-submit {
	opacity: 0.7;
	cursor: progress;
}

.wpcf7 form > p {
	margin-bottom: 0;
}

/* CF7 pasa el formulario por su autop y mete <br> y <p> vacíos entre las
   etiquetas. Dentro de las cajas de campo sobran. */
.wpcf7 .jr-campos-pareja br,
.wpcf7 .jr-campos-pareja > p:empty,
.wpcf7 .jr-campo > p:empty {
	display: none;
}

.wpcf7 .jr-campo p {
	margin: 0;
}

.wpcf7 .jr-obligatorios {
	margin: var(--jr-esp-2) 0 0;
	font-size: var(--jr-txt-xs);
	color: var(--base);
}

.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 0.4rem;
	font-size: var(--jr-txt-s);
	color: var(--accent-3);
}

/* Un solo aviso por campo, siempre el último.
   ---------------------------------------------------------------------
   CF7 6.1.7 pinta cada error con appendChild y lo borra con
   querySelector(...).remove(), que solo quita el primero. Si el mismo campo
   se valida dos veces seguidas —al salir de él y otra vez al enviar— se
   quedan dos avisos iguales. Pasaba al enviar incompleto y reenviar con el
   correo mal escrito (QA del 03/10/2026). El último añadido es siempre el
   vigente, así que se esconden los anteriores. Los avisos llevan
   aria-hidden y el lector de pantalla usa la lista accesible aparte. */
.wpcf7 .wpcf7-form-control-wrap > .wpcf7-not-valid-tip:not(:last-child) {
	display: none;
}

.wpcf7 form .wpcf7-response-output {
	margin: var(--jr-esp-3) 0 0;
	padding: var(--jr-esp-2);
	border-radius: var(--jr-radio);
	font-size: var(--jr-txt-s);
	line-height: 1.5;
	color: var(--base-2);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #3fbf7f;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: var(--accent-3);
}

@media (max-width: 1024px) {
	.jr-contacto__rejilla {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.jr-campos-pareja {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   13. PIE
   -------------------------------------------------------------------------
   Calcado de santswebdesign.com — tres columnas de widgets con título y
   lista, y una barra inferior con el copyright y los iconos sociales.

   En el negro principal, separado por un filete. Antes iba en --contrast-2,
   el mismo tono que la sección de contacto que tiene encima, y las dos se
   fundían en un bloque.

   El contenedor se iguala al de las secciones — 1200 px con el mismo aire
   lateral — y el texto cae en la misma vertical que el logo, el hero y cada
   sección. Medido con la estructura flexbox de GP, x=143 los cuatro a 1440
   px de ventana. GP pone 40 px de relleno propio en el contenedor, un -40 px
   en .inside-footer-widgets y 40 px en cada widget, y por eso se anulan.
   ========================================================================= */

.site-footer {
	background-color: var(--contrast);
	color: var(--base);
	border-top: 1px solid var(--contrast-3);
}

.site-footer .footer-widgets {
	background-color: var(--contrast);
	padding: clamp(3.5rem, 2.5rem + 2vw, 5rem) 0 clamp(2.5rem, 2rem + 1vw, 3.5rem);
}

.site-footer .footer-widgets-container {
	box-sizing: border-box;
	max-width: var(--jr-ancho-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--jr-borde-lateral);
	padding-right: var(--jr-borde-lateral);
}

/* Tres clases para pasar por encima de la regla de GP que pone el -40 px.
   El límite de 1200 ya lo pone .footer-widgets-container por fuera. */
.site-footer .footer-widgets .inside-footer-widgets {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	gap: var(--jr-esp-6);
}

.site-footer .inside-footer-widgets > div,
.site-footer .footer-widgets .widget {
	padding-left: 0;
	padding-right: 0;
}

.site-footer .footer-widget-1 {
	flex-grow: 1.4;
}

.site-footer .widget {
	margin-bottom: 0;
}

.jr-pie__logo {
	margin: 0 0 var(--jr-esp-3);
}

.jr-pie__logo img {
	width: 80px;
	border-radius: var(--jr-radio);
}

.jr-pie__lema {
	max-width: 34ch;
	margin: 0;
	font-size: var(--jr-txt-s);
	line-height: 1.7;
	color: var(--base);
}

.jr-pie__titulo {
	margin: 0 0 var(--jr-esp-2);
	font-family: var(--jr-fuente);
	font-size: var(--jr-txt-xs);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--base-3);
}

.jr-pie__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--jr-txt-s);
	line-height: 1.9;
	color: var(--base);
}

.jr-pie__lista li {
	margin: 0;
}

.jr-pie__lista a {
	position: relative;
	color: var(--base);
	text-decoration: none;
}

.jr-pie__lista a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background-color: var(--accent-3);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--jr-transicion);
}

.jr-pie__lista a:hover,
.jr-pie__lista a:focus-visible {
	color: var(--base-3);
}

.jr-pie__lista a:hover::after,
.jr-pie__lista a:focus-visible::after {
	transform: scaleX(1);
}

/* --- Barra inferior ------------------------------------------------------ */

.site-info {
	background-color: var(--contrast);
	border-top: 1px solid var(--contrast-3);
	font-size: var(--jr-txt-s);
	color: var(--base);
}

.site-info .inside-site-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--jr-esp-3);
	max-width: var(--jr-ancho-max);
	margin: 0 auto;
	padding: var(--jr-esp-3) var(--jr-borde-lateral);
}

/* El copyright a la izquierda y los iconos a la derecha, en los dos bordes
   del contenedor.

   LA TRAMPA. .inside-site-info es un .grid-container y GP le pone el
   clearfix de siempre, un ::before y un ::after vacíos. Dentro de un
   contenedor flex esos pseudoelementos cuentan como elementos, así que
   space-between repartía el sitio entre cuatro y el copyright quedaba en
   medio de la barra. Medido, x=537 en vez de x=105. */
.site-info .inside-site-info::before,
.site-info .inside-site-info::after {
	display: none;
}
.site-info .copyright-bar {
	order: 1;
	margin: 0;
	text-align: left;
}

.site-info .footer-bar {
	order: 2;
	margin: 0;
}

.site-info a {
	color: var(--base-2);
}

/* --- Iconos sociales ----------------------------------------------------- */

.jr-social {
	display: flex;
	align-items: center;
	gap: var(--jr-esp-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jr-social__item {
	margin: 0;
}

.jr-social__enlace {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: var(--base-2);
	background-color: rgba(255, 255, 255, 0.07);
	transition: background-color var(--jr-transicion), color var(--jr-transicion);
}

.jr-social__enlace svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.jr-social__enlace:hover,
.jr-social__enlace:focus-visible {
	background-color: var(--accent);
	color: var(--base-3);
}

@media (max-width: 768px) {
	.site-footer .inside-footer-widgets {
		text-align: center;
	}

	.jr-pie__lema {
		margin-left: auto;
		margin-right: auto;
	}

	.jr-pie__logo img {
		margin: 0 auto;
	}

	.site-info .inside-site-info {
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	.site-info .copyright-bar {
		text-align: center;
	}

	.jr-pie__lista a::after {
		display: none;
	}
}

/* =========================================================================
   14. EL MENÚ MÓVIL DESLIZANTE
   -------------------------------------------------------------------------
   Calcado de santswebdesign.com. El panel es el de GP Premium (Menu Plus →
   Off Canvas), que trae su velo, su aspa, el foco atrapado y el cierre con
   Escape. Aquí solo va lo que el componente no cubre — la hamburguesa
   dibujada a mano, el aire de dentro del panel, el botón rosa del final y el
   velo. Se enciende en Personalizar → Menús → Panel lateral, y saca sus
   enlaces de la ubicación «Off Canvas Menu».
   ========================================================================= */

@media (max-width: 1024px) {

	/* Logo a la izquierda y hamburguesa a la derecha. Con la navegación
	   flotando a la derecha, GP la deja pegada al logo por debajo de 1024. */
	.site-header .inside-header {
		justify-content: space-between;
	}

	.site-header #site-navigation {
		margin-left: auto;
	}

	.site-logo img {
		width: 56px;
	}

	.menu-toggle {
		position: relative;
		width: 44px;
		height: 44px;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: 0;
		-webkit-tap-highlight-color: transparent;
	}

	.site-header .menu-toggle .gp-icon.icon-menu-bars svg {
		display: none;
	}

	.menu-toggle .gp-icon {
		position: relative;
		display: block;
		width: 26px;
		height: 2px;
		border-radius: 2px;
		background-color: var(--base-3);
	}

	.menu-toggle .gp-icon::before,
	.menu-toggle .gp-icon::after {
		content: "";
		position: absolute;
		left: 0;
		width: 26px;
		height: 2px;
		border-radius: 2px;
		background-color: var(--base-3);
	}

	.menu-toggle .gp-icon::before { top: -8px; }
	.menu-toggle .gp-icon::after  { top: 8px; width: 18px; }

	.menu-toggle:focus-visible {
		outline: 2px solid var(--base-3);
		outline-offset: 2px;
	}

	.main-navigation .menu-toggle {
		background-color: transparent;
	}
}

.slideout-navigation.main-navigation .inside-navigation {
	display: block;
	padding: 1.75rem var(--jr-borde-lateral) 2rem;
	max-width: none;
}

.admin-bar .slideout-navigation.main-navigation .inside-navigation {
	padding-top: calc(1.75rem + 46px);
}

.slideout-navigation.main-navigation .main-nav {
	margin-top: 1.75rem;
	margin-bottom: 0;
}

/* Con el id delante. GP imprime en línea en el <head>
   «.slideout-navigation.main-navigation .main-nav ul li a { text-transform:
   none }», con la misma especificidad que una regla sin id y cargado después,
   así que ganaba él. Medido en el navegador. */
#generate-slideout-menu.slideout-navigation .main-nav > ul > li > a {
	display: block;
	padding: 0.7rem 0;
	font-family: var(--jr-fuente-titulo);
	font-size: 1.75rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-transform: uppercase;
	text-align: left;
	opacity: 1;
}

.slideout-navigation.main-navigation .main-nav > ul > li > a::after {
	display: none;
}

.slideout-navigation.main-navigation .main-nav ul li a:focus-visible {
	outline: 2px solid var(--base-3);
	outline-offset: 2px;
	border-radius: 3px;
}

.slideout-navigation.main-navigation .main-nav > ul > li.jr-cta {
	margin-top: 1.75rem;
}

/* El !important va a regañadientes, igual que en santswebdesign.com. GP
   escribe los colores del panel como CSS en línea en el <head>, y eso gana a
   la hoja del hijo con la misma especificidad. */
.slideout-navigation.main-navigation .main-nav > ul > li.jr-cta > a,
.slideout-navigation.main-navigation .main-nav > ul > li.jr-cta:hover > a {
	padding: 1rem 1.2rem;
	margin-left: 0;
	background-color: var(--accent) !important;
	border-radius: var(--jr-radio);
	color: var(--base-3) !important;
	font-family: var(--jr-fuente);
	font-size: var(--jr-txt-interfaz);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
}

.slideout-navigation.main-navigation .main-nav > ul > li.jr-cta:hover > a {
	background-color: var(--accent-2) !important;
}

/* El velo. Negro de la marca al 70 %, la página se sigue reconociendo detrás.
   Selector repetido para ganar a offside.css, que se encola después. */
.slideout-overlay.slideout-overlay {
	background-color: rgba(13, 10, 11, 0.7);
}

.slideout-navigation.main-navigation button.slideout-exit {
	width: 100%;
	padding: 0;
	text-align: right;
	line-height: 1;
	color: var(--base-3);
	cursor: pointer;
}

.slideout-navigation.main-navigation button.slideout-exit svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.slideout-navigation.main-navigation button.slideout-exit:hover {
	color: var(--accent-3);
}

.slideout-navigation.main-navigation button.slideout-exit:focus-visible {
	outline: 2px solid var(--base-3);
	outline-offset: 4px;
	border-radius: 3px;
}

body.slide-opened {
	overflow: hidden;
}

/* =========================================================================
   15. LA PÁGINA LEGAL
   ========================================================================= */

.jr-pagina-legal .site-content {
	max-width: 50rem;
	margin: 0 auto;
	padding: var(--jr-seccion) var(--jr-borde-lateral);
}

.jr-pagina-legal .inside-article {
	padding: 0;
	background-color: transparent;
}

.jr-pagina-legal .entry-header {
	margin-bottom: var(--jr-esp-6);
}

.jr-pagina-legal .entry-title {
	font-size: var(--jr-titulo-2);
}

.jr-pagina-legal .entry-content h2 {
	font-size: var(--jr-titulo-3);
	margin: var(--jr-esp-6) 0 var(--jr-esp-2);
}

.jr-pagina-legal .entry-content p,
.jr-pagina-legal .entry-content li {
	color: var(--base-2);
}

/* =========================================================================
   16. MENOS MOVIMIENTO
   -------------------------------------------------------------------------
   Quien lo pide en su sistema no tiene animaciones ni desplazamiento suave.
   ========================================================================= */

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

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

	.jr-hero__cartel,
	.jr-hero__cartel:hover {
		transform: none;
	}
}

/* =========================================================================
   17. EL BANNER DE COOKIES (COMPLIANZ)
   -------------------------------------------------------------------------
   No hace nada hasta que se active Complianz. Está puesto de antemano para
   que el banner salga ya con las medidas buenas. Es el bloque de
   santswebdesign.com (sección 102 de su style.css), copiado el 06/10/2026.

   AQUÍ SOLO VAN MEDIDAS, NUNCA COLORES. Los colores se ponen en la paleta del
   propio Complianz, que los publica como variables --cmplz_*, para que lo que
   se configure en el plugin siga mandando. La paleta de Joey Rocks! propuesta
   con su contraste medido · fondo #171214, borde #3a2e32, texto #f5efe9,
   enlaces #ff4f8f, los tres botones iguales en #d20459 con texto #ffffff,
   interruptores #d20459 / #8a7c81 con bolita #ffffff, radio 4 px.

   Los !important son necesarios. Complianz escribe su hoja generada después
   de la del tema y con la misma especificidad.
   ========================================================================= */

/* Capa aislada y por encima de todo, también de la cabecera fija. */
.cmplz-cookiebanner {
	contain: layout style paint;
	z-index: 100000000 !important;
}

/* --- El tamaño de letra en escritorio ------------------------------------- */

/* Complianz sirve el texto a 11 px y los botones a 15, y los botones gritan
   mientras el texto legal desaparece. Igualados a 12 se lee como una pieza. */
.cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner .cmplz-message p,
.cmplz p {
	font-size: 12px;
	line-height: 1.5;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	font-size: 12px !important;
}

/* --- El tamaño del banner en móvil ---------------------------------------- */

/* Por debajo de 768 Complianz no le da ancho al banner y a 320 px se sale de
   la pantalla. Se le dice a qué distancia va de cada borde en vez de
   calcularle el ancho, así queda siempre centrado. Van las tres posiciones
   por si se cambia de esquina en los ajustes del plugin. */
@media (max-width: 767px) {

	.cmplz-cookiebanner.cmplz-bottom-right,
	.cmplz-cookiebanner.cmplz-bottom-left,
	.cmplz-cookiebanner.cmplz-bottom {
		left: 16px !important;
		right: 16px !important;
		width: auto !important;
		max-width: none !important;
	}

	.cmplz-cookiebanner {
		min-width: 0 !important;
		padding: 16px !important;
	}

	.cmplz-cookiebanner .cmplz-body,
	.cmplz-cookiebanner .cmplz-message,
	.cmplz-cookiebanner .cmplz-categories {
		min-width: 0 !important;
		width: 100% !important;
	}
}

/* --- Compactar el banner en móvil ---------------------------------------- */

/* En santswebdesign.com bajó de ocupar el 34 % de la pantalla del móvil al
   26 %. Se quitan los divisores invisibles y la cabecera, que en móvil solo
   lleva el aspa, y se ajustan huecos. Quitar el aspa no deja sin salida.
   Quedan las tres opciones explícitas, y cerrar sin elegir no es consentir. */
@media (max-width: 767px) {

	.cmplz-cookiebanner {
		row-gap: 8px !important;
	}

	.cmplz-cookiebanner .cmplz-header,
	.cmplz-cookiebanner .cmplz-divider {
		display: none !important;
	}

	.cmplz-cookiebanner .cmplz-message p {
		margin-bottom: 0 !important;
	}
}

/* --- Los botones en móvil ------------------------------------------------ */

/* Aceptar y rechazar en la misma fila y del mismo ancho, y las preferencias
   debajo a línea entera. Un rechazar más pequeño o menos visible que aceptar
   invalida el consentimiento. 45 px de alto para pulsar con el dedo. */
@media (max-width: 767px) {

	.cmplz-cookiebanner .cmplz-buttons {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		gap: 8px !important;
	}

	.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
		min-height: 45px !important;
		padding: 10px !important;
		line-height: 20px !important;
		text-align: center !important;

		/* El radio y el tamaño de letra salen de los ajustes del plugin. */
		border-radius: var(--cmplz_button_border_radius) !important;
		font-size: var(--cmplz_button_font_size) !important;
	}

	.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept,
	.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0 !important;
		margin: 0 !important;
	}

	/* Las preferencias, línea entera y al final. Botón de verdad, no un
	   enlace escondido. */
	.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
		flex: 1 1 100% !important;
		width: 100% !important;
		order: 3 !important;
		margin: 0 !important;
		height: auto !important;
		opacity: 1 !important;
		text-decoration: none !important;
		background-color: var(--cmplz_button_settings_background_color) !important;
		border: 1px solid var(--cmplz_button_settings_border_color) !important;
		color: var(--cmplz_button_settings_text_color) !important;
	}
}