/**
 * Giorno (Editor visual) — hoja de estilos del diseño.
 *
 * Los bloques de las plantillas (templates/*.html, parts/*.html) llevan
 * SOLO una clase CSS, sin atributos de "style" en el JSON del bloque. Todo
 * el aspecto visual (colores, tipografías, espaciados) vive aquí, igual que
 * en el tema clásico "giorno/". Esto es deliberado: cuando un bloque estático
 * (Group, Columns, Heading, Paragraph...) lleva atributos de estilo en el
 * JSON, el editor de bloques a veces no logra reconstruir exactamente el
 * mismo HTML al volver a abrirlo, y marca el bloque como "contenido
 * inesperado". Con solo una clase, no hay nada que reconstruir: el bloque
 * vuelve a abrir siempre igual.
 *
 * Las reglas usan selectores específicos en vez de "!important", a propósito:
 * así lo que cambies desde la barra lateral del editor (color, tamaño de
 * letra, relleno, alineación) gana a este archivo en vez de quedar bloqueado.
 * El texto, el orden de las secciones y los estilos se editan con normalidad.
 */

:root {
	--arena: #c29f6e;
	--arena-s: #a8885a;
	--negro: #131117;
	--blanco: #ffffff;
	--crema: #f7f4ef;
	--crema-s: #ede9e1;
	--texto: #1a1a1a;
	--texto-s: #7a7571;
	--borde: #e5e1da;
	--display: Georgia, 'Times New Roman', serif;
	--body: 'DM Sans', system-ui, sans-serif;
	--gap: clamp(20px, 4vw, 60px);
}

/* Mismo reset que el tema clasico. Sin esto, el relleno se suma al ancho en
   vez de ir por dentro, y las columnas del hero y de la seccion de filosofia
   quedan desiguales (775/632 en vez de 704/704). */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 58px; }
a { color: inherit; }

/* WordPress separa 24px las secciones de primer nivel de la plantilla. En
   este diseño las bandas van pegadas (hero, franja, catalogo, banner…), asi
   que se anula ese hueco; cada seccion pone su propio relleno. */
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }

/* La insignia va en la esquina inferior derecha del hero, como en el diseño.
   Se coloca contra el bloque entero (no contra la columna de texto), asi que
   se queda ahi tanto si hay video de fondo como si no. */
.giorno-hero-badge {
	position: absolute;
	bottom: 20px;
	right: 20px;
	z-index: 3;
	margin: 0;
	background: var(--negro);
	color: var(--arena);
	font-size: 9px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 5px 12px;
}
/* Titulo, parrafo y botones del hero: identicos a como estaban con el
   diseño de dos columnas. */
.giorno-hero-copy { position: relative; z-index: 1; }
.giorno-hero-title {
	font-family: var(--display);
	font-size: clamp(38px, 5vw, 68px);
	font-weight: 300;
	line-height: 1.03;
	color: var(--blanco);
	margin-bottom: 20px;
	max-width: none;
}
.giorno-hero-title em { font-style: italic; color: var(--arena); }
.giorno-hero-body {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.3);
	line-height: 1.8;
	max-width: 320px;
	margin-bottom: 36px;
}
.giorno-hero-ctas { gap: 8px; }

/* theme.json fija un interlineado global de 1.6, que va bien para el texto
   corrido de las paginas y del blog. Los rotulos pequeños del diseño (menu,
   etiquetas, enlaces del pie) usan el interlineado natural, como el original. */
.giorno-ticker,
.giorno-nav-links,
.giorno-nav-actions,
.giorno-hero-eyebrow,
.giorno-hero-badge,
.giorno-strip-item,
.giorno-sec-label,
.giorno-ver-todo,
.giorno-col-eyebrow,
.giorno-filo-valor,
.giorno-footer-col h4,
.giorno-footer-col p,
.giorno-footer-col a,
.giorno-footer-bottom,
.giorno-footer-bottom p,
.giorno-breadcrumb {
	line-height: normal;
}

/* ==========================================================================
   TICKER
   ========================================================================== */
.giorno-ticker {
	background: var(--negro);
	color: rgba(255, 255, 255, 0.35);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 9px 0;
	overflow: hidden;
	white-space: nowrap;
}
.giorno-ticker .giorno-ticker-track {
	display: inline-flex;
	flex-wrap: nowrap;
	width: max-content;
	/* Sin "gap" a proposito, ver la nota de abajo. */
	gap: 0;

	/* La velocidad se fija por copia, no por vuelta entera. La animacion
	   recorre la mitad de la pista, asi que con 8 copias recorre 4 y con 2
	   recorre 1: si la duracion fuera fija, el letrero iria cuatro veces mas
	   rapido solo por haber añadido copias. Multiplicando por el numero de
	   copias (que inyecta inc/ticker.php) la velocidad sale siempre la misma.

	   Para que pase mas despacio, sube estos segundos. Para que vaya mas
	   rapido, bajalos. 24s por copia es el ritmo del diseño original. */
	--giorno-ticker-segundos-por-copia: 24s;
	animation: giorno-ticker-scroll linear infinite;
	animation-duration: calc(
		var(--giorno-ticker-segundos-por-copia) * var(--giorno-ticker-copias, 2) / 2
	);
}
.giorno-ticker p {
	line-height: normal;
	margin: 0;
	/* Cada copia del texto va en una sola linea; el bucle se consigue
	   desplazando el conjunto, no partiendo el texto. */
	white-space: nowrap;
	flex: 0 0 auto;

	/* La separacion entre copias va DENTRO de cada copia, no como "gap" de la
	   pista. Es la clave para que el bucle no de el tiron:

	   la animacion desplaza la pista un -50%, y para que el salto sea invisible
	   ese 50% tiene que medir exactamente lo mismo que una copia. Con "gap" la
	   pista mide copia + 48 + copia, asi que la mitad se queda 24px corta y se
	   nota el reinicio. Metiendo los 48px en cada copia, la pista mide
	   (copia+48) x 2 y la mitad encaja al pixel. */
	padding-right: 48px;
}
/* Las dos frases resaltadas del original van en color arena, no en cursiva. */
.giorno-ticker em {
	color: var(--arena);
	font-style: normal;
}
@keyframes giorno-ticker-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* ==========================================================================
   CABECERA
   ========================================================================== */
.giorno-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 0.5px solid var(--borde);
	padding: 0 var(--gap);
	/* Altura minima, no fija: si agrandas el logo desde el editor la
	   cabecera crece con el en vez de recortarlo. */
	min-height: 58px;
}
/* La cabecera la coloca el propio bloque Grupo en modo "flex" (lo eliges en la
   barra lateral), no un grid con columnas fijas. Es a proposito: con columnas
   fijas cada bloque quedaba clavado a su columna y arrastrarlo en el editor no
   cambiaba nada. Asi el orden visual sigue al orden real de los bloques.
   Las dos mitades exteriores crecen por igual, de modo que el logo queda
   centrado sea cual sea el ancho del menu. */
.giorno-header > .giorno-nav-links,
.giorno-header > .giorno-nav-actions { flex: 1 1 0; }
.giorno-header > .giorno-nav-logo { flex: 0 0 auto; }

/* Sin "min-width: 0" a proposito. El original usa un grid de "1fr auto 1fr", y
   una columna 1fr nunca se encoge por debajo de su contenido. En flex hay que
   dejar el minimo automatico para conseguir lo mismo: si se pone a cero, el
   menu se comprime y los enlaces se parten en dos o tres lineas que se salen
   de los 58px de la cabecera. */

/* El original no deja hueco entre las tres partes (el grid no lleva "gap");
   la separacion la ponen los propios enlaces y los iconos por dentro. */
header.giorno-header { gap: 0; }

/* Los enlaces van siempre en una sola linea, como en el original. */
.giorno-header .wp-block-navigation__container { flex-wrap: nowrap; }

/* WordPress cambia a menu de hamburguesa por debajo de 600px. Aqui se sube ese
   limite a 1280px, que es el ancho a partir del cual los siete enlaces (511px)
   caben en su mitad de la cabecera sin empujar al logo fuera del centro.

   Por debajo de 1280 no hay sitio: ni siquiera juntando los enlaces sin
   separacion caben a 800px (necesitan 318px y solo hay 303). El diseno
   original tampoco lo resuelve — ahi parte "Vida en Cabo" en tres renglones y
   la cabecera se desborda. Con la hamburguesa el logo queda centrado y la
   cabecera limpia en todos los anchos. */
@media (min-width: 600px) and (max-width: 1279.98px) {
	.giorno-header .giorno-nav-links > .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
	.giorno-header .giorno-nav-links > .wp-block-navigation__responsive-container-open { display: flex; }
}
.admin-bar .giorno-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .giorno-header { top: 46px; }
}

/* Los valores del diseño van en el <li>, no en el <a>.
   Cuando eliges un enlace del menú y le cambias el tamaño o el color desde la
   barra lateral, WordPress pone su clase en el <li>, pero el texto lo pinta el
   <a> de dentro. Si el tamaño se fijara sobre el <a>, ese ajuste no se vería:
   el <li> crecería y el texto seguiría igual. Poniendolo en el <li> y
   heredandolo en el <a>, lo que elijas en el editor se aplica de verdad. */
.giorno-nav-links .wp-block-navigation__container,
.giorno-nav-links .wp-block-navigation-item {
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--texto-s);
}
.giorno-nav-links .wp-block-navigation-item a {
	font-size: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
}
.giorno-nav-links .wp-block-navigation-item a:hover { color: var(--negro); }

/* Red de seguridad, por si el icono de cuenta llega a colarse igualmente (por
   ejemplo si ya quedo guardado dentro de una cabecera editada a mano). Lo que
   de verdad lo evita es el filtro de inc/bloques-enganchados.php. */
.giorno-header > .wp-block-woocommerce-customer-account { display: none; }

/* Los rotulos de varias palabras ("Vida en Cabo") no se parten nunca. Ademas
   de ser lo correcto visualmente, es lo que mantiene la cabecera en una sola
   linea: el ancho minimo de un elemento flexible se calcula con el texto ya
   partido, asi que sin esto el menu se deja comprimir hasta que "Vida en
   Cabo" cae a tres renglones y la cabecera crece. */
.giorno-nav-links .wp-block-navigation-item a { white-space: nowrap; }

/* --------------------------------------------------------------------------
   MENU MOVIL

   De serie, la capa del menu es "position: fixed" y deberia medirse contra la
   pantalla. Pero un elemento con backdrop-filter pasa a ser el marco de
   referencia de sus hijos posicionados, y la cabecera lleva desenfoque: la
   capa quedaba encerrada en sus 58px de alto y los enlaces se recortaban (el
   panel salia casi vacio y con barra de desplazamiento).

   Aqui la capa se convierte en un panel "position: absolute" colgado de la
   cabecera, que es justo lo que hace el diseno original. Asi el desenfoque
   deja de importar, y lo unico que hace falta es la regla de mas abajo.

   Esta primera regla ya no es necesaria para que funcione; se deja como red de
   seguridad, por si una version futura de WordPress cambia el armazon de la
   capa y esta vuelve a ser fija. Solo actua en el frontal, que es donde
   WordPress marca <html class="has-modal-open">.
   -------------------------------------------------------------------------- */
.has-modal-open .giorno-header {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* La pieza clave, y sin condiciones: el bloque Navegacion se pone "relative"
   por su cuenta, asi que el panel se mediria contra el, es decir contra los
   pocos pixeles que ocupa el icono de hamburguesa. Al dejarlo estatico, el
   panel pasa a medirse contra la cabecera y ocupa todo el ancho.

   No se condiciona a la clase "has-modal-open" porque esa la pone el guion del
   frontal (view.js) y el editor no la anade nunca: si dependiera de ella, el
   menu seguiria descuadrado al previsualizarlo dentro del editor.

   Es seguro dejarlo siempre: los submenus se colocan contra su propio <li>,
   que WordPress ya marca como "position: relative", no contra el <nav>. */
.giorno-header > .giorno-nav-links { position: static; }

/* Todo lo que sigue lleva ".is-menu-open", una clase que solo existe mientras
   el menu desplegable esta abierto. Por eso no hace falta encerrarlo en un
   punto de corte: funciona igual si cambias en el editor a partir de que
   ancho aparece la hamburguesa. */
	/* Panel desplegado bajo la cabecera, como en el diseño original, en lugar
	   de la capa a pantalla completa que trae WordPress de serie. */
	.giorno-header .wp-block-navigation__responsive-container.is-menu-open {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		bottom: auto;
		width: auto;
		padding: 20px var(--gap);
		background: var(--blanco);
		border-bottom: 0.5px solid var(--borde);
		z-index: 99;
		/* El original abre el menu sin transicion; ademas la animacion de
		   WordPress desplaza el panel unos pixeles mientras entra. */
		animation: none;
	}
	.giorno-header .is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 0;
		width: 100%;
	}
	.giorno-header .is-menu-open .wp-block-navigation__responsive-dialog,
	.giorno-header .is-menu-open .wp-block-navigation__responsive-close { width: 100%; }

	/* Los enlaces, uno por linea y separados por una raya fina. */
	.giorno-header .is-menu-open .wp-block-navigation__container {
		gap: 0;
		width: 100%;
		align-items: stretch;
	}
	.giorno-header .is-menu-open .wp-block-navigation-item { width: 100%; }
	.giorno-header .is-menu-open .wp-block-navigation-item a {
		display: block;
		width: 100%;
		font-size: 13px;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--texto-s);
		padding: 14px 0;
		border-bottom: 0.5px solid var(--borde);
	}
	.giorno-header .is-menu-open .wp-block-navigation-item:last-child a { border-bottom: none; }
	.giorno-header .is-menu-open .wp-block-navigation-item a:hover { color: var(--arena); }

	/* La aspa de cerrar, dentro del relleno del panel. */
	.giorno-header .is-menu-open .wp-block-navigation__responsive-container-close {
		top: -4px;
		right: 0;
		color: var(--texto-s);
	}

.giorno-nav-logo { display: flex; align-items: center; justify-content: center; }
/* El tamaño del logo lo manda el control "Ancho de la imagen" del editor.
   Antes aqui se fijaba "height: 36px; width: auto", y eso anulaba ese control:
   la caja del bloque crecia al mover el deslizador pero la imagen se quedaba
   igual. Ahora la imagen ocupa el ancho que se le diga y calcula su alto sola.
   El ancho de partida viene del propio bloque, en parts/header.html. */
/* WordPress envuelve el logo en un <a> que es "inline-block", asi que su ancho
   lo decide la propia imagen. Sin esto, el 100% de la imagen se calcula contra
   si misma y el deslizador no la hace crecer. */
/* El tamaño del logo lo decide el control "Ancho de la imagen" del editor, que
   WordPress traslada al atributo width de la propia imagen. Aqui no se le pone
   ni alto ni ancho: solo se deja que respete ese atributo y calcule el alto
   sola.

   Asi estaba mal antes, y de dos formas distintas:
     - con "height: 36px" el deslizador no hacia nada (el alto mandaba);
     - con "width: 100%" el logo del pie se estiraba a lo ancho de la columna,
       porque ahi es un bloque normal y el 100% se referia a la columna entera.
*/
.giorno-nav-logo a,
.giorno-footer-logo a { display: block; }

/* El contenedor se ajusta a la imagen. En la cabecera ya lo hacia solo (es un
   elemento flexible), pero en el pie es un bloque normal y se estiraba a lo
   ancho de toda la columna, arrastrando al logo con el. */
.giorno-nav-logo,
.giorno-footer-logo {
	width: fit-content;
	max-width: 100%;
}

.giorno-nav-logo img,
.giorno-nav-logo svg,
.giorno-nav-logo .custom-logo {
	/* Sin "width" a proposito. El ancho que eliges en el editor viaja en el
	   atributo width de la imagen, y ese atributo es solo una sugerencia: en
	   cuanto el CSS declara un ancho —aunque sea "auto"— la sugerencia se
	   descarta y la imagen vuelve a su tamaño de archivo. Por eso el logo del
	   pie salia a 484px, que es lo que mide el PNG. */
	height: auto;
	max-width: 100%;
	display: block;
}
.giorno-nav-logo .wp-block-site-title a {
	font-family: var(--display);
	font-size: 24px;
	font-weight: 300;
	font-style: italic;
	letter-spacing: 0.04em;
	color: var(--negro);
}

.giorno-nav-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 20px;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--texto-s);
}
/* La busqueda es solo la lupa, como en el original: el campo aparece al
   pulsarla en vez de ocupar sitio permanentemente en la cabecera. */
.giorno-nav-actions .wp-block-search__button {
	background: transparent;
	border: none;
	padding: 4px;
	color: var(--texto-s);
	min-width: 0;
}
.giorno-nav-actions .wp-block-search__button:hover { color: var(--negro); }
/* Los dos iconos de la cabecera miden 18px, como en el diseño original.
   Pero NO en pixeles fijos: van en "em", asi crecen y menguan con el tamaño de
   letra del bloque y el control "Tamaño de la fuente" del editor funciona
   sobre ellos. 1.8em sobre los 10px de base son exactamente esos 18px.

   Los botones toman el tamaño de letra de su bloque en vez de imponer el suyo;
   sin esto el ajuste del editor no llegaba al icono. Y hay que anular los
   minimos en pixeles: WordPress pone "min-width: 24px" a la lupa y WooCommerce
   deja el carrito a su tamaño natural, asi que sin esto uno sale mas grande
   que el otro y ninguno de los dos crece. */
.giorno-nav-actions .wp-block-search__button,
.giorno-nav-actions .wc-block-mini-cart__button {
	font-size: inherit;
	line-height: 1;
}
.giorno-nav-actions .wp-block-search__button svg,
.giorno-nav-actions .wc-block-mini-cart__button svg {
	width: 1.8em;
	height: 1.8em;
	min-width: 0;
	min-height: 0;
	fill: currentColor;
}
/* El globo del contador acompaña al icono en vez de crecer por su cuenta. */
.giorno-nav-actions .wc-block-mini-cart__badge {
	background: var(--arena);
	color: var(--negro);
	font-weight: 700;
	font-size: 0.9em;
	line-height: 1.5;
	min-width: 1.5em;
	height: 1.5em;
	padding: 0 0.4em;
	text-align: center;
}
.giorno-nav-actions .wp-block-search__input {
	border: 0.5px solid var(--borde);
	background: var(--blanco);
	font-family: var(--body);
	font-size: 12px;
	color: var(--texto);
	padding: 6px 10px;
}
/* Iconos del carrito con el mismo tamaño y color que la lupa. */
.giorno-nav-actions .wc-block-mini-cart__button {
	color: var(--texto-s);
	padding: 4px;
}
.giorno-nav-actions .wc-block-mini-cart__button:hover { color: var(--negro); }


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

   Es un bloque "Cover" y no dos columnas, a proposito: la Columna solo admite
   un color de fondo, mientras que Cover acepta imagen o VIDEO. Asi se puede
   poner el video de fondo desde el editor (seleccionar el hero > Reemplazar >
   subir el video) sin tocar codigo.

   La maquetacion del diseño se conserva: frase pequeña arriba, bloque de texto
   abajo a la izquierda y la insignia abajo a la derecha.
   ========================================================================== */
.giorno-hero {
	/* Negro solido mientras no haya video ni imagen de fondo. */
	background-color: var(--negro);
	position: relative;
	overflow: hidden;
}
@media (max-width: 768px) {
	.giorno-hero { min-height: 70svh; }
}

/* La franja arena del borde izquierdo, como en el original. */
.giorno-hero::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 2px;
	height: 100%;
	background: var(--arena);
	opacity: 0.4;
	z-index: 2;
}

/* El interior reparte: frase arriba, texto abajo. */
.giorno-hero .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: inherit;
	width: 100%;
	max-width: none;
	padding: clamp(36px, 5vw, 72px);
	gap: 0;
}

/* El texto ocupa la mitad izquierda, como en el diseño de dos columnas. */
.giorno-hero .giorno-hero-copy { max-width: 620px; }
@media (max-width: 900px) {
	.giorno-hero .giorno-hero-copy { max-width: none; }
}

/* El video o la imagen cubren todo el bloque sin deformarse. */
.giorno-hero video.wp-block-cover__video-background,
.giorno-hero img.wp-block-cover__image-background {
	object-fit: cover;
}

.giorno-hero-eyebrow {
	font-size: 9px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--arena);
	margin: 0;
	position: relative;
	z-index: 2;
}
.giorno-strip {
	background: var(--arena);
	padding: 12px var(--gap);
	gap: 28px;
}
.giorno-strip .giorno-strip-item {
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--negro);
	font-weight: 500;
}
.giorno-strip .giorno-strip-item + .giorno-strip-item::before {
	content: '·';
	color: rgba(19, 17, 23, 0.25);
	/* 16px como en el original, donde el separador es un <span> sin tamaño
	   propio que hereda el del body. Ademas de verse igual, es lo que da a la
	   franja su altura correcta. */
	font-size: 16px;
	margin-right: 28px;
}
@media (max-width: 640px) {
	.giorno-strip { gap: 8px 20px; }
	.giorno-strip .giorno-strip-item + .giorno-strip-item::before { content: none; }
}

/* ==========================================================================
   CATALOGO / GRID DE PRODUCTOS
   ========================================================================== */
.giorno-products-full { background: var(--crema); padding: var(--gap); }
.giorno-products-header { justify-content: space-between; align-items: flex-end; margin-bottom: 28px; gap: 12px; }
.giorno-sec-label { font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--arena); margin-bottom: 5px; }
.giorno-sec-title { font-family: var(--display); font-size: clamp(22px, 2.5vw, 36px); font-weight: 300; line-height: 1.15; }
.giorno-ver-todo { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-s); border-bottom: 0.5px solid var(--borde); padding-bottom: 2px; white-space: nowrap; }
.giorno-ver-todo:hover { color: var(--arena); border-color: var(--arena); }
.giorno-shop-header { margin-bottom: 28px; }
.giorno-breadcrumb { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-s); padding: var(--gap) var(--gap) 0; background: var(--crema); }
.giorno-pagination { margin-top: 32px; }

.giorno-product-grid ul.wc-block-product-template,
.giorno-product-grid { gap: 2px; }
.giorno-product-grid li.wc-block-product {
	background: var(--blanco);
	overflow: hidden;
}
.giorno-product-grid img { transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.giorno-product-grid li:hover img { transform: scale(1.04); }
.giorno-product-grid .wp-block-post-title,
.giorno-product-grid h3.wp-block-post-title {
	font-family: var(--display);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	margin: 14px 16px 4px;
}
.giorno-product-grid .wp-block-post-title a { color: var(--texto); }
.giorno-product-grid .wc-block-components-product-price,
.giorno-product-grid .wc-block-grid__product-price {
	font-size: 12px;
	font-weight: 500;
	color: var(--negro);
	margin: 0 16px 8px;
}
.giorno-product-grid .wc-block-components-product-button,
.giorno-product-grid .wp-block-woocommerce-product-button {
	margin: 0 16px 18px;
}
.giorno-product-grid .wc-block-components-product-button__button {
	font-size: 9px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 0;
	background: var(--negro);
	color: var(--blanco);
}
.giorno-product-grid .wc-block-components-product-button__button:hover { background: var(--arena); color: var(--negro); }

/* ==========================================================================
   BANNER DE COLECCION
   ========================================================================== */
.giorno-banner {
	position: relative;
	min-height: 60vh;
	overflow: hidden;
	background: linear-gradient(135deg, #2a1f0e 0%, #131117 50%, #1a1007 100%);
	padding: var(--gap);
}
.giorno-banner::before { content: ''; position: absolute; inset: 0; background: rgba(19, 17, 23, 0.5); }
.giorno-banner > * { position: relative; z-index: 2; }
.giorno-banner { gap: 0; }
.giorno-banner-content { text-align: center; max-width: 420px; }
.giorno-col-eyebrow { font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--arena); margin-bottom: 14px; max-width: none; }
.giorno-col-title { font-family: var(--display); font-size: clamp(40px, 7vw, 84px); font-weight: 300; line-height: 1; color: var(--blanco); margin-bottom: 14px; font-style: italic; max-width: none; }
.giorno-col-sub { font-size: 13px; color: rgba(255, 255, 255, 0.3); max-width: 360px; margin: 0 auto 28px; line-height: 1.7; }
.giorno-col-cta .wp-block-button__link {
	display: inline-block;
	padding: 12px 32px;
	border: 0.5px solid var(--arena);
	color: var(--arena);
	background: transparent;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border-radius: 0;
}
.giorno-col-cta .wp-block-button__link:hover { background: var(--arena); color: var(--negro); }

/* ==========================================================================
   FILOSOFIA
   ========================================================================== */
.giorno-filo { background: var(--negro); gap: 0; }
.giorno-filo-img {
	min-height: 460px;
	background: #1c1820;
	display: flex; align-items: center; justify-content: center;
}
.giorno-filo-placeholder { font-family: var(--display); font-size: 110px; font-weight: 300; color: rgba(194, 159, 110, 0.07); font-style: italic; margin: 0; }
.giorno-filo-content {
	padding: clamp(36px, 5vw, 72px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
}
/* La separacion la da el gap, como en el original; sin esto se suman ademas
   los margenes que WordPress pone por defecto a parrafos y titulares. */
.giorno-filo-content > * { margin-top: 0; margin-bottom: 0; }
/* Dentro del grupo "Por qué Giorno" + titular, la separacion es el margen de
   5px del rotulo, no el espaciado entre bloques de WordPress. */
.giorno-filo-content > .wp-block-group > * + * { margin-block-start: 0; }
.giorno-filo-label { color: var(--arena); }
.giorno-filo-title { font-family: var(--display); font-size: clamp(24px, 2.8vw, 38px); font-weight: 300; color: var(--blanco); line-height: 1.2; max-width: none; }
.giorno-filo-title em { font-style: italic; color: var(--arena); }
.giorno-filo-body { font-size: 13px; color: rgba(255, 255, 255, 0.28); line-height: 1.8; max-width: 360px; }
.giorno-filo-valores { gap: 9px; }
.giorno-filo-valor {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.3);
	margin: 0;
}

/* ==========================================================================
   MANIFIESTO
   ========================================================================== */
.giorno-manifiesto { background: var(--negro); padding: clamp(52px, 8vw, 92px) var(--gap); text-align: center; }
.giorno-man-quote { font-family: var(--display); font-size: clamp(26px, 3.5vw, 48px); font-weight: 300; font-style: italic; color: var(--blanco); max-width: 640px; margin: 0 auto 18px; line-height: 1.2; }
.giorno-man-quote em { color: var(--arena); font-style: normal; }
.giorno-man-sub { font-size: 13px; color: rgba(255, 255, 255, 0.22); max-width: 420px; margin: 0 auto 44px; line-height: 1.75; }
/* Selector mas especifico (no !important) para ganarle a la regla de WordPress
   que pone margen inferior 0 al ultimo bloque de un contenedor. Asi sigues
   pudiendo cambiar el margen desde la barra lateral si algun dia quieres. */
.giorno-manifiesto .giorno-man-sub { margin-bottom: 44px; }

/* ==========================================================================
   PIE DE PAGINA
   ========================================================================== */
.giorno-footer { background: var(--negro); border-top: 0.5px solid rgba(255, 255, 255, 0.04); padding: 40px var(--gap) 22px; }
/* Igual que el original: 2fr 1fr 1fr 1fr, no cuatro columnas iguales.
   Va con selector mas especifico (no !important) para ganarle a la regla
   `body .is-layout-flex{display:flex}` que WordPress aplica al bloque
   Columnas. Sin !important, sigue siendo modificable desde el editor. */
.giorno-footer .giorno-footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 32px;
	margin-bottom: 36px;
	max-width: none;
}
@media (max-width: 768px) {
	.giorno-footer .giorno-footer-grid { grid-template-columns: 1fr 1fr; }
}
.giorno-footer-logo img,
.giorno-footer-logo svg,
.giorno-footer-logo .custom-logo { height: auto; max-width: 100%; display: block; margin-bottom: 8px; }
.giorno-footer-tag { font-size: 12px; color: rgba(255, 255, 255, 0.18); line-height: 1.6; max-width: 210px; }
.giorno-footer-col h4 {
	font-family: var(--body);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--arena);
	margin-bottom: 12px;
}
.giorno-footer-col h2,
.giorno-footer-col h3,
.giorno-footer-col .wp-block-heading:not(h4) {
	font-family: var(--body);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--arena);
	margin-bottom: 12px;
}
/* La separacion entre enlaces la da su propio margen, como en el original;
   sin esto se suma ademas el espaciado entre bloques de WordPress. */
/* Selectores mas especificos (no !important) para ganarle a las dos reglas de
   WordPress que separan 24px los bloques y quitan el margen al ultimo. */
.giorno-footer .giorno-footer-col > * + * { margin-block-start: 0; }
.giorno-footer .giorno-footer-col > p { margin-bottom: 7px; }
/* El parrafo hace de <li> (sin tamaño propio, como en el original) y el
   enlace de dentro es el que va a 12px. Asi la altura de la lista coincide. */
.giorno-footer-col p { font-size: 16px; color: rgba(255, 255, 255, 0.22); margin: 0 0 7px; }
.giorno-footer-col a { font-size: 12px; color: rgba(255, 255, 255, 0.22); }
.giorno-footer-col a:hover { color: var(--arena); }
.giorno-footer-bottom {
	justify-content: space-between;
	align-items: center;
	padding-top: 18px;
	border-top: 0.5px solid rgba(255, 255, 255, 0.04);
	gap: 8px;
	max-width: none;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.12);
}
.giorno-footer-bottom p { font-size: 10px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.12); text-transform: uppercase; margin: 0; }
.giorno-footer-bottom a { color: rgba(255, 255, 255, 0.12); }
.giorno-footer-bottom a:hover { color: var(--arena); }

/* ==========================================================================
   404
   ========================================================================== */
.giorno-404 { min-height: 60vh; background: var(--crema); text-align: center; padding: var(--gap); }
.giorno-404-num { font-family: var(--display); font-size: clamp(80px, 14vw, 160px); font-weight: 300; color: var(--arena); line-height: 1; font-style: italic; }
.giorno-404-title { font-family: var(--display); font-weight: 300; font-size: clamp(22px, 3vw, 32px); margin: 16px 0 10px; }
.giorno-404-text { color: var(--texto-s); font-size: 13px; margin-bottom: 28px; }

/* ==========================================================================
   FICHA DE PRODUCTO
   ========================================================================== */
.giorno-product-page { padding: var(--gap); }
.giorno-product-columns { gap: var(--gap); }
.giorno-product-summary { display: flex; flex-direction: column; gap: 16px; }
.giorno-product-title { font-family: var(--display); font-weight: 300; font-size: clamp(28px, 3vw, 42px); margin-bottom: 12px; }
.giorno-product-price { font-size: 18px; font-weight: 500; color: var(--negro); }
.giorno-product-short-desc { font-size: 13px; line-height: 1.8; max-width: 420px; color: var(--texto-s); }
.giorno-product-meta { font-size: 11px; border-top: 1px solid var(--borde); padding-top: 16px; margin-top: 24px; color: var(--texto-s); }
.giorno-product-details { margin-top: 40px; }
.giorno-related { margin-top: 48px; }
.giorno-related-title { font-family: var(--display); font-weight: 300; font-size: clamp(20px, 2.2vw, 30px); margin: 0 0 20px; }

/* ==========================================================================
   PAGINAS GENERICAS (Nosotros, Contacto, politicas, entradas del blog…)
   ========================================================================== */
.giorno-page-wrap { padding: clamp(52px, 8vw, 92px) var(--gap); }
.giorno-page-title { font-family: var(--display); font-weight: 300; font-size: clamp(28px, 4vw, 48px); margin-bottom: 24px; }
.giorno-page-wrap .wp-block-post-featured-image { margin-bottom: 24px; }
.giorno-page-wrap .wp-block-post-content { line-height: 1.8; }

/* ==========================================================================
   LISTAS DE ENTRADAS (blog, archivo, resultados de busqueda)
   ========================================================================== */
.giorno-post-list .wp-block-post-title { font-family: var(--display); font-weight: 300; font-size: 24px; margin-bottom: 8px; }
.giorno-post-list .wp-block-post-title a { color: var(--texto); }
.giorno-post-list .wp-block-post-excerpt { font-size: 14px; line-height: 1.7; color: var(--texto-s); }
.giorno-post-list .wp-block-post-featured-image { margin-bottom: 14px; }
.giorno-post-list .wp-block-post,
.giorno-post-list > .wp-block-post-template { margin-bottom: 36px; }
.giorno-post-list .wp-block-separator { border-color: var(--borde); opacity: 1; }
.giorno-post-list .wp-block-query-pagination { margin-top: 32px; }
.giorno-query-title { font-family: var(--display); font-weight: 300; margin-bottom: 32px; }
.giorno-page-wrap .wp-block-search { margin-bottom: 32px; max-width: 400px; }
.giorno-post-date { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-s); margin-bottom: 24px; display: block; }

/* ==========================================================================
   PAGINA "NOSOTROS"

   Portado tal cual del tema clasico (page-nosotros.php + style.css). Vive en
   templates/page-nosotros.html, que WordPress aplica solo a la pagina cuyo
   slug es "nosotros". Para cambiar los textos, las fotos o los miembros del
   equipo: Apariencia > Editor > Plantillas > "Pagina: Nosotros".
   ========================================================================== */
.giorno-about-hero {
	padding: clamp(60px, 8vw, 100px) var(--gap) clamp(40px, 6vw, 70px);
	background: var(--crema);
	text-align: center;
}
.giorno-about-hero .giorno-sec-label { color: var(--arena); margin-bottom: 10px; }
.giorno-about-title {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(32px, 5vw, 56px);
	line-height: 1.1;
	margin: 0;
}

.giorno-about-story {
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(50px, 7vw, 90px) var(--gap);
}
.giorno-about-story p {
	font-size: 15px;
	line-height: 2;
	color: var(--texto);
	margin-bottom: 22px;
}
/* El espacio entre parrafos lo da su propio margen, como en el original; sin
   esto se suma ademas el hueco que WordPress pone entre bloques. */
.giorno-about-story > * + * { margin-block-start: 0; }

.giorno-about-team {
	background: var(--negro);
	padding: clamp(60px, 8vw, 100px) var(--gap);
}
.giorno-about-team-head { text-align: center; margin-bottom: 48px; }
.giorno-about-team-head .giorno-sec-label { color: var(--arena); margin-bottom: 8px; }
.giorno-about-team-title {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(26px, 3.5vw, 40px);
	color: var(--blanco);
	line-height: 1.2;
	margin: 0;
}

/* Rejilla en vez de columnas flexibles: asi las fichas se reacomodan solas al
   estrecharse la pantalla, igual que en el tema clasico, y no hay que tocar
   nada si se añade o se quita un miembro del equipo. */
.giorno-about-team .giorno-about-team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 30px;
	max-width: 1100px;
	margin: 0 auto;
}
.giorno-about-team-grid > .wp-block-column { flex-basis: auto; }
.giorno-about-team-member { text-align: center; }
.giorno-about-team-member > * + * { margin-block-start: 0; }
.giorno-about-photo { margin: 0 0 14px; }
.giorno-about-photo img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	background: var(--crema-s);
	display: block;
}
.giorno-about-member-name {
	font-family: var(--display);
	font-weight: 400;
	font-size: 17px;
	color: var(--blanco);
	margin: 0 0 4px;
	line-height: 1.3;
}
.giorno-about-member-role {
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--arena);
	line-height: normal;
	margin: 0;
}

/* ==========================================================================
   GALERIA DE LA FICHA DE PRODUCTO

   WooCommerce trae la galeria maquetada a la antigua (flotantes y anchos en
   porcentaje) pensando en temas clasicos de una sola columna. Dentro de las
   dos columnas de esta ficha eso deja la foto principal sin tope de alto y las
   miniaturas se van fuera de pantalla. Aqui se rehace: la foto manda dentro de
   su columna y las miniaturas van en una rejilla pareja, con el mismo recorte
   3/4 que el catalogo.
   ========================================================================== */
/* La galeria ocupa toda su columna: tanto el contenedor del bloque como la
   galeria de dentro, que WooCommerce deja al ancho de la foto. */
.giorno-product-columns .wp-block-woocommerce-product-image-gallery {
	width: 100%;
	max-width: none;
}
.giorno-product-columns .woocommerce-product-gallery {
	width: 100%;
	float: none;
	margin: 0;
	position: relative;
}
.giorno-product-columns .woocommerce-product-gallery__wrapper { margin: 0; }

/* La foto grande: ocupa el ancho de su columna y se recorta a 3/4, la misma
   proporcion que las fichas del catalogo, para que la pagina no de un salto
   de alto segun la foto que suba cada prenda. */
.giorno-product-columns .woocommerce-product-gallery__image { margin: 0; }
.giorno-product-columns .woocommerce-product-gallery__image img,
.giorno-product-columns .woocommerce-product-gallery__image--placeholder img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	background: var(--crema-s);
}

/* La lupa de ampliar, discreta y en la esquina. */
.giorno-product-columns .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
}

/* Miniaturas: rejilla pareja en vez de flotantes que se parten mal. */
.giorno-product-columns .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 6px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	float: none;
	overflow: visible;
}
@media (max-width: 600px) {
	.giorno-product-columns .flex-control-thumbs { grid-template-columns: repeat(4, 1fr); }
}
/* WooCommerce fija el ancho de cada miniatura a un cuarto de su sitio, con un
   selector largo y muy pesado:

     .woocommerce div.product div.images .flex-control-thumbs li { width: 25% }

   Dentro de la rejilla eso dejaba las fotos diminutas: la celda medía 97px y
   la miniatura solo 24. Hay que igualar ese peso para poder anularlo, de ahi
   que el selector de abajo sea igual de largo. */
.woocommerce .giorno-product-columns div.images.woocommerce-product-gallery ol.flex-control-thumbs li {
	width: auto;
	float: none;
	margin: 0;
	list-style: none;
}
.giorno-product-columns .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.25s ease;
}
.giorno-product-columns .flex-control-thumbs img:hover,
.giorno-product-columns .flex-control-thumbs img.flex-active { opacity: 1; }

/* Cuando la prenda no esta disponible en la talla elegida, WooCommerce apaga
   el boton. Se marca de forma evidente para que se entienda que falta elegir,
   en vez de parecer que la web no responde. */
.giorno-product-summary .single_add_to_cart_button.disabled,
.giorno-product-summary .single_add_to_cart_button:disabled {
	opacity: 1;
	background: var(--crema-s);
	color: var(--texto-s);
	cursor: not-allowed;
}

/* ==========================================================================
   AJUSTES QUE SOLO ACTUAN DENTRO DEL EDITOR

   WordPress envuelve el lienzo del editor en ".editor-styles-wrapper", asi que
   nada de esto llega a la web publicada.

   El problema que resuelven: el diseño necesita una cabecera pegajosa pintada
   por encima del resto (position: sticky, z-index alto) y varias secciones que
   recortan lo que se sale (overflow: hidden). En la web va bien. Dentro del
   editor, en cambio, esa cabecera flota sobre los bloques y se lleva los
   clics, y el recorte se come los tiradores para redimensionar imagenes: da la
   sensacion de que los bloques "no se dejan arrastrar" ni cambiar de tamaño.

   Aqui la cabecera pasa a ser un bloque normal y las secciones dejan de
   recortar, solo mientras editas. El aspecto es el mismo; lo unico que cambia
   es que se puede agarrar todo.
   ========================================================================== */
.editor-styles-wrapper .giorno-header {
	position: static;
	z-index: auto;
}
.editor-styles-wrapper .giorno-ticker,
.editor-styles-wrapper .giorno-hero,
.editor-styles-wrapper .giorno-banner,
.editor-styles-wrapper .giorno-filo-img,
.editor-styles-wrapper .giorno-product-grid li.wc-block-product {
	overflow: visible;
}

/* El ticker se desplaza sin parar; dentro del editor eso hace que el bloque se
   mueva justo cuando intentas pincharlo. Se para mientras editas. */
.editor-styles-wrapper .giorno-ticker .giorno-ticker-track {
	animation: none;
	transform: none;
}

/* La altura fija de 58px deja una franja muy estrecha para soltar bloques.
   Dentro del editor se permite que crezca lo que haga falta. */
.editor-styles-wrapper .giorno-header {
	height: auto;
	min-height: 58px;
}

/* La fila de datos del producto (referencia y categoria) bajo el boton de
   compra. Antes el bloque iba vacio y el editor lo marcaba como contenido no
   valido; ahora lleva dentro los dos datos, como en la plantilla de
   WooCommerce, y se le da el tono discreto del resto de rotulos. */
.giorno-product-meta { margin-top: 22px; }
.giorno-product-meta-fila {
	gap: 18px;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--texto-s);
	line-height: normal;
}
.giorno-product-meta-fila a { color: var(--texto-s); }
.giorno-product-meta-fila a:hover { color: var(--arena); }

/* ==========================================================================
   SECCIONES QUE ADMITEN VIDEO O FOTO DE FONDO

   Banner, filosofia y manifiesto son bloques "Cover", igual que el hero, para
   que se les pueda poner un video o una imagen de fondo desde el editor
   (seleccionar la seccion > Reemplazar). Un bloque Grupo o Columna no lo
   permite: solo admite color.

   Sin fondo puesto se ven igual que antes, en negro.
   ========================================================================== */
.giorno-manifiesto {
	background-color: var(--negro);
	position: relative;
	overflow: hidden;
}
.giorno-filo-img {
	background-color: var(--crema-s);
	position: relative;
	overflow: hidden;
}

/* El interior no debe heredar el centrado vertical del Cover: cada seccion
   mantiene el relleno y la alineacion que ya tenia. */
.giorno-banner > .wp-block-cover__inner-container,
.giorno-manifiesto > .wp-block-cover__inner-container,
.giorno-filo-img > .wp-block-cover__inner-container {
	width: 100%;
	max-width: none;
	padding: 0;
}

/* El video y la imagen cubren la seccion entera sin deformarse. */
.giorno-banner video.wp-block-cover__video-background,
.giorno-banner img.wp-block-cover__image-background,
.giorno-manifiesto video.wp-block-cover__video-background,
.giorno-manifiesto img.wp-block-cover__image-background,
.giorno-filo-img video.wp-block-cover__video-background,
.giorno-filo-img img.wp-block-cover__image-background {
	object-fit: cover;
}

/* El texto siempre por encima del fondo. */
.giorno-banner .wp-block-cover__inner-container,
.giorno-manifiesto .wp-block-cover__inner-container,
.giorno-filo-img .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* El bloque Cover trae de serie "min-height: 430px". Para el hero viene bien
   (ahi se pide 94svh a proposito), pero en el banner y el manifiesto altera la
   altura que tenian: el manifiesto pasaba de 407px a 430. Se les devuelve su
   altura natural, la que marque su contenido. */
.giorno-manifiesto { min-height: 0; }

/* El panel de la foto llena su columna, como cuando era una columna normal.
   Sin esto se quedaba 29px mas bajo que el texto de al lado. */
.giorno-filo > .wp-block-column:not(.giorno-filo-img) { display: flex; }
.giorno-filo-img {
	min-height: 0;
	width: 100%;
	align-self: stretch;
}

/* ==========================================================================
   COMPATIBILIDAD CON EL MARCADO ANTERIOR

   El hero, el banner, la filosofia y el manifiesto pasaron de ser Grupos y
   Columnas a ser bloques Cover, para poder ponerles video de fondo. Pero si
   alguna de esas secciones se guardo alguna vez desde el editor, esa copia
   vive en la base de datos y sigue usando el marcado antiguo — mientras exista,
   manda ella y el archivo del tema se ignora.

   Sin estas reglas, esa combinacion (CSS nuevo + marcado viejo) deja las
   secciones sin altura ni relleno: se ven aplastadas.

   Aqui se conserva el aspecto de la version de columnas. Los selectores llevan
   ".wp-block-columns" o clases que solo existen en el marcado antiguo, asi que
   nunca chocan con la version de Cover: cada uno se aplica al suyo.

   Se puede quitar esta seccion cuando ya no queden copias antiguas guardadas
   (el aviso del escritorio avisa de si las hay).
   ========================================================================== */
.wp-block-columns.giorno-hero { min-height: 94svh; }
@media (max-width: 768px) {
	.wp-block-columns.giorno-hero { min-height: auto; }
}
.wp-block-columns.giorno-hero > .wp-block-column,
.giorno-filo > .wp-block-column { min-width: 0; }

.giorno-hero-izq {
	background: var(--negro);
	padding: clamp(36px, 5vw, 72px);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.giorno-hero-izq::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 2px;
	height: 100%;
	background: var(--arena);
	opacity: 0.4;
}
.giorno-hero-der {
	position: relative;
	overflow: hidden;
	min-height: 480px;
	background: var(--negro);
	padding: 0;
}
@media (max-width: 768px) {
	.giorno-hero-der:not(:has(video)):not(:has(img)) { min-height: 140px; }
}

/* Con el marcado antiguo el panel de la foto es la propia columna. */
.wp-block-column.giorno-filo-img {
	min-height: 460px;
	background: #1c1820;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   CÓMO ENCAJA EL VIDEO O LA FOTO DE FONDO

   Por defecto el fondo LLENA la seccion y se recorta lo que sobra. Es lo
   normal en un hero: no deja franjas vacias y el texto siempre cae sobre
   imagen. La contrapartida es que en pantallas anchas se pierden los bordes
   del video.

   Para verlo entero, escribe una de estas clases en el campo
   "Clases CSS adicionales" del bloque (Ajustes > Avanzado):

     giorno-video-completo   el video entero, sin recortar. Aparecen franjas
                             a los lados o arriba y abajo, del color de fondo.

     giorno-video-alto       la seccion toma la altura que necesite el video
                             en vez de una altura fija. Sin recorte y sin
                             franjas, pero la seccion cambia de alto segun el
                             video que subas.

   Sin ninguna clase, se comporta como hasta ahora.
   ========================================================================== */
.giorno-video-completo video.wp-block-cover__video-background,
.giorno-video-completo img.wp-block-cover__image-background {
	object-fit: contain;
}

.giorno-video-alto {
	min-height: 0;
	height: auto;
}
.giorno-video-alto video.wp-block-cover__video-background,
.giorno-video-alto img.wp-block-cover__image-background {
	position: relative;
	object-fit: contain;
	height: auto;
	max-height: 100svh;
}
/* Con esa clase el texto se coloca encima del video en vez de empujarlo. */
.giorno-video-alto > .wp-block-cover__inner-container {
	position: absolute;
	inset: 0;
}