/* Agro Matorrales — hoja propia del sitio.
   Valores medidos sobre el original (WordPress + Elementor 4.3.3, tema Hello). Mismos cortes que
   el original: 1024 px (tablet) y 767 px (teléfono). Las medidas en «em» se resuelven, como en
   el original, contra el tamaño de letra del cuerpo: 16, 15 y 14 px según el corte. */

:root {
	--verde: #088240;          /* acento del kit: botones, iconos, subrayado del menú */
	--verde-oscuro: #114F2E;   /* botones al pasar el mouse */
	--oscuro: #112010;         /* fondos oscuros */
	--negro: #191919;          /* títulos y enlaces */
	--texto: #444444;
	--oro: #B1A60F;            /* antetítulos y fechas */
	--claro: #F8F8F8;
	--titulos: "Outfit", sans-serif;
	--cuerpo: "Poppins", sans-serif;
	/* Tipografías globales del kit de Elementor, por corte. */
	--t-portada: 82px;
	--t-grande: 66px;
	--t-seccion: 48px;
	--t-subtitulo: 37px;
	--t-tarjeta: 28px;
	--t-noticia: 20px;
	--t-antetitulo: 15px;
	--t-cuerpo: 16px;
	--t-destacado: 20px;
	--t-chico: 14px;
	--t-menu: 16px;
	--t-derechos: 13px;
	--t-boton: 14px;
	--curva-menu: cubic-bezier(.58, .3, .005, 1);
}

@media (max-width: 1024px) {
	:root {
		--t-portada: 61px;
		--t-grande: 50px;
		--t-seccion: 37px;
		--t-subtitulo: 30px;
		--t-tarjeta: 24px;
		--t-noticia: 19px;
		--t-antetitulo: 14.2px;
		--t-cuerpo: 15px;
		--t-destacado: 15px;
		--t-chico: 13px;
		--t-menu: 15px;
		--t-derechos: 12px;
		--t-boton: 13px;
	}
}

@media (max-width: 767px) {
	:root {
		--t-portada: 43px;
		--t-grande: 37px;
		--t-seccion: 29px;
		--t-subtitulo: 25px;
		--t-tarjeta: 21px;
		--t-noticia: 18px;
		--t-antetitulo: 13.5px;
		--t-cuerpo: 14px;
		--t-destacado: 14px;
		--t-chico: 12px;
		--t-menu: 14px;
		--t-derechos: 11px;
		--t-boton: 12px;
	}
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { line-height: 1.15; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	margin: 0;
	background: #fff;
	color: var(--texto);
	font-family: var(--cuerpo);
	font-size: var(--t-cuerpo);
	font-weight: 400;
	line-height: 1.5em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: 600; }
ul, ol { list-style: none; }
strong { font-weight: 700; }
img { max-width: 100%; height: auto; border: 0; }

a { background-color: transparent; color: var(--negro); text-decoration: none; }
a:hover { color: var(--verde); }

button, input, textarea { margin: 0; font: inherit; }
button { color: inherit; }

/* Foco con teclado: el mismo anillo que el tema Hello del original. */
a:focus-visible, button:focus-visible, input:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px #fff;
}

.sprite-iconos { position: absolute; width: 0; height: 0; overflow: hidden; }

.oculto {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.saltar {
	position: absolute;
	top: -10000em;
	left: 5px;
	z-index: 100000;
	padding: 15px 23px 14px;
	background: #f1f1f1;
	color: #21759b;
	font-size: .875rem;
	font-weight: 700;
	line-height: normal;
}

.saltar:focus { top: 5px; }

.ancla { display: block; height: 0; }

/* Los bloques de texto conservan el margen de su último párrafo, como los widgets de
   Elementor (que son elementos flexibles): sin esto, el margen se funde con el siguiente. */
.portada__bajada, .ofrecemos__bajada, .mercados__bajada, .asesoramiento__bajada,
.noticias__bajada, .rrhh__bajada { display: flow-root; }

/* Botones (Elementor «small» y «medium»). */
.boton {
	display: inline-block;
	padding: 12px 24px;
	border: 0;
	border-radius: 0;
	background: var(--verde);
	color: #fff;
	font: 600 var(--t-boton)/1.6em var(--titulos);
	letter-spacing: .5px;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition: all .3s;
}

.boton:hover, .boton:focus { background: var(--verde-oscuro); color: #fff; }
.boton--grande { padding: 15px 30px; }

.antetitulo {
	margin-bottom: 20px;
	color: var(--oro);
	font: italic 600 var(--t-antetitulo)/1.2em var(--cuerpo);
	letter-spacing: 2px;
	text-transform: uppercase;
}

.titulo-seccion {
	margin-bottom: 20px;
	color: var(--negro);
	font: 600 var(--t-seccion)/1.1em var(--titulos);
	text-transform: capitalize;
}

/* Animaciones de entrada: lo mismo que Elementor (el elemento espera oculto hasta entrar en
   pantalla y se anima 1,25 s). Sólo con JavaScript: sin él, todo se ve desde el principio. */
.js [data-animacion]:not(.animado) { visibility: hidden; }
.animado[class*="anim-"] { animation-duration: 1.25s; }
.anim-fadeIn { animation-name: fadeIn; }
.anim-fadeInUp { animation-name: fadeInUp; }
.anim-fadeInDown { animation-name: fadeInDown; }
.anim-fadeInLeft { animation-name: fadeInLeft; }
.anim-fadeInRight { animation-name: fadeInRight; }
.anim-zoomIn { animation-name: zoomIn; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes zoomIn { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.animado, .video-boton::before, .video-boton::after, .video-boton__onda { animation: none !important; }
	.portada__foto { transition-duration: 0s !important; }
}

/* ---------- Encabezado ---------- */

.cabecera { position: relative; }

.cabecera__caja {
	display: flex;
	max-width: 1280px;
	margin: 0 auto;
}

/* Barra superior: correo, teléfono y redes. */
.cabecera__barra { border-bottom: 1px solid rgba(25, 25, 25, .23); }
.cabecera__barra .cabecera__caja { align-items: center; }

.cabecera__datos {
	display: flex;
	flex-wrap: wrap;
	gap: 0 25px;
	width: 75.611%;
	padding: 10px;
}

.cabecera__datos a {
	display: flex;
	align-items: center;
	color: var(--negro);
	font-size: 14px;
	line-height: 1.6em;
}

.cabecera__icono {
	display: flex;
	flex: none;
	width: 1.25em;
	color: var(--verde);
	font-size: 14px;
}

.cabecera__texto { padding-left: 5px; color: var(--negro); }
/* Como en el original, el enlace se pone verde al pasar el mouse, pero el texto conserva su color. */
.cabecera__datos a:hover, .pie__lista a:hover { color: var(--verde); }

.redes { display: flex; flex-wrap: wrap; gap: 0 20px; }

.redes a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	border-radius: 10%;
	color: var(--verde);
	font-size: 16px;
	line-height: 1em;
	transition: all .3s;
}

.redes a:hover { color: var(--verde); opacity: .9; }

.cabecera__redes {
	justify-content: flex-end;
	width: 24.348%;
	padding: 10px 26px 10px 10px;
}

/* Barra principal: logo, menú y acceso de clientes. */
.cabecera__principal {
	position: relative;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .05);
}

.cabecera__principal .cabecera__caja { align-items: center; }

.cabecera__marca { display: flex; width: 20%; padding: 10px; }

.cabecera__logo { display: inline-block; max-width: 100%; }

.cabecera__logo img {
	display: block;
	width: auto;
	height: 50px;
	object-fit: contain;
}

.menu { display: flex; justify-content: flex-end; width: 59.333%; }

.menu-principal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 45px; }
.menu-principal li { display: flex; }

.menu-principal a {
	position: relative;
	display: flex;
	align-items: center;
	padding: 24px 0;
	color: var(--negro);
	font: 500 var(--t-menu)/20px var(--cuerpo);
	white-space: nowrap;
	transition: .4s;
}

.menu-principal a:hover { color: var(--negro); }

/* Subrayado del menú (Elementor «underline» con animación «grow»). */
.menu-principal a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 2px;
	background: var(--verde);
	transition: .3s var(--curva-menu);
}

.menu-principal a:not(:hover):not(:focus):not(.activo)::after {
	left: 50%;
	width: 0;
	height: 0;
	opacity: 0;
}

.menu-boton {
	display: none;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	padding: .25em;
	border: 0;
	border-radius: 3px;
	background: transparent;
	color: var(--negro);
	font-size: 27px;
	cursor: pointer;
}

.menu-boton:hover, .menu-boton:focus { color: var(--verde); }
.menu-boton__cerrar, .menu-boton[aria-expanded="true"] .menu-boton__abrir { display: none; }
.menu-boton[aria-expanded="true"] .menu-boton__cerrar { display: block; }

.cabecera__clientes { width: 20%; padding: 10px; text-align: right; }

/* Menú desplegable de tablet y teléfono: ocupa todo el ancho, debajo del botón. */
.menu-panel {
	position: absolute;
	top: calc(50% + 32.25px);
	left: 0;
	right: 0;
	z-index: 9997;
	display: none;
	border-right: 10px solid #fff;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}

.menu-panel.abierto { display: block; }

.menu-panel a {
	display: block;
	padding: 10px 15px;
	color: var(--negro);
	font: 500 var(--t-menu)/20px var(--cuerpo);
}

.menu-panel a:hover, .menu-panel a:focus, .menu-panel a.activo { background: #fff; color: var(--verde); }

@media (max-width: 1024px) {
	.cabecera__barra, .cabecera__principal { padding: 0 5px; }
	.cabecera__datos { gap: 0 15px; }
	.cabecera__datos a, .cabecera__icono { font-size: 13px; }
	.cabecera__redes { padding-right: 15px; }
	.cabecera__redes a { font-size: 14px; }
	.cabecera__marca { width: 27%; }
	.cabecera__logo img { height: 40px; }
	.menu { width: 47%; }
	.menu-principal { display: none; }
	.menu-boton { display: flex; }
	.cabecera__clientes { width: 26%; }
}

@media (min-width: 1025px) {
	.menu-panel { display: none !important; }
}

@media (max-width: 767px) {
	.cabecera__barra { padding: 0; }
	.cabecera__datos { justify-content: center; width: 100%; }
	.cabecera__datos a { justify-content: center; font-size: 11px; text-align: center; }
	.cabecera__icono { font-size: 12px; }
	.cabecera__redes, .cabecera__clientes { display: none; }
	.cabecera__marca, .menu { width: 50%; }
	.cabecera__logo img { height: 30px; }
	.menu-boton { font-size: 25px; }
	.menu-panel { top: calc(50% + 23.75px); }
}

/* ---------- Portada: fotos que se alternan, título y logo ---------- */

.portada {
	position: relative;
	display: flex;
	min-height: 712px;
	overflow: hidden;
}

.portada__fotos { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

/* Velo del color oscuro del kit sobre las fotos. */
.portada__fotos::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	background: var(--oscuro);
	opacity: .7;
}

/* «Ken Burns» de Elementor hacia afuera: cada foto entra agrandada 1,3 veces y se achica
   durante 20 s; al dejar de estar activa vuelve a 1,3 en 10 s. Pase con fundido de 500 ms. */
.portada__foto {
	position: absolute;
	inset: 0;
	background: center / cover no-repeat;
	opacity: 0;
	transform: scale(1.3);
	transition: opacity .5s, transform 10s linear;
}

.portada__foto--1 { background-image: url("../images/portada-planta-aerea.jpg"); }
.portada__foto--2 { background-image: url("../images/portada-descarga-de-granos.jpg"); }
.portada__foto.saliente { z-index: 1; opacity: 1; transition: transform 10s linear; }
.portada__foto.activa { z-index: 2; opacity: 1; }
.portada__foto.zoom { transform: scale(1); transition: opacity .5s, transform 20s linear; }

.portada__caja {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 10px;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

.portada__texto {
	display: flex;
	flex: none;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	width: 65%;
	margin-top: 3em;
	padding: 10px;
}

.portada__titulo {
	color: #fff;
	font: 600 var(--t-portada)/1em var(--titulos);
	letter-spacing: -2px;
	text-transform: capitalize;
}

.portada__bajada { color: #fff; font-size: var(--t-destacado); line-height: 1.5em; }
.portada__bajada p { margin-bottom: .9rem; }

.portada__logo {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	margin-top: 3em;
	padding-bottom: 155px;
}

.portada__logo img { display: block; width: 95%; margin: 0 auto; }

@media (max-width: 1024px) {
	.portada { min-height: 480px; }
	.portada__texto { width: 100%; margin: 0; padding: 2em; }
	.portada__bajada { position: relative; z-index: 2; }
	.portada__logo { display: none; }
}

@media (max-width: 767px) {
	.portada { min-height: 400px; }
	.portada__texto { margin-top: 2em; }
}

/* ---------- Valores: experiencia, innovación y valor agregado ---------- */

.valores { padding: 16px; overflow: hidden; background: var(--oscuro); }

.valores__lista {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 20px;
	max-width: 1300px;
	margin: 0 auto;
	padding: 20px;
}

.valor {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 25px;
	border: 1px solid rgba(255, 255, 255, .12);
}

.valor__icono, .servicio__icono {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	color: var(--verde);
	font-size: 50px;
	line-height: 1;
}

.valor__texto { flex: 1; min-width: 0; }

.valor__titulo {
	margin: 8px 0 16px;
	color: #fff;
	font: 600 var(--t-tarjeta)/1.1em var(--titulos);
}

.valor p { color: var(--claro); font-size: var(--t-cuerpo); line-height: 1.5em; }

@media (max-width: 1024px) {
	.valores { padding: 0; }
	.valor { flex-direction: column; }
	.valor:nth-child(3) { padding-right: 30px; }
	.valor__icono { font-size: 45px; }
	.valor__texto { width: 100%; }
}

@media (max-width: 767px) {
	.valores__lista { grid-template-columns: minmax(0, 1fr); }
	.valor { flex-direction: row; padding: 20px; }
	.valor:nth-child(3) { padding-right: 20px; }
	.valor__icono { font-size: 40px; }
	.valor__texto { width: auto; }
}

/* ---------- Qué ofrecemos ---------- */

.ofrecemos {
	position: relative;
	padding: 7em 1em 11em;
	overflow: hidden;
}

.ofrecemos::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/ofrecemos-fondo-planos.jpg") center / cover no-repeat;
	opacity: .1;
}

.ofrecemos__caja {
	position: relative;
	display: flex;
	max-width: 1280px;
	margin: 0 auto;
}

.ofrecemos__texto {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: calc(50% - 3em);
	margin-right: 3em;
	padding: 10px;
}

.ofrecemos__bajada p { margin-bottom: .9rem; }
.ofrecemos__foto { width: 50%; padding: 10px; }

.ofrecemos__foto img {
	display: block;
	width: 100%;
	height: 420px;
	object-fit: cover;
}

@media (max-width: 1024px) {
	.ofrecemos { padding: 4em 1.5em 8em; }
	.ofrecemos::before { background-position: 65% 0; }
	.ofrecemos__caja { flex-wrap: wrap; }
	.ofrecemos__texto { width: 100%; margin: 0 0 2em; }
	.ofrecemos__foto { width: 100%; }
}

@media (max-width: 767px) {
	.ofrecemos { padding: 2em 1em 7em; }
	.ofrecemos::before { background-position: 70% 0; }
	.ofrecemos__texto { margin-bottom: 1em; }
	.ofrecemos__foto img { height: 200px; }
}

/* ---------- Servicios ---------- */

.servicios {
	position: relative;
	display: flow-root;  /* el margen negativo de las tarjetas no se escapa de la sección */
	overflow-x: clip;  /* las tarjetas que entran de costado no ensanchan la página (corrección pedida) */
	padding: 0 1em 7em;
	background: var(--claro);
}

.servicios::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/servicios-fondo-autoelevador.jpg") center / cover no-repeat;
	opacity: .05;
	filter: saturate(0);
}

/* Las tarjetas suben 6em sobre la sección anterior, como en el original. Cada fila de tres va
   aparte, como las secciones internas de Elementor (columnas de 33,333 % más los 20 px de
   márgenes): si una palabra larga no entra, la tarjeta se ensancha hacia la derecha sin correr
   a las demás, igual que la tarjeta de Elementor desborda su columna. */
.servicios__lista {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 1300px;
	margin: -6em auto 0;
	padding: 20px 20px 0;
}

.servicios__fila {
	display: grid;
	grid-template-columns: repeat(3, calc((100% + 20px) * .33333 - 20px));
	gap: 20px;
}

.servicio {
	display: flex;
	min-width: min-content;
	align-items: flex-start;
	gap: 15px;
	padding: 35px;
	background: #fff;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .15);
	transition: background .3s, border .3s, border-radius .3s, box-shadow .3s;
}

/* El icono y el título llevan además el margen inferior de 5 px del widget del original. */
.servicio__icono { margin-bottom: 5px; }

.servicio__titulo {
	flex: 1;
	min-width: 0;
	margin-bottom: 15px;
	color: var(--negro);
	font: 600 var(--t-tarjeta)/1.1em var(--titulos);
}

.servicios__mas {
	position: relative;
	width: calc(100% - 20px);
	max-width: 1280px;
	margin: 10px auto;
	padding: 45px;
	text-align: center;
}

@media (max-width: 1024px) {
	.servicios { padding: 0 0 4em; }
	/* En tablet las columnas del original miden 33,3 % (no un tercio exacto). */
	.servicios__fila { grid-template-columns: repeat(3, calc((100% + 20px) * .333 - 20px)); }
	.servicio { flex-direction: column; padding: 25px; }
	.servicio__icono { margin-bottom: 0; }
	.servicio__icono { font-size: 45px; }
	.servicio__titulo { width: 100%; }
	.servicios__mas { width: calc((100% - 20px) * .333); margin: 10px; padding: 35px 25px; }
}

@media (max-width: 767px) {
	.servicios { padding: 0 .5em 2em; }
	.servicios__fila { grid-template-columns: minmax(0, 1fr); }
	.servicio__icono { font-size: 40px; }
	.servicios__mas { width: calc(100% - 20px); }
}

/* ---------- Trayectoria: botón de video y «Nos criamos en el negocio» ---------- */

.trayectoria {
	position: relative;
	padding: 7em 1em;
	overflow: hidden;
	background: url("../images/trayectoria-fondo-planta-aerea.jpg") center / cover no-repeat;
}

.trayectoria::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--oscuro);
	opacity: .5;
}

.trayectoria__caja {
	position: relative;
	display: flex;
	max-width: 1280px;
	margin: 0 auto;
}

.trayectoria__video { display: flex; align-items: center; width: 50%; padding: 10px; }
.trayectoria__boton { position: relative; z-index: 2; display: flex; justify-content: center; width: 100%; }

/* Botón redondo con tres ondas (ElementsKit «glow ripple»). El original deja el triángulo
   arriba del centro: el glifo se apoya en la línea base de una línea de 45 px en Poppins
   (ascenso 1,05 em, contenido 1,4 em), con ascenso propio de 0,9375 em; de ahí el margen. */
.video-boton {
	--onda: 15px;
	position: relative;
	z-index: 6;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 100px;
	height: 100px;
	padding: 10px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--oscuro);
	font-size: 31px;
	line-height: 45px;
	cursor: pointer;
	transition: all .4s ease;
}

.video-boton:hover { background: rgba(41, 41, 41, .47); color: #fff; }
.video-boton .icono { margin-top: calc(22.5px - .5875em); }

.video-boton::before, .video-boton::after, .video-boton__onda {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	color: var(--verde);
	box-shadow: 0 0 0 0 currentColor;
	opacity: .6;
	animation: onda 3s infinite;
}

.video-boton::before { animation-delay: .9s; }
.video-boton::after { animation-delay: .3s; }

@keyframes onda {
	70% { box-shadow: 0 0 0 var(--onda) currentColor; opacity: 0; }
	100% { box-shadow: 0 0 0 0 currentColor; opacity: 0; }
}

.trayectoria__texto { width: 50%; padding: 2em; }
.trayectoria__titulo { padding-bottom: 15px; color: #fff; }

@media (max-width: 1024px) {
	.trayectoria { padding: 4em 1em; }
	.trayectoria__video { width: 40%; }
	.trayectoria__texto { width: 60%; }
	.video-boton { width: 90px; height: 90px; font-size: 26px; }
}

@media (max-width: 767px) {
	.trayectoria { padding: 3em 1em; background-position: 35% 0; }
	.trayectoria__caja { flex-wrap: wrap; }
	.trayectoria__video, .trayectoria__texto { width: 100%; }
	.trayectoria__texto { padding: 1em; }
	.trayectoria__titulo, .trayectoria__mas { text-align: center; }
	.video-boton { width: 80px; height: 80px; font-size: 24px; }
}

/* ---------- Mercados ---------- */

.mercados {
	position: relative;
	padding: 3em 1em;
	overflow: hidden;
	background: url("../images/mercados-fondo-rayas.png") center;
}

.mercados::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(270deg, #fff 25%, rgba(255, 255, 255, .78) 25%);
}

.mercados__caja {
	position: relative;
	display: flex;
	max-width: 1280px;
	margin: 0 auto;
}

.mercados__texto {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: calc(54.962% - 3em);
	margin-right: 3em;
	padding: 10px;
}

.mercados__bajada { margin-bottom: 20px; }
.mercados__bajada p { margin-bottom: .9rem; }
.mercados__foto { width: 45%; padding: 10px; }

.mercados__foto img {
	display: block;
	width: 100%;
	height: 317px;
	margin-bottom: 20px;
	object-fit: cover;
}

.mercados__mas--tableta { display: none; }

@media (max-width: 1024px) {
	.mercados { margin-top: 2em; padding: 2em 1.5em 4em; }
	.mercados__caja { flex-wrap: wrap; }
	.mercados__texto { width: 100%; margin: 0; }
	.mercados__foto { width: 100%; }
	.mercados__mas--escritorio { display: none; }
	.mercados__mas--tableta { display: block; }
}

@media (max-width: 767px) {
	.mercados { padding: 1em 1em 2em; }
	.mercados__texto { margin-bottom: -1em; }
	.mercados__foto img { height: 200px; margin-bottom: calc(1em + 20px); }
}

/* ---------- ¿Necesitás asesoramiento? ---------- */

.asesoramiento {
	position: relative;
	padding: 7em 1em;
	overflow: hidden;
	background: url("../images/asesoramiento-fondo-mate-y-maiz.jpg") 0 35% / cover no-repeat;
}

.asesoramiento::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--oscuro);
	opacity: .65;
}

.asesoramiento__caja {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	padding: 10px;
	text-align: center;
}

.asesoramiento__titulo {
	margin-bottom: 20px;
	color: #fff;
	font: 600 var(--t-grande)/1em var(--titulos);
	letter-spacing: -2px;
	text-transform: capitalize;
}

.asesoramiento__bajada {
	margin-bottom: 20px;
	color: var(--claro);
	font-size: var(--t-destacado);
	line-height: 1.5em;
}

.asesoramiento__bajada p { margin-bottom: .9rem; }

@media (max-width: 1024px) {
	.asesoramiento { padding: 5em 1em; background-position: center; }
}

@media (max-width: 767px) {
	.asesoramiento { padding: 3em .5em; background-position: 30% 0; }
}

/* ---------- Noticias ---------- */

.noticias { padding: 7em 1em; overflow: hidden; }

.noticias__caja { max-width: 1280px; margin: 0 auto; padding: 10px; }
.noticias__cabeza { display: flex; margin-bottom: 3em; }
.noticias__intro { width: 84.958%; }
.noticias__bajada { margin-bottom: -1em; }
.noticias__bajada p { margin-bottom: .9rem; }
.noticias__todas--escritorio { display: flex; align-items: flex-end; justify-content: flex-end; width: 15%; }
.noticias__todas--tableta { display: none; text-align: right; }

.noticias__lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 25px 35px;
	margin-bottom: 20px;
}

.noticia { overflow: hidden; }

.noticia__titulo {
	margin-bottom: 5px;
	color: var(--negro);
	font: 600 var(--t-noticia)/1.2em var(--titulos);
}

.noticia__titulo a, .noticia__titulo a:hover { color: var(--negro); }

.noticia__fecha {
	margin-bottom: 13px;
	color: var(--oro);
	font-size: var(--t-chico);
	line-height: 1.6em;
}

.noticia__resumen { margin-bottom: 10px; color: var(--texto); font-size: 14px; line-height: 1.5em; }

@media (max-width: 1024px) {
	.noticias { padding: 1em 1em 4em; }
	.noticias__intro { width: 77%; }
	.noticias__todas--escritorio { display: none; }
	.noticias__todas--tableta { display: block; }
	.noticias__lista { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
	.noticias { padding: 1em 1em 2em; }
	.noticias__cabeza { margin-bottom: 2em; }
	.noticias__intro { width: 100%; }
	.noticias__bajada { margin-bottom: 0; }
	.noticias__lista { row-gap: 15px; }
	.noticias__todas--tableta { text-align: left; }
}

/* ---------- RRHH: «Envianos tu CV» ---------- */

.rrhh {
	position: relative;
	padding: 0 1em;
	background: linear-gradient(130deg, var(--oro) 0%, var(--oscuro) 100%);
}

.rrhh::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/rrhh-fondo-cartel.jpg") center / cover no-repeat;
	opacity: .1;
	filter: saturate(0);
}

.rrhh__caja {
	position: relative;
	max-width: 1260px;
	margin: 0 auto;
	padding: calc(3em + 10px) calc(5em + 10px) calc(3em + 10px) calc(2em + 10px);
}

.rrhh__titulo { color: #fff; }
.rrhh__bajada { margin-bottom: 20px; color: var(--claro); }
.rrhh__bajada p { margin-bottom: .9rem; }

/* Formulario: mismo diseño que el del original; envía con contacto.php (reCAPTCHA v3). */
.formulario {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -3.5px -30px;
}

.formulario__campo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 33.333%;
	margin-bottom: 30px;
	padding: 0 3.5px;
}

.formulario input[type="text"], .formulario input[type="email"],
.consulta__campo input, .consulta__campo textarea {
	width: 100%;
	min-height: 47px;
	padding: 6px 16px;
	border: 1px solid #69727d;
	border-radius: 0;
	background: #fff;
	color: var(--texto);
	font-size: 16px;
	line-height: 1.4;
	transition: all .3s;
}

.formulario input[type="text"]:focus, .formulario input[type="email"]:focus,
.consulta__campo input:focus, .consulta__campo textarea:focus {
	border-color: var(--texto);
	background: #fff;
	color: var(--texto);
}

/* El campo de archivo mide 435 px: en el original se sale de su columna y, en tablet y teléfono,
   de la pantalla (la página se puede correr de costado). En la copia no pasa de su columna. */
.formulario input[type="file"] {
	max-width: 100%;
	border: 1px solid;
	border-radius: 0;
	background: #fff;
	color: var(--texto);
	font-size: 16px;
	line-height: 1.5;
}

/* El tema Hello hace que el botón «Elegir archivo» herede la tipografía del campo. */
.formulario input[type="file"]::file-selector-button { -webkit-appearance: button; font: inherit; }

.formulario__campo--enviar { align-items: flex-end; width: 20%; }

.formulario .boton {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 47px;
	padding: 0;
	white-space: nowrap;
}

@media (max-width: 1024px) {
	.rrhh { padding: 0; }
	.rrhh__caja { position: relative; z-index: 2; padding: calc(2em + 10px) calc(2em + 10px) calc(2em + 10px) calc(1em + 10px); }
	.formulario__campo--enviar { width: 33.333%; }
}

@media (max-width: 767px) {
	.rrhh__caja { padding: 3em 2em 2em; }
	.formulario__campo, .formulario__campo--enviar { width: 100%; }
	.formulario input[type="text"], .formulario input[type="email"], .formulario input[type="file"],
	.consulta__campo input, .consulta__campo textarea { font-size: 14px; }
}

/* ---------- Pie ---------- */

.pie__principal { position: relative; padding: 3em 0; background: var(--oscuro); }

.pie__principal::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/pie-fondo-mapa-mundial.png") center / cover no-repeat;
	opacity: .07;
}

.pie__caja { position: relative; max-width: 1280px; margin: 0 auto; padding: 10px; }

.pie__barra {
	display: flex;
	align-items: center;
	padding: 1em;
	border: 1px solid rgba(255, 255, 255, .46);
}

.pie__navegacion { width: 79.958%; padding: 10px; }
.pie__menu { display: flex; flex-wrap: wrap; gap: 0 45px; }

.pie__menu a {
	display: flex;
	align-items: center;
	color: #fff;
	font-size: var(--t-menu);
	font-weight: 500;
}

.pie__clientes { width: 20%; padding: 10px; text-align: right; }

.pie__columnas { display: flex; margin-top: 3em; }
.pie__columna { padding: 10px; }
.pie__columna--logo { width: 20%; }
.pie__columna--contacto { width: 25%; }
.pie__columna--sucursales { width: 25%; }
.pie__columna--galeria { width: 30%; }

.pie__logo { display: block; }
.pie__logo img { display: block; width: 85%; }

.pie__seguinos {
	width: 170px;
	max-width: 100%;
	margin-bottom: 20px;
	color: #fff;
	font: 600 var(--t-tarjeta)/1.1em var(--titulos);
	text-transform: capitalize;
}

.pie__redes { margin-bottom: 26px; }

.pie__titulo {
	margin-bottom: 20px;
	color: #fff;
	font-size: var(--t-cuerpo);
	font-weight: 600;
	line-height: 1.5em;
	text-transform: capitalize;
}

.pie__lista { margin-bottom: 20px; }
.pie__lista li:not(:last-child) { padding-bottom: 2.5px; }
.pie__lista li + li { margin-top: 2.5px; }

.pie__lista a {
	display: flex;
	align-items: center;
	color: var(--negro);
	font-size: var(--t-chico);
	line-height: 1.6em;
}

.pie__texto { color: var(--claro); }
.pie__correo { margin-bottom: 0; }
.pie__sucursales { margin-bottom: 35px; }

.pie__icono {
	display: flex;
	flex: none;
	width: 1.25em;
	color: var(--verde);
	font-size: 14px;
}

.pie__icono + .pie__texto { padding-left: 5px; }

.boton--legajo {
	display: inline-flex;
	gap: 12px;
	padding: 10px 20px;
	border: 2px solid var(--verde);
	background: transparent;
}

.boton--legajo:hover, .boton--legajo:focus { background: var(--verde); }
/* En el original el icono es un carácter del botón: suma también el espaciado entre letras. */
.boton__icono { display: flex; align-items: center; padding-right: .5px; }

.galeria {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 5px;
}

.galeria a {
	position: relative;
	display: block;
	overflow: hidden;
	padding-bottom: 66.6667%;
}

.galeria__foto, .galeria__velo { position: absolute; inset: 0; }

.galeria__foto {
	background: center / cover no-repeat;
	transition: transform .8s, filter .8s;
}

.galeria__foto--1 { background-image: url("../images/galeria-silo-bolsa.jpeg"); }
.galeria__foto--2 { background-image: url("../images/galeria-recorrida-a-campo.jpg"); }
.galeria__foto--3 { background-image: url("../images/galeria-semilla-de-maiz.jpg"); }
.galeria__foto--4 { background-image: url("../images/galeria-local-de-ventas.jpg"); }
.galeria__foto--5 { background-image: url("../images/galeria-carga-de-silos.jpg"); }
.galeria__foto--6 { background-image: url("../images/galeria-deposito.jpg"); }

.galeria__velo { transition: mix-blend-mode .8s, transform .8s, opacity .8s, background-color .8s; }
.galeria a:hover .galeria__velo, .galeria a:focus .galeria__velo { background-color: rgba(0, 0, 0, .5); }

.pie__derechos { padding: 1em; background: var(--oscuro); }

.pie__derechos p {
	max-width: 1280px;
	margin: 0 auto;
	padding: 10px;
	color: var(--claro);
	font: 300 var(--t-derechos)/1 var(--cuerpo);
	text-align: center;
}

@media (max-width: 1024px) {
	.pie__principal { padding: 2em 1em 1em; }
	.pie__barra { padding: 1em; }
	.pie__navegacion { width: 80%; }
	.pie__menu { gap: 0 35px; }
	.pie__columnas { flex-wrap: wrap; margin-top: 3em; }
	.pie__columna--logo { width: 30%; }
	.pie__columna--contacto, .pie__columna--sucursales { width: 35%; }
	.pie__columna--galeria { width: 100%; margin-top: 1em; }
	.pie__redes { margin-bottom: 32px; }
	.pie__redes a { font-size: 14px; }
	.pie__titulo--galeria { text-align: center; }
}

/* La galería cambia de columnas con el JS de Elementor, que compara innerWidth < 1024 y < 767:
   un píxel antes que el CSS (en 1024 px sigue con 3 columnas; en 767, con 6). */
@media (max-width: 1023.98px) {
	.galeria { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
}

@media (max-width: 766.98px) {
	.galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
}

@media (max-width: 767px) {
	.pie__navegacion, .pie__clientes { width: 100%; }
	.pie__barra { flex-wrap: wrap; }
	.pie__menu { justify-content: center; gap: 0 30px; }
	.pie__menu a { justify-content: center; line-height: 2.5em; text-align: center; }
	.pie__clientes { text-align: center; }
	.pie__columna { width: 100% !important; }
	.pie__columna--logo { margin-bottom: 2em; }
	/* El logo toma su ancho natural (hasta el de la columna) y queda a la izquierda; la imagen,
	   al 70 %, se centra dentro de él. */
	.pie__logo { display: inline-block; max-width: 100%; text-align: center; vertical-align: top; }
	.pie__logo img { width: 70%; margin: 0 auto; }
	.pie__columna--galeria { margin-top: 0; }
	.pie__titulo--galeria { text-align: left; }
	.boton--legajo { margin: 0 auto; }
	.pie__legajo { text-align: center; }
}

/* =====================================================================================
   Páginas interiores
   ===================================================================================== */

/* ---------- Banner con título y migas de pan ---------- */

.banner {
	position: relative;
	padding: 0 1em;
	overflow: hidden;
	background: center / cover no-repeat;
}

.banner--quienes-somos { background-image: url("../images/quienes-somos-banner-descarga-de-granos.jpg"); }
.banner--contacto { background-image: url("../images/contacto-banner-planta.jpg"); }
.banner--noticias { background-image: url("../images/noticias-banner-carga-de-camion.jpg"); }

.banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--oscuro);
	opacity: .7;
}

.banner__caja {
	position: relative;
	display: flex;
	max-width: 1280px;
	margin: 0 auto;
}

.banner__texto { display: flex; align-items: center; width: 74.959%; padding: 10px; }

.banner__titulo {
	width: 100%;
	color: #fff;
	font: 600 var(--t-grande)/1em var(--titulos);
	letter-spacing: -2px;
	text-transform: capitalize;
}

.migas {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 25%;
	margin-top: 22em;
}

.migas ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
	padding: 15px 30px;
	list-style: none;
	background: var(--claro);
}

.migas a, .migas__actual {
	display: flex;
	align-items: center;
	color: var(--negro);
	font: italic 600 var(--t-antetitulo)/1.2em var(--cuerpo);
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* Como en el original, el enlace se pone verde al pasar el mouse, pero el texto conserva su color. */
.migas a:hover { color: var(--verde); }
.migas__texto { color: var(--negro); }
.migas__icono { display: flex; flex: none; width: 1.25em; color: var(--verde); font-size: 14px; }
.migas__actual .migas__icono { letter-spacing: normal; text-transform: none; }  /* como el original: ahí el icono no está dentro del texto */
.migas__icono + .migas__texto { padding-left: 5px; }

@media (max-width: 1024px) {
	.banner__texto { width: 61%; padding: 1em; }
	.migas { width: 39%; margin-top: 15em; }
	.migas ol { padding: 12px 24px; }
	.migas__icono { font-size: 13px; }
}

@media (max-width: 767px) {
	.banner__caja { flex-wrap: wrap; }
	.banner__texto { width: 100%; padding: 6em 1em 4em; }
	.banner--quienes-somos .banner__titulo, .banner--contacto .banner__titulo, .banner--noticias .banner__titulo { text-align: center; }
	.migas { justify-content: flex-end; width: 100%; margin-top: 0; }
	.migas ol { padding: 10px 20px; }
	.migas__icono { font-size: 12px; }
}

/* Animación de entrada «rápida» de Elementor (0,75 s). */
.animado.anim-rapida { animation-duration: .75s; }

/* ---------- Quiénes somos: La Empresa ---------- */

.empresa { padding: 7em 1em; overflow: hidden; background: var(--claro); }

.empresa__caja {
	display: flex;
	max-width: 1320px;
	margin: 0 auto;
}

/* La foto desborda 3em por debajo del recuadro blanco, que a su vez se monta 2em sobre ella. */
.empresa__foto { width: 50%; padding: 0 0 4em 2em; }

.empresa__foto img {
	display: block;
	width: calc(100% + 3em);
	max-width: none;
	height: 1200px;
	object-fit: cover;
}

/* Sin posicionar: el recuadro se pinta por orden, encima de la foto en escritorio y debajo de
   ella en teléfono (donde la foto pasa al final), como las columnas del original. */
.empresa__texto {
	display: flex;  /* como los widgets de Elementor: los márgenes de cada bloque no se funden */
	flex-direction: column;
	width: 50%;
	margin: 4em 0 0 -2em;
	padding: 3em;
	background: #fff;
	transition: background .3s, border .3s, border-radius .3s, box-shadow .3s;
}

/* Cada párrafo es un widget de texto: su margen de 1em hacia abajo se compensa como en el original. */
.empresa__parrafo { display: flow-root; margin-bottom: calc(20px - 1em); }
.empresa__parrafo p { margin-bottom: .9rem; }
.empresa__parrafo--vision { margin-bottom: 20px; }
.empresa__parrafo--mision { margin-bottom: 0; }

.empresa__separador {
	height: 0;
	margin: 10px 0 30px;
	border: 0;
	border-top: 1px dashed rgba(25, 25, 25, .23);
	color: inherit;
}

.empresa__subtitulo {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	color: var(--negro);
	font: 600 var(--t-tarjeta)/1.1em var(--titulos);
}

.empresa__tilde { display: flex; flex: none; width: 1.25em; color: var(--verde); font-size: 25px; }
.empresa__tilde + span { padding-left: 5px; }

@media (max-width: 1024px) {
	.empresa { padding: 3em 1em 4em 0; }
	.empresa__foto { width: 36%; padding: 0 0 2em; }
	.empresa__foto img { width: calc(100% + 7em); height: 1420px; }
	.empresa__texto { width: 64%; margin: 2em 0 0; padding: 2em; }
	.empresa__parrafo--vision, .empresa__parrafo--mision { margin-bottom: calc(20px - 1em); }
	.empresa__subtitulo { margin-bottom: 10px; }
	.empresa__tilde { font-size: 22px; }
}

@media (max-width: 767px) {
	.empresa { padding: 2em 2em 3em 0; }
	.empresa__caja { flex-wrap: wrap; }
	/* En teléfono el texto va primero y la foto sube 6em por debajo de él. */
	.empresa__foto { order: 2; width: 100%; padding: 0 0 0 2em; }
	.empresa__foto img { height: 480px; margin-top: -6em; }
	.empresa__texto { width: 100%; margin: 0; }
	.empresa__parrafo--mision { margin-bottom: 0; }
	.empresa__separador { margin: 5px 0 25px; }
	.empresa__tilde { font-size: 20px; }
}

/* ---------- Quiénes somos: cifras ---------- */

.cifras {
	position: relative;
	padding: 4em 1em;
	overflow: hidden;
	background: var(--oscuro);
}

.cifras::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/cifras-fondo-planta-aerea.jpg") center / cover no-repeat;
	opacity: .3;
}

@media (min-width: 1025px) {
	.cifras::before { background-attachment: fixed; }
}

.cifras__lista {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	max-width: 1280px;
	margin: 0 auto;
}

.cifra { display: flex; width: 33.333%; }
.cifra + .cifra { border-left: 1px solid rgba(255, 255, 255, .25); }
.cifra__bloque { display: flex; flex-direction: column; justify-content: center; width: 100%; }

.cifra__numero {
	display: flex;
	color: #fff;
	font: 600 var(--t-grande)/1em var(--titulos);
	letter-spacing: -2px;
	text-align: center;
	text-transform: capitalize;
}

.cifra__numero--acopio { text-transform: none; }
.cifra__prefijo { flex-grow: 1; text-align: end; white-space: pre-wrap; }
.cifra__sufijo { flex-grow: 1; text-align: start; white-space: pre-wrap; }

.cifra__titulo {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	color: var(--claro);
	font-size: var(--t-destacado);
	line-height: 1.5em;
}

@media (max-width: 1024px) {
	.cifras { padding: 0; }
	.cifra { width: 50%; padding: 2em; }
	.cifra:nth-child(3) { width: 100%; border-top: 1px solid rgba(255, 255, 255, .25); border-left: 0; }
}

@media (max-width: 767px) {
	.cifra { padding: 2em 1em; }
}

/* ---------- Quiénes somos: proveedores ---------- */

.proveedores {
	position: relative;
	padding: 7em 1em 4em;
	overflow: hidden;
	background: url("../images/mercados-fondo-rayas.png") center;
}

.proveedores::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #fff 33%, rgba(255, 255, 255, .78) 25%);
}

.proveedores__caja {
	position: relative;
	display: flex;
	max-width: 1280px;
	margin: 0 auto;
}

.proveedores__texto { display: flex; flex-direction: column; align-items: flex-start; width: calc(40% - 3em); margin-right: 3em; padding: 10px; }
.proveedores__texto > :not(.boton) { align-self: stretch; }
.proveedores__bajada { display: flow-root; margin-bottom: 20px; }
.proveedores__bajada p { margin-bottom: .9rem; }

/* Grilla de logos (galería de Elementor): proporción 3:2, cada logo aparece al entrar en
   pantalla (de 0,5 a 1 con fundido, 0,8 s) y crece al 110 % al pasar el mouse. */
.proveedores__logos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-content: start;
	gap: 30px;
	width: 60%;
	padding: 10px;
	list-style: none;
}

.proveedores__logos li { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }

.proveedores__logo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: center top;
	transition: filter .8s, transform .8s;
}

.js .proveedores__logo:not(.cargado) { filter: opacity(0); transform: scale(.5); }
.proveedores__logos li:hover .proveedores__logo { transform: scale(1.1); }

@media (max-width: 1024px) {
	.proveedores { margin-top: 2em; padding: 2em 1.5em 4em; }
	.proveedores__texto { width: calc(35% - 1em); margin-right: 1em; }
	.proveedores__logos { width: 65%; }
}

/* La galería cambia de columnas con su JS (innerWidth < 1024). */
@media (max-width: 1023.98px) {
	.proveedores__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

@media (max-width: 767px) {
	.proveedores { padding: 1em 1em 2em; }
	.proveedores__caja { flex-wrap: wrap; }
	.proveedores__texto { width: 100%; margin: 0 0 1em; }
	.proveedores__logos { width: 100%; }
}

/* ---------- Servicios: banner con video ---------- */

/* El video va entre el fondo del banner y la capa oscura (::before): por eso el banner aísla
   su apilamiento y el video baja a -1. En teléfono no se muestra (ni se descarga): queda la
   foto de fondo, como en el original. */
.banner--servicios {
	isolation: isolate;
	background-image: url("../images/servicios-banner-camioneta.jpg");
}

.banner--servicios::before { opacity: .5; }

.banner__video {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

/* Como Elementor: una caja 16:9 a todo el ancho, centrada, con el video recortado adentro. */
.banner__video video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	min-height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transform: translate(-50%, -50%);
}

.banner--servicios .banner__texto { flex-wrap: wrap; align-content: center; }

.banner__bajada {
	width: 100%;
	margin-top: 20px;
	color: #fff;
	font-size: var(--t-destacado);
	line-height: 1.5em;
}

.banner__bajada p { margin-bottom: .9rem; }

.banner--servicios .migas { margin-top: 25em; }
.banner--servicios .migas ol { background: #fff; }

@media (max-width: 1024px) {
	.banner--servicios .banner__texto, .banner--contacto .banner__texto, .banner--noticias .banner__texto { width: 65%; }
	.banner--contacto .migas, .banner--noticias .migas { width: 35%; }
	.banner--servicios .migas { width: 35%; margin-top: 20em; }
}

@media (max-width: 767px) {
	.banner__video { display: none; }
	.banner--servicios .banner__texto, .banner--contacto .banner__texto, .banner--noticias .banner__texto { width: 100%; }
	.banner--servicios .migas, .banner--contacto .migas, .banner--noticias .migas { width: 100%; margin-top: 0; }
}

/* ---------- Servicios: un bloque por rubro ---------- */

.rubro { position: relative; padding: 7em 1em 4em; }

/* Acopio y Logística: trama de rayas bajo un velo blanco, opaco en el cuarto derecho. Recortan lo
   que sobresale: en el original la foto, al entrar desde la derecha, ensancha la página un instante. */
.rubro--rayas {
	overflow: hidden;
	background:
		linear-gradient(270deg, #fff 25%, rgba(255, 255, 255, .78) 25%),
		url("../images/mercados-fondo-rayas.png") center;
}

/* Insumos y Asesoramiento: la foto a la izquierda y los planos de fondo, casi transparentes. */
.rubro--planos { padding-bottom: 11em; overflow: hidden; }

.rubro--planos::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/ofrecemos-fondo-planos.jpg") center / cover no-repeat;
	opacity: .1;
}

.rubro__caja {
	position: relative;
	display: flex;
	max-width: 1280px;
	margin: 0 auto;
}

.rubro__texto {
	display: flex;  /* como los widgets de Elementor: los márgenes de cada bloque no se funden */
	flex-direction: column;
	justify-content: center;
	width: calc(54.962% - 3em);
	margin-right: 3em;
	padding: 10px;
}

.rubro--planos .rubro__texto { width: calc(55% - 3em); margin: 0 0 0 3em; }

.rubro__foto { width: 45%; padding: 10px; }
.rubro--planos .rubro__foto { order: -1; }

.rubro__foto img {
	display: block;
	width: 100%;
	height: 420px;
	object-fit: cover;
}

.rubro--acopio .rubro__foto img { height: 540px; }
.rubro--insumos .rubro__foto img { height: 1100px; }

.rubro__parrafos:not(:last-child) { margin-bottom: 20px; }
.rubro__parrafos p, .insumo p { margin-bottom: .9rem; }

/* Insumos: tres filas de dos, cada una con su animación de entrada. */
.insumos__fila {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 20px;
}

.insumos__fila:first-child { margin-bottom: 1em; }
.insumos__fila:nth-child(2) { margin-bottom: 1px; }

.insumo__titulo {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	color: var(--negro);
	font: 600 var(--t-noticia)/1.2em var(--titulos);
}

.insumo__tilde { display: flex; flex: none; width: 1.25em; color: var(--verde); font-size: 20px; }
.insumo__tilde + span { padding-left: 5px; }

@media (max-width: 1024px) {
	.rubro { padding: 4em 1.5em; }
	.rubro--rayas { margin-top: 2em; padding: 2em 1.5em 4em; }
	.rubro--asesoramiento { padding-bottom: 6em; }
	.rubro--planos::before { background-position: 65% 0; }
	.rubro__caja { flex-wrap: wrap; }
	.rubro__texto, .rubro--planos .rubro__texto { width: 100%; margin: 0; }
	.rubro--planos .rubro__texto { margin-bottom: 2em; }
	.rubro__foto, .rubro--planos .rubro__foto { width: 100%; order: 0; }
	.rubro--insumos .rubro__foto img { height: 420px; }
	.insumo__tilde { font-size: 19px; }
}

@media (max-width: 767px) {
	.rubro { padding: 2em 1em; }
	.rubro--rayas { padding: 1em 1em 2em; }
	.rubro--asesoramiento { padding-bottom: 4em; }
	.rubro--planos::before { background-position: 70% 0; }
	.rubro--planos .rubro__texto { margin-bottom: 1em; }
	.rubro__foto img, .rubro--acopio .rubro__foto img, .rubro--insumos .rubro__foto img { height: 200px; }
	.insumos__fila { grid-template-columns: 100%; }
	.insumos__fila:first-child { margin-bottom: 0; }
	.insumo__tilde { font-size: 17px; }
}

/* ---------- Mercados: cotizaciones ---------- */

/* Los espacios entre la tabla, la fecha y la nota son los del original, donde cada tabla de
   wpDataTables suma su crédito «Generated by» (una línea de texto, --linea) y la fecha es una
   segunda tabla subida 70 px: la copia no lleva los créditos pero conserva su lugar. */
.cotizaciones {
	--linea: calc(var(--t-cuerpo) * 1.5);
	position: relative;
	padding: 80px 15px;
}

.cotizaciones::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/mercados-fondo-trama-puntos.png") center top / cover no-repeat;
	opacity: .05;
}

.cotizaciones__caja {
	position: relative;
	display: flex;  /* sin márgenes que se fundan entre el separador y «Futuros» */
	flex-direction: column;
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px;
}

.cotizaciones__fila { display: flex; column-gap: 3.999%; }

.cotizacion { display: flex; flex-direction: column; width: 47.999%; }
.cotizacion + .cotizacion { width: 47.334%; }

.cotizacion__titulo {
	color: var(--negro);
	font: 600 var(--t-tarjeta)/1.1em var(--titulos);
}

.cotizaciones__separador {
	height: 0;
	margin: 2px 0 22px;
	border: 0;
	border-top: 1px solid rgba(152, 198, 59, .47);
	color: inherit;
}

.futuros__titulo {
	margin: 10px 0 40px;
	color: var(--negro);
	font: 600 var(--t-subtitulo)/1.1em var(--titulos);
}

/* Tablas: columnas de ancho fijo (las mismas proporciones que en el original) y el texto que no
   entra se corta con «…». */
.tabla {
	width: 100%;
	margin-top: 20px;
	border: 1px solid #ebebeb;
	border-collapse: collapse;
	table-layout: fixed;
	color: #808080;
	font-size: .9em;
}

.tabla th, .tabla td {
	padding: 10px;
	line-height: 1.5em;
	overflow: hidden;
	font-weight: 400;
	text-align: left;
	text-overflow: ellipsis;
	vertical-align: top;
}

.tabla thead th { background: #fff; font-weight: 700; }
.tabla tbody tr:nth-child(odd) > * { background: #f7f7f7; }
.tabla .numero { text-align: right; }
.tabla .tabla__tendencia { text-align: center; }
.tabla img { vertical-align: middle; }

.tabla--pizarra thead th:first-child { width: 20%; }
.tabla--cuatro thead th:first-child { width: 40%; }
.tabla--cuatro thead th:last-child { width: 20%; }

.cotizacion__fecha {
	margin: calc(var(--linea) + 10px) 0 calc(var(--linea) + 40px);
	padding: 10px;
	background: #fff;
	color: #7a7a7a;
	font-size: .9em;
	line-height: 1.5;
}

.cotizacion__fecha:not(:last-child) { margin-bottom: calc(var(--linea) + 5px); }

.cotizacion__nota {
	margin: 0 0 calc(55px - var(--linea)) 10px;
	color: #7a7a7a;
	font-size: 14px;
}

@media (max-width: 1024px) {
	.cotizaciones { padding: 30px 15px 35px; }
	.cotizaciones__caja { max-width: 1024px; }
}

@media (max-width: 767px) {
	.cotizaciones { margin: 20px 0; padding: 30px 0 35px; }
	.cotizaciones__caja { max-width: 767px; padding: 0; }
	.cotizaciones__fila { flex-direction: column; row-gap: 1px; }
	.cotizacion, .cotizacion + .cotizacion { width: 100%; }
	.cotizacion__titulo, .futuros__titulo { padding-left: 10px; }
}

/* ---------- Contacto: consulta y sucursales ---------- */

.contacto { padding: 7em 1em; overflow: hidden; background: var(--claro); }

.contacto__caja { display: flex; max-width: 1260px; margin: 0 auto; }

/* El recuadro blanco centra su contenido en vertical, como la columna de Elementor. */
.consulta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 69.666%;
	padding: 3em;
	background: #fff;
}

.consulta__titulo { text-align: center; }
.consulta__bajada { margin-bottom: 20px; text-align: center; }
.consulta__bajada p { margin-bottom: .9rem; }

.consulta__formulario { display: flex; flex-wrap: wrap; margin: 0 -5px -10px; }

.consulta__campo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	margin-bottom: 10px;
	padding: 0 5px;
}

.consulta__campo--tercio { width: 33.333%; }
.consulta__campo--mitad { width: 50%; }
.consulta__campo--enviar { align-items: flex-end; }
.consulta__campo label { color: var(--texto); font-weight: 600; cursor: pointer; }

/* Mensaje de estado de los dos formularios (enviando, gracias o error). */
.formulario__estado { width: 100%; padding: 0 5px; color: var(--texto); font-size: 16px; line-height: 1.5; }
.formulario__estado:empty { display: none; }
.formulario .formulario__estado { margin: -10px 0 30px; padding: 0 3.5px; color: #fff; }
.consulta__formulario .formulario__estado { margin: 10px 0 10px; }
.formulario__estado--error { color: #b3261e; }
.formulario .formulario__estado--error { color: #ffcfc7; }
.formulario__estado--cargando::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 10px;
	border: 2px solid rgba(127, 127, 127, .4);
	border-top-color: var(--verde);
	border-radius: 50%;
	vertical-align: -3px;
	animation: girar .8s linear infinite;
}
.formulario .formulario__estado--cargando::before { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }
button:disabled { opacity: .6; cursor: wait; }
@keyframes girar { to { transform: rotate(360deg); } }

.sucursales {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 30%;
	padding: 3em;
	background: var(--oscuro);
}

.sucursales::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/sucursales-fondo-camioneta-rastrojo.jpg") center / cover no-repeat;
	opacity: .3;
}

.sucursales > * { position: relative; }

.sucursales__titulo {
	margin-bottom: 20px;
	color: #fff;
	font: 600 var(--t-subtitulo)/1.1em var(--titulos);
	text-transform: capitalize;
}

.sucursales__bajada { margin-bottom: 20px; color: #fff; }
.sucursales__bajada p { margin-bottom: .9rem; }

.sucursales__lista { display: flex; flex-direction: column; gap: 20px; }

.sucursal { display: flex; align-items: flex-start; }

.sucursal__icono {
	display: flex;
	flex: none;
	align-items: center;
	height: 1em;
	color: var(--verde);
	font-size: 25px;
	line-height: 1;
}

.sucursal__contenido { flex-grow: 1; }

.sucursal__titulo {
	margin-bottom: 7px;
	color: #fff;
	font: 600 var(--t-noticia)/1.2em var(--titulos);
}

.sucursal__texto { color: var(--claro); }
.sucursal--telefonos .sucursal__texto { line-height: 1.7em; }

/* ---------- Contacto: mapa (Google Maps, como el original) ---------- */

.mapa { overflow: hidden; }
.mapa__lienzo { height: 480px; }
.js .mapa__lugares { display: none; }
.mapa__respaldo { display: block; width: 100%; height: 100%; border: 0; }

/* Globo de información de cada marcador. */
.mapa__globo { margin: 10px 0; text-align: center; }
.mapa__globo-titulo strong { font-weight: 400; }  /* en el original el título no queda en negrita */

@media (max-width: 1024px) {
	.contacto { padding: 4em 2em; }
	.contacto__caja { flex-wrap: wrap; }
	.consulta, .sucursales { width: 100%; }
	.consulta__bajada p { margin-bottom: calc(.9rem - 1em); }
	.consulta__campo--enviar { justify-content: center; }
	.sucursal { gap: 15px; }
	.sucursal--direccion .sucursal__contenido { padding-right: 5em; }
	.sucursal__icono { font-size: 23px; }
}

@media (max-width: 767px) {
	.contacto { padding: 2em 1em 3em; }
	.consulta, .sucursales { padding: 2em; }
	.consulta__formulario { margin-bottom: 20px; }
	.consulta__campo--tercio, .consulta__campo--mitad { width: 100%; }
	.sucursal--direccion .sucursal__contenido { padding-right: 0; }
	.sucursal__icono { font-size: 21px; }
}

/* ---------- Noticias: archivo (maqueta) ---------- */

.archivo { padding: 6em 1em; background: var(--claro); }
.archivo__caja { max-width: 1280px; margin: 0 auto; padding: 10px; }

.archivo__lista {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 25px;
}

/* Las tarjetas de una misma fila quedan del mismo alto; la bajada crece y lleva «Leer más» y la
   fecha al pie, como en las tarjetas de Elementor. */
.archivo__lista > li { display: flex; flex-direction: column; }

.entrada {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	overflow: hidden;
	background: #fff;
}

.entrada__texto {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	margin-top: 10px;
	padding: 0 30px;
}

.entrada__titulo { margin-bottom: 25px; color: var(--negro); font: 600 var(--t-tarjeta)/1.1em var(--titulos); }
.entrada__titulo a, .entrada__titulo a:hover { color: var(--negro); }
.entrada__resumen { flex-grow: 1; margin-bottom: 25px; }

.entrada__leer {
	display: inline-block;
	margin-bottom: 20px;
	color: var(--verde);
	font: 700 var(--t-boton)/1.6em var(--cuerpo);
	text-transform: uppercase;
}

.entrada__fecha {
	padding: 15px 30px;
	border-top: 1px solid rgba(25, 25, 25, .23);
	color: var(--oro);
	font-size: var(--t-boton);
	line-height: 1.6em;
}

/* Paginación de muestra: no lleva a ningún lado hasta que las noticias se conecten. */
.paginacion { text-align: center; }
.paginacion__numero { margin: 0 5px; color: var(--negro); }
.paginacion__numero:first-child { margin-left: 0; }
.paginacion__numero:last-child { margin-right: 0; }
.paginacion__numero--actual { color: var(--texto); }

@media (max-width: 1024px) {
	.archivo { padding: 3em 1em; }
	.archivo__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

@media (max-width: 767px) {
	.archivo { padding: 2em .5em; }
	.archivo__lista { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Noticias: nota (plantilla) ---------- */

.banner--nota { background-image: url("../images/nota-banner-tolva-y-tractor.jpeg"); background-position: 0 48%; }
.banner--nota .banner__texto { flex-wrap: wrap; align-content: center; }
.banner--nota .banner__titulo { margin-bottom: 20px; }

.banner__fecha {
	display: flex;
	align-items: center;
	width: 100%;
	font-weight: 500;
}

/* El icono ocupa el alto de la línea, como en el original; sólo el texto va en blanco. */
.banner__fecha-icono { display: flex; flex: none; align-self: stretch; align-items: center; width: 14px; }
.banner__fecha-icono .icono { color: var(--verde); font-size: 14px; }
.banner__fecha-texto { padding-left: 5px; color: #fff; }

.nota__cuerpo { padding: 6em 1em 7em; overflow: hidden; background: var(--claro); }
.nota__caja { display: flex; max-width: 1280px; margin: 0 auto; }

.nota__principal {
	display: flex;  /* como los widgets de Elementor: los márgenes de cada bloque no se funden */
	flex-direction: column;
	width: calc(70% - 3em);
	margin-right: 3em;
	padding: 10px;
}

.nota__texto { margin-bottom: 20px; }
.nota__texto p { margin-bottom: .9rem; }

/* Botones para compartir: en línea, separados con word-spacing sobre una letra de 0 px, y medidos
   en «em» sobre una base de 10 px (9 en tablet, 5 en teléfono), como los de Elementor. La lista va
   en línea dentro de otro bloque de letra 0: con dos renglones, el interlineado de ese bloque
   suma abajo lo mismo que en el original. */
.compartir { font-size: 0; }

.compartir__lista {
	display: inline-block;
	width: 100%;
	margin-bottom: -10px;
	word-spacing: 8px;
}

.compartir li { display: inline-block; margin-bottom: 10px; }

.compartir__boton {
	display: flex;
	align-items: center;
	height: 4.5em;
	overflow: hidden;
	border: 2px solid;
	color: var(--verde);
	font-size: 10px;
	word-spacing: normal;
	cursor: pointer;
	transition: color .2s, border-color .2s;
}

.compartir__boton:hover, .compartir__boton:focus { color: var(--verde-oscuro); }

.compartir__icono {
	display: flex;
	align-self: stretch;
	justify-content: center;
	align-items: center;
	width: 4.5em;
	margin-left: -.2em;
}

/* El glifo va en una línea de texto (como el del original) para que el botón tome la misma línea
   base: con dos renglones de botones, eso decide el alto. */
.compartir__glifo { display: block; font-size: 1.7em; line-height: 1; }
.compartir__glifo .icono { display: inline-block; vertical-align: -.125em; }

.compartir__texto {
	display: flex;
	align-items: center;
	align-self: stretch;
	padding-right: 1em;
	font-size: 1.5em;
	font-weight: 700;
}

.nota__separador {
	height: 0;
	margin: 51px 0 15px;
	border: 0;
	border-top: 1px solid rgba(25, 25, 25, .23);
	color: inherit;
}

.nota__lateral { display: flex; flex-direction: column; width: 30%; padding: 10px; }

.nota__lateral-titulo {
	margin-bottom: 20px;
	color: var(--negro);
	font: 600 var(--t-tarjeta)/1.1em var(--titulos);
	text-transform: capitalize;
}

.ultimas { display: flex; flex-direction: column; gap: 20px; margin-bottom: calc(1em + 20px); }
.ultima__titulo { margin-bottom: 5px; color: var(--negro); font-size: var(--t-cuerpo); line-height: 1.5em; }
.ultima__titulo a, .ultima__titulo a:hover { color: var(--negro); }
.ultima__fecha { margin-bottom: 13px; color: var(--oro); font-size: 13px; font-weight: 300; line-height: 1.3em; }

/* «Nuestros Servicios»: la foto se agranda y el velo se aclara al pasar el mouse (700 ms). */
.destacado { position: relative; overflow: hidden; margin-top: 1em; }

.destacado__fondo, .destacado__fondo::after { position: absolute; inset: 0; transition: all .7s; }
.destacado__fondo { background: url("../images/sucursales-fondo-camioneta-rastrojo.jpg") center / cover no-repeat; }
.destacado__fondo::after { content: ""; background-color: rgba(16, 24, 32, .47); }
.destacado:hover .destacado__fondo { transform: scale(1.2); }
.destacado:hover .destacado__fondo::after { background-color: rgba(2, 1, 1, .27); }

.destacado__contenido {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-end;
	min-height: 520px;
	padding: 35px;
	color: #fff;
}

.destacado__titulo {
	width: 100%;
	margin-bottom: 15px;
	color: #fff;
	font: 600 var(--t-seccion)/1.1em var(--titulos);
	text-transform: capitalize;
}

.destacado__texto { width: 100%; margin-bottom: 30px; }

.destacado__boton {
	display: inline-block;
	padding: 12px 24px;
	border: 2px solid #fff;
	color: #fff;
	font: 600 var(--t-boton)/1.6em var(--titulos);
	letter-spacing: .5px;
	text-transform: uppercase;
	transition: all .3s;
}

.destacado__boton:hover, .destacado__boton:focus { border-color: var(--verde); background: var(--verde); color: #fff; }

@media (max-width: 1024px) {
	.banner--nota { background-position: 0 0; }
	.banner--nota .banner__caja { flex-wrap: wrap; }
	.banner--nota .banner__texto { width: 100%; padding: 5em 1em 3em; }
	.banner--nota .migas { justify-content: flex-end; width: 100%; margin: 0 3em 0 0; }
	.nota__cuerpo { padding: 3em 1em; }
	.nota__caja { flex-wrap: wrap; }
	.nota__principal { width: calc(100% - 20px); margin: 0 10px; }
	.nota__lateral { width: calc(100% - 20px); margin: 20px 10px 0; }
	.compartir__lista { margin-bottom: -6px; word-spacing: 6px; }
	.compartir li { margin-bottom: 6px; }
	.compartir__boton { font-size: 9px; }
	.nota__separador { margin: 40px 0 5px; }
	.ultimas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 30px; }
	.ultima__fecha { font-size: 12px; }
	.destacado__contenido { min-height: 270px; }
}

@media (max-width: 767px) {
	.banner--nota { background-position: center; }
	.banner--nota .migas { margin: 0; }
	.nota__cuerpo { padding: 2em 1em; }
	.nota__principal { width: 100%; margin: 0; }
	.nota__lateral { width: 100%; margin: 10px 0 0; }
	.compartir { text-align: center; }
	.compartir__lista { margin-bottom: -10px; word-spacing: 7px; }
	.compartir li { margin-bottom: 10px; }
	.compartir__boton { font-size: 5px; }
	.nota__separador { margin: 34px 0 0; }
	.ultimas { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.ultima__fecha { font-size: 11px; }
	.destacado__contenido { min-height: 320px; padding: 35px 50px 30px 30px; }
}

/* ---------- Visor de fotos de la galería (Elementor «lightbox») ---------- */

.visor {
	--ui: hsla(0, 0%, 93%, .9);
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, .8);
	color: var(--ui);
	font-family: var(--cuerpo);
	user-select: none;
}

.visor[hidden] { display: none; }
.visor:focus { outline: none; }
.visor.abriendo .visor__escena { animation: zoomIn .3s; }

.visor__cabecera {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	width: 100%;
	padding: 15px 52px 15px 20px;
	font-size: 20px;
	line-height: 1.5;
	transition: .3s;
}

.visor__contador { margin-right: auto; font-size: .75em; }
.visor__herramientas { display: flex; }

.visor__boton, .visor__cerrar, .visor__flecha {
	padding: 0;
	border: 0;
	background: none;
	color: var(--ui);
	cursor: pointer;
}

.visor__boton {
	display: block;
	margin: 0 7px;
	padding: 5px;
	font-size: 20px;
	line-height: 1;
}

.visor__boton:hover, .visor__cerrar:hover, .visor__flecha:hover { color: #fff; }
.visor__contraer, .visor__alejar, .visor.pantalla .visor__expandir, .visor.ampliado .visor__acercar { display: none; }
.visor.pantalla .visor__contraer, .visor.ampliado .visor__alejar { display: block; }

.visor__cerrar {
	position: absolute;
	top: 0;
	right: 15px;
	z-index: 11;
	display: flex;
	margin-top: 13px;
	padding: 5px;
	font-size: 20px;
	line-height: 1;
	transition: all .3s;
}

.visor__menu {
	position: absolute;
	top: 60px;
	right: 56px;
	z-index: 12;
	min-width: 200px;
	padding: 14px 20px;
	border-radius: 3px;
	background: #fff;
	box-shadow: 0 4px 15px rgba(0, 0, 0, .3);
	font-size: 20px;
	opacity: 0;
	transform: scale(0);
	transform-origin: 90% 10%;
	transition: all .25s .1s;
}

.visor__menu::before {
	content: "";
	position: absolute;
	top: 1px;
	right: .5em;
	display: block;
	border: .45em solid transparent;
	border-bottom-color: #fff;
	transform: translateY(-100%) scaleX(.7);
}

.visor.compartiendo .visor__menu { opacity: 1; transform: scale(1); }

/* Velo semitransparente mientras está abierto el menú de compartir. */
.visor.compartiendo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 9;
	background: rgba(0, 0, 0, .5);
}

.visor.compartiendo .visor__compartir { position: relative; z-index: 11; }

.visor__red {
	display: flex;
	align-items: center;
	color: #0c0d0e;
	font-size: 12px;
	line-height: 2.5;
	text-align: left;
}

.visor__red:hover { color: #000; }
.visor__red .icono { margin-right: .75em; font-size: 1.25em; }
.visor__red[data-red="facebook"] .icono { color: #3b5998; }
.visor__red[data-red="x"] .icono { color: #000; }
.visor__red[data-red="pinterest"] .icono { color: #bd081c; }
.visor__red[data-red="descargar"] .icono { color: #9da5ae; }

.visor__escena { position: absolute; inset: 0; overflow: hidden; }

.visor__pista {
	display: flex;
	gap: 100px;
	height: 100%;
	transition: transform .3s;
	cursor: grab;
}

.visor__item {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 70px;
}

.visor__marco {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-align: center;
}

.visor__imagen {
	max-width: 100%;
	max-height: 100%;
	border-radius: 2px;
	box-shadow: 0 0 30px rgba(0, 0, 0, .3), 0 0 8px -5px rgba(0, 0, 0, .3);
	object-fit: contain;
	transition: transform .3s;
	-webkit-user-drag: none;
}

.visor__flecha {
	position: absolute;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15%;
	height: 100%;
	font-size: 25px;
	transition: all .3s;
}

.visor__flecha--anterior { left: 0; }
.visor__flecha--siguiente { right: 0; }

.visor__titulo {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 5;
	width: 100%;
	padding: 15px 20px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	transition: .3s;
}

.visor.ampliado .visor__cabecera, .visor.ampliado .visor__titulo { background: rgba(0, 0, 0, .5); }
.visor.ampliado .visor__flecha { opacity: 0; pointer-events: none; }

@media (max-width: 767px) {
	.visor__item { padding: 70px 0; }
	.visor__flecha { width: 20%; }
	.visor__flecha .icono { box-sizing: content-box; padding: 10px; background: rgba(0, 0, 0, .5); }
	.visor__flecha--anterior { justify-content: flex-start; }
	.visor__flecha--siguiente { justify-content: flex-end; }
}

/* ---------- Ventana del video (ElementsKit con Magnific Popup) ---------- */

.video-popup { position: fixed; inset: 0; z-index: 1042; }
.video-popup[hidden] { display: none; }
.video-popup:focus { outline: none; }
.video-popup__fondo { position: absolute; inset: 0; background: #0b0b0b; opacity: .8; }

.video-popup__contenido {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
}

.video-popup__video {
	display: block;
	width: 900px;
	max-width: 100%;
	aspect-ratio: 900 / 507;
	background: #222;
}

.video-popup__cerrar {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: #000;
	color: #fff;
	font-size: 10px;
	opacity: .65;
	cursor: pointer;
	transition: background .3s, transform .4s;
}

.video-popup__cerrar:hover { opacity: 1; }