/*
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. */
.jr-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	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);
}

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

	.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);
}

@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);
}

@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";
	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);
}

.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);
}

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

	.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;
	}
}

@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);
}

@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);
}

.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;
	}
}