/* ==========================================================================
   GOLINA — PROYECTO
   Lo que es específico de ESTE sitio: secciones de la portada, acordeón de
   preguntas frecuentes, pie de página, listado de blog, formularios.
   Lo genérico y reutilizable vive en golina-base.css.
   Misma regla dura: cero valores literales, todo sale de los tokens.
   ========================================================================== */

/* ==========================================================================
   TIRA DE LOGOS · "Nos han visto en" / "Reconocimientos"
   Las dos columnas medían lo mismo (580 px) con justify-content:space-between.
   Con 3 logos eso daba 80 px de separación; con 2, daba 300 px y Banefe
   quedaba disparado a la derecha. Se pasa a un hueco fijo para que las dos
   filas tengan el mismo ritmo, tenga los logos que tenga cada una.

   Y van centradas, no alineadas a la izquierda: una fila de logos casi nunca
   llena su contenedor —la de clientes ocupaba 1020 px de 1200— y pegada a la
   izquierda parece descuadrada.
   ========================================================================== */

/* Elementor pinta el reparto de la columna con un selector de cuatro clases
   (.elementor-NNN .elementor-element.elementor-element-XXX.elementor-column
   > .elementor-widget-wrap). Hay que igualar esa especificidad para poder
   sobrescribirlo, por eso el selector es más largo de lo que parecería.   */
.elementor .elementor-element.elementor-column.golina-logos > .elementor-widget-wrap.elementor-element-populated,
.golina-logos > .elementor-element-populated {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--sp-5) var(--logos-gap);
}

/* ==========================================================================
   ICONOS DE CAJA
   Venían a 50 px de círculo con 12,5 px de aire por dentro, así que el
   pictograma quedaba en 25 px y no se distinguía. Se agranda el círculo y se
   reduce el aire casi a cero: el dibujo pasa de 25 a 56 px.

   El grosor del trazo no se puede tocar: los SVG son siluetas rellenas
   (fill), no trazos, así que no hay stroke-width que engordar.
   ========================================================================== */

/* El tamaño se fija en cada widget (icon_size / icon_padding), no aquí:
   Elementor genera una regla con el id del elemento y por CSS habría que
   pelear la especificidad en cada página. Esto es sólo el encuadre.        */
.elementor-widget-icon-box .elementor-icon,
.elementor-widget-icon .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.elementor-widget-icon-box .elementor-icon svg,
.elementor-widget-icon .elementor-icon svg {
	width: 1em;
	height: 1em;
}

/* El contenedor del icono reservaba 200 px de ancho y descolocaba la caja. */
.elementor-widget-icon-box .elementor-icon-box-icon {
	width: auto;
	margin-inline: 0;
}

/* ==========================================================================
   PREGUNTAS FRECUENTES (acordeón de ElementsKit)
   Cada pregunta venía en un bloque gris azulado (#F7F9FB) que no es de la
   paleta y que compite con el fondo crema de la página. Se quita el bloque y
   el ritmo lo marcan unas líneas finas, como el resto del sitio.
   ========================================================================== */

/* ElementsKit pinta el bloque gris con un selector de cuatro clases
   (.elementor-widget-elementskit-accordion .ekit-wid-con .elementskit-accordion .elementskit-card-header >
   .elementskit-btn-link), así que hay que subir por encima de eso.        */
.elementor-widget-elementskit-accordion .ekit-wid-con .elementskit-accordion .elementskit-card {
	background: transparent;
	border: 0;
	margin: 0;
}

.elementor-widget-elementskit-accordion .ekit-wid-con .elementskit-accordion .elementskit-card-header {
	background: transparent;
	border: 0;
	padding: 0;
}

.elementor-widget-elementskit-accordion .ekit-wid-con .elementskit-accordion .elementskit-card-header > .elementskit-btn-link.ekit-accordion--toggler {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--c-border);
	border-radius: 0;
	padding: var(--sp-4) 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	transition: color var(--dur-fast) var(--ease);
}

.elementor-widget-elementskit-accordion .ekit-wid-con .elementskit-accordion .elementskit-card-header > .elementskit-btn-link.ekit-accordion--toggler:hover,
.elementor-widget-elementskit-accordion .ekit-wid-con .elementskit-accordion .elementskit-card-header > .elementskit-btn-link.ekit-accordion--toggler:focus-visible {
	background: transparent;
	color: var(--c-link);
}

.elementskit-accordion .ekit-accordion-title {
	font-family: var(--f-display);
	font-size: var(--fs-md);
	line-height: var(--lh-tight);
	color: var(--c-text-strong);
	text-align: left;
}

/* La pregunta abierta se marca con el naranjo de marca, no con un recuadro. */
.elementskit-accordion .elementskit-card.active > .elementskit-card-header .ekit-accordion-title,
.elementskit-accordion .ekit-accordion--toggler:not(.collapsed) .ekit-accordion-title {
	color: var(--c-link);
}

.elementskit-accordion .elementskit-card.active > .elementskit-card-header .ekit-accordion--toggler,
.elementskit-accordion .ekit-accordion--toggler:not(.collapsed) {
	border-bottom-color: var(--c-accent);
}

.elementskit-accordion .ekit_accordion_icon_group {
	color: var(--c-link);
	flex: 0 0 auto;
}

.elementor-widget-elementskit-accordion .ekit-wid-con .elementskit-accordion .elementskit-card-body {
	background: transparent;
	border: 0;
	padding: var(--sp-4) 0 var(--sp-5);
	color: var(--c-text);
	line-height: var(--lh-body);
}

/* Pregunta y respuesta comparten el mismo ancho de lectura: si sólo se
   limita la respuesta, los bordes derechos no coinciden y se ve torcido. */
.elementor-widget-elementskit-accordion .ekit-accordion-title,
.elementor-widget-elementskit-accordion .elementskit-card-body > * {
	max-width: var(--faq-measure);
}

@media (max-width: 767px) {

	.elementor-widget-elementskit-accordion .ekit-wid-con .elementskit-accordion .elementskit-card-header > .elementskit-btn-link.ekit-accordion--toggler {
		padding: var(--sp-3) 0;
	}

	.elementor-widget-elementskit-accordion .ekit-wid-con .elementskit-accordion .elementskit-card-body {
		padding: var(--sp-3) 0 var(--sp-4);
	}
}

/* ==========================================================================
   PIE DE PÁGINA
   Estructura como la de la plantilla (columna de marca más ancha, barra
   inferior repartida a los lados) y fondo en Verde Golina.

   Los colores se declaran aquí y no se dejan al tema porque el CSS del kit
   de Elementor sólo entra en las páginas construidas con Elementor: los
   enlaces del pie salían naranjos en la portada y grises en las entradas.
   ========================================================================== */

.site-footer {
	background-color: var(--c-footer-bg);
	color: var(--c-footer-text);
}

/* Cuatro columnas en una sola fila, como la plantilla: marca, Tienda,
   Información y Contacto. La de marca va algo más ancha porque lleva el
   logotipo, la descripción y los dos botones.                           */
.site-footer .site-footer-widget {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--sp-6);
	padding-block: var(--sp-7) var(--sp-6);
	align-items: start;
}

.site-footer .site-footer-widget > .widget:first-child {
	max-width: 34ch;
	padding-right: var(--sp-5);
}

/* Fila 1 · marca */
.site-footer .golina-footer-logo {
	margin: 0 0 var(--sp-4);
}

.site-footer .golina-footer-logo img {
	width: 170px;
	height: auto;
	display: block;
}

.site-footer .golina-footer-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-4);
}

.site-footer .golina-footer-ctas .wp-block-button__link {
	background-color: var(--c-cta);
	color: var(--c-cta-contrast);
	border-radius: var(--radius);
	padding: var(--sp-2) var(--sp-4);
	font-size: var(--fs-sm);
	font-weight: 500;
	border: 1px solid var(--c-cta);
	text-decoration: none;
	transition: background-color var(--dur-fast) var(--ease);
}

.site-footer .golina-footer-ctas .is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--c-footer-text);
	color: var(--c-footer-text);
}

.site-footer .golina-footer-ctas .wp-block-button__link:hover {
	background-color: var(--c-cta-hover);
	border-color: var(--c-cta-hover);
	color: var(--c-cta-hover-text);
	text-decoration: none;
}

/* Fila 2 · columna de contacto */
.site-footer .golina-footer-contacto .wp-block-social-links {
	margin-top: var(--sp-3);
}

.site-footer .site-footer-widget > .widget {
	width: auto;
	max-width: none;
	padding: 0;
	margin: 0;
	float: none;
}

.site-footer,
.site-footer p,
.site-footer li,
.site-footer .widget,
.site-footer .site-info {
	color: var(--c-footer-text);
}

.site-footer .widget-title,
.site-footer .footer-widget h2,
.site-footer .footer-widget h3,
.site-footer .footer-widget h4,
.site-footer .footer-widget h5,
.site-footer .footer-widget h6 {
	font-family: var(--f-display);
	font-size: var(--fs-md);
	color: var(--c-footer-text);
	margin: 0 0 var(--sp-4);
}

.site-footer .footer-widget p {
	max-width: 34ch;
	line-height: var(--lh-body);
}

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

.site-footer .footer-widget li {
	margin-bottom: var(--sp-2);
}

/* El kit de Elementor pinta los enlaces de naranjo y carga despues que
   esta hoja: con una clase mas gana el color del pie. */
.site-footer .widget a,
.site-footer .golina-footer-ctas a,
.site-footer .footer-widget li a,
.site-footer .site-info a {
	color: var(--c-footer-link);
	text-decoration: none;
}

.site-footer .footer-widget li a {
	display: inline-block;
	padding-block: var(--sp-1);
	transition: opacity var(--dur-fast) var(--ease);
}

.site-footer .widget a:hover,
.site-footer .widget a:focus,
.site-footer .footer-widget li a:hover,
.site-footer .site-info a:hover {
	color: var(--c-footer-link);
	text-decoration: underline;
}

/* Redes: sobre el verde, el círculo de marca de Instagram desentona. */
.site-footer .wp-social-link,
.site-footer .wp-block-social-link {
	background: transparent;
}

.site-footer .wp-social-link a,
.site-footer .wp-block-social-link-anchor {
	color: var(--c-footer-link);
	fill: currentColor;
	padding: var(--sp-1);
}

.site-footer .wp-social-link svg,
.site-footer .wp-block-social-link-anchor svg {
	width: var(--sp-4);
	height: var(--sp-4);
}

/* Barra inferior: copyright a la izquierda y los dos enlaces legales a la
   derecha. El reparto no puede ir en .site-info: el tema mete un
   .site-infor-col por medio, así que .site-info sólo tiene UN hijo y
   space-between no reparte nada —los dos bloques salían pegados en el
   centro—. La fila se hace en el div intermedio.                       */
.site-footer .golina-legal {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
}

.site-footer .site-info {
	border-top: 1px solid var(--c-footer-border);
	padding-block: var(--sp-4);
	text-align: left;
}

.site-footer .site-info .site-infor-col {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2) var(--sp-5);
	width: 100%;
}

@media (max-width: 991px) {

	/* Tres columnas para los menús, no dos: con dos, Contacto se quedaba
	   solo en una tercera fila y dejaba medio pie vacío. */
	.site-footer .site-footer-widget {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sp-5);
		padding-block: var(--sp-6) var(--sp-5);
	}

	/* Con dos columnas la marca vuelve a ocupar la fila entera: partida por
	   la mitad, la descripción y los botones quedan apretados. */
	.site-footer .site-footer-widget > .widget:first-child {
		grid-column: 1 / -1;
		max-width: 46ch;
		padding-right: 0;
	}
}

@media (max-width: 767px) {

	.site-footer .site-footer-widget {
		grid-template-columns: 1fr;
		gap: var(--sp-5);
	}

	.site-footer .site-info {
		text-align: center;
	}

	.site-footer .site-info .site-infor-col {
		justify-content: center;
	}
}

/* ==========================================================================
   FILTRO DE PRECIO DEL CATÁLOGO
   El rótulo "Precio: $8.500 — $19.500" iba pegado al botón Filtrar.
   ========================================================================== */

.widget_price_filter .price_slider_amount {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-3);
}

.widget_price_filter .price_slider_amount .button {
	margin: 0;
	order: 1;
}

.widget_price_filter .price_slider_amount .price_label {
	order: 2;
	display: block;
	margin: 0;
	color: var(--c-text);
}

/* ==========================================================================
   FORMULARIOS (MetForm)
   El contenedor real es .metform-form-main-wrapper (no .metform-form-main).
   Los campos de texto ya venían con línea inferior, pero el área de mensaje
   traía su propia caja gris y el desplegable múltiple salía de 2 px de ancho.
   Aquí se unifica todo al mismo estilo de línea.
   ========================================================================== */

.metform-form-main-wrapper .mf-input-wrapper {
	margin-bottom: var(--sp-4);
}

.metform-form-main-wrapper .mf-input-wrapper .mf-input-label {
	font-family: var(--f-body);
	font-size: var(--fs-xs);
	font-weight: 400;
	letter-spacing: var(--ls-ui);
	text-transform: uppercase;
	color: var(--c-text);
	margin-bottom: var(--sp-2);
	display: inline-block;
}

/* Todos los controles con el mismo trazo inferior y sin caja. */
.metform-form-main-wrapper .mf-input-wrapper .mf-input,
.metform-form-main-wrapper .mf-input-wrapper textarea.mf-input,
.metform-form-main-wrapper .mf-input-wrapper select.mf-input {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--c-border);
	border-radius: 0;
	padding: var(--sp-2) 0;
	color: var(--c-text-strong);
	font-family: var(--f-body);
	box-shadow: none;
	transition: border-color var(--dur-fast) var(--ease);
}

/* El fondo se mantiene transparente en TODOS los estados. Sin esto, al
   enfocar o al autorrellenar, el campo se pintaba de blanco y rompía el
   estilo de línea: parecía una caja en medio de campos subrayados.       */
.metform-form-main-wrapper .mf-input-wrapper .mf-input:focus,
.metform-form-main-wrapper .mf-input-wrapper .mf-input:active,
.metform-form-main-wrapper .mf-input-wrapper .mf-input:hover,
.metform-form-main-wrapper .mf-input-wrapper textarea.mf-input:focus,
.metform-form-main-wrapper .mf-input-wrapper textarea.mf-input:active,
.metform-form-main-wrapper .mf-input-wrapper select.mf-input:focus {
	/* El blanco al enfocar venia guardado en cada widget del formulario de
	   contacto (mf_input_background_focus_color); se quito ahi, no aqui.  */
	background: transparent;
	border-bottom-color: var(--c-accent);
	box-shadow: none;
	outline: none;
}

/* El autorrelleno de Chrome pinta el campo con su propio color y no atiende
   a background-color: la única forma de taparlo es una sombra interior. */
.metform-form-main-wrapper .mf-input-wrapper .mf-input:-webkit-autofill,
.metform-form-main-wrapper .mf-input-wrapper .mf-input:-webkit-autofill:hover,
.metform-form-main-wrapper .mf-input-wrapper .mf-input:-webkit-autofill:focus {
	box-shadow: 0 0 0 1000px var(--c-bg-alt) inset;
	-webkit-text-fill-color: var(--c-text-strong);
	transition: background-color 9999s ease-in-out 0s;
}

.metform-form-main-wrapper .mf-input-wrapper textarea.mf-input {
	min-height: 7em;
	resize: vertical;
}

.metform-form-main-wrapper ::placeholder {
	color: var(--c-placeholder);
	opacity: 1;
}

/* Ojo: esta regla es sólo una red. El color real del marcador lo manda el
   control mf_input_placeholder_color de cada campo, que MetForm trae en
   #c9c1c1 (1,77:1 sobre blanco) y Elementor imprime con el id del elemento.
   Está puesto a --c-placeholder en los 25 campos de los tres formularios;
   si se añade un campo nuevo, hay que ponérselo también.               */

/* Desplegable múltiple: es un react-select, así que la caja no es el input
   sino el "control" que dibuja la librería. */
.metform-form-main-wrapper .mf-input-wrapper .mf-input-multiselect {
	width: 100%;
	border: 0;
	padding: 0;
}

.metform-form-main-wrapper .mf-input-wrapper .mf-input .mf_multiselect__control {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--c-border);
	border-radius: 0;
	box-shadow: none;
	min-height: var(--tap-min);
}

.metform-form-main-wrapper .mf-input-wrapper .mf-input .mf_multiselect__control--is-focused {
	border-bottom-color: var(--c-accent);
	box-shadow: none;
}

.metform-form-main-wrapper .mf-input-wrapper .mf_multiselect__value-container {
	padding-inline: 0;
}

.metform-form-main-wrapper .mf_multiselect__indicator-separator {
	display: none;
}

.metform-form-main-wrapper .mf_multiselect__multi-value {
	background: var(--c-surface);
	border-radius: var(--radius-sm);
}

.metform-form-main-wrapper .mf_multiselect__menu {
	border-radius: var(--radius-sm);
}

/* El desplegable simple (Región) es otro react-select: su caja es el
   "control", no el input, así que hay que tratarlo aparte.               */
.metform-form-main-wrapper .mf-input-wrapper .mf-input-select,
.metform-form-main-wrapper .mf-input-wrapper [class*="__control"] {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--c-border);
	border-radius: 0;
	box-shadow: none;
	min-height: 0;
	padding: 0;
}

.metform-form-main-wrapper .mf-input-wrapper [class*="__value-container"] {
	padding-inline: 0;
}

.metform-form-main-wrapper .mf-input-wrapper [class*="__indicator-separator"] {
	display: none;
}

/* La cantidad se escribe: las flechitas sólo estorban. */
.metform-form-main-wrapper input[type="number"] {
	appearance: textfield;
	-moz-appearance: textfield;
}

.metform-form-main-wrapper input[type="number"]::-webkit-outer-spin-button,
.metform-form-main-wrapper input[type="number"]::-webkit-inner-spin-button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
}

/* La casilla de privacidad no es un campo más. */
.metform-form-main-wrapper .mf-input-wrapper .elementor-widget-mf-checkbox .mf-input-label,
.metform-form-main-wrapper .elementor-widget-mf-checkbox .mf-input-wrapper .mf-input-label {
	text-transform: none;
	font-size: var(--fs-sm);
	letter-spacing: 0;
	color: var(--c-text-strong);
}

.metform-form-main-wrapper input[type="checkbox"] {
	width: auto;
	min-width: var(--sp-3);
	min-height: var(--sp-3);
	accent-color: var(--c-cta);
	border-bottom: 0;
}

/* Botón alineado con los campos y con aire por encima. */
.metform-form-main-wrapper .mf-btn-wraper {
	margin-top: var(--sp-5);
	text-align: left;
}

.metform-form-main-wrapper button.metform-btn.metform-submit-btn {
	border-radius: var(--radius);
	padding: var(--sp-3) var(--sp-5);
	min-height: var(--tap-min);
}

/* ==========================================================================
   LISTADO DE BLOG (widget de ElementsKit)
   Las tarjetas traían la clase de media columna pero salían a ancho completo
   y pegadas entre sí, con imágenes de 822×548.
   ========================================================================== */

.elementskit-blog-posts .ekit-row.post-items,
.ekit-wid-con .ekit-row.post-items {
	display: flex;
	flex-wrap: wrap;
	margin-inline: calc(var(--sp-3) * -1);
}

/* El ancho lo manda la clase que pone ElementsKit en cada tarjeta, para que
   cada widget conserve sus columnas: la portada va a 3 y el blog a 2.      */
.ekit-row.post-items > .post-item {
	padding-inline: var(--sp-3);
	margin-bottom: var(--sp-5);
}

.ekit-row.post-items > .post-item.ekit-lg-12 { flex: 0 0 100%; max-width: 100%; }
.ekit-row.post-items > .post-item.ekit-lg-6  { flex: 0 0 50%;  max-width: 50%; }
.ekit-row.post-items > .post-item.ekit-lg-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.ekit-row.post-items > .post-item.ekit-lg-3  { flex: 0 0 25%;  max-width: 25%; }

@media (max-width: 991px) {

	.ekit-row.post-items > .post-item.ekit-md-12 { flex: 0 0 100%; max-width: 100%; }
	.ekit-row.post-items > .post-item.ekit-md-6  { flex: 0 0 50%;  max-width: 50%; }
	.ekit-row.post-items > .post-item.ekit-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
}

/* Todas las miniaturas con la misma proporción: la retícula deja de bailar. */
.ekit-row.post-items .elementskit-entry-thumb {
	overflow: hidden;
}

.ekit-row.post-items .elementskit-entry-thumb img {
	aspect-ratio: 3 / 2;
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

@media (max-width: 767px) {

	.ekit-row.post-items > .post-item,
	.ekit-row.post-items > .post-item[class*="ekit-lg-"],
	.ekit-row.post-items > .post-item[class*="ekit-md-"] {
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: var(--sp-4);
	}
}

/* ==========================================================================
   TARJETAS DE PRODUCTO
   ========================================================================== */

ul.products li.product img,
ul.products li.product .product-loop-image,
.woocommerce-product-gallery img,
.woocommerce div.product .images img,
.woocommerce-product-gallery__wrapper {
	border-radius: var(--radius-card);
	overflow: hidden;
}

ul.products li.product .product-loop-thumbnail,
ul.products li.product .product-loop-image-wrapper {
	border-radius: var(--radius-card);
	overflow: hidden;
}

/* ==========================================================================
   FICHA DE PRODUCTO
   El selector de variación, la cantidad y el botón quedaban muy sueltos
   entre sí. Se agrupan como un solo bloque de decisión.
   ========================================================================== */

.woocommerce div.product form.cart {
	margin-top: var(--sp-4);
}

.woocommerce div.product form.cart table.variations {
	margin-bottom: var(--sp-3);
}

.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart table.variations th {
	padding-bottom: var(--sp-2);
}

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart .single_variation_wrap {
	margin-top: 0;
}

.woocommerce div.product form.cart .reset_variations {
	margin-top: var(--sp-1);
	display: inline-block;
}

/* ==========================================================================
   ENTRADAS RELACIONADAS
   Miniaturas cuadradas y sin redondear, títulos pequeños y sin jerarquía.
   ========================================================================== */

.related-box .related-post {
	margin-bottom: var(--sp-4);
}

.related-box .related-post .entry-header {
	display: block;
	border-radius: var(--radius-card);
	overflow: hidden;
	background: var(--c-surface);
}

.related-box .related-post img {
	aspect-ratio: 3 / 2;
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
	transition: transform var(--dur-base) var(--ease);
}

.related-box .related-post:hover img {
	transform: scale(1.04);
}

.related-box .related-post .entry-title,
.related-box .related-post h2,
.related-box .related-post h3,
.related-box .related-post > a:not(.entry-header):not(.post-read-more) {
	font-family: var(--f-display);
	font-size: var(--fs-md);
	line-height: var(--lh-tight);
	color: var(--c-text-strong);
	margin-top: var(--sp-3);
	display: block;
}

.related-box .related-post .posted-on,
.related-box .related-post .entry-meta,
.related-box .related-post time {
	color: var(--c-link);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-ui);
}

.related-box .related-title {
	font-family: var(--f-display);
	margin-bottom: var(--sp-4);
}

/* ==========================================================================
   BARRA LATERAL DEL BLOG
   El icono de redes de "Sobre Nosotros" quedaba diminuto.
   ========================================================================== */

#secondary .wp-social-link a,
#secondary .wp-block-social-link-anchor,
.widget .wp-block-social-link-anchor {
	width: var(--tap-min);
	height: var(--tap-min);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#secondary .wp-social-link svg,
.widget .wp-block-social-link-anchor svg {
	width: var(--sp-4);
	height: var(--sp-4);
}

/* ==========================================================================
   FORMULARIOS · compactado
   El de cotización quedaba altísimo: mucho margen entre campos, rótulos con
   demasiado aire y un área de mensaje de 150 px.
   ========================================================================== */

.metform-form-main-wrapper .mf-input-wrapper {
	margin-bottom: var(--sp-3);
}

.metform-form-main-wrapper .mf-input-wrapper .mf-input-label {
	margin-bottom: var(--sp-1);
}

.metform-form-main-wrapper .mf-input-wrapper .mf-input {
	padding: var(--sp-1) 0 var(--sp-2);
}

/* MetForm da 150 px de alto fijo al área de mensaje desde el propio widget,
   y Elementor lo pinta con el id del elemento (3 clases). Cuatro clases y un
   elemento para poder bajarlo.                                            */
.metform-form-main-wrapper .mf-input-wrapper textarea.mf-input.mf-textarea {
	/* Altura explícita: con "auto" manda el atributo rows="10" del widget y
	   el campo se va a 227 px. Se puede seguir arrastrando para agrandarlo. */
	height: 6em;
	min-height: 6em;
}

/* Los contenedores de fila también traían su propio aire. */
.metform-form-main-wrapper .elementor-widget:not(:last-child) {
	margin-bottom: 0;
}

/* Entre la casilla de privacidad y el botón había 62 px: 16 del margen del
   campo, 24 del botón y 20 del hueco del contenedor. Quitando los dos
   márgenes queda sólo el hueco del contenedor, un tercio de lo anterior.  */
.metform-form-main-wrapper .mf-btn-wraper {
	margin-top: 0;
}

.metform-form-main-wrapper .elementor-widget-mf-checkbox .mf-input-wrapper {
	margin-bottom: 0;
}

/* Sin sombra en el botón, en los dos formularios. */
.metform-form-main-wrapper button.metform-btn,
.metform-form-main-wrapper button.metform-btn.metform-submit-btn,
.metform-form-main-wrapper button.metform-btn.metform-submit-btn:hover,
.metform-form-main-wrapper button.metform-btn.metform-submit-btn:focus {
	box-shadow: none;
}

/* ==========================================================================
   LISTA DE ENTRADAS RECIENTES (bloque de WordPress)
   Venía con 36 px de interlineado sobre texto de 14 px y sin separación
   entre entradas: los títulos de dos líneas se confundían con el siguiente.
   Ahora el interlineado es ajustado y la separación la da el margen.
   ========================================================================== */

.wp-block-latest-posts__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-block-latest-posts__list li {
	margin-bottom: var(--sp-3);
	padding: 0;
}

.wp-block-latest-posts__list li:last-child {
	margin-bottom: 0;
}

.wp-block-latest-posts__list li a,
.wp-block-latest-posts__list li > a.wp-block-latest-posts__post-title {
	display: block;
	line-height: var(--lh-tight);
	font-size: var(--fs-sm);
}

/* ==========================================================================
   "LEER MÁS" DE LAS ENTRADAS RELACIONADAS
   ========================================================================== */

.related-box .post-read-more,
.related-box .post-read-more a,
.related-post .post-read-more {
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: var(--ls-ui);
}

/* ==========================================================================
   CABECERA · desplegable de cuenta
   El panel de "Acceder / Registro" está anclado al borde izquierdo de su
   icono, que vive al final de la cabecera: sus 180 px se salían por la
   derecha y provocaban scroll horizontal en toda la página por debajo de
   ~1330 px. Anclado a la derecha se queda dentro.
   ========================================================================== */

.site-tools .subbox,
.site-tools .tools-icon .subbox {
	left: auto;
	right: 0;
}

/* ==========================================================================
   FORMULARIOS · alineación, avisos y casilla de privacidad
   ========================================================================== */

/* Los contenedores de fila (Empresa/Contacto, Correo/Teléfono...) traían
   10 px de relleno; los campos de ancho completo, al colgar directamente del
   contenedor principal, no. De ahí que el área de mensaje empezara 10 px a la
   izquierda del resto. Quitarlo alinea todo y además recorta 20 px por fila. */
.metform-form-main-wrapper .e-con.e-con-full,
.metform-form-main-wrapper .e-con-inner > .e-con {
	padding: 0;
}

/* Los avisos de validación empujaban los campos hacia abajo al aparecer.
   Se sacan del flujo y caben en el hueco que ya hay entre campo y campo:
   el formulario deja de moverse mientras se rellena.                      */
.metform-form-main-wrapper .mf-input-wrapper {
	position: relative;
}

/* MetForm pinta el aviso en rojo puro desde el widget, y Elementor genera la
   regla con el id del elemento (3 clases). Cuatro para poder cambiarlo.    */
.metform-form-main-wrapper .elementor-widget .mf-input-wrapper .mf-error-message,
.metform-form-main-wrapper .mf-input-wrapper .mf-error-message {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin: 0;
	font-size: var(--fs-xs);
	line-height: 1.25;
	color: var(--c-error);
}

/* --- Casilla de privacidad ---------------------------------------------- */

.metform-form-main-wrapper .mf-checkbox {
	margin-top: var(--sp-2);
}

.metform-form-main-wrapper .mf-checkbox-option > label {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	cursor: pointer;
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
}

.metform-form-main-wrapper .mf-checkbox-option input[type="checkbox"] {
	margin: 0;
	flex: 0 0 auto;
	/* Alinea la casilla con la primera línea del texto. */
	margin-top: 0.15em;
}

.metform-form-main-wrapper .mf-checkbox-option a {
	color: var(--c-link);
	text-decoration: underline;
}

.metform-form-main-wrapper .mf-checkbox-option a:hover,
.metform-form-main-wrapper .mf-checkbox-option a:focus-visible {
	color: var(--c-link-hover);
}

/* ==========================================================================
   FORMULARIOS · retícula de dos columnas
   Las filas usaban flex con "space-between", así que la columna derecha
   empezaba en un punto distinto en cada fila según lo ancho que fuera cada
   campo (782, 765, 813...). Con una retícula de dos columnas iguales, las
   dos columnas del formulario quedan alineadas de arriba abajo.
   ========================================================================== */

/* La retícula se aplica sólo a los contenedores marcados como fila de campos
   (clase puesta desde el propio Elementor). Aplicarla a todos los
   contenedores no vale: el formulario de contacto tiene uno exterior y otro
   interior, y la regla genérica convertía los dos en dos columnas — el
   mensaje se iba a la derecha y los campos quedaban en 108 px.            */
.metform-form-main-wrapper .golina-form-row,
.metform-form-main-wrapper .golina-form-row > .e-con-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-3) var(--sp-5);
	align-items: start;
}

/* El ancho corto de la cantidad se consigue limitando el campo dentro de su
   celda, no la celda: así la retícula no se descuadra. El rótulo mide 204 px
   y sigue cabiendo en una línea porque la celda es media fila.            */
.metform-form-main-wrapper input[type="number"].mf-input {
	max-width: 170px;
}

@media (max-width: 767px) {

	.metform-form-main-wrapper .golina-form-row,
	.metform-form-main-wrapper .golina-form-row > .e-con-inner {
		grid-template-columns: 1fr;
	}

	.metform-form-main-wrapper input[type="number"].mf-input {
		max-width: none;
	}
}

/* ==========================================================================
   IMÁGENES DECORATIVAS
   Los PNG de producto que flotan sobre la portada de Regalos corporativos y
   sobre las tarjetas de "Por qué Golina".

   La plantilla los colocaba con desplazamientos en píxeles (-497px, 351px,
   -568px), escalas (0,3 y 0,4) y márgenes negativos distintos por
   dispositivo. Eso se ve bien a un solo ancho: en tablet las dos de la
   portada caían en x -267 y x 802 con la ventana en 768, y en móvil en
   x -356 y x 674 con la ventana en 375. Es decir, no se veían.

   Aquí cada imagen se ancla en PORCENTAJES a su contenedor y el ancho va con
   clamp(), así que la composición se mantiene a cualquier tamaño. Cuando las
   columnas se apilan, la tarjeta reserva una banda al pie y la imagen se
   apoya ahí, en vez de caer encima del texto.
   ========================================================================== */

/* El marco es el sistema de referencia de las imágenes que lleva dentro. */
.golina-deco-marco {
	position: relative;

	/* La caja de contenido del sitio. Las secciones a sangre ocupan todo el
	   ancho, pero la maqueta cuelga de esta caja: es la referencia correcta
	   para colocar y dimensionar lo que va encima. */
	--deco-contenido: min(100%, 1200px);
}

/* Cuando el marco es una sección, las imágenes cuelgan de la columna que
   tiene dentro, y Elementor deja toda columna en position:relative: el
   anclaje se medía contra la columna (1200×320) en vez de contra la portada
   (1265×520). Anulando el relative de esa columna, y sólo dentro de un
   marco, el porcentaje vuelve a referirse a lo que se ve.               */
.elementor-section.golina-deco-marco > .elementor-container,
.elementor-section.golina-deco-marco > .elementor-container > .elementor-column,
.elementor-section.golina-deco-marco > .elementor-container > .elementor-column > .elementor-widget-wrap {
	position: static;
}

/* La clase del marco va delante a propósito: Elementor declara
   .elementor-widget-wrap > .elementor-widget { width: 100% } y carga después
   que esta hoja, así que sin una clase más la caja del widget medía lo que
   el marco entero y los anclajes en % no cuadraban con nada. */
.golina-deco-marco .elementor-widget-image.golina-deco {
	position: absolute;
	z-index: var(--z-base);
	width: var(--deco-ancho, var(--deco-tarjeta));
	margin: 0;
	padding: 0;
	pointer-events: none;
	transform: rotate(var(--deco-giro, 0deg));
}

/* El widget de imagen deja un hueco bajo el <img> por el line-height. */
.golina-deco .elementor-widget-container {
	line-height: 0;
}

.golina-deco-marco .golina-deco img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

/* Las dos de tarjeta van al hueco que dejan las cajas de iconos: centro del
   dibujo al 85% del ancho y al 71% del alto de la tarjeta, que es donde
   estaban marcadas. Asoman un poco por el borde, como en la plantilla. */
.golina-deco--antifaz,
.golina-deco--marriott {
	--deco-ancho: var(--deco-tarjeta);
	right: -1%;
	bottom: -2%;
}

/* El antifaz es una pieza ancha y va inclinada, así que su envolvente crece
   mucho con el giro. Con 16° y un 30% de la tarjeta cabe justo en la mitad
   que dejan libre las tres cajas de iconos, que terminan en el 68%.     */
.golina-deco--antifaz {
	--deco-ancho: max(150px, 30%);
	--deco-giro: 16deg;
}

.golina-deco--marriott {
	--deco-giro: -8deg;
}

/* Portada de Regalos corporativos. Estas dos ya estaban bien colocadas en
   escritorio, así que se conserva su composición exacta. El giro es el que
   ya traían.

   Importante: la sección de portada es a sangre, pero la maqueta original
   colgaba de la caja de contenido (1200px, centrada), así que las imágenes
   medían 360px fijos en cualquier pantalla ancha. Si se toma el porcentaje
   de la sección, en un monitor de 1900px crecen a 540px y se comen la
   portada. Por eso todo se mide aquí contra --deco-contenido, que es la
   caja de contenido: por debajo de 1200px encoge con la ventana y por
   encima se queda quieta, igual que antes.

   Las constantes salen de medir el original a 1280: lado 360 (30% de
   1200), y bordes izquierdos en -77 y +957 respecto de la caja de
   contenido (-6,4% y +79,8%).                                          */
.golina-deco--trio,
.golina-deco--penta {
	--deco-ancho: max(110px, calc(0.3 * var(--deco-contenido)));
}

.golina-deco--trio {
	--deco-giro: -140deg;
	left: calc((100% - var(--deco-contenido)) / 2 - 0.064 * var(--deco-contenido));
	top: 58%;
}

.golina-deco--penta {
	--deco-giro: 5deg;
	left: calc((100% - var(--deco-contenido)) / 2 + 0.798 * var(--deco-contenido));
	top: -9%;
}

/* Nuestra historia · los dos recortes de prensa. Aquí no hay hueco que
   ocupar: el collage va encima de la tarjeta verde y se sale por abajo, que
   es como estaba en escritorio. Las proporciones salen de medir el original
   sobre una tarjeta de 1200×445: 326 y 364 px de ancho (27,2% y 30,3%),
   bordes izquierdos al 67,3% y 64,6%, y altos al 15% y 37%.            */
.golina-deco--recorte-1 {
	--deco-ancho: 27.2%;
	--deco-giro: -1deg;
	left: 67.3%;
	top: 15%;
}

.golina-deco--recorte-2 {
	--deco-ancho: 30.3%;
	--deco-giro: 9deg;
	left: 66.9%;
	top: 37%;
}

/* Móvil: las columnas se apilan, así que la mitad que servía de hueco
   desaparece. La tarjeta abre una banda al pie y la imagen se apoya ahí, en
   vez de caer sobre la última caja de iconos.

   La banda se hace con un ::after y no con padding porque Elementor ya
   escribe el padding de esa columna con el id del elemento, y esa carrera
   no se gana. Y los selectores repiten la clase del marco porque la regla
   base (.golina-deco-marco .elementor-widget-image.golina-deco) tiene más
   peso que la clase suelta.                                             */
@media (max-width: 767px) {

	.golina-deco-marco--banda > .elementor-widget-wrap::after,
	.elementor-section.golina-deco-marco--banda > .elementor-container::after {
		content: "";
		flex: 0 0 100%;
		height: var(--deco-banda);
	}

	/* Los recortes conservan la superposición: es lo que los hace un
	   collage y no dos fotos sueltas. Lo que cambia en móvil es dónde
	   caen —en una banda propia al pie de la tarjeta, más alta que la de
	   las otras, en vez de al costado del texto, que aquí ya no existe—. */
	.golina-deco-marco:has(.golina-deco--recorte) > .elementor-widget-wrap::after {
		content: "";
		flex: 0 0 100%;
		height: var(--deco-banda-recortes);
	}

	.golina-deco-marco .elementor-widget-image.golina-deco--recorte {
		top: auto;
	}

	.golina-deco--recorte-1 {
		--deco-ancho: 56%;
		left: 3%;
		bottom: var(--sp-5);
	}

	.golina-deco--recorte-2 {
		--deco-ancho: 54%;
		left: 38%;
		bottom: 0;
	}

	/* Los dos cojines de la portada de Regalos corporativos se ocultan:
	   a este ancho entran en escena por los lados y compiten con el
	   titular y los botones sin aportar nada. */
	.golina-deco--trio,
	.golina-deco--penta {
		display: none;
	}

	/* Columnas cuyo único contenido es un fondo (pase de diapositivas o
	   imagen): apiladas se quedan sin nada que las estire y colapsan a
	   1px, dejando una franja de foto de un par de píxeles. */
	.elementor-column:has(> .elementor-background-slideshow),
	.elementor-column:has(> .elementor-background-slideshow-container) {
		aspect-ratio: var(--col-fondo-ratio);
	}

	/* Tiras de logos: centradas y con el mismo hueco en las dos
	   direcciones, para que la fila incompleta quede centrada debajo. */
	.elementor .elementor-element.elementor-column.golina-logos > .elementor-widget-wrap.elementor-element-populated,
	.golina-logos > .elementor-element-populated {
		justify-content: center;
		align-items: center;
		gap: var(--logos-gap-m);
	}

	/* Elementor separa cada widget con 20px por abajo; sumado al hueco de
	   la rejilla, las filas de logos quedaban desiguales. */
	.golina-logos > .elementor-element-populated > .elementor-widget {
		margin-bottom: 0;
	}

	.golina-deco-marco .golina-deco--antifaz,
	.golina-deco-marco .golina-deco--marriott {
		--deco-ancho: var(--deco-banda);
		right: auto;
		bottom: var(--sp-3);
		left: calc(50% - var(--deco-banda) / 2);
	}

	.golina-deco-marco .golina-deco--trio,
	.golina-deco-marco .golina-deco--penta {
		--deco-ancho: 40%;
		top: auto;
		bottom: 0;
	}

	.golina-deco-marco .golina-deco--trio {
		left: -2%;
	}

	.golina-deco-marco .golina-deco--penta {
		left: 66%;
	}
}

/* ==========================================================================
   RETÍCULA DE PRODUCTOS · "Encuentra tu producto según lo que necesitas"
   Cinco tarjetas del 20% en escritorio. Cada una traía su propio margen
   —una a la derecha, otra a la izquierda, otra a las dos— y al pasar al 50%
   en tablet esos márgenes desiguales las descuadraban: las filas no
   coincidían y la tercera tarjeta salía sangrada.

   Los márgenes se igualaron a cero en el widget y la calle se hace aquí, con
   un hueco de rejilla: así las dos columnas miden lo mismo y la separación
   es la misma entre todas. El selector es largo porque Elementor escribe el
   ancho de columna con el id del elemento y hay que ganarle.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

	.elementor .elementor-element.golina-grid-productos > .elementor-container {
		gap: var(--sp-4);
		align-items: stretch;
	}

	.elementor .elementor-element.golina-grid-productos > .elementor-container > .elementor-column {
		width: calc(50% - var(--sp-4) / 2);
	}
}

/* ==========================================================================
   CAMPO TRAMPA DEL ANTISPAM
   Un campo de texto que los bots rellenan y las personas no ven. No se usa
   display:none ni visibility:hidden a propósito: algunos bots los detectan y
   se saltan el campo. Se saca de la pantalla, se le quita el tamaño y se
   marca como no accesible por tabulador desde el JS.
   ========================================================================== */

.metform-form-main-wrapper .golina-trampa {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}