/**
 * Ajustes que theme.json no cubre.
 * Todo lo que sea color, tipografía o espaciado va en theme.json, no aquí.
 */

/* ------------------------------------------------------------------
   Base para las imágenes heredadas del editor antiguo.
   Va deliberadamente AL PRINCIPIO del fichero: es una red de seguridad
   genérica, y cualquier componente definido más abajo debe poder
   sobreescribirla sin recurrir a !important ni a trucos de especificidad.
   ------------------------------------------------------------------ */

.wp-block-post-content img,
.entry-content img {
	max-width: 100%;
	height: auto;
}

/* El logotipo es negro sobre transparente; en el pie oscuro hay que invertirlo. */
.pie-logo img {
	filter: invert(1);
}

/* El sello de la cabecera es un círculo: se centra y no debe recortarse. */
.wp-block-site-logo img {
	display: block;
	margin-inline: auto;
	height: auto;
}

/* Menú de navegación: subrayado que crece al pasar por encima,
   en lugar del subrayado permanente que hereda de los enlaces. */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.25em;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.25s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation .wp-block-navigation-item__content::after {
		transition: none;
	}
}

/* Menú desplegable en móvil: fondo sólido y tipografía mayor,
   frente al "Go to..." de la web antigua. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--papel);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
}

/* Las fichas del blog se estiran para que los títulos queden alineados. */
.wp-block-post-template.is-layout-grid > li {
	display: flex;
	flex-direction: column;
}

/* Todas las portadas del listado comparten proporción, vengan como vengan
   las fotos originales: verticales, cuadradas o panorámicas. */
.wp-block-post-template .wp-block-post-featured-image {
	margin-bottom: var(--wp--preset--spacing--30);
}

.wp-block-post-template .wp-block-post-featured-image img {
	aspect-ratio: 4 / 3;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Separador fino de la cabecera. */
.wp-block-separator.is-style-wide {
	border-top-width: 1px;
	opacity: 1;
}

/* Nota: aquí había un `max-width: 100%` sobre .wp-block-cover que impedía
   que el hero llegase al borde derecho. El porcentaje se resolvía contra la
   caja interior del contenedor, ya descontado su relleno, así que el margen
   negativo solo alcanzaba por la izquierda. WordPress ya evita el desborde
   de los bloques a sangre; no hace falta ayudarle. */

/* Fichas de vino: las botellas llegan en formatos distintos (jpg con fondo
   blanco, png recortado), asi que se normaliza la altura para que las cuatro
   se lean como una serie y los nombres queden alineados. */
.ficha-botella img {
	display: block;
	margin-inline: auto;
	width: auto;
	max-width: 100%;
	height: 340px;
	object-fit: contain;
}

@media (max-width: 781px) {
	.ficha-botella img {
		height: 260px;
	}
}

/* Datos clave de la experiencia: en movil, WordPress apila las cuatro columnas
   una debajo de otra y el bloque se vuelve interminable. En dos filas de dos
   se sigue leyendo de un vistazo. */
@media (max-width: 781px) {
	.datos-clave.wp-block-columns {
		flex-wrap: wrap !important;
		gap: var(--wp--preset--spacing--40);
	}

	.datos-clave.wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--40) / 2) !important;
	}
}

/* Mapa de ubicacion: proporcion fija y a sangre, sin depender de la altura
   que traiga el iframe. */
.mapa-finca {
	position: relative;
	width: 100%;
	aspect-ratio: 21 / 9;
	background: var(--wp--preset--color--crema);
}

.mapa-finca iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Aviso previo: ocupa el hueco del mapa para que la pagina no de un salto
   cuando la persona acepta y el iframe entra en su lugar. */
.mapa-finca__aviso {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	text-align: center;
}

.mapa-finca__texto {
	max-width: 46ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

.mapa-finca__aceptar {
	border: 0;
	cursor: pointer;
}

.mapa-finca__pie {
	max-width: 52ch;
	margin: 0;
	color: var(--wp--preset--color--sarmiento);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.retirar-consentimiento[aria-disabled="true"] {
	pointer-events: none;
	opacity: 0.6;
}

@media (max-width: 781px) {
	.mapa-finca {
		aspect-ratio: 4 / 3;
	}
}

/* Formulario de contacto: que herede la tipografia del tema en lugar de la
   suya propia. */
.fluentform .ff-el-input--label label,
.fluentform .ff-el-form-control {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
}

.fluentform .ff-el-form-control {
	border-radius: 2px;
	border-color: #D8D1C7;
	padding: 0.75em 0.9em;
}

.fluentform .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--burdeos);
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px rgba(139, 64, 73, 0.15);
}

.fluentform .ff-btn-submit {
	background-color: var(--wp--preset--color--burdeos) !important;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.9em 2em;
}

.fluentform .ff-btn-submit:hover {
	background-color: var(--wp--preset--color--tinta) !important;
}

/* Formulario del boletin: va directo a Mailchimp, sin plugin, asi que la
   presentacion es nuestra. */
.form-boletin {
	max-width: 30rem;
	margin-inline: auto;
}

.form-boletin__campo {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: var(--wp--preset--spacing--30);
}

.form-boletin label {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
}

.form-boletin input[type="text"],
.form-boletin input[type="email"] {
	width: 100%;
	padding: 0.75em 0.9em;
	border: 1px solid #D8D1C7;
	border-radius: 2px;
	background: var(--wp--preset--color--papel);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
}

.form-boletin input:focus-visible {
	outline: 2px solid transparent;
	border-color: var(--wp--preset--color--burdeos);
	box-shadow: 0 0 0 3px rgba(139, 64, 73, 0.15);
}

.form-boletin__consentimiento {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-block: var(--wp--preset--spacing--30);
}

.form-boletin__consentimiento input {
	margin-top: 0.25em;
	flex-shrink: 0;
}

.form-boletin__accion {
	margin-top: var(--wp--preset--spacing--30);
}

.form-boletin button {
	width: 100%;
	cursor: pointer;
	border: 0;
	border-radius: 999px;
}

.form-boletin__nota {
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--sarmiento);
	text-align: center;
}

/* Foco visible y a juego con la marca, solo para quien navega con teclado.
   Con :focus-visible no aparece al hacer clic con el raton, pero si al tabular. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--burdeos);
	outline-offset: 3px;
	border-radius: 2px;
}

/* En el menu desplegable de movil el contraste es sobre fondo claro. */
.wp-block-navigation__responsive-container.is-menu-open a:focus-visible {
	outline-offset: 6px;
}

/* Cabecera: el sello anclado al margen izquierdo y el menu centrado en el
   eje de la pagina. Se resuelve con tres columnas (1fr auto 1fr) en vez de
   con flex: asi el menu queda centrado respecto al ancho total y no respecto
   al hueco que deja el logotipo, que es lo que lo descuadraba.
   El bloque de logotipo trae margenes y una linea base que descuadran la
   alineacion vertical respecto al texto del menu. */
/* El selector lleva .wp-block-group a proposito: WordPress imprime sus
   estilos de layout despues de esta hoja y su display:flex ganaria por
   orden de origen con la misma especificidad. */
.wp-block-group.cabecera {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding-inline: var(--wp--preset--spacing--30);
}

.cabecera .wp-block-site-logo {
	grid-column: 1;
	justify-self: start;
}

.cabecera .wp-block-navigation {
	grid-column: 2;
}

.cabecera .wp-block-site-logo {
	margin: 0;
	line-height: 0;
	flex-shrink: 0;
}

.cabecera .wp-block-site-logo img {
	display: block;
}

.cabecera .wp-block-navigation {
	margin-block: 0;
}

/* Con las etiquetas cortas y el sello reducido, el menu completo cabe en
   unos 770 px junto al logotipo. La hamburguesa se reserva para cuando de
   verdad no cabe, asi que en tableta sigue viendose el menu entero. */
@media (max-width: 880px) {
	.wp-block-group.cabecera {
		display: flex;
	}

	.cabecera .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.cabecera .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.cabecera .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
	}

	.cabecera .wp-block-navigation {
		margin-left: auto;
	}
}

/* En movil el menu se convierte en un boton, asi que en vez de ir pegado al
   logotipo se manda al extremo opuesto, que es donde el pulgar lo busca.
   El sello tambien se reduce para no comerse la pantalla. */
@media (max-width: 781px) {
	.cabecera .wp-block-navigation {
		margin-left: auto;
	}

	.cabecera .wp-block-site-logo img {
		width: 72px;
		height: auto;
	}
}

/* ==================================================================
   Escena de vinos
   Botella grande al centro, nombre a la izquierda y nota a la derecha.
   Sin JavaScript se ve como una lista de vinos, uno debajo de otro.
   Con JavaScript se convierte en un pase con transiciones.
   ================================================================== */

.vinos-escena {
	position: relative;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--60);
	padding-inline: var(--wp--preset--spacing--40);
}

/* Un halo cálido detrás de la botella, para separarla del fondo. */
.vinos-escena::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(70vw, 780px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(139, 64, 73, 0.10) 0%, rgba(139, 64, 73, 0) 64%);
	pointer-events: none;
}

.vinos-escena__pista {
	position: relative;
	max-width: min(960px, 100%);
	margin-inline: auto;
	/* Sin z-index a proposito: crearia un contexto de apilamiento y la
	   fusion multiply de la botella dejaria de ver el fondo crema. */
}

/* --- Una diapositiva ---------------------------------------------- */

.vino {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.vino__nombre {
	text-align: right;
}

.vino__nombre h2 {
	margin: 0;
	font-size: clamp(2rem, 4.2vw, 4rem);
	line-height: 1.05;
	text-wrap: balance;
}

.vino__variedad {
	margin-top: 0.6em;
	color: var(--wp--preset--color--sarmiento);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* La botella manda: es lo más alto de la escena. */
.vino__foto {
	margin: 0;
	justify-self: center;
}

.vinos-escena .vino__foto img {
	display: block;
	width: auto;
	max-width: min(38vw, 420px);
	height: clamp(340px, 62vh, 620px);
	object-fit: contain;
	/* Las botellas llevan transparencia real, asi que no hace falta ninguna
	   fusion. Eso evita ademas el destello blanco que aparecia a mitad del
	   fundido: cualquier opacidad intermedia crea un contexto de apilamiento
	   y dejaba a multiply sin fondo con el que mezclar. */
	filter: drop-shadow(0 24px 30px rgba(26, 22, 20, 0.18));
}

.vino__nota {
	max-width: 34ch;
}

.vino__nota p {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: clamp(1.05rem, 1.3vw, 1.35rem);
	line-height: 1.65;
	color: var(--wp--preset--color--tinta);
}

/* --- Modo pase (lo activa el JavaScript) -------------------------- */

.vinos-escena--activo .vinos-escena__pista {
	display: grid;
}

.vinos-escena--activo .vino {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease;
}

.vinos-escena--activo .vino.es-actual {
	opacity: 1;
	visibility: visible;
}

/* Entrada escalonada: primero la botella, luego los textos desde su lado. */
.vinos-escena--activo .vino > * {
	transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	opacity: 0;
}

.vinos-escena--activo .vino .vino__nombre { transform: translateX(-2.5rem); }
.vinos-escena--activo .vino .vino__foto   { transform: translateY(2rem) scale(0.94); }
.vinos-escena--activo .vino .vino__nota   { transform: translateX(2.5rem); }

.vinos-escena--activo .vino.es-actual > * {
	opacity: 1;
	transform: none;
}

.vinos-escena--activo .vino.es-actual .vino__foto   { transition-delay: 0.05s; }
.vinos-escena--activo .vino.es-actual .vino__nombre { transition-delay: 0.17s; }
.vinos-escena--activo .vino.es-actual .vino__nota   { transition-delay: 0.24s; }

/* --- Contador y controles ----------------------------------------- */

.vinos-contador {
	position: absolute;
	top: var(--wp--preset--spacing--40);
	right: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--sarmiento);
	z-index: 2;
}

.vinos-contador strong {
	font-size: 1.6rem;
	font-weight: 400;
	color: var(--wp--preset--color--tinta);
	vertical-align: -0.12em;
}

.vinos-controles {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--50);
	z-index: 2;
}

.vinos-flecha {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	/* Sin esto el boton se comprime cuando los nombres de los vinos aprietan,
	   y el circulo se deforma en elipse. */
	flex: 0 0 3rem;
	aspect-ratio: 1;
	padding: 0;
	border: 1px solid #D8D1C7;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--tinta);
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.vinos-flecha:hover {
	background: var(--wp--preset--color--burdeos);
	border-color: var(--wp--preset--color--burdeos);
	color: var(--wp--preset--color--papel);
	transform: scale(1.08);
}

.vinos-indices {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
}

.vinos-indice {
	position: relative;
	padding: 0.4em 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--sarmiento);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.25s ease;
}

.vinos-indice::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--wp--preset--color--burdeos);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s ease;
}

.vinos-indice:hover { color: var(--wp--preset--color--tinta); }

.vinos-indice.es-actual { color: var(--wp--preset--color--burdeos); }
.vinos-indice.es-actual::after { transform: scaleX(1); }

/* --- Vecinos: el vino anterior y el siguiente ---------------------- */

.vinos-vecino {
	position: absolute;
	top: 50%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transform: translateY(-50%) scale(0.92);
	opacity: 0.32;
	filter: blur(3px);
	transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease;
}

.vinos-vecino--anterior  { left: clamp(0px, 7vw, 150px); }
.vinos-vecino--siguiente { right: clamp(0px, 7vw, 150px); }

.vinos-escena .vinos-vecino img {
	display: block;
	width: auto;
	height: clamp(170px, 30vh, 300px);
	object-fit: contain;
	pointer-events: none;
}

.vinos-vecino:hover,
.vinos-vecino:focus-visible {
	opacity: 0.65;
	filter: blur(1px);
	transform: translateY(-50%) scale(1);
}

.vinos-vecino:focus-visible {
	outline: 2px solid var(--wp--preset--color--burdeos);
	outline-offset: 10px;
	border-radius: 2px;
}

/* Por debajo de cierto ancho los vecinos se comerían el texto. */
@media (max-width: 1100px) {
	.vinos-vecino { display: none; }
}

/* --- Adaptación a pantallas pequeñas ------------------------------ */

@media (max-width: 900px) {
	.vino {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: var(--wp--preset--spacing--30);
	}

	.vino__nombre { text-align: center; order: 1; }
	.vino__foto   { order: 2; }
	.vino__nota   { order: 3; max-width: 46ch; }

	.vino__foto img {
		max-width: 70vw;
		height: clamp(280px, 42vh, 420px);
	}

	/* En vertical los textos entran desde abajo, no desde los lados. */
	.vinos-escena--activo .vino .vino__nombre { transform: translateY(1.5rem); }
	.vinos-escena--activo .vino .vino__nota   { transform: translateY(1.5rem); }

	.vinos-contador {
		position: static;
		text-align: center;
		margin-bottom: var(--wp--preset--spacing--30);
	}

	/* Flechas arriba y nombres debajo: en una sola fila los nombres apretaban
	   los botones hasta deformarlos. */
	.vinos-controles {
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--30);
	}

	.vinos-flecha--anterior  { order: 1; }
	.vinos-flecha--siguiente { order: 2; }
	.vinos-indices           { order: 3; flex-basis: 100%; }

	.vinos-indice { font-size: 0.78rem; }
}

@media (prefers-reduced-motion: reduce) {
	.vinos-escena--activo .vino,
	.vinos-escena--activo .vino > *,
	.vinos-flecha,
	.vinos-indice,
	.vinos-indice::after {
		transition: none !important;
	}

	.vinos-escena--activo .vino > * { transform: none !important; }
}

/* ==================================================================
   Tarjetas de destino (portada)
   Fotografía a sangre, título encima y descripción que se revela.
   Todo en CSS: sin JavaScript de por medio.
   ================================================================== */

.destinos .wp-block-column {
	display: flex;
}

.destino {
	position: relative;
	width: 100%;
	overflow: hidden;
	isolation: isolate;
}

/* La foto se acerca despacio al pasar por encima. */
.destino .wp-block-cover__image-background {
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	transform-origin: center 40%;
}

.destino:hover .wp-block-cover__image-background,
.destino:focus-within .wp-block-cover__image-background {
	transform: scale(1.07);
}

/* En lugar del velo plano de WordPress, un degradado: deja ver la parte
   alta de la foto y garantiza contraste donde va el texto. */
.destino .wp-block-cover__background {
	background: linear-gradient(
		to top,
		rgba(26, 22, 20, 0.88) 0%,
		rgba(26, 22, 20, 0.55) 38%,
		rgba(26, 22, 20, 0.12) 70%,
		rgba(26, 22, 20, 0.05) 100%
	) !important;
	opacity: 1 !important;
	transition: opacity 0.5s ease;
}

.destino:hover .wp-block-cover__background,
.destino:focus-within .wp-block-cover__background {
	opacity: 0.92 !important;
}

.destino .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	padding: var(--wp--preset--spacing--30);
}

.destino__numero {
	margin: 0 0 auto;
	color: rgba(255, 255, 255, 0.92);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.22em;
	/* Arriba el degradado es transparente para no velar la foto, asi que el
	   numero necesita su propia sombra: sobre un cielo claro desaparecia. */
	text-shadow: 0 1px 6px rgba(26, 22, 20, 0.75);
}

.destino__titulo {
	margin: 0;
	color: var(--wp--preset--color--papel);
	font-size: clamp(1.5rem, 2.1vw, 2rem);
	line-height: 1.1;
	text-wrap: balance;
}

.destino__titulo a {
	color: inherit;
	text-decoration: none;
}

/* El enlace del título cubre toda la tarjeta: se puede pulsar en
   cualquier punto, pero sigue siendo un solo enlace para el lector de
   pantalla, no tres repetidos. */
.destino__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Una raya que crece bajo el título al acercarse. */
.destino__titulo::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 1px;
	margin-top: 0.7em;
	background: var(--wp--preset--color--papel);
	transform: scaleX(0.35);
	transform-origin: left;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.destino:hover .destino__titulo::after,
.destino:focus-within .destino__titulo::after {
	transform: scaleX(1);
}

/* La descripción se revela al acercarse. */
.destino__texto {
	margin: 0.9em 0 0;
	color: rgba(255, 255, 255, 0.88);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	opacity: 0;
	transform: translateY(0.8rem);
	transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.destino:hover .destino__texto,
.destino:focus-within .destino__texto {
	opacity: 1;
	transform: none;
}

.destino__titulo a:focus-visible {
	outline: 2px solid var(--wp--preset--color--papel);
	outline-offset: 4px;
}

/* Donde no hay ratón no existe el "pasar por encima". La raya bajo el título
   se muestra ya extendida, pero la descripción se oculta: con la tarjeta más
   baja en móvil se salía de la caja, y subir la altura para que cupiera
   volvía a recortar la fotografía hasta hacerla irreconocible. El título es
   el enlace y lleva el significado; el detalle está en la página de destino. */
@media (hover: none) {
	.destino__titulo::after {
		transform: scaleX(1);
	}
}

@media (max-width: 781px) {
	.destino__texto {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.destino .wp-block-cover__image-background,
	.destino .wp-block-cover__background,
	.destino__titulo::after,
	.destino__texto {
		transition: none;
	}

	.destino:hover .wp-block-cover__image-background {
		transform: none;
	}
}

/* ------------------------------------------------------------------
   Barra de consentimiento de cookies
   Aceptar y rechazar tienen el mismo peso visual: la norma exige que
   rechazar sea tan fácil como aceptar.
   ------------------------------------------------------------------ */

.aviso-cookies {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--papel);
	border-top: 1px solid #DED7CC;
	box-shadow: 0 -8px 28px rgba(26, 22, 20, 0.08);
	animation: aviso-cookies-entra 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes aviso-cookies-entra {
	from { transform: translateY(100%); }
	to   { transform: none; }
}

.aviso-cookies__texto {
	max-width: 62ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.aviso-cookies__acciones {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	flex-shrink: 0;
}

.aviso-cookies__boton {
	padding: 0.8em 1.9em;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.aviso-cookies__boton--aceptar {
	border: 1px solid var(--wp--preset--color--burdeos);
	background: var(--wp--preset--color--burdeos);
	color: var(--wp--preset--color--papel);
}

.aviso-cookies__boton--aceptar:hover {
	background: var(--wp--preset--color--tinta);
	border-color: var(--wp--preset--color--tinta);
}

/* Rechazar no se esconde ni se disfraza de enlace: mismo tamaño y misma
   zona de pulsación que aceptar. */
.aviso-cookies__boton--rechazar {
	border: 1px solid var(--wp--preset--color--tinta);
	background: transparent;
	color: var(--wp--preset--color--tinta);
}

.aviso-cookies__boton--rechazar:hover {
	background: var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--papel);
}

@media (max-width: 781px) {
	.aviso-cookies {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.aviso-cookies__acciones {
		justify-content: center;
	}

	.aviso-cookies__boton {
		flex: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aviso-cookies { animation: none; }
	.aviso-cookies__boton { transition: none; }
}

/* ------------------------------------------------------------------
   Página 404
   La fotografía va dentro del tema, no en la biblioteca de medios: las
   plantillas son ficheros y el reemplazo de dominio del despliegue no
   las toca, asi que una URL absoluta aqui quedaria apuntando a local.
   ------------------------------------------------------------------ */

.perdido {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: min(66vh, 620px);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	background-image:
		linear-gradient(rgba(26, 22, 20, 0.62), rgba(26, 22, 20, 0.62)),
		url("img/404-cartel.jpg");
	background-size: cover;
	background-position: center 58%;
	color: var(--wp--preset--color--papel);
	text-align: center;
}

.perdido__codigo {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.26em;
	text-transform: uppercase;
}

.perdido__titulo {
	max-width: 18ch;
	margin: 0;
	color: var(--wp--preset--color--papel);
	font-size: clamp(1.9rem, 4vw, 3.4rem);
	line-height: 1.1;
	text-wrap: balance;
}

.perdido__texto {
	max-width: 46ch;
	margin: var(--wp--preset--spacing--30) 0 0;
	color: rgba(255, 255, 255, 0.86);
}

.perdido__accion {
	margin-top: var(--wp--preset--spacing--40);
}

/* Enlaces de rescate: separados por una fina línea vertical. */
.perdido__enlaces {
	gap: 0 !important;
}

.perdido__enlaces p {
	margin: 0;
	padding: 0.2em var(--wp--preset--spacing--30);
	border-left: 1px solid #DED7CC;
}

.perdido__enlaces p:first-child {
	border-left: 0;
}

.perdido__enlaces a {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
}

.perdido__enlaces a:hover {
	color: var(--wp--preset--color--burdeos);
	text-decoration: underline;
}

@media (max-width: 781px) {
	.perdido__enlaces p {
		border-left: 0;
		padding-block: 0.35em;
		flex-basis: 100%;
		text-align: center;
	}
}

/* ------------------------------------------------------------------
   Recorte de fotografías en pantallas estrechas
   Las fotos del paraje son apaisadas. En movil, una caja alta y estrecha
   recortaba mas de la mitad de la imagen y no se reconocia el motivo.
   ------------------------------------------------------------------ */

@media (max-width: 781px) {
	/* Tarjetas de la portada: de caja vertical a apaisada.
	   El bloque de portada escribe en linea `aspect-ratio: unset` junto a su
	   min-height, y un estilo en linea gana a la hoja: de ahi el !important. */
	.destino {
		min-height: 0 !important;
		aspect-ratio: 4 / 3 !important;
	}

	/* Portadas a sangre: se limita la altura para que no se vuelvan
	   verticales. Sigue habiendo recorte, que es lo propio de un hero,
	   pero deja de comerse los lados de la escena. */
	.wp-block-cover.alignfull {
		min-height: min(52vh, 78vw) !important;
	}

	/* El cartel del 404 comparte el mismo criterio. */
	.perdido {
		min-height: min(52vh, 78vw);
	}
}

/* ------------------------------------------------------------------
   Imágenes dentro de las entradas
   ------------------------------------------------------------------ */

/* La imagen destacada abria las entradas ocupando casi 1180x970 px: una
   pared que empujaba el texto fuera de la pantalla. Se le fija proporción
   para que acompane en vez de dominar. */
.wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Las imagenes heredadas del editor antiguo traen ancho y alto fijos en el
   propio HTML (una llegaba a 1600 px dentro de un viewport de 390) y los
   [caption] arrastran un ancho en linea. Se neutraliza todo. */
.wp-block-post-content .wp-caption,
.entry-content .wp-caption,
.wp-block-post-content figure,
.entry-content figure {
	max-width: 100% !important;
	width: auto !important;
	height: auto;
}

.wp-block-post-content .wp-caption-text,
.entry-content .wp-caption-text {
	margin-top: 0.6em;
	color: var(--wp--preset--color--sarmiento);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

/* La imagen flotada de las entradas antiguas no cabe en movil. */
@media (max-width: 600px) {
	.wp-block-post-content .alignleft,
	.wp-block-post-content .alignright,
	.entry-content .alignleft,
	.entry-content .alignright {
		float: none;
		display: block;
		margin-inline: auto;
	}
}

/* ------------------------------------------------------------------
   Banda de la vendimia (portada)
   Las cuatro fotos que estaban en la cabecera de la web antigua, en una
   franja continua a sangre. Sin separacion entre ellas: se leen como una
   sola imagen larga.
   ------------------------------------------------------------------ */

.banda-vendimia {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}

.banda-vendimia .wp-block-image {
	margin: 0;
	overflow: hidden;
}

.banda-vendimia .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.banda-vendimia .wp-block-image:hover .wp-block-image img,
.banda-vendimia .wp-block-image:hover img {
	transform: scale(1.06);
}

/* En pantallas estrechas, dos y dos: cuatro en fila dejarian tiras
   de 90 px en las que no se distingue nada. */
@media (max-width: 781px) {
	.banda-vendimia {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.banda-vendimia img { transition: none; }
	.banda-vendimia .wp-block-image:hover img { transform: none; }
}

/* ------------------------------------------------------------------
   Galerías
   El bloque de galería de WordPress reparte el ancho con flex y confía
   en la altura natural de cada fotografía, así que con imágenes de
   proporciones distintas cada una crece a su aire. Aquí se fija una
   rejilla con proporción constante: todas recortadas igual y alineadas.
   ------------------------------------------------------------------ */

.wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--20, 0.75rem);
}

@media (min-width: 700px) {
	.wp-block-gallery.has-nested-images.columns-3 { grid-template-columns: repeat(3, 1fr); }
	.wp-block-gallery.has-nested-images.columns-4 { grid-template-columns: repeat(4, 1fr); }
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
	width: auto;
	margin: 0;
}

.wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* ------------------------------------------------------------------
   Enoturismo en la portada

   Tres columnas: titular, escena de fotografias y ficha practica. La
   escena no es una sola imagen plana sino tres planos superpuestos
   (circulo de fondo, fotografia principal que va rotando y un detalle
   montado encima), que es lo que le da profundidad. El precio no se
   publica: se consulta al reservar.
   ------------------------------------------------------------------ */

.wp-block-group.experiencia {
	padding-block: var(--wp--preset--spacing--70);
	padding-inline: var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--70);
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	max-width: none;
}

@media (min-width: 1000px) {
	.wp-block-group.experiencia {
		grid-template-columns: 1fr 1.05fr 1fr;
		gap: var(--wp--preset--spacing--60);
		padding-inline: var(--wp--preset--spacing--60);
	}
}

.experiencia > * {
	margin: 0;
	min-width: 0;
}

/* --- Etiquetas en pildora ------------------------------------------ */

.etiqueta {
	display: inline-block;
	margin: 0;
	padding: 0.4em 1.1em;
	border: 1px solid rgba(110, 101, 92, 0.35);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	color: var(--wp--preset--color--sarmiento);
}

.etiqueta--marca {
	border-color: var(--wp--preset--color--burdeos);
	color: var(--wp--preset--color--burdeos);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.experiencia__titulo h2 {
	margin: var(--wp--preset--spacing--30) 0 0;
	text-wrap: balance;
}

/* --- Escena de fotografias ------------------------------------------ */

.eno-visitas__escena {
	position: relative;
	/* Deja sitio al detalle, que sobresale por abajo y por la izquierda. */
	padding: 0 0 3rem 2rem;
}

/* La forma organica del fondo. Puramente decorativa, de ahi que sea un
   pseudoelemento y no una imagen. */
.eno-visitas__escena::before {
	content: "";
	position: absolute;
	top: -8%;
	right: -6%;
	width: 78%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgba(139, 64, 73, 0.1);
	z-index: 0;
}

.eno-visitas__pista {
	position: relative;
	z-index: 1;
	display: grid;
	overflow: hidden;
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(26, 22, 20, 0.14);
}

.eno-visitas__foto {
	grid-area: 1 / 1;
	margin: 0;
}

.eno-visitas__foto img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Sin JavaScript no hay nada que vaya pasando las fotografias, asi que
   solo se muestra la primera en lugar de apilarlas todas. */
.eno-visitas:not(.tiene-script) .eno-visitas__foto:not(:first-child) {
	display: none;
}

.eno-visitas.tiene-script .eno-visitas__foto {
	opacity: 0;
	transition: opacity 0.9s ease;
}

.eno-visitas.tiene-script .eno-visitas__foto.es-visible {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.eno-visitas.tiene-script .eno-visitas__foto {
		transition: none;
	}
}

/* El detalle monta sobre la esquina inferior izquierda. El filete claro
   lo despega de la fotografia de debajo. */
/* El selector lleva el contenedor delante a proposito. La regla generica
   que normaliza las imagenes heredadas del editor antiguo es
   `.wp-block-post-content figure { width: auto !important }`, con dos
   clases de especificidad: una sola clase aqui perdia aunque tambien
   llevara !important y estuviera mas abajo. */
.wp-block-post-content .eno-visitas__detalle,
.entry-content .eno-visitas__detalle {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	width: 48% !important;
	max-width: 48% !important;
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	border: 6px solid var(--wp--preset--color--crema);
	box-shadow: 0 14px 30px rgba(26, 22, 20, 0.18);
}

.eno-visitas__detalle img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.eno-visitas__puntos {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--30);
}

.eno-visitas__punto {
	width: 1.6rem;
	height: 0.25rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(110, 101, 92, 0.3);
	cursor: pointer;
	transition: background 0.25s ease, width 0.25s ease;
}

.eno-visitas__punto[aria-current="true"] {
	width: 2.6rem;
	background: var(--wp--preset--color--burdeos);
}

/* --- Ficha practica ------------------------------------------------- */

.experiencia__ficha > p:first-child {
	margin-top: 0;
}

.experiencia__etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--40);
}

.experiencia__etiquetas > * {
	margin: 0;
}

/* --- Movil ---------------------------------------------------------- */

@media (max-width: 999px) {
	.eno-visitas__escena {
		max-width: 28rem;
		margin-inline: auto;
	}

	.experiencia__titulo,
	.experiencia__ficha {
		max-width: 34rem;
		margin-inline: auto;
	}
}

@media (max-width: 480px) {
	.eno-visitas__escena {
		padding-bottom: 3.5rem;
	}
}