/* Portada, Nosotros, Viñedos, Contacto.
   La tienda y la ficha siguen el padre. */

.junciera-portada,
.junciera-hoja {
	background: #f3eee4;
	color: #1a1814;
}

.junciera-hoja.sgf-site-main,
.junciera-portada.sgf-site-main {
	padding-top: 0;
}

.junciera-kicker {
	margin: 0 0 0.75rem;
	font-family: var(--sgf-font-body);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #2c3820;
}

.junciera-display {
	margin: 0;
	font-family: var(--sgf-font-display);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: #1a1814;
}

.junciera-display--xl {
	font-size: clamp(2rem, 3vw, 2.75rem);
	max-width: 16em;
}

.junciera-display--l {
	font-size: clamp(1.5rem, 2vw, 2rem);
	line-height: 1.2;
	letter-spacing: -0.015em;
	max-width: 18em;
}

.junciera-display--m {
	margin-bottom: 0.85rem;
	font-size: 1.25rem;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.junciera-prosa {
	max-width: 38rem;
	font-family: var(--sgf-font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: #3a342c;
}

.junciera-prosa p {
	margin: 0 0 1rem;
}

.junciera-prosa strong {
	font-weight: 500;
	color: #1a1814;
}

.junciera-prosa--lead {
	margin-top: 1.25rem;
	font-size: 1.125rem;
	line-height: 1.55;
}

.junciera-marco {
	padding: clamp(3rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3.5rem);
}

.junciera-marco--cita {
	padding-top: clamp(2rem, 4vw, 3rem);
	padding-bottom: clamp(2rem, 5vw, 4rem);
}

.junciera-marco--corto {
	padding-top: 0;
}

.junciera-marco--cierre {
	padding-top: clamp(2.5rem, 5vw, 4rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.junciera-medida {
	max-width: 76rem;
	margin-inline: auto;
}

.junciera-mast .junciera-display--xl {
	max-width: 16em;
}

.junciera-columna {
	max-width: 40rem;
}

.junciera-enlace {
	display: inline-block;
	margin-top: 0.85rem;
	padding-bottom: 0.2rem;
	border-bottom: 1px solid rgb(44 56 32 / 0.45);
	font-family: var(--sgf-font-body);
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #2c3820;
	text-decoration: none;
}

.junciera-enlace:hover {
	border-bottom-color: #1a1814;
	color: #1a1814;
}

.junciera-sangre,
.junciera-partido__foto,
.junciera-duo figure,
.junciera-tira figure,
.junciera-marca {
	margin: 0;
}

.junciera-sangre img {
	display: block;
	width: 100%;
	height: min(78vh, 48rem);
	object-fit: cover;
	object-position: center;
}

.junciera-sangre.wp-block-image {
	margin: 0;
}

.junciera-portada .junciera-marco {
	padding-block: clamp(5rem, 10vh, 8rem);
}

.junciera-apertura {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4.5rem);
}

.junciera-apertura__cuerpo {
	max-width: 34rem;
}

.junciera-marca {
	width: min(100%, 18rem);
	justify-self: end;
	aspect-ratio: 1;
	overflow: hidden;
	background: #2c3820;
}

.junciera-marca img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.junciera-sala__cabecera {
	max-width: 38rem;
	margin-bottom: 0;
}

.junciera-sala__cabecera + .junciera-sala__cabecera {
	margin-top: 2.5rem;
}

.junciera-partido {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}

.junciera-partido--texto {
	grid-template-columns: 0.9fr 1.1fr;
}

.junciera-partido__foto img {
	display: block;
	width: 100%;
	height: min(72vh, 40rem);
	object-fit: cover;
}

.junciera-partido .junciera-display {
	margin-bottom: 1.25rem;
}

.junciera-cifras {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 8rem));
	gap: 1.5rem 2rem;
	margin: 3rem 0 0;
	padding: 1.6rem 0 0;
	border-top: 1px solid rgb(26 24 20 / 0.16);
	list-style: none;
}

.junciera-cifras strong {
	display: block;
	font-family: var(--sgf-font-display);
	font-weight: 500;
	font-size: 1.75rem;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: #1a1814;
}

.junciera-cifras span {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--sgf-font-body);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #5e584f;
}

.junciera-sentencia {
	max-width: 22em;
	margin: 0;
	padding: clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3.5rem);
	font-family: var(--sgf-font-display);
	font-weight: 500;
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.junciera-duo {
	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
	gap: 0.55rem;
}

.junciera-duo img,
.junciera-tira img {
	display: block;
	width: 100%;
	object-fit: cover;
}

.junciera-duo img {
	height: min(78vh, 42rem);
}

.junciera-tira {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.4rem;
}

.junciera-tira img {
	aspect-ratio: 1;
	height: auto;
}

.junciera-uvas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.5rem;
	margin: 1.75rem 0 1.75rem;
	padding: 0;
	list-style: none;
}

/* ...salvo cuando la lista ES una columna de un bloque.
   Los 1.75rem de arriba son para cuando va metida entre parrafos y
   necesita despegarse de ellos. Como columna de `.sgf-dos` no tiene
   nada encima de lo que despegarse: lo unico que hace ese margen es
   bajarla 28px respecto a la columna de al lado, en un bloque que
   declara `align-items: start`. La alineacion que pide el bloque
   dejaba de cumplirse y no se veia por que.

   El padre ya lo previene con `.sgf-dos > * { margin: 0 }`, pero las
   dos reglas pesan igual (0,1,0) y casa.css carga despues, asi que
   ganaba esta. Se arregla aqui, que es donde se introdujo el choque. */
.sgf-dos > .junciera-uvas,
.sgf-grid > .junciera-uvas {
	margin-block: 0;
}

.junciera-uvas li {
	font-family: var(--sgf-font-display);
	font-weight: 500;
	font-size: 1.125rem;
	letter-spacing: -0.015em;
}

.junciera-pasos {
	max-width: 36rem;
	margin: 2.25rem 0 0;
	padding: 0;
	list-style: none;
}

.junciera-pasos li {
	display: grid;
	grid-template-columns: 6.5rem 1fr;
	gap: 1rem;
	align-items: baseline;
	padding: 0.9rem 0;
	border-top: 1px solid rgb(26 24 20 / 0.14);
	font-size: 1rem;
	line-height: 1.4;
}

.junciera-pasos li:last-child {
	border-bottom: 1px solid rgb(26 24 20 / 0.14);
}

.junciera-pasos b {
	font-family: var(--sgf-font-body);
	font-weight: 400;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #5e584f;
}

.junciera-visita {
	max-width: 40rem;
}

.junciera-telefono {
	display: inline-block;
	margin: 1.25rem 0 0.5rem;
	font-family: var(--sgf-font-display);
	font-weight: 500;
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: #1a1814;
	text-decoration: none;
}

.junciera-telefono:hover {
	color: #2c3820;
}

.junciera-correo {
	color: #2c3820;
	text-underline-offset: 0.2em;
}

.junciera-horas {
	max-width: 22rem;
	margin-top: 2.5rem;
}

.junciera-horas div {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.8rem 0;
	border-top: 1px solid rgb(26 24 20 / 0.14);
	font-size: 0.95rem;
}

.junciera-horas div:last-child {
	border-bottom: 1px solid rgb(26 24 20 / 0.14);
}

.junciera-siguientes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem 1.75rem;
}

.junciera-siguientes a {
	font-family: var(--sgf-font-body);
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #5e584f;
	text-decoration: none;
}

.junciera-siguientes a[aria-current="page"],
.junciera-siguientes a:hover {
	color: #1a1814;
}

@media (max-width: 860px) {
	.junciera-partido,
	.junciera-partido--texto,
	.junciera-duo {
		grid-template-columns: 1fr;
	}

	.junciera-tira {
		grid-template-columns: 1fr 1fr;
	}

	.junciera-marca {
		justify-self: start;
		width: min(100%, 14rem);
	}

	.junciera-sangre img,
	.junciera-partido__foto img,
	.junciera-duo img {
		height: auto;
		aspect-ratio: 4 / 5;
	}

	.junciera-partido--texto .junciera-partido__foto {
		order: -1;
	}

	.junciera-cifras {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ═══════════════════════════════════════════════════════════
   EL FORMULARIO DE CONTACTO
   ═══════════════════════════════════════════════════════════ */

.junciera-form {
	margin-top: 4rem;
	padding-top: 3rem;
	border-top: 1px solid rgb(26 24 20 / 0.14);
}

.junciera-form__campos {
	margin-top: 2rem;
}

.junciera-form__campo {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
}

.junciera-form__campo label {
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #5e584f;
}

.junciera-form__campo input,
.junciera-form__campo textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	color: #1a1814;
	background: transparent;
	border: 1px solid rgb(26 24 20 / 0.24);
	border-radius: var(--sgf-radius-md, 2px);
	transition: border-color 0.2s ease;
}

.junciera-form__campo textarea {
	resize: vertical;
	min-height: 9rem;
}

.junciera-form__campo input:focus,
.junciera-form__campo textarea:focus {
	outline: none;
	border-color: #1a1814;
}

/* EL CAMPO TRAMPA NO SE VE Y NO SE ANUNCIA
   ---------------------------------------
   `display: none` no sirve: hay robots que precisamente buscan los
   campos ocultos de esa forma y los dejan vacíos. Se saca de la
   pantalla, que para el ojo es lo mismo y para ellos no. El
   `aria-hidden` del párrafo lo tapa para los lectores de pantalla. */
.junciera-form__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.junciera-form__aviso {
	margin: 1.5rem 0 0;
	padding: 0.9rem 1.1rem;
	font-size: 0.95rem;
	line-height: 1.5;
	border-radius: var(--sgf-radius-md, 2px);
}

.junciera-form__aviso--ok {
	color: #1a1814;
	background: rgb(44 56 32 / 0.08);
	border: 1px solid rgb(44 56 32 / 0.24);
}

.junciera-form__aviso--mal {
	color: #1a1814;
	background: rgb(61 0 0 / 0.06);
	border: 1px solid rgb(61 0 0 / 0.24);
}

.junciera-form__pie {
	margin: 0;
}

/* ─── El cierre del pie ────────────────────────────────────────
   La fila de abajo del padre es una rejilla de tres —legal,
   redes, copyright— pensada para cuando los tres llevan algo.
   Aquí las redes y el copyright van vacíos y entra la marca, así
   que la fila pasa a ser dos bloques: la marca a la izquierda y
   lo legal a la derecha.

   El `:has()` no es adorno: si algún día se quita el gancho de la
   marca, esta regla deja de aplicar sola y el pie vuelve a ser el
   del padre. Un cambio que se desactiva solo cuando ya no hace
   falta es un cambio que no hay que acordarse de deshacer. */

.sgf-footer__bottom:has(.junciera-pie-marca) {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem 2rem;
}

/* El copyright del padre se pinta siempre, aunque esté vacío —y aquí
   lo está—. Vacío seguiría ocupando sitio en el reparto del flex y
   empujaría lo legal fuera de la derecha. */
.sgf-footer__bottom:has(.junciera-pie-marca) .sgf-footer__legal:empty {
	display: none;
}

.junciera-pie-marca {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}

/* El SVG viene con `currentColor`, así que el color lo pone el pie:
   sobre el granate sale blanco sin que nadie escriba «blanco». */
.junciera-pie__logo {
	display: block;
	width: auto;
	height: 26px;
}

/* La firma va callada: es un crédito, no una llamada. Se apaga con
   `opacity` y no con un color más claro porque el pie puede cambiar
   de fondo y un gris elegido a mano solo vale para un fondo. */
.junciera-pie-marca__sello {
	margin: 0;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 0.01em;
	text-transform: none;
	color: inherit;
	opacity: 0.55;
	transition: opacity 160ms ease-out;
}

/* El nombre, en la romana de la casa y en cursiva. Es lo único de todo
   el pie que se permite otra letra, y por eso funciona: una firma se
   lee como firma cuando no está escrita con la misma mano que el resto.
   Light porque de SangBleu solo tenemos ese corte —pedirle un peso que
   no existe emborrona el fino de la romana—.

   Y sin subrayado: en una línea de 12px una raya debajo es una mancha.
   El enlace se nota al pasar, no por llevar adorno encima. */
.junciera-pie-marca__sello a {
	font-family: var(--sgf-font-display);
	font-style: italic;
	font-weight: 300;
	font-size: 13px;
	letter-spacing: 0.01em;
	color: inherit;
	text-decoration: none;
}

/* El `:has()` enciende desde el párrafo, que es quien lleva la
   opacidad: un hijo no puede deshacer la transparencia de su padre. */
.junciera-pie-marca__sello:has(a:hover),
.junciera-pie-marca__sello:has(a:focus-visible) {
	opacity: 1;
}

.sgf-footer__bottom:has(.junciera-pie-marca) .sgf-footer__legal-menu {
	justify-content: flex-end;
	text-align: right;
}

@media (max-width: 767px) {

	.sgf-footer__bottom:has(.junciera-pie-marca) {
		align-items: flex-start;
		gap: 1.5rem;
	}

	.sgf-footer__bottom:has(.junciera-pie-marca) .sgf-footer__legal-menu {
		justify-content: flex-start;
		text-align: left;
	}
}

/* ─── Contacto: los datos y el formulario, lado a lado ───────

   Iban uno debajo del otro en una columna de 40rem centrada, con la
   mitad derecha de la pantalla vacía y 3.113px de scroll para decir
   una dirección, un teléfono, un horario y cuatro campos.

   En movil siguen apilados, que es lo unico que cabe. Desde 900px se
   reparten: los datos a la izquierda —son cortos y se leen de un
   vistazo— y el formulario a la derecha, que es lo que ocupa.

   `align-items: start` para que el formulario no estire la columna de
   los datos: si no, el horario se separaria del telefono por un hueco
   que no significa nada. */

.junciera-contacto {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: start;
}

.junciera-contacto__datos,
.junciera-contacto__formulario {
	min-width: 0;
}

@media (min-width: 900px) {

	.junciera-contacto {
		/* El formulario pide algo mas de sitio: lleva campos y un boton,
		   y los datos solo lineas cortas. */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		gap: clamp(3rem, 6vw, 6rem);
	}
}

/* Lo que acotaba `.junciera-visita` a 40rem lo hace ahora la columna.
   Dentro de la rejilla, un ancho maximo propio volveria a dejar el
   hueco a la derecha que esto viene a quitar. */
.junciera-contacto .junciera-horas {
	max-width: none;
}