/*
Theme Name: Ryse Project
Theme URI: https://ryseproject.example
Author: Jan
Description: Tema de bloques a medida para RYSE PROJECT, performance club for women. Construido sobre el manual de marca: paleta exacta, tipografía geométrica y cero efectos gráficos.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ryse
Tags: full-site-editing, block-patterns, custom-colors, custom-menu, responsive-layout
*/

/* La columna del diseño: el eje que comparten la cabecera, el título, el
   horario y el pie. Está también en las plantillas como `contentSize` y
   `wideSize`; si cambia, cambia en los dos sitios. */
:root {
	--ryse-columna: 1320px;
}


/* --------------------------------------------------------------------------
   Solo va aquí lo que theme.json no puede expresar.
   Colores, tipografías y espaciados se editan en theme.json.

   REGLA DEL MANUAL DE MARCA, PÁGINA 10:
   «No se tienen que consentir alteraciones, deformaciones ni añadidos de
   efectos gráficos (sombras, degradados...) que comprometan la estética
   premium y delicada de la marca.»

   Por eso en este archivo no hay ni un box-shadow ni un linear-gradient
   decorativo. Si alguien añade uno, se está saltando el manual.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--negro);
	outline-offset: 3px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999999;
	padding: 1em;
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--hueso);
	font-size: 0.875rem;
	text-decoration: none;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* --- Marca ----------------------------------------------------------------
   El imagotipo lleva su propio aire alrededor: no se le añade padding ni se
   deforma. Solo se controla la altura. */
.ryse-marca img,
.wp-block-site-logo img {
	height: auto;
	width: 100%;
	max-width: 168px;
	max-height: none;
	display: block;
}
.ryse-pie-marca img { width: 100%; max-width: 210px; height: auto; }

@media (max-width: 600px) {
	.ryse-marca img, .wp-block-site-logo img { max-width: 132px; }
}

/* --- Botones -------------------------------------------------------------
   Rectos, sin radio. La marca es geométrica y de canto vivo. */
.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	border: 1px solid currentColor;
	padding: 1.1rem 2.5rem;
}
/* Al pasar el ratón el contorno se rellena. Antes se rellenaba con
   currentColor, y como el hover del tema pone el texto en hueso, sobre fondo
   claro el botón se fundía con la página: hueso sobre hueso. Ahora el
   relleno es explícito: negro sobre claro, hueso sobre oscuro. */
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--negro);
	border-color: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--hueso);
}
:is(.has-negro-background-color, .has-grafito-background-color, .ryse-hero)
	.wp-block-button.is-style-outline > .wp-block-button__link:hover,
:is(.has-negro-background-color, .has-grafito-background-color, .ryse-hero)
	.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--hueso);
	border-color: var(--wp--preset--color--hueso);
	color: var(--wp--preset--color--negro);
}

/* Un botón sólido sobre sección oscura desaparece: el relleno por defecto es
   negro y el fondo también. Se invierte solo. */
:is(.has-negro-background-color, .has-grafito-background-color, .ryse-hero)
	.wp-block-button:not(.is-style-outline)
	> .wp-block-button__link:not(.has-background) {
	background-color: var(--wp--preset--color--hueso);
	border-color: var(--wp--preset--color--hueso);
	color: var(--wp--preset--color--negro);
}
:is(.has-negro-background-color, .has-grafito-background-color, .ryse-hero)
	.wp-block-button:not(.is-style-outline)
	> .wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--arena);
	border-color: var(--wp--preset--color--arena);
	color: var(--wp--preset--color--negro);
}

/* --- Hero ----------------------------------------------------------------
   Velo plano, no degradado: el manual descarta los degradados. Un color sólido
   translúcido cumple la misma función de legibilidad y es más limpio. */
.ryse-hero .wp-block-cover__background {
	background-color: rgba(15, 15, 16, 0.55);
}
.ryse-hero video.wp-block-cover__video-background { object-position: center; }

.ryse-hero {
	/* WordPress da `padding: 1em` a todas las portadas. Aquí desplaza el
	   contenido del hero 17 px respecto al eje del resto del sitio, que es
	   justo el tipo de desajuste que se nota en pantallas grandes. */
	padding-left: 0;
	padding-right: 0; min-height: 92vh; }
@supports (height: 100svh) {
	.ryse-hero { min-height: 92svh; }
}

/* --- Medida del texto en páginas -----------------------------------------
   La columna de contenido es ancha (1320) para que el título y el horario
   arranquen en el mismo eje que el logotipo. Pero un párrafo de 1260 px es
   ilegible: el ojo pierde el renglón al volver.

   Así que el texto corrido conserva una medida cómoda y se alinea a la
   izquierda. Sin el `margin-right: auto`, WordPress lo centraría dentro de la
   columna ancha y volveríamos a tener dos ejes.

   Se excluye lo que debe ocupar todo el ancho: rejillas, columnas, imágenes
   a sangre y el horario.

   El `!important` no es pereza: WordPress declara `margin-left: auto !important`
   sobre los hijos de todo contenedor restringido, así que sin él la regla no
   puede ganar por mucha especificidad que tenga.

   UN SOLO EJE — por qué el margen no es cero.

   El contenedor de contenido va a `alignfull` porque las imágenes de banda y
   el horario tienen que llegar al borde de la pantalla. Eso hace que su borde
   interno caiga en el relleno global, no en la columna de 1320 donde se
   alinean el logotipo, el título y el pie.

   Con `margin-left: 0` el texto se pegaba a ESE borde: dos ejes distintos,
   invisible en pantallas pequeñas y de más de cien píxeles en grandes.

   El desfase es la mitad de lo que le sobra al contenedor sobre la columna.
   El `max(0px, …)` lo anula cuando la ventana es más estrecha que la columna
   —entonces ambos ejes son el mismo— así que vale para cualquier tamaño sin
   una sola media query. */
.entry-content > :is(p, ul, ol, h2, h3, h4, blockquote):not(.alignwide):not(.alignfull) {
	max-width: 46rem;
	margin-left: max( 0px, calc( ( 100% - var(--ryse-columna) ) / 2 ) ) !important;
	margin-right: auto !important;
}

/* El subtítulo de entradilla, algo más corto: es un texto de arranque. */
.entry-content > p.has-medio-font-size:first-child {
	max-width: 38rem;
}

/* --- Cabecera ------------------------------------------------------------- */
.ryse-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--hueso);
	border-bottom: 1px solid var(--wp--preset--color--gris);
	/* En rem explícitos: la escala de espaciado del tema está sobrescrita por
	   la de WordPress (ver DISENO.md) y dejaba la cabecera en 45 px. */
	padding-top: 1.15rem;
	padding-bottom: 1.15rem;
}

/* --- Menú -----------------------------------------------------------------
   El hueco entre enlaces se fija aquí, en rem, y no con el token de
   espaciado: la escala del tema está sobrescrita por la de WordPress
   (ver DISENO.md) y dejaba el menú con 0,67 rem, todo pegado. */
.ryse-header .wp-block-navigation {
	gap: clamp( 1.4rem, 2.3vw, 2.6rem );
}

/* --- Etiquetas de sección -------------------------------------------------
   Versalitas espaciadas, como los rótulos del manual. */
.ryse-etiqueta {
	font-family: var(--wp--preset--font-family--titular);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
}

/* Filete que acompaña al rótulo. Estructura, no adorno. */
.ryse-etiqueta::before {
	content: "";
	display: inline-block;
	width: 2.25rem;
	height: 1px;
	margin-right: 1.1rem;
	vertical-align: middle;
	background-color: currentColor;
}

/* --- Declaración de marca -------------------------------------------------
   Los claims del manual, en el tamaño que les corresponde. */
.ryse-claim {
	font-family: var(--wp--preset--font-family--titular);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.02;
	letter-spacing: -0.02em;
}

/* --- Los cuatro momentos, como línea temporal -----------------------------
   Antes iban numerados 01-04. La línea cuenta lo mismo sin rótulos y deja
   claro que es una secuencia, no cuatro cosas sueltas.

   El marcador es un cuadrado, no un círculo: la marca es geométrica y de
   canto vivo, y un círculo desentonaría con el resto de la web. */
.ryse-momentos {
	position: relative;
	margin-top: 1rem;
}
.ryse-momentos::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 0;
	right: 0;
	height: 1px;
	background-color: var(--wp--preset--color--grafito);
}
.ryse-momentos > .wp-block-column {
	position: relative;
	padding-top: 2.75rem;
}
.ryse-momentos > .wp-block-column::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 9px;
	height: 9px;
	background-color: var(--wp--preset--color--arena);
}

/* Dos de los cuatro títulos ocupan dos líneas y los otros dos una, así que
   los subtítulos y los textos arrancaban a distinta altura: 29 px de
   desnivel. Se reserva el alto de dos líneas para que la fila cuadre.
   Se resuelve en CSS y no acortando los títulos, para que aguante
   cualquier redacción futura. */
.ryse-momentos > .wp-block-column > h3 {
	/* Dos líneas exactas. En `lh` (la unidad de altura de línea) en lugar de
	   em: así sigue cuadrando aunque cambie el interlineado del titular.
	   La primera línea es el valor de reserva para navegadores sin `lh`. */
	min-height: 3.65rem;
	min-height: 2lh;
}

/* Apiladas en móvil, la línea pasa a vertical y corre por la izquierda. */
@media (max-width: 781px) {
	.ryse-momentos::before {
		top: 4px;
		bottom: 4px;
		left: 4px;
		right: auto;
		width: 1px;
		height: auto;
	}
	.ryse-momentos > .wp-block-column {
		padding-top: 0;
		padding-left: 2.25rem;
	}
	.ryse-momentos > .wp-block-column::before { top: 6px; }
}

/* --- Bandas de imagen -----------------------------------------------------
   Aquí había un apaño: cuando el contenido de las páginas iba en la columna
   estrecha, las bandas se salían del contenedor a mano para poder ensancharse.
   Desde que page.html usa el mismo ancho que la cabecera ya no hace falta, y
   además estorbaba: fijaba un ancho de 1240 que impedía a las imágenes
   "ancho completo" llegar de verdad a los bordes.

   Ahora la alineación la resuelve WordPress: `alignfull` va a sangre y
   `alignwide` ocupa la columna. Aquí solo queda el recorte de la banda. */
.entry-content .wp-block-image.alignfull img {
	width: 100%;
	object-fit: cover;
}

/* --- Tarifa fundadora -----------------------------------------------------
   El precio anterior tachado tiene que leerse como referencia, no competir
   con el nuevo: va más pequeño, en gris y con la línea algo más fina que la
   que dibuja el navegador por defecto. */
.ryse-precio-antes {
	margin-right: 0.35em;
	font-size: 0.55em;
	font-weight: 400;
	color: var(--wp--preset--color--grafito);
	text-decoration-line: line-through;
	text-decoration-thickness: 1px;
	text-underline-offset: 0;
}

/* --- Fichas de coach ------------------------------------------------------
   Marcador mientras no haya fotos del equipo. Color plano: la versión
   anterior llevaba degradado y grano, que el manual descarta. */
.ryse-coach {
	position: relative;
	/* 2:3, el formato del retrato editorial. Es el que usa la referencia
	   que al centro le gusta por «estructura y elegancia»: más alto que el
	   3:4 de catálogo y deja sitio a la figura entera, no solo a la cara. */
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background-color: var(--wp--preset--color--grafito);
}

.ryse-coach__inicial {
	position: absolute;
	right: 0.3em;
	bottom: -0.1em;
	margin: 0;
	font-family: var(--wp--preset--font-family--titular);
	font-size: clamp( 5.5rem, 12vw, 9rem );
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--hueso);
	opacity: 0.14;
	user-select: none;
}

/* --- Tablas (horarios y tarifas) ----------------------------------------- */
.wp-block-table { overflow-x: auto; }
.wp-block-table table {
	border-collapse: collapse;
	font-size: 0.9375rem;
}
.wp-block-table th {
	font-family: var(--wp--preset--font-family--titular);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: left;
	color: var(--wp--preset--color--grafito);
}
.wp-block-table :where(th, td) {
	padding: 1.1rem 1.2rem;
	border-color: var(--wp--preset--color--gris);
}
.wp-block-table tbody td:first-child {
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--grafito);
}

/* --- Tarjetas de bonos ---------------------------------------------------
   Las descripciones tienen distinta longitud; sin esto los precios y botones
   quedan a distinta altura en cada columna. */
.ryse-packs .wp-block-column { display: flex; flex-direction: column; }
.ryse-packs .wp-block-column > .wp-block-buttons { margin-top: auto; }
.ryse-packs .wp-block-column > .wp-block-group + p { min-height: 5.25em; }
@media (max-width: 781px) {
	.ryse-packs .wp-block-column > .wp-block-group + p { min-height: 0; }
}

/* --- Horario semanal ------------------------------------------------------
   Medidas en rem explícitos: la escala de espaciado del tema está sobrescrita
   por la de WordPress (ver DISENO.md). */
/* El horario ocupa la columna, sin salirse.
   Antes se escapaba del contenedor con un ancho propio y un translate: hacía
   falta cuando el contenido de las páginas iba capado a 680 px. Desde que
   page.html usa el ancho de la cabecera ya no, y encima lo dejaba en 100
   mientras el título y el texto estaban en 80. */
.ryse-horario {
	margin-top: 2.5rem;
}

.ryse-horario__barra {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2rem;
	align-items: flex-end;
	justify-content: space-between;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--gris);
}

.ryse-horario__filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	align-items: flex-end;
}

.ryse-horario__filtro { display: flex; flex-direction: column; gap: 0.4rem; }
.ryse-horario__filtro span {
	font-family: var(--wp--preset--font-family--titular);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grafito);
}
.ryse-horario__filtro select {
	min-width: 11rem;
	padding: 0.65rem 2rem 0.65rem 0.85rem;
	border: 1px solid var(--wp--preset--color--gris);
	border-radius: 0;
	background-color: transparent;
	font-family: inherit;
	font-size: 0.9375rem;
	color: inherit;
	appearance: none;
	background-image: linear-gradient( 45deg, transparent 50%, currentColor 50% ),
	                  linear-gradient( 135deg, currentColor 50%, transparent 50% );
	background-position: calc( 100% - 1.05rem ) 55%, calc( 100% - 0.75rem ) 55%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.ryse-horario__limpiar {
	padding: 0 0 0.4rem;
	border: 0;
	background: none;
	font-family: var(--wp--preset--font-family--titular);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grafito);
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}
.ryse-horario__limpiar:hover { color: var(--wp--preset--color--negro); }

.ryse-horario__semanas {
	display: flex;
	gap: 1.1rem;
	align-items: center;
	font-family: var(--wp--preset--font-family--titular);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.ryse-horario__semanas a { color: inherit; text-decoration: none; }
.ryse-horario__semanas span[aria-hidden] { opacity: 0.3; }

.ryse-horario__semana {
	display: grid;
	grid-template-columns: repeat( 7, minmax( 0, 1fr ) );
	gap: 0.75rem;
	margin-top: 2rem;
}

.ryse-horario__fecha {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: 0 0 0.9rem;
	padding-bottom: 0.65rem;
	border-bottom: 1px solid var(--wp--preset--color--gris);
	text-align: center;
}
.ryse-horario__fecha span {
	font-family: var(--wp--preset--font-family--titular);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grafito);
}
.ryse-horario__fecha strong {
	font-family: var(--wp--preset--font-family--titular);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.ryse-horario__dia.es-hoy .ryse-horario__fecha {
	border-bottom: 2px solid var(--wp--preset--color--negro);
}

.ryse-horario__clase {
	margin-bottom: 0.6rem;
	padding: 0.95rem 0.85rem;
	border: 1px solid var(--wp--preset--color--gris);
	background-color: var(--wp--preset--color--blanco);
	text-align: center;
}
.ryse-horario__clase > p { margin: 0; }

.ryse-horario__hora {
	font-family: var(--wp--preset--font-family--titular);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
.ryse-horario__meta {
	margin-top: 0.2rem !important;
	font-family: var(--wp--preset--font-family--titular);
	font-size: 0.5625rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grafito);
}
.ryse-horario__nombre {
	margin-top: 0.55rem !important;
	font-size: 0.8125rem;
}
.ryse-horario__coach {
	font-size: 0.75rem;
	color: var(--wp--preset--color--grafito);
}
.ryse-horario__sala {
	font-size: 0.75rem;
	color: var(--wp--preset--color--grafito);
}
.ryse-horario__plazas {
	margin-top: 0.45rem !important;
	font-family: var(--wp--preset--font-family--titular);
	font-size: 0.5625rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ryse-horario__vacio {
	margin: 0;
	padding: 0.85rem 0;
	text-align: center;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--grafito);
	opacity: 0.55;
}

.ryse-horario__sin-resultados {
	margin-top: 2rem;
	text-align: center;
	color: var(--wp--preset--color--grafito);
}

@media (max-width: 900px) {
	.ryse-horario__semana {
		grid-template-columns: repeat( 7, 8.5rem );
		overflow-x: auto;
		padding-bottom: 1rem;
		scroll-snap-type: x proximity;
	}
	.ryse-horario__dia { scroll-snap-align: start; }
	.ryse-horario__barra { align-items: flex-start; flex-direction: column; }
}

/* --- Detalles ------------------------------------------------------------- */
.ryse-cifras {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.wp-block-image img { display: block; }

/* --- Formulario ----------------------------------------------------------- */
.fluentform .ff-el-input--label label {
	font-family: var(--wp--preset--font-family--titular);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grafito);
}
.fluentform .ff-el-form-control {
	padding: 0.9rem 1rem;
	border: 1px solid var(--wp--preset--color--gris);
	border-radius: 0;
	background-color: transparent;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1rem;
	color: var(--wp--preset--color--negro);
}
.fluentform .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--negro);
	box-shadow: none;
	outline: none;
}
.fluentform .ff-btn-submit {
	border-radius: 0 !important;
	padding: 1.1rem 2.5rem !important;
	font-family: var(--wp--preset--font-family--titular) !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	border: 1px solid var(--wp--preset--color--negro) !important;
}
.fluentform .ff-el-group { margin-bottom: 1.75rem; }

/* --- Aviso de apertura ----------------------------------------------------
   Ventana modal con <dialog> nativo. El navegador ya se encarga del foco y
   del cierre con Escape; aquí solo va el aspecto. */
.ryse-aviso {
	/* El navegador da content-box al <dialog>: sin esto, el relleno se suma al
	   max-width y en móvil el aviso acaba pegado a los dos bordes. */
	box-sizing: border-box;
	max-width: min( 30rem, calc( 100vw - 2.5rem ) );
	padding: clamp( 2rem, 5vw, 3.25rem );
	/* Sin sombra: el manual las descarta (pág. 10). El velo oscuro de detrás
	   ya separa el aviso de la página, que es la función que cumpliría. */
	border: 1px solid var(--wp--preset--color--negro);
	background-color: var(--wp--preset--color--hueso);
	color: var(--wp--preset--color--negro);
}
/* El contenedor recibe el foco al abrirse, pero no es un control: no debe
   dibujar anillo. Los botones de dentro sí lo conservan. */
.ryse-aviso:focus { outline: none; }
.ryse-aviso::backdrop {
	background-color: rgba( 12, 12, 12, 0.62 );
	backdrop-filter: blur( 2px );
}

.ryse-aviso__cerrar-form { margin: 0; }
.ryse-aviso__cerrar {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--grafito);
	cursor: pointer;
}
.ryse-aviso__cerrar:hover { color: var(--wp--preset--color--negro); }

.ryse-aviso__etiqueta {
	margin: 0 0 0.9rem;
	font-family: var(--wp--preset--font-family--titular);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grafito);
}

.ryse-aviso__titulo {
	margin: 0;
	font-size: clamp( 1.75rem, 5vw, 2.5rem );
	line-height: 1.05;
	text-transform: uppercase;
}

.ryse-aviso__texto {
	margin: 1.1rem 0 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--wp--preset--color--grafito);
}

.ryse-aviso__cta {
	display: inline-block;
	margin-top: 1.9rem;
	padding: 1.05rem 2.5rem;
	background-color: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--hueso);
	font-family: var(--wp--preset--font-family--titular);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
}
/* Antes usaba `acento`, un color que la paleta del manual no tiene: la
   variable no resolvía, el fondo quedaba transparente y el texto hueso
   sobre el hueso del aviso. El botón se volvía blanco al pasar por encima.
   Ahora usa el mismo hover que el resto de botones de la web. */
.ryse-aviso__cta:hover,
.ryse-aviso__cta:focus-visible {
	background-color: var(--wp--preset--color--arena);
	color: var(--wp--preset--color--negro);
	text-decoration: none;
}

/* Aparición discreta, y nada de movimiento si el sistema lo pide. */
@media (prefers-reduced-motion: no-preference) {
	.ryse-aviso[open] { animation: ryse-aviso-entra 0.28s ease-out; }
	@keyframes ryse-aviso-entra {
		from { opacity: 0; transform: translateY( 10px ); }
		to   { opacity: 1; transform: none; }
	}
}

/* --- Botón flotante de WhatsApp ------------------------------------------
   Cuadrado y sin sombra: el manual descarta las sombras. */
.ryse-whatsapp {
	position: fixed;
	right: clamp(1.25rem, 3vw, 2.25rem);
	bottom: clamp(1.25rem, 3vw, 2.25rem);
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	/* Fondo claro con el icono en negro: sobre las bandas de foto oscuras
	   destaca mucho más que el botón negro, que se fundía con la imagen. */
	background-color: var(--wp--preset--color--hueso);
	color: var(--wp--preset--color--negro);
	border: 1px solid var(--wp--preset--color--negro);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.ryse-whatsapp:hover,
.ryse-whatsapp:focus-visible {
	background-color: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--hueso);
}
.ryse-whatsapp svg {
	width: 25px;
	height: 25px;
	fill: currentColor;
}

/* --- Llamada a la acción de la cabecera ------------------------------------
   Las dos referencias que el centro aprueba la llevan fija arriba a la
   derecha (Lapso «Reserva», FitLovas «Inscríbete»); la web no la tenía y
   obligaba a bajar hasta Tarifas para inscribirse. Va más pequeña que un
   botón de contenido: acompaña a la navegación, no compite con ella. */
.ryse-cta-cabecera .wp-block-button__link {
	padding: 0.7em 1.4em;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
}

/* En móvil la navegación se repliega en el menú desplegable y el botón se
   queda solo junto al logo, que es justo donde tiene que estar. */
@media ( max-width: 599px ) {
	.ryse-cta-cabecera .wp-block-button__link {
		padding: 0.65em 1.1em;
		font-size: 0.66rem;
	}
}

/* -------------------------------------------------------------------------
 * WooCommerce
 *
 * WooCommerce trae su propia hoja de estilos, pensada para verse bien en
 * cualquier tema. Aquí choca: campos redondeados, avisos en verde y azul
 * de sistema, y botones que no son los de la web. Se reconduce a la paleta
 * de marca sin tocar el plugin, para que la caja no parezca de otro sitio
 * justo en el momento de pagar, que es cuando más confianza hace falta.
 * ---------------------------------------------------------------------- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea {
	padding: 0.75em 0.9em;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1rem;
	color: var(--wp--preset--color--negro);
	background-color: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--gris);
	border-radius: 2px;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--wp--preset--color--negro);
	outline: 2px solid var(--wp--preset--color--arena);
	outline-offset: 1px;
}

/* Los avisos del plugin llegan en verde, azul y rojo de sistema. Se pasan
   al filete de la marca: el color no aporta nada que el texto no diga ya. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: 1em 1.2em;
	color: var(--wp--preset--color--negro);
	background-color: transparent;
	border-top: 2px solid var(--wp--preset--color--arena);
	border-radius: 0;
}

.woocommerce-error {
	border-top-color: var(--wp--preset--color--negro);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	color: var(--wp--preset--color--grafito);
}

/* Botones: los mismos que el resto de la web, no los del plugin. */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #payment #place_order {
	padding: 0.9em 1.8em;
	font-family: var(--wp--preset--font-family--titular);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--hueso);
	background-color: var(--wp--preset--color--negro);
	border-radius: 2px;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #payment #place_order:hover {
	color: var(--wp--preset--color--negro);
	background-color: var(--wp--preset--color--arena);
}

/* Resumen del pedido y bloque de pago: cajas de filete, como las tarifas. */
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--arena);
	border-radius: 2px;
}

.woocommerce-checkout #payment {
	background-color: transparent;
	border-radius: 0;
}

.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	border-color: var(--wp--preset--color--gris);
}

/* El precio, con la misma voz que el de las tarifas. */
.woocommerce .order-total .amount,
.woocommerce ul.order_details li strong {
	font-family: var(--wp--preset--font-family--titular);
	font-weight: 700;
}

/* --- Reserva incrustada de AimHarder --------------------------------------
   El botón de abrir en ventana aparte va ARRIBA del marco, no debajo:
   la cookie de sesión de AimHarder llega sin SameSite, así que dentro del
   marco no se puede iniciar sesión. Quien viene a reservar tiene que ver
   la salida buena antes de intentarlo y no después de fallar. */
.ryse-reserva__cabecera {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	justify-content: space-between;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--arena);
	border-radius: 2px;
}

.ryse-reserva__nota {
	flex: 1 1 22rem;
	margin: 0;
	color: var(--wp--preset--color--grafito);
	font-size: 0.95rem;
}

.ryse-reserva__boton {
	flex: 0 0 auto;
	padding: 0.9em 1.8em;
	font-family: var(--wp--preset--font-family--titular);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--hueso);
	background-color: var(--wp--preset--color--negro);
	border-radius: 2px;
}

.ryse-reserva__boton:hover,
.ryse-reserva__boton:focus {
	color: var(--wp--preset--color--negro);
	background-color: var(--wp--preset--color--arena);
}

/* Alto generoso: el horario de AimHarder es una parrilla, y con poco alto
   obliga a desplazarse dentro del marco, que es de lo peor que hay. */
.ryse-reserva__marco {
	display: block;
	width: 100%;
	height: clamp( 34rem, 78vh, 56rem );
	margin-top: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--gris);
	border-radius: 2px;
	background-color: var(--wp--preset--color--blanco);
}

.ryse-reserva__pie {
	margin-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--grafito);
	font-size: 0.85rem;
}

/* Avisos que solo ve quien administra. */
.ryse-aviso-admin {
	padding: 1em 1.2em;
	color: var(--wp--preset--color--negro);
	border-top: 2px solid var(--wp--preset--color--arena);
}

/* --- Reserva de una clase ------------------------------------------------- */

.ryse-horario__reservar {
	width: 100%;
	margin-top: 0.9rem;
	padding: 0.65em 1em;
	font-family: var(--wp--preset--font-family--titular);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--hueso);
	background-color: var(--wp--preset--color--negro);
	border: 0;
	border-radius: 2px;
	cursor: pointer;
}

.ryse-horario__reservar:hover,
.ryse-horario__reservar:focus-visible {
	color: var(--wp--preset--color--negro);
	background-color: var(--wp--preset--color--arena);
}

/* La ventana. Sin sombras ni degradados —el manual los descarta—: se separa
   del fondo con un velo oscuro y un filete, no con relieve. */
.ryse-reserva-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
}

/* Con selector propio Y descendiente, y no solo descendiente.
 *
 * `.ryse-reserva-modal` lleva `display: flex`, y un display propio gana al
 * atributo `hidden`, que no es más que `display: none` de hoja de usuario.
 * Sin la primera línea la ventana se ve nada más cargar la página y el aspa
 * «no funciona»: sí marca hidden, pero el flex lo ignora. */
.ryse-reserva-modal[hidden],
.ryse-reserva-modal [hidden] {
	display: none !important;
}

/* Cinturón: con `content-box` un campo al 100 % más su relleno y su borde
   mide más que la columna que lo contiene, y se sale. El tema ya pone
   border-box casi en todo, pero aquí no se deja al azar. */
.ryse-reserva-modal *,
.ryse-reserva-modal *::before,
.ryse-reserva-modal *::after {
	box-sizing: border-box;
}

.ryse-reserva-modal__fondo {
	position: absolute;
	inset: 0;
	background-color: rgb( 15 15 16 / 0.55 );
}

.ryse-reserva-modal__caja {
	position: relative;
	width: 100%;
	max-width: 44rem;
	max-height: 90vh;
	overflow-y: auto;
	padding: 3rem 3rem 2.8rem;
	background-color: var(--wp--preset--color--hueso);
	border: 1px solid var(--wp--preset--color--arena);
	border-radius: 2px;
}

.ryse-reserva-modal__cerrar {
	position: absolute;
	top: 0.9rem;
	right: 1rem;
	width: 2rem;
	height: 2rem;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--wp--preset--color--grafito);
	background: none;
	border: 0;
	cursor: pointer;
}

.ryse-reserva-modal__cerrar:hover { color: var(--wp--preset--color--negro); }

/* Cabecera: la clase manda, la fecha acompaña. Es lo que confirma a la
   visitante que está reservando lo que creía. */
.ryse-reserva-modal__clase {
	margin: 0;
	padding-right: 2rem;
	font-family: var(--wp--preset--font-family--titular);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	/* Reserva su altura: si el texto no llegara, la ventana no se
	   descuadra ni deja el filete flotando solo. */
	min-height: 1.15em;
}

.ryse-reserva-modal__cuando {
	margin-top: 0.55rem;
	min-height: 1.5em;
	padding-bottom: 1.8rem;
	border-bottom: 1px solid var(--wp--preset--color--arena);
	color: var(--wp--preset--color--grafito);
	font-size: 0.95rem;
}

/* --- Los dos caminos --- */

.ryse-reserva-modal__caminos {
	display: grid;
	gap: 1rem;
	margin-top: 2rem;
}

.ryse-reserva-modal__opcion {
	display: block;
	width: 100%;
	padding: 1.35rem 1.5rem;
	text-align: left;
	text-decoration: none;
	color: var(--wp--preset--color--negro);
	background: none;
	border: 1px solid var(--wp--preset--color--gris);
	border-radius: 2px;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.ryse-reserva-modal__opcion:hover,
.ryse-reserva-modal__opcion:focus-visible {
	border-color: var(--wp--preset--color--negro);
}

.ryse-reserva-modal__opcion strong {
	display: block;
	font-family: var(--wp--preset--font-family--titular);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ryse-reserva-modal__opcion span {
	display: block;
	margin-top: 0.4rem;
	color: var(--wp--preset--color--grafito);
	font-size: 0.92rem;
	line-height: 1.5;
}

/* Pie de la ventana: dice dónde se gestiona la reserva, para que nadie se
   sorprenda al salir del sitio. */
.ryse-reserva-modal__pie {
	margin: 1.6rem 0 0;
	color: var(--wp--preset--color--grafito);
	font-size: 0.88rem;
	line-height: 1.5;
}

/* En pantallas estrechas, una columna: dos campos por fila dejarían cajas
   demasiado angostas para escribir un correo. */
@media ( max-width: 599px ) {
	.ryse-reserva-modal__caja { padding: 2.2rem 1.5rem 1.8rem; }
	.ryse-reserva-modal__clase { font-size: 1.3rem; }
}

/* --- Cuotas mensuales ------------------------------------------------------
   Mismo aspecto que las tarjetas que había escritas a mano: solo cambia de
   dónde salen los datos. Si se retoca aquí, se retoca el diseño entero. */

.ryse-tarifas {
	margin-top: var(--wp--preset--spacing--30);
	gap: var(--wp--preset--spacing--30);
}

.ryse-tarifa {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--gris);
	border-radius: 2px;
}

.ryse-tarifa--destacada {
	color: var(--wp--preset--color--hueso);
	background-color: var(--wp--preset--color--negro);
	border-color: var(--wp--preset--color--negro);
}

.ryse-tarifa__nombre {
	margin: 0;
	font-family: var(--wp--preset--font-family--titular);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grafito);
}

.ryse-tarifa--destacada .ryse-tarifa__nombre {
	color: var(--wp--preset--color--arena);
}

.ryse-tarifa__precio {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: 3rem;
	line-height: 1.1;
}

.ryse-tarifa__precio span {
	font-size: 1rem;
	font-weight: 400;
	/* En versales, como el «/MES» de la banda de la fundadora: si no, las
	   dos cifras grandes de la misma página no casan. */
	text-transform: uppercase;
}

.ryse-tarifa__sesiones {
	margin-top: var(--wp--preset--spacing--30);
	margin-bottom: 0;
}

.ryse-tarifa__unitario {
	margin-top: 0.35rem;
	margin-bottom: 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--grafito);
}

.ryse-tarifa--destacada .ryse-tarifa__unitario {
	color: var(--wp--preset--color--gris);
}

/* El botón solo existe si AimHarder tiene la venta online encendida, así que
   el margen va aquí y no en el elemento anterior: sin botón, la tarjeta
   termina en el precio por sesión sin un hueco suelto debajo. */
.ryse-tarifa__boton {
	display: block;
	margin-top: var(--wp--preset--spacing--30);
	padding: 0.85em 1.2em;
	font-family: var(--wp--preset--font-family--titular);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: var(--wp--preset--color--hueso);
	background-color: var(--wp--preset--color--negro);
	border-radius: 2px;
}

.ryse-tarifa--destacada .ryse-tarifa__boton {
	color: var(--wp--preset--color--negro);
	background-color: var(--wp--preset--color--hueso);
}

.ryse-tarifa__boton:hover,
.ryse-tarifa__boton:focus-visible {
	color: var(--wp--preset--color--negro);
	background-color: var(--wp--preset--color--arena);
}

/* Modo escaparate: sustituye a los botones de compra mientras el TPV
   sigue en pruebas. Se apaga desde Ajustes > Ryse. */
.ryse-escaparate__nota {
	margin-top: var(--wp--preset--spacing--30);
	padding: 0.85em 1.2em;
	font-family: var(--wp--preset--font-family--titular);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	color: var(--wp--preset--color--negro);
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--gris);
	border-radius: 2px;
}

.ryse-escaparate__nota a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* La tarifa destacada va sobre fondo negro: la nota necesita el contraste
   invertido o se queda una caja vacía. */
.ryse-tarifa--destacada .ryse-escaparate__nota {
	color: var(--wp--preset--color--hueso);
	border-color: var(--wp--preset--color--grafito);
}

/* Página de gracias tras la compra: los tres pasos hacia AimHarder. */
.ryse-gracias {
	box-sizing: border-box;
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--hueso);
	border-radius: 2px;
}

.ryse-gracias__pasos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: paso;
}

.ryse-gracias__pasos li {
	min-width: 0;
	counter-increment: paso;
}

.ryse-gracias__pasos li::before {
	content: counter(paso, decimal-leading-zero);
	display: block;
	margin-bottom: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--titular);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--arena);
}

.ryse-gracias__pasos h3 {
	margin: 0 0 0.4em;
	font-size: 1.15rem;
	line-height: 1.2;
	color: var(--wp--preset--color--hueso);
}

.ryse-gracias__pasos p {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--wp--preset--color--gris);
}

.ryse-gracias__boton {
	display: inline-block;
	padding: 0.8em 1.2em;
	font-family: var(--wp--preset--font-family--titular);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--negro);
	background-color: var(--wp--preset--color--hueso);
	border: 1px solid var(--wp--preset--color--hueso);
	border-radius: 2px;
}

.ryse-gracias__boton--secundario {
	color: var(--wp--preset--color--hueso);
	background-color: transparent;
}

.ryse-gracias__boton:hover,
.ryse-gracias__boton:focus-visible {
	color: var(--wp--preset--color--negro);
	background-color: var(--wp--preset--color--arena);
	border-color: var(--wp--preset--color--arena);
}

.ryse-gracias__ayuda {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--grafito);
	font-size: 0.9rem;
	color: var(--wp--preset--color--gris);
}

.ryse-gracias__ayuda a {
	color: var(--wp--preset--color--hueso);
}

@media (max-width: 781px) {
	.ryse-gracias__pasos {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Socias fundadoras: el banner de lanzamiento encima de las cuotas. Lo
   pinta inc/tarifas.php cuando en AimHarder hay tarifas «SOCIA FUNDADORA». */
.ryse-fundadoras {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	align-items: center;
	margin-bottom: clamp(2rem, 4vw, 3rem);
	background-color: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--hueso);
	border-radius: 2px;
	overflow: hidden;
}

.ryse-fundadoras__imagen {
	margin: 0;
	aspect-ratio: 4 / 3;
	align-self: stretch;
}

.ryse-fundadoras__imagen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ryse-fundadoras__texto {
	padding: clamp(1.75rem, 4vw, 3rem);
}

.ryse-fundadoras__etiqueta {
	margin: 0;
	font-family: var(--wp--preset--font-family--titular);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--arena);
}

.ryse-fundadoras__titulo {
	margin: 0.6rem 0 0;
	font-family: var(--wp--preset--font-family--titular);
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--wp--preset--color--hueso);
}

.ryse-fundadoras__desde {
	margin: 0.9rem 0 0;
	font-size: 1.1rem;
	color: var(--wp--preset--color--hueso);
}

.ryse-fundadoras__lista {
	margin: 1.25rem 0 0;
	padding-left: 1.2em;
	line-height: 1.7;
	color: var(--wp--preset--color--gris);
}

/* El precio tachado dentro de las tarjetas. */
.ryse-tarifa__precio .ryse-precio-antes {
	display: block;
	margin: 0 0 0.1em;
	font-size: 0.45em;
}

.ryse-tarifa--destacada .ryse-precio-antes {
	color: var(--wp--preset--color--gris);
}

@media (max-width: 781px) {
	.ryse-fundadoras {
		grid-template-columns: minmax(0, 1fr);
	}

	.ryse-fundadoras__imagen {
		aspect-ratio: 16 / 9;
	}
}

/* Página de Clases. Los presets de espaciado del sitio son cortos (el --40
   resuelve a 1rem), y con tres tarjetas en fila se notaba: aquí el aire
   va en clamp(), a mano. */
.ryse-clases-seccion {
	margin-top: clamp(4rem, 8vw, 6.5rem) !important;
}

.ryse-clases-seccion:first-child {
	margin-top: 0 !important;
}

.ryse-clases-fila {
	margin-top: clamp(2.5rem, 5vw, 4rem) !important;
}

.ryse-clases-fila .wp-block-media-text__content {
	padding: 0 clamp(1.5rem, 4vw, 3.5rem);
}

.ryse-clases-rejilla {
	margin-top: clamp(2rem, 4vw, 3rem) !important;
	gap: clamp(2rem, 4vw, 3.5rem) !important;
}

.ryse-clases-rejilla .wp-block-column > * + * {
	margin-top: 0.75rem;
}

.ryse-clases-rejilla .wp-block-column > h3 {
	margin-top: 1.25rem;
}

.ryse-clases-rejilla .wp-block-column > p:last-child {
	margin-top: 1rem;
}

@media (max-width: 781px) {
	.ryse-clases-rejilla {
		gap: clamp(2.5rem, 8vw, 4rem) !important;
	}
}