/**
 * Quinqué — estilos del tema.
 *
 * Tokens: colores y tipografía vienen de theme.json (variables --wp--preset--*).
 * Prefijo de clases: .q-
 */

:root {
	--q-blanco: var(--wp--preset--color--blanco, #FCFBF7);
	--q-carbon: var(--wp--preset--color--carbon, #26231F);
	--q-cobre: var(--wp--preset--color--cobre, #8A5233);
	--q-texto-2: rgb(38 35 31 / 0.62);
	--q-linea: rgb(38 35 31 / 0.12);
	--q-m: clamp(20px, 4vw, 48px);
	--q-col: 470px;
	--q-pair: 900px;
	--q-nav: 84px;
	--q-sec: clamp(120px, 14vw, 220px);
	--q-top: var(--wp-admin--admin-bar--height, 0px);
	--q-ease: cubic-bezier(.25, .1, .25, 1);
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--q-nav);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-variant-numeric: oldstyle-nums proportional-nums;
}

::selection {
	background: var(--q-carbon);
	color: var(--q-blanco);
}

.wp-site-blocks > * {
	margin-block-start: 0;
}

.wp-site-blocks img {
	display: block;
	max-width: 100%;
	height: auto;
}

:where(.q-header, .q-footer, .q-band, .q-reserve__wrap, .q-menu) a {
	color: inherit;
	text-decoration: none;
}

:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

.q-link {
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	padding-bottom: 1px;
	transition: color .4s var(--q-ease);
}

.q-link:hover {
	color: var(--q-cobre);
}

.q-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ cabecera */

.q-header {
	position: fixed;
	inset: var(--q-top) 0 auto 0;
	z-index: 50;
	height: var(--q-nav);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding-inline: var(--q-m);
	color: var(--q-blanco);
	border-bottom: 1px solid transparent;
	transition: background-color .6s var(--q-ease), color .6s var(--q-ease), border-color .6s var(--q-ease);
}

.q-header__lang {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	letter-spacing: .04em;
}

.q-header__lang li + li::before {
	content: "|";
	margin-right: 8px;
	opacity: .55;
}

.q-header__lang a:not([aria-current]) {
	opacity: .55;
}

.q-header__logo {
	position: relative;
	display: block;
	width: 124px;
	height: 26px;
	pointer-events: none;
}

.q-header__logo img {
	position: absolute;
	inset: 0;
	width: auto;
	height: 26px;
	opacity: 0;
	transition: opacity .6s var(--q-ease);
}

.q-header__nav ul {
	display: flex;
	justify-content: flex-end;
	gap: clamp(20px, 2.6vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
}

.q-header__nav a {
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	padding-bottom: 2px;
	transition: background-size .5s var(--q-ease);
}

.q-header__nav a:hover,
.q-header__nav a[aria-current] {
	background-size: 100% 1px;
	color: inherit;
}

.q-header.is-solid,
body:not(:has(.q-hero)) .q-header {
	background: var(--q-blanco);
	color: var(--q-carbon);
	border-bottom-color: var(--q-linea);
}

.q-header.is-solid .q-header__logo,
body:not(:has(.q-hero)) .q-header__logo {
	pointer-events: auto;
}

.q-header.is-solid .q-header__logo .is-dark,
body:not(:has(.q-hero)) .q-header__logo .is-dark {
	opacity: 1;
}

/* Portadas: el contenido de la página empieza directamente con el hero. */
.q-front .q-content > :not(.q-band) {
	margin-block-start: 0;
}

/* Páginas sin hero: el contenido arranca bajo la cabecera fija. */
body:not(:has(.q-hero)) .wp-site-blocks > main {
	padding-top: calc(var(--q-nav) + clamp(48px, 6vw, 96px));
}

/* --------------------------------------------------------------------- hero */

.q-hero {
	position: relative;
	height: 100svh;
	min-height: 560px;
	overflow: hidden;
	display: grid;
	place-items: center;
	text-align: center;
	color: var(--q-blanco);
	background: #1C1814;
}

.q-hero__slides {
	position: absolute;
	inset: 0;
}

.q-hero__slides img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.07);
	transition: opacity 1800ms var(--q-ease), transform 9000ms linear;
}

.q-hero__slides img.is-on {
	opacity: 1;
	transform: scale(1);
}

.q-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(22 18 15 / var(--q-overlay, .56));
}

.q-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	padding-inline: var(--q-m);
}

.q-hero__mark {
	width: min(52vw, 440px);
	height: auto;
}

.q-hero__tag {
	max-width: 30ch;
	margin: 0;
	font-size: clamp(17px, 1.35vw, 20px);
	line-height: 1.6;
}

/* ----------------------------------------------------------------- secciones */

.q-section {
	padding-top: var(--q-sec);
}

.q-section__head {
	text-align: center;
	padding-inline: var(--q-m);
}

.q-kicker {
	display: block;
	margin-bottom: 6px;
	font-style: italic;
	font-size: 16px;
	color: var(--q-cobre);
}

.q-section__title {
	margin: 0;
	font-weight: 400;
	font-size: clamp(19px, 1.6vw, 23px);
	letter-spacing: .09em;
	line-height: 1.3;
	text-transform: uppercase;
}

.q-section__body > :where(p, h3, h4, ul, ol, blockquote, .wp-block-buttons) {
	max-width: var(--q-col);
	margin-inline: auto;
	padding-inline: var(--q-m);
	box-sizing: content-box;
}

.q-section__body > :where(p, h3, h4, ul, ol, blockquote) + :where(p, h3, h4, ul, ol, blockquote) {
	margin-top: 1.1em;
}

.q-section__body > p:first-child {
	margin-top: clamp(48px, 5vw, 72px);
}

/* ------------------------------------------------------------- pares de foto */

.q-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	max-width: var(--q-pair);
	margin: clamp(48px, 5vw, 72px) auto;
	padding-inline: var(--q-m);
	box-sizing: content-box;
}

.q-pair figure {
	position: relative;
	margin: 0;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #E7E2D8;
}

.q-pair img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.q-pair figcaption {
	position: absolute;
	left: 14px;
	bottom: 12px;
	font-style: italic;
	font-size: 14px;
	color: var(--q-blanco);
	text-shadow: 0 0 18px rgb(0 0 0 / .35);
}

/* -------------------------------------------------------------- carta impresa */

.q-menu {
	max-width: 760px;
	margin: clamp(56px, 6vw, 88px) auto 0;
	padding-inline: var(--q-m);
	box-sizing: content-box;
	text-align: center;
}

.q-menu__list {
	display: flex;
	flex-direction: column;
	gap: clamp(30px, 3.2vw, 44px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.q-menu__item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.q-menu__name {
	font-size: clamp(24px, 2.3vw, 32px);
	line-height: 1.2;
	letter-spacing: -.01em;
	transition: opacity 1200ms var(--q-ease), color .5s var(--q-ease);
}

.q-menu__desc {
	margin-top: 4px;
	font-style: italic;
	font-size: 16px;
	color: var(--q-texto-2);
	transition: opacity 1200ms var(--q-ease) 250ms;
}

.q-menu__award {
	margin-top: 8px;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--q-cobre);
	transition: opacity 1200ms var(--q-ease) 400ms;
}

.q-menu__note {
	margin: clamp(48px, 5vw, 72px) auto 0;
	max-width: 52ch;
	font-style: italic;
	font-size: 16px;
	color: var(--q-texto-2);
}

@media (hover: hover) {
	.q-menu__item:hover .q-menu__name {
		color: var(--q-cobre);
	}
}

/* -------------------------------------------------------------- banda oscura */

.q-band {
	position: relative;
	margin-top: var(--q-sec);
	min-height: 92svh;
	display: grid;
	place-items: center;
	overflow: hidden;
	text-align: center;
	color: var(--q-blanco);
	background: #1C1814;
}

.q-band__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.q-band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(22 18 15 / .6);
}

.q-band__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(80px, 9vw, 140px) var(--q-m);
}

.q-band .q-kicker {
	color: rgb(252 251 247 / .7);
}

.q-band__heading {
	max-width: 20ch;
	margin: 0;
	font-weight: 300;
	font-size: clamp(34px, 4.4vw, 64px);
	line-height: 1.08;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.q-band__facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 220px));
	gap: clamp(24px, 5vw, 80px);
	margin: clamp(56px, 6vw, 88px) 0 0;
}

.q-band__facts dt {
	margin-bottom: 8px;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .65;
}

.q-band__facts dd {
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
}

.q-button-outline {
	display: inline-block;
	margin-top: clamp(48px, 5vw, 72px);
	padding: 15px 34px;
	border: 1px solid rgb(252 251 247 / .7);
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: inherit;
	transition: background-color .5s var(--q-ease), color .5s var(--q-ease);
}

.q-button-outline:hover {
	background: var(--q-blanco);
	color: var(--q-carbon);
}

/* ------------------------------------------------------- reserva CoverManager */

.q-reserve__frame {
	position: relative;
	max-width: 620px;
	margin: clamp(40px, 4vw, 56px) auto 0;
	border: 1px solid var(--q-linea);
}

.q-reserve__frame::before {
	content: attr(data-loading);
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-style: italic;
	color: var(--q-texto-2);
}

.q-reserve__frame.is-loaded::before {
	content: none;
}

.q-reserve__frame iframe {
	position: relative;
	display: block;
	width: 100%;
	height: var(--q-frame-h, 760px);
	border: 0;
	background: transparent;
}

.q-reserve__wrap {
	padding-inline: var(--q-m);
}

.q-reserve__help {
	max-width: var(--q-col);
	margin: 28px auto 0;
	text-align: center;
	font-style: italic;
	font-size: 15px;
	color: var(--q-texto-2);
}

/* ----------------------------------------------------------------------- pie */

.q-footer {
	margin-top: var(--q-sec);
	padding: clamp(56px, 6vw, 80px) var(--q-m) 40px;
	border-top: 1px solid var(--q-linea);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	text-align: center;
	font-size: 15px;
	color: var(--q-texto-2);
}

.q-footer p {
	margin: 0;
}

.q-footer__logo {
	width: auto;
	height: 22px !important;
	opacity: .9;
}

.q-footer__awards {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.q-footer ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.q-footer a:hover {
	color: var(--q-carbon);
}

/* ------------------------------------------------- contenido genérico (blog) */

.q-main {
	padding-bottom: clamp(48px, 6vw, 96px);
}

.q-entry-title {
	max-width: 20ch;
	margin: 0 auto;
	padding-inline: var(--q-m);
	font-weight: 300;
	font-size: clamp(34px, 4.4vw, 64px);
	line-height: 1.08;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.q-entry-date {
	margin-bottom: 12px;
	font-style: italic;
	color: var(--q-cobre);
}

.q-entry-image {
	max-width: var(--q-pair);
	margin: clamp(40px, 5vw, 64px) auto 0;
	padding-inline: var(--q-m);
	box-sizing: content-box;
}

/* Bloques normales dentro del contenido: columna estrecha y centrada, como en las secciones. */
.q-content > :where(p, h2, h3, h4, ul, ol, blockquote, .wp-block-image, .wp-block-buttons, .wp-block-table, .wp-block-separator) {
	max-width: var(--q-col);
	margin-inline: auto;
	padding-inline: var(--q-m);
	box-sizing: content-box;
}

.q-content > :where(p, h2, h3, h4, ul, ol, blockquote, .wp-block-image) + * {
	margin-top: 1.1em;
}

.q-content > :first-child:where(p, h2, h3, ul, ol) {
	margin-top: clamp(40px, 5vw, 64px);
}

.q-content > :where(h2, h3) {
	margin-top: 2em;
}

.q-list .wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: clamp(48px, 6vw, 80px);
	max-width: var(--q-col);
	margin: clamp(48px, 6vw, 80px) auto 0;
	padding: 0 var(--q-m);
	box-sizing: content-box;
	list-style: none;
}

.q-list__title {
	margin: 0;
	font-size: clamp(24px, 2.3vw, 32px);
}

.q-list__title a,
.q-content a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.q-list__excerpt {
	color: var(--q-texto-2);
}

.q-list .wp-block-query-pagination {
	margin-top: clamp(48px, 6vw, 80px);
	gap: 16px;
}

.q-404 p {
	max-width: var(--q-col);
	margin: 24px auto 0;
	padding-inline: var(--q-m);
}

/* ------------------------------------------------------------------ motion
 * Solo opacidad. El contenido está visible sin JavaScript y en el editor:
 * la clase .q-js la añade el tema en el <head> de la web pública.
 */

.q-js .q-reveal {
	opacity: 0;
	transition: opacity 1100ms var(--q-ease);
}

.q-js .q-reveal.is-in {
	opacity: 1;
}

.q-js .q-hero__inner > * {
	opacity: 0;
	transition: opacity 1600ms var(--q-ease);
}

.q-js .q-hero.is-on .q-hero__mark {
	opacity: 1;
	transition-delay: 400ms;
}

.q-js .q-hero.is-on .q-hero__tag {
	opacity: 1;
	transition-delay: 1300ms;
}

.q-js .q-menu__item > * {
	opacity: .12;
}

.q-js .q-menu__item.is-lit > * {
	opacity: 1;
}

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

	.q-js .q-reveal,
	.q-js .q-hero__inner > *,
	.q-js .q-menu__item > * {
		opacity: 1;
		transition: none;
	}

	.q-hero__slides img {
		transition: none;
		transform: none;
	}
}

/* ------------------------------------------------------------------- móvil */

@media (max-width: 820px) {
	:root {
		--q-nav: 64px;
	}

	.q-header__nav li:not(:last-child) {
		display: none;
	}

	.q-header__logo,
	.q-header__logo img {
		height: 22px;
	}

	.q-header__logo {
		width: 104px;
	}

	.q-pair {
		gap: 6px;
	}

	.q-band__facts {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.q-reserve__frame iframe {
		height: calc(var(--q-frame-h, 760px) + 60px);
	}
}