/*
Theme Name: Maracas
Theme URI: https://maracasbar.cz
Author: Quewood
Description: Tema de bloques para Maracas Bar (Praga). Piel de la marca — Anton, Yellowtail y Oswald sobre fondo de noche — sobre la arquitectura de la casa. El motor de reservas es el plugin maracas-core.
Version: 0.6.1
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maracas
Tags: full-site-editing, one-page
*/

/* ==========================================================================
   PUENTE DE TOKENS CON EL PLUGIN

   `maracas-core` pinta sus widgets con `--mrc-*` y no conoce ni un color. El
   tema los rellena aquí desde su propia paleta. Cambiar la piel del sitio es
   cambiar este bloque; el plugin no se entera.
   ========================================================================== */

:root {
	--mrc-bg:          var( --wp--preset--color--night );
	--mrc-surface:     var( --wp--preset--color--surface );
	--mrc-surface-2:   var( --wp--preset--color--surface-2 );
	--mrc-ink:         var( --wp--preset--color--ink );
	--mrc-muted:       var( --wp--preset--color--muted );
	--mrc-accent:      var( --wp--preset--color--accent );
	--mrc-accent-ink:  var( --wp--preset--color--accent-ink );
	--mrc-accent-2:    var( --wp--preset--color--accent-2 );
	/* Piel caribeña (21/09): fondo arena, tinta navy. El filete es navy al
	   16 %, no blanco: sobre claro un blanco translúcido no se ve. */
	--mrc-line:        rgba( 10, 66, 88, .16 );
	--mrc-ring:        var( --wp--preset--color--navy );
	--mrc-navy:        var( --wp--preset--color--navy );
	--mrc-sea:         var( --wp--preset--color--sea );
	/* El acento como TEXTO: el amarillo sobre arena da 1.4:1. Sobre claro los
	   enlaces y fechas van en turquesa; en los bloques navy vuelve el amarillo. */
	--mrc-accent-text: var( --wp--preset--color--sea );
	/* Las tarjetas van sin borde, con una sombra tenue del color de la tinta
	   (22/09, Camilo: «sombra en lugar de bordearlo»). En los bloques navy la
	   sombra es CLARA. */
	--mrc-shadow: 0 12px 30px rgba( 10, 47, 64, .12 ), 0 2px 6px rgba( 10, 47, 64, .06 );

	--mrc-radius-sm:   var( --wp--custom--radius--sm );
	--mrc-radius-md:   var( --wp--custom--radius--md );
	--mrc-radius-lg:   var( --wp--custom--radius--lg );
	--mrc-radius-pill: var( --wp--custom--radius--pill );

	--mrc-font-display: var( --wp--preset--font-family--display );
	--mrc-font-script:  var( --wp--preset--font-family--script );
	--mrc-font-body:    var( --wp--preset--font-family--body );

	/* Ancho del filete doble del marco, que es parte de la identidad. */
	--rule: rgba( 255, 212, 0, .22 );
	--rule-2: rgba( 255, 255, 255, .07 );
}

/* ==========================================================================
   BASE
   ========================================================================== */

html {
	scroll-behavior: smooth;
	/* El nav es pegajoso: sin esto, saltar a #classes deja el título debajo. */
	scroll-padding-top: 5.5rem;
}

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

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

::selection {
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--accent-ink );
}

:where( a, button, input, select, textarea, summary ):focus-visible {
	outline: 3px solid var( --wp--preset--color--accent );
	outline-offset: 2px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 0;
	left: 1rem;
	z-index: 1000;
	width: auto;
	height: auto;
	clip: auto;
	padding: .8rem 1.3rem;
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--accent-ink );
	font-weight: 700;
	text-decoration: none;
	border-radius: 0 0 10px 10px;
}

/* ==========================================================================
   CABECERA
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	/* Navy: es lo único oscuro que queda arriba, y es lo que hace que el logo
	   (blanco y rojo) se lea. Dentro, la tinta y el secundario pasan a claro
	   redefiniendo los presets en este ámbito. */
	/* Celeste (22/09, Camilo: «el nav es el mar, luego la espuma, luego la
	   arena»): la barra es el mar, la ola de debajo pone la espuma blanca y la
	   arena. Tinta navy; el logo va en su variante oscura. */
	background: rgba( 205, 235, 255, .96 );
	--wp--preset--color--ink: #0A2F40;
	--wp--preset--color--muted: #3E5967;
	--wp--preset--color--surface: #FFFFFF;
	--mrc-line: rgba( 10, 66, 88, .16 );
	color: var( --wp--preset--color--ink );
	/* CUIDADO: `backdrop-filter` crea contexto de apilado y atrapa cualquier
	   `position:fixed` que cuelgue de dentro. El efecto va en un
	   pseudo-elemento, no en el propio header. Es un fallo que ya costó una
	   vuelta en otro sitio de la casa. */
	isolation: isolate;
}

/* La ola bajo la barra (celeste + blanca): cuelga por fuera de la cabecera,
   sin ocupar sitio, sobre el hero o la página. Con el menú móvil abierto se
   esconde: el panel cuelga del mismo borde. */
.site-header__wave {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	width: 100%;
	height: clamp( 18px, 3vw, 44px );
	display: block;
	pointer-events: none;
}

.site-header.is-open .site-header__wave {
	display: none;
}

.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	backdrop-filter: blur( 14px );
	-webkit-backdrop-filter: blur( 14px );
}

.site-header__inner {
	max-width: var( --wp--style--global--wide-size );
	margin: 0 auto;
	padding: .7rem var( --wp--preset--spacing--40 );
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* El rótulo es el enlace a la portada, no sólo un logotipo: medía 23 px de
   alto. El relleno vertical lo lleva a 44 sin mover la cabecera, que ya tiene
   82 px de sitio. */
.site-header__brand {
	/* `min-height` y no relleno: el rótulo es fluido (de 1.05 a 1.4rem), así
	   que un relleno fijo se queda corto en la pantalla pequeña — a 320 px
	   daba 40. Con altura mínima cumple los 44 sea cual sea el cuerpo. */
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 44px;
	text-decoration: none;
	flex: none;
	line-height: 1;
}

/* El logo oficial (SVG, blanco y rojo sobre transparente): 44 px de alto en
   la barra, ancho por proporción (1100×510 → 95 px). En móvil baja a 40. */
.site-header__logo {
	display: block;
	height: 52px;
	width: auto;
}

@media ( max-width: 640px ) {
	.site-header__logo {
		height: 44px;
	}
}

.site-header__brand .wordmark {
	display: block;
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.05rem, 2.6vw, 1.4rem );
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --wp--preset--color--ink );
}

/* El filete de debajo del rótulo — sin etiqueta «MUSIC BAR», que repetía
   «bar». Línea sola que se desvanece por los dos extremos. */
.site-header__brand .rule {
	display: block;
	height: 1px;
	margin-top: .3rem;
	background: linear-gradient( 90deg, transparent, var( --wp--preset--color--accent ), transparent );
	opacity: .85;
}

.site-nav {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: clamp( .6rem, 2vw, 1.6rem );
}

.site-nav a {
	color: var( --wp--preset--color--ink );
	text-decoration: none;
	font-size: .86rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: .4rem 0;
	border-bottom: 2px solid transparent;
	transition: color 140ms ease, border-color 140ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
	color: var( --wp--preset--color--ink );
	border-bottom-color: var( --wp--preset--color--accent );
}

/* La firma del nav: la sección que está en pantalla lleva el filete amarillo
   (lo pone `site.js` con IntersectionObserver). En una web de una sola página
   es el único «dónde estoy» que hay; en móvil, dentro del panel, marca la
   fila con el acento en vez del filete. */
.site-nav a.is-current {
	color: var( --wp--preset--color--ink );
	border-bottom-color: var( --wp--preset--color--accent );
}

.site-nav a:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 4px;
	border-radius: 2px;
}

/* Acciones de la derecha: el botón de reservar (siempre visible) y, en
   móvil, el botón del menú. Fuera de `.site-nav` a propósito: el menú se
   pliega y el CTA no. */
.site-actions {
	display: flex;
	align-items: center;
	gap: .6rem;
	flex: none;
}

.site-actions .nav-cta {
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--accent-ink );
	border-radius: var( --wp--custom--radius--pill );
	padding: 0 1.15rem;
	/* `border-box`: el tema no lo fija en los enlaces y el `min-height` se
	   sumaba al relleno (medía 59 px). 44 px, como el rótulo y el botón del
	   menú: una sola altura en toda la barra. */
	box-sizing: border-box;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
	transition: filter 140ms ease;
}

.site-actions .nav-cta:hover,
.site-actions .nav-cta:focus-visible {
	filter: brightness( 1.08 );
}

.nav-toggle {
	display: none;
	appearance: none;
	border: 1px solid var( --mrc-line );
	background: transparent;
	color: var( --wp--preset--color--ink );
	box-sizing: border-box;
	padding: 0;
	width: 44px;
	height: 44px;
	border-radius: var( --wp--custom--radius--pill );
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex: none;
}

.nav-toggle:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 2px;
}

.nav-toggle__icon {
	width: 24px;
	height: 24px;
}

.nav-toggle__icon--close,
.site-header.is-open .nav-toggle__icon--open {
	display: none;
}

.site-header.is-open .nav-toggle__icon--close {
	display: block;
}

/* «My account» / «Hi, Ana»: como un enlace de sección, pero se queda en
   móvil (es la puerta a lo que la persona ya tiene). El shortcode lo pinta
   dentro de un párrafo si `wpautop` se cuela: el <p> no debe estorbar. */
.site-nav p {
	margin: 0;
	display: contents;
}

.site-nav .nav-account {
	color: var( --wp--preset--color--ink );
	display: inline-flex;
	align-items: center;
	gap: .45rem;
}

.site-nav .nav-account__icon {
	width: 22px;
	height: 22px;
	flex: none;
}

/* 768 px: la parada de «tabla o móvil» que usan quewood-core y qwood-core.
   Por debajo, el menú se PLIEGA bajo el botón de la derecha (lo pidió Camilo
   el 21/09): rótulo + «My account» + «Book a class» pedían 389 px en un
   iPhone SE de 375 (medido) y la página desbordaba a lo ancho, arrastrando
   al toast, que se posiciona sobre el viewport de maqueta. El CTA se queda
   siempre a la vista; secciones y cuenta van en el panel desplegable. */
@media ( max-width: 768px ) {
	.nav-toggle {
		display: inline-flex;
	}

	.site-nav {
		/* Panel colgado de la cabecera, a lo ancho. El header es sticky y
		   `isolation:isolate`, así que el panel queda encima del contenido. */
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin: 0;
		padding: .6rem var( --wp--preset--spacing--40 ) 1rem;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var( --wp--preset--color--surface );
		border-bottom: 1px solid var( --mrc-line );
		box-shadow: 0 18px 44px rgba( 10, 47, 64, .28 );
		display: none;
	}

	.site-header.is-open .site-nav {
		display: flex;
	}

	.site-nav a {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: .4rem .2rem;
		border-bottom: 1px solid var( --mrc-line );
		font-size: .95rem;
	}

	.site-nav a:last-child {
		border-bottom: 0;
	}

	/* En el panel el filete es el separador de filas: la sección actual se
	   marca con el color, no con el filete. */
	.site-nav a.is-current {
		color: var( --wp--preset--color--accent );
		border-bottom-color: var( --mrc-line );
	}

	.site-nav .nav-account {
		color: var( --wp--preset--color--accent );
	}
}

@media ( max-width: 360px ) {
	.site-actions .nav-cta {
		padding: .6rem .85rem;
	}
	.site-header__inner {
		gap: .6rem;
	}
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
	position: relative;
	overflow: hidden;
	/* El vídeo de playa va detrás (`.hero__video`); esto es el color que hay
	   mientras carga y lo que ve quien pidió «menos movimiento». Con un velo
	   navy por abajo para que el lockup blanco se lea encima de la arena. */
	background: var( --wp--preset--color--navy ) url( "assets/video/hero-poster.jpg" ) center / cover no-repeat;
	padding: clamp( 3.5rem, 11vw, 7.5rem ) var( --wp--preset--spacing--40 ) clamp( 3rem, 8vw, 5.5rem );
	text-align: center;
	/* Dentro del hero la tinta es blanca: va sobre el vídeo y el velo. */
	--wp--preset--color--ink: #FFFFFF;
	--wp--preset--color--muted: #DCEEF8;
	color: #fff;
}

.hero__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

/* El velo: navy que sube desde abajo (donde van el nombre y el claim) y se
   disuelve arriba, para que la playa se vea y el texto se lea. */
.hero__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient( 180deg, rgba( 10, 66, 88, .35 ) 0%, rgba( 10, 66, 88, .55 ) 45%, rgba( 10, 47, 64, .86 ) 100% );
	pointer-events: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.hero__video {
		display: none;
	}
}

/* Marco de filete doble: es parte de la identidad de la marca desde el
   primer flyer. Se mantiene fuera del flujo para que no toque la maqueta. */
.hero::after {
	content: "";
	position: absolute;
	inset: clamp( 12px, 2.2vw, 30px );
	border: 1px solid var( --rule );
	pointer-events: none;
}

.hero::before {
	content: "";
	position: absolute;
	inset: calc( clamp( 12px, 2.2vw, 30px ) + 8px );
	border: 1px solid var( --rule-2 );
	pointer-events: none;
	z-index: 1;
}

.hero__inner {
	position: relative;
	z-index: 2;
	max-width: 46rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
}

.hero__kicker {
	margin: 0;
	font-size: .82rem;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var( --wp--preset--color--muted );
	font-weight: 700;
}

/* El lockup: bloque en Anton + palabra en Yellowtail encabalgada, como en los
   cinco flyers. El script sube sobre la línea de arriba con margen negativo. */
.hero__block {
	margin: .4rem 0 0;
	font-family: var( --wp--preset--font-family--display );
	/* 20vw y no 15: medido en un iPhone SE (375), con 15vw el titular ocupaba
	   207 px de los 343 disponibles — un 60 %, y el hero se veía desangelado.
	   A 20vw ocupa el 81 %, que es la proporción que tiene en escritorio. El
	   tope de 8.5rem no se mueve, así que por encima de 680 px no cambia nada. */
	font-size: clamp( 3.2rem, 20vw, 8.5rem );
	line-height: .86;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var( --wp--preset--color--ink );
}

/* La A del nombre es el triángulo rojo con la estrella del logo (una <img>
   de `logo-a.svg`), a la altura de las mayúsculas de Anton. Medido sobre el
   logo: el triángulo mide 1,06 veces la caja de las letras y apoya 1 px por
   debajo de la línea de base. */
/* «LAS», pequeño y abierto, encima del nombre: el logo dice LAS MARACAS. */
.hero__las {
	display: block;
	font-size: .3em;
	letter-spacing: .55em;
	padding-left: .55em;
	line-height: 1;
	margin-bottom: .12em;
}

.hero__word {
	display: inline-block;
	white-space: nowrap;
}

.hero__a {
	display: inline-block;
	height: .77em;
	width: auto;
	vertical-align: baseline;
	margin: 0 .01em 0 .02em;
	position: relative;
	top: .012em;
}

/* Debajo del nombre, como en el logo: dos filetes rojos y las maracas. */
.hero__crest {
	margin: .9rem auto 0;
	display: flex;
	align-items: center;
	gap: 1rem;
	width: min( 100%, 24rem );
}

.hero__rule {
	flex: 1;
	height: 5px;
	border-radius: 3px;
	background: var( --wp--preset--color--tropic );
}

.hero__maracas {
	flex: none;
	width: clamp( 46px, 7vw, 66px );
	height: auto;
	filter: drop-shadow( 0 2px 6px rgba( 0, 0, 0, .35 ) );
}

.hero__genres {
	margin: 1.2rem 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4rem 1rem;
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1rem, 2.4vw, 1.35rem );
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --wp--preset--color--ink );
}

/* La tesis, en una línea: lo que se dice de este bar antes que nada. */
.hero__claim {
	margin: 1.4rem 0 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.6rem, 5vw, 2.8rem );
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var( --wp--preset--color--accent );
}

.hero__genres span:not( :last-child )::after {
	content: "◆";
	margin-left: .9rem;
	color: var( --wp--preset--color--accent );
	font-size: .7em;
	vertical-align: middle;
}

.hero__where {
	margin: .9rem 0 0;
	font-size: 1.12rem;
	font-weight: 600;
	color: var( --wp--preset--color--ink );
}

.hero__where span {
	color: var( --wp--preset--color--muted );
}

.hero__actions {
	margin-top: 1.9rem;
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	justify-content: center;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: .85rem 1.7rem;
	border-radius: var( --wp--custom--radius--pill );
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--accent-ink );
	font-weight: 700;
	letter-spacing: .04em;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: filter 140ms ease, transform 140ms ease;
}

.btn:hover {
	filter: brightness( 1.08 );
	text-decoration: none;
}

.btn:active {
	transform: translateY( 1px );
}

.btn--ghost {
	background: transparent;
	color: var( --wp--preset--color--ink );
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, .28 );
}

.btn--lg {
	min-height: 56px;
	padding: 1rem 2.2rem;
	font-size: 1.08rem;
	letter-spacing: .06em;
}

/* ==========================================================================
   LA BANDA (ticker)
   El lenguaje del flyer en movimiento: Anton sobre amarillo, cruzando la
   página. Es el único elemento que se mueve en todo el sitio, a propósito:
   un gesto grande y el resto quieto. Con «menos movimiento» se para.
   ========================================================================== */

.ticker {
	overflow: hidden;
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--accent-ink );
	/* La pista es más ancha que la página y no debe crear scroll lateral. */
	max-width: 100%;
}

.ticker__track {
	display: flex;
	width: max-content;
	animation: ticker 38s linear infinite;
}

.ticker:hover .ticker__track {
	animation-play-state: paused;
}

.ticker__run {
	display: flex;
	align-items: center;
	flex: none;
	padding: .55rem 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.5rem, 3.4vw, 2.4rem );
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ticker__run > span {
	padding: 0 .9em;
}

/* Entre frase y frase, un icono del pack: la banda es la carta en movimiento. */
.ticker__run > img {
	width: 1.15em;
	height: 1.15em;
	flex: none;
	margin: 0 .05em;
}

@keyframes ticker {
	from { transform: translateX( 0 ); }
	to   { transform: translateX( -50% ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.ticker__track {
		animation: none;
	}
}

/* ==========================================================================
   SECCIONES
   ========================================================================== */

.section {
	padding: clamp( 3rem, 8vw, 5.5rem ) var( --wp--preset--spacing--40 );
}

.section--plum {
	background: var( --wp--preset--color--plum );
}

/* Sección navy: las noches. Los flyers lucen sobre oscuro, y es el único
   bloque oscuro entre arena y cielo. Los tokens del plugin (`--mrc-*`) se
   redefinen aquí y las tarjetas de las noches salen solas en claro-sobre-navy. */
.section--navy {
	background: var( --wp--preset--color--navy );
	color: #fff;
	--wp--preset--color--ink: #FFFFFF;
	--wp--preset--color--muted: #BFD9E6;
	--wp--preset--color--surface: #0D5170;
	--wp--preset--color--surface-2: #0A3D52;
	--wp--preset--color--accent-2: #FFB3AD;
	--mrc-ink: #FFFFFF;
	--mrc-muted: #BFD9E6;
	--mrc-surface: #0D5170;
	--mrc-surface-2: #0A3D52;
	--mrc-line: rgba( 255, 255, 255, .16 );
	--mrc-ring: #FFFFFF;
	--mrc-accent-text: var( --wp--preset--color--accent );
	--mrc-shadow: 0 12px 30px rgba( 205, 235, 255, .18 ), 0 2px 6px rgba( 205, 235, 255, .1 );
}

/* ==========================================================================
   OLAS Y ADORNOS
   La ola separa cada bloque del siguiente: una sola forma (<symbol> en la
   portada) que cada `.wave` rellena con el color del bloque de abajo sobre
   el fondo del de arriba. Los adornos son los iconos del pack «summer food
   and drinks» A TODO COLOR: dos en las esquinas de cada bloque y uno grande
   detrás del titular. Nada de marcas de agua difuminadas: los assets se ven.
   ========================================================================== */

.wave {
	display: block;
	height: clamp( 34px, 7vw, 92px );
	background: var( --wave-from );
	line-height: 0;
	overflow: hidden;
	position: relative;
	z-index: 0;
	/* 1 px de solape con el bloque de abajo: sin él, el antialias del borde
	   inferior de la ola dejaba una raya clara al cambiar de bloque. */
	margin-bottom: -1px;
}

.wave svg {
	display: block;
	width: 100%;
	/* 2 px más alto que la caja (que lo recorta): la última fila de píxeles
	   de la ola queda siempre pintada, sin raya de antialias por debajo. */
	height: calc( 100% + 2px );
	fill: var( --wave-to );
}

.wave--flip svg {
	transform: scaleX( -1 );
}

/* Ola montada sobre el bloque anterior (la banda de arriba): no ocupa
   sitio, sube desde el borde con el fondo transparente. */
.wave--over {
	margin-top: calc( -1 * clamp( 34px, 7vw, 92px ) );
	margin-bottom: 0;
	z-index: 2;
}

.wave--over svg {
	height: 100%;
}

.deco {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	width: clamp( 52px, 6.5vw, 92px );
	height: auto;
}

.deco--tl {
	top: 10px;
	left: 14px;
	transform: rotate( -12deg );
}

.deco--br {
	bottom: 10px;
	right: 14px;
	transform: rotate( 10deg );
}

/* El grande va justo en el lettering: detrás del final de la primera línea
   del titular, a todo color; el texto pasa por encima. */
.section__head {
	position: relative;
}

.section__head > * {
	position: relative;
	z-index: 1;
}

.section__head > .deco--title {
	position: absolute;
	z-index: 0;
	right: -1rem;
	top: -2.4rem;
	width: clamp( 110px, 16vw, 200px );
	transform: rotate( 8deg );
}

/* En las columnas de texto (drink, events) el titular es más estrecho. */
.section__head--split > .deco--title {
	width: clamp( 90px, 12vw, 150px );
	right: -.5rem;
	top: -2rem;
}

@media ( max-width: 640px ) {
	.deco--tl {
		display: none;
	}
	.deco--br {
		width: 52px;
		bottom: 8px;
		right: 10px;
	}
	.section__head > .deco--title,
	.section__head--split > .deco--title {
		width: 88px;
		right: -.4rem;
		top: -1.8rem;
	}
}

/* Iconos de la carta (los pone el plugin por filtro): en el nombre de cada grupo. */
.mrc-menu__icon {
	width: 28px;
	height: 28px;
	flex: none;
}

.mrc-menu--print .mrc-menu__icon {
	width: 22px;
	height: 22px;
	vertical-align: middle;
	margin-right: .35rem;
}

.section__inner {
	max-width: var( --wp--style--global--wide-size );
	margin: 0 auto;
}

/* «See all» al pie de una sección que sigue en su página. */
.section__more {
	margin: clamp( 1.25rem, 3vw, 2rem ) 0 0;
	text-align: center;
}

/* Una noche sin flyer enseña la bola de discoteca del tema (el plugin sólo
   conoce el token). */
body {
	--mrc-noart: url( "assets/img/icons/p-disco-ball.svg" );
}

/* ---------------------------------------------------------- páginas landing
   Events, Classes, Private hire: el título como los de sección, el contenido
   a lo ancho, un eyebrow rojo en Yellowtail que pone el propio contenido. */
.page-landing__section {
	position: relative;
	padding-top: clamp( 2.2rem, 5vw, 3.6rem );
}

/* Los adornos de las páginas nuevas (pack «cocktails»), por página: dos
   esquinas como en las secciones de la portada. */
.page-landing__section::before,
.page-landing__section::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	width: clamp( 52px, 6.5vw, 92px );
	height: clamp( 52px, 6.5vw, 92px );
	background: center / contain no-repeat;
}

.page-landing__section::before {
	top: 10px;
	left: 14px;
	transform: rotate( -12deg );
}

.page-landing__section::after {
	bottom: 10px;
	right: 14px;
	transform: rotate( 10deg );
}

.landing-events .page-landing__section::before { background-image: url( "assets/img/icons/c-018-shaker.svg" ); }
.landing-events .page-landing__section::after  { background-image: url( "assets/img/icons/c-013-long-island.svg" ); }
.landing-classes .page-landing__section::before { background-image: url( "assets/img/icons/c-003-mojito.svg" ); }
.landing-classes .page-landing__section::after  { background-image: url( "assets/img/icons/c-012-margarita.svg" ); }
.landing-private-hire .page-landing__section::before { background-image: url( "assets/img/icons/c-006-sangria.svg" ); }
.landing-private-hire .page-landing__section::after  { background-image: url( "assets/img/icons/c-028-punch-bowl.svg" ); }

.page-landing__section > .section__inner {
	position: relative;
	z-index: 1;
}

@media ( max-width: 640px ) {
	.page-landing__section::before {
		display: none;
	}
	.page-landing__section::after {
		width: 52px;
		height: 52px;
		bottom: 8px;
		right: 10px;
	}
}

.page-landing__head {
	margin-bottom: clamp( 1.4rem, 3vw, 2.2rem );
}

.page-landing .wp-block-post-title {
	margin: 0;
}

.page-landing__eyebrow {
	margin: 0 0 -.3rem;
}

.page-landing .section__lead {
	max-width: 62ch;
}

.page-landing__h2 {
	margin: clamp( 2rem, 5vw, 3.2rem ) 0 1rem;
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.6rem, 3.4vw, 2.4rem );
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .01em;
}

.page-landing .split {
	margin-top: 0;
}

/* Las noches que ya pasaron: un poco apagadas, sin botón. */
.mrc-nights--past .mrc-night__art img {
	filter: saturate( .55 ) brightness( .92 );
}

/* La lista de ventajas de Private hire: la fuente condensada del sitio en
   dos columnas, con el rombo amarillo de las bandas. */
.page-landing__perks {
	list-style: none;
	margin: 0 0 1.4rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
	gap: .6rem 1.4rem;
}

.page-landing__perks li {
	position: relative;
	padding-left: 1.3rem;
	font-weight: 500;
	line-height: 1.45;
}

.page-landing__perks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: .55rem;
	height: .55rem;
	transform: rotate( 45deg );
	background: var( --wp--preset--color--accent );
}

.section__head {
	margin-bottom: clamp( 1.6rem, 4vw, 2.6rem );
	max-width: 44rem;
}

/* El «ojo» de cada sección va en Yellowtail rosa: es la floritura de los
   flyers (bloque en Anton + palabra en script), aplicada a la página. Un
   rótulo pequeño en versalitas decía lo mismo y no se parecía a nada nuestro. */
.section__eyebrow {
	margin: 0 0 -.15em;
	font-family: var( --wp--preset--font-family--script );
	font-size: clamp( 1.6rem, 4vw, 2.4rem );
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	color: var( --wp--preset--color--accent-2 );
	padding-right: .2em;
}

.section__title {
	margin: 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 2.6rem, 7.5vw, 5.2rem );
	line-height: .94;
	letter-spacing: .005em;
	text-transform: uppercase;
	color: var( --wp--preset--color--ink );
}

.section__lead {
	margin: 1.1rem 0 0;
	font-size: clamp( 1.12rem, 1.7vw, 1.28rem );
	line-height: 1.55;
	font-weight: 500;
	color: var( --wp--preset--color--muted );
	max-width: 46ch;
}

.section__lead strong {
	color: var( --wp--preset--color--ink );
	font-weight: 700;
}

/* Bloque de dos columnas para «Private events»: texto a la izquierda,
   formulario a la derecha. Se apila por debajo de 900 px porque un formulario
   de dos campos por fila en una columna de 320 px es ilegible. */
.split {
	display: grid;
	gap: clamp( 1.6rem, 4vw, 3rem );
	grid-template-columns: 1fr;
	align-items: start;
}

@media ( min-width: 900px ) {
	.split {
		grid-template-columns: minmax( 0, 22rem ) minmax( 0, 1fr );
	}
}

.split__form {
	background: var( --wp--preset--color--surface );
	box-shadow: var( --mrc-shadow );
	border-radius: var( --wp--custom--radius--lg );
	padding: clamp( 1.3rem, 3vw, 2rem );
}

/* ==========================================================================
   PIE
   ========================================================================== */

.site-footer {
	/* Celeste, con el rojo tropical del logo para el nombre y los rótulos
	   (22/09, pedido por el dueño: «en el footer otro color, celeste, rojo
	   intenso»). La banda amarilla y la ola lo separan del bloque de eventos,
	   que también es celeste. */
	background: var( --wp--preset--color--plum );
	padding: clamp( 2.5rem, 6vw, 4rem ) var( --wp--preset--spacing--40 ) 2rem;
	--wp--preset--color--ink: #0A2F40;
	--wp--preset--color--muted: #3E5967;
	--mrc-line: rgba( 10, 66, 88, .2 );
	color: var( --wp--preset--color--ink );
}

/* El nombre del bar cruzando el pie, tono sobre tono: se lee de reojo, no
   compite con los datos de contacto y cierra la página como la abre. Va en
   CSS y no en el HTML: es decoración, y como texto real (aunque fuera
   aria-hidden) Lighthouse lo medía como contraste insuficiente (1.08:1). */
.site-footer::before {
	content: "Maracas Bar";
	display: block;
	max-width: var( --wp--style--global--wide-size );
	margin: 0 auto clamp( 1.6rem, 4vw, 2.8rem );
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 3rem, 11.5vw, 9rem );
	line-height: .9;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var( --wp--preset--color--tropic );
	user-select: none;
	overflow: hidden;
	white-space: nowrap;
}

.site-footer__inner {
	max-width: var( --wp--style--global--wide-size );
	margin: 0 auto;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 15rem ), 1fr ) );
}

.site-footer h2 {
	margin: 0 0 .7rem;
	font-size: .78rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var( --wp--preset--color--accent-2 );
	font-family: var( --wp--preset--font-family--body );
	font-weight: 700;
}

.site-footer p,
.site-footer li {
	margin: 0 0 .35rem;
	color: var( --wp--preset--color--muted );
	font-size: .95rem;
	font-weight: 500;
	line-height: 1.55;
}

.site-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Los enlaces del pie van en lista, no dentro de una frase: son objetivos
   por sí mismos y medían 23 px de alto. Con `min-height` llegan a los 44 de
   la casa sin estirar la línea: el relleno es vertical y el texto se queda
   donde estaba. */
.site-footer a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-block: -.4rem;
	font-weight: 700;
	color: var( --wp--preset--color--ink );
	text-decoration: none;
}

.site-footer a:hover {
	color: var( --wp--preset--color--accent-2 );
	text-decoration: underline;
}

/* Dos enlaces en párrafos seguidos (los dos Instagram, el teléfono): cada
   uno mide 44 px con margen negativo y sus zonas de toque se pisaban 8 px
   (medido). Un poco de aire entre párrafos con enlace lo separa. */
.site-footer p:has( > a ) + p:has( > a ) {
	margin-top: .55rem;
}

.site-footer__bottom {
	max-width: var( --wp--style--global--wide-size );
	margin: 2.5rem auto 0;
	padding-top: 1.2rem;
	border-top: 1px solid var( --mrc-line );
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.4rem;
	font-size: .8rem;
	color: var( --wp--preset--color--muted );
}

.site-ig,
.site-phone {
	font-weight: 600;
	letter-spacing: .04em;
}

/* Vistas «desnudas» de la carta (imprimir / tarjeta QR, las marca el plugin
   con `mrc-bare` en el body): sin cabecera, pie, banda de demo ni título de
   página. Es una hoja para el papel, no una página de la web. */
body.mrc-bare .site-header,
body.mrc-bare .site-footer,
body.mrc-bare .page-body > .wp-block-post-title {
	display: none;
}

body.mrc-bare .page-body {
	padding-top: 1.5rem;
}

@media print {
	body.mrc-bare {
		background: #fff;
	}
	body.mrc-bare--print .page-body {
		padding: 0;
		max-width: none;
	}
	@page {
		size: A4;
		margin: 12mm;
	}
}

/* ==========================================================================
   PÁGINAS INTERIORES
   ========================================================================== */

.page-body {
	max-width: var( --wp--style--global--content-size );
	margin: 0 auto;
	padding: clamp( 2.5rem, 7vw, 4.5rem ) var( --wp--preset--spacing--40 ) 4rem;
}

.page-body h1 {
	font-size: clamp( 2.2rem, 6vw, 3.4rem );
	margin-bottom: 1.2rem;
}

/* El panel del encargado trae su propio ancho (46rem) y su propio ritmo: la
   caja de lectura de 720 px del tema le sobra y le añade padding por los dos
   lados. Con `--flush` la página se aparta y deja que el panel mande. */
.page-body--flush {
	max-width: none;
	padding: 0;
}

/* WordPress separa los bloques de raíz con un margen (16 px) entre la
   cabecera y el `main`. Sobre negro no se veía; sobre arena era una franja
   clara entre la barra navy y el vídeo. */
/* Ni entre el <main> y el pie: la ola del final tiene que tocar el pie. */
body .wp-site-blocks > * + * {
	margin-block-start: 0;
}

.wp-site-blocks > main,
.wp-site-blocks > .page-body {
	margin-top: 0;
}

/* ==========================================================================
   MARCAS DE AGUA
   Iconos del pack «party and celebration» (IconosSVG), sólo el trazo, como
   sellos detrás del contenido — la misma receta que qwood.es: `mask-image`
   + `background-color`, así el color lo decide la sección; opacidad única
   (.08); `z-index: -1` dentro de un contexto propio (`isolation`) para que
   queden DEBAJO del texto y no se salgan de su sección; ocultas por debajo
   de 640 px, donde un icono de 240 px es media pantalla. Los ficheros los
   genera `tools/make-watermarks.mjs`.
   ========================================================================== */

.hero,
.section,
.site-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.wm {
	position: absolute;
	z-index: -1;
	pointer-events: none;
	opacity: .08;
	background-color: var( --wp--preset--color--accent );
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	-webkit-mask-position: center;
}

.wm--pink {
	background-color: var( --wp--preset--color--accent-2 );
}

.wm--maracas   { mask-image: url( "assets/img/wm/maracas.svg" );   -webkit-mask-image: url( "assets/img/wm/maracas.svg" ); }
.wm--disco     { mask-image: url( "assets/img/wm/disco.svg" );     -webkit-mask-image: url( "assets/img/wm/disco.svg" ); }
.wm--mixer     { mask-image: url( "assets/img/wm/mixer.svg" );     -webkit-mask-image: url( "assets/img/wm/mixer.svg" ); }
.wm--trumpet   { mask-image: url( "assets/img/wm/trumpet.svg" );   -webkit-mask-image: url( "assets/img/wm/trumpet.svg" ); }
.wm--subwoofer { mask-image: url( "assets/img/wm/subwoofer.svg" ); -webkit-mask-image: url( "assets/img/wm/subwoofer.svg" ); }
/* El vale de copa (plugin) cala la misma copa: la ruta la sabe el tema. */
:root { --mrc-wm-drink: url( "assets/img/wm/drinks.svg" ); }

.wm--drinks    { mask-image: url( "assets/img/wm/drinks.svg" );    -webkit-mask-image: url( "assets/img/wm/drinks.svg" ); }
.wm--champagne { mask-image: url( "assets/img/wm/champagne.svg" ); -webkit-mask-image: url( "assets/img/wm/champagne.svg" ); }
.wm--balloons  { mask-image: url( "assets/img/wm/balloons.svg" );  -webkit-mask-image: url( "assets/img/wm/balloons.svg" ); }
.wm--sparkler  { mask-image: url( "assets/img/wm/sparkler.svg" );  -webkit-mask-image: url( "assets/img/wm/sparkler.svg" ); }
.wm--lights    { mask-image: url( "assets/img/wm/lights.svg" );    -webkit-mask-image: url( "assets/img/wm/lights.svg" ); }

/* Las secciones ya no llevan marcas de agua (22/09: los adornos son los
   iconos a todo color, ver OLAS Y ADORNOS). `.wm` sigue aquí porque el vale
   de copa del plugin cala la copa con `--mrc-wm-drink`. */

@media ( max-width: 640px ) {
	.wm {
		display: none;
	}
}

/* ==========================================================================
   GALERÍA
   Las fotos de la ficha de Google del bar, a su tamaño (no la miniatura), en
   una tira que se desplaza. Alto fijo y ancho natural: caben verticales y
   apaisadas sin recortar. Cada foto abre el visor (<dialog>) de site.js.
   ========================================================================== */

.reel {
	display: flex;
	gap: .8rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: var( --wp--preset--color--navy ) transparent;
	padding: .4rem var( --wp--preset--spacing--40 ) 1rem;
	/* Empieza donde empieza el texto de la sección y sangra hasta el borde. */
	padding-inline: max( var( --wp--preset--spacing--40 ), calc( ( 100% - var( --wp--style--global--wide-size ) ) / 2 ) );
	position: relative;
	z-index: 1;
}

.reel:focus-visible {
	outline: 3px solid var( --wp--preset--color--accent );
	outline-offset: -3px;
}

.reel__item {
	flex: none;
	margin: 0;
	height: clamp( 220px, 34vw, 440px );
	border-radius: var( --wp--custom--radius--md );
	overflow: hidden;
	background: var( --wp--preset--color--surface-2 );
	scroll-snap-align: start;
	box-shadow: 0 10px 28px rgba( 10, 47, 64, .16 );
}

.reel__item button {
	display: block;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.reel__item img {
	display: block;
	height: 100%;
	width: auto;
	transition: transform 240ms ease;
}

@media ( prefers-reduced-motion: no-preference ) {
	.reel__item button:hover img {
		transform: scale( 1.04 );
	}
}

.lightbox {
	border: 0;
	padding: 0;
	margin: 0;
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	background: transparent;
	color: #fff;
}

.lightbox::backdrop {
	background: rgba( 10, 47, 64, .94 );
}

.lightbox__img {
	position: absolute;
	inset: 0;
	margin: auto;
	max-width: min( 96vw, 1400px );
	max-height: 92vh;
	width: auto;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, .5 );
}

.lightbox__close,
.lightbox__nav {
	position: absolute;
	z-index: 2;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: var( --wp--custom--radius--pill );
	background: rgba( 255, 255, 255, .16 );
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
}

.lightbox__close:hover,
.lightbox__nav:hover {
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--accent-ink );
}

.lightbox__close { top: 14px; right: 14px; }
.lightbox__nav { top: 50%; transform: translateY( -50% ); }
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }

.lightbox svg {
	width: 26px;
	height: 26px;
}

/* ==========================================================================
   PREGUNTAS («Good to know»)
   ========================================================================== */

.faq {
	margin: 0;
	display: grid;
	gap: .9rem;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 20rem ), 1fr ) );
}

.faq__item {
	background: var( --wp--preset--color--surface );
	border-radius: var( --wp--custom--radius--md );
	box-shadow: var( --mrc-shadow );
	padding: 1.1rem 1.25rem 1.2rem;
}

.faq__q {
	margin: 0 0 .4rem;
	font-family: var( --wp--preset--font-family--display );
	font-size: 1.35rem;
	line-height: 1.1;
	text-transform: uppercase;
	color: var( --wp--preset--color--ink );
}

.faq__a {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 500;
	color: var( --wp--preset--color--muted );
}