/* Acer Cereales — 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). */

:root {
	--gris: #656464;       /* color principal del kit: títulos, botones, menú */
	--amarillo: #FFBA40;   /* secundario: subrayado del menú, bordes, botón de la portada */
	--oscuro: #2E2828;     /* acento: fondos oscuros y menú al pasar el mouse */
	--claro: #F4F4F4;
	--texto: #747474;
	--gris-claro: #A8A8A8;
	--naranja: #F09900;
	--cobre: #cc9955;
	/* El original pide «Muli» y no la carga desde ningún lado: el navegador usa la sans-serif
	   del sistema (en Windows, Arial Black para 800 y Arial para 600/700). Se declara igual
	   para que cada sistema dibuje lo mismo que dibuja con el original. */
	--titulos: "Muli", sans-serif;
	--cuerpo: "Roboto", sans-serif;
	--curva-menu: cubic-bezier(.58, .3, .005, 1);
	--curva-fondo: cubic-bezier(0, .33, .07, 1.03);
}

/* ---------- 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: 16px;
	font-weight: 400;
	line-height: 28px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	background-color: transparent;
	color: var(--gris);
	font-family: var(--titulos);
	font-weight: 800;
	text-decoration: none;
}

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

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

.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-family: var(--cuerpo);
	font-size: .875rem;
	font-weight: 700;
	line-height: normal;
}

.saltar:focus { top: 5px; }

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

.boton {
	display: inline-block;
	padding: 10px 20px;
	border: 0 solid var(--gris);
	border-radius: 35px;
	background: var(--gris);
	color: #fff;
	font: 800 16px/28px var(--titulos);
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: all .3s;
}

.boton:hover, .boton:focus { background: var(--amarillo); color: var(--gris); }

.boton--amarillo {
	border: 3px solid var(--amarillo);
	background: var(--amarillo);
	color: var(--oscuro);
}

.boton--amarillo:hover, .boton--amarillo:focus {
	border-color: var(--amarillo);
	background: var(--oscuro);
	color: #fff;
}

.titulo-seccion { font: 800 32px/50px var(--titulos); color: var(--gris); }

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

@keyframes zoomIn {
	from { opacity: 0; transform: scale3d(.3, .3, .3); }
	50% { opacity: 1; }
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.animado, .volver-arriba { animation: none !important; }
	.promociones__capa, .socios__capa { transition-duration: 0s !important; }
}

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

.cabecera {
	position: relative;
	padding: 5px 60px;
	border-bottom: 1px solid var(--gris-claro);
}

.cabecera__caja {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1300px;
	min-height: 100px;
	margin: 0 auto;
}

.cabecera__logo { width: 195px; }
.cabecera__logo img { display: block; width: 100%; }

.menu-principal { margin: 0 20px; }
.menu-principal ul { display: flex; flex-wrap: wrap; justify-content: flex-end; }

.menu-principal a {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 9.5px;
	padding: 6.5px 0;
	color: var(--gris);
	font: 800 16px/20px var(--titulos);
	white-space: nowrap;
	transition: .4s;
}

.menu-principal li:first-child a { margin-left: 0; }
.menu-principal li:last-child a { margin-right: 0; }

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

.menu-principal a:hover, .menu-principal a:focus, .menu-principal a.activo { color: var(--oscuro); }

.menu-principal a:hover::after, .menu-principal a:focus::after, .menu-principal a.activo::after,
.pie__menu a:hover::after, .pie__menu a:focus::after, .pie__menu a.activo::after { opacity: 1; }

.menu-boton {
	display: none;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	margin: 0 20px;
	padding: 7.5px;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: var(--gris);
	font-size: 30px;
	line-height: 28px;
	cursor: pointer;
}

.menu-boton .icono { width: 1em; }
.menu-boton__cerrar, .menu-boton[aria-expanded="true"] .menu-boton__abrir { display: none; }
.menu-boton[aria-expanded="true"] .menu-boton__cerrar { display: block; }

/* El panel se abre 20 px corrido a la izquierda, como en el original. */
.menu-panel {
	display: none;
	position: absolute;
	top: 112.5px;
	left: -20px;
	z-index: 9997;
	width: 100%;
	max-height: 0;
	overflow: hidden;
	padding: 12px 0;
	background: var(--claro);
	transform: scaleY(0);
	transform-origin: top;
	transition: max-height .3s, transform .3s;
}

.menu-panel.abierto { max-height: 1000vmax; transform: scaleY(1); }

.menu-panel a {
	display: flex;
	padding: 10px 45px;
	color: var(--gris);
	font: 800 16px/20px var(--titulos);
	white-space: nowrap;
}

.menu-panel a:hover, .menu-panel a:focus { background: var(--amarillo); color: var(--gris); }

/* ---------- Quiénes somos (portada) ---------- */

.presentacion { position: relative; background: var(--oscuro); }
.presentacion__fondo { position: absolute; inset: 0; overflow: hidden; }

.presentacion__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.presentacion__fondo::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(90deg, var(--oscuro) 13%, rgba(255, 255, 255, 0) 30%);
}

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

.presentacion__texto {
	display: flex;
	flex-direction: column;
	width: 50%;
	padding: 60px 60px 60px 20px;
	background: var(--oscuro);
}

.presentacion__lado { width: 50%; min-height: 90px; }

.antetitulo { margin-bottom: 20px; color: var(--amarillo); font: 800 20px/28px var(--titulos); }

.presentacion__titulo {
	margin: -4px 0 20px;
	padding-right: 40px;
	color: #fff;
	font: 800 32px/50px var(--titulos);
}

.presentacion__bajada { margin: 4px 0 34.4px; color: #fff; font: 400 18px/28px var(--cuerpo); }
.presentacion .boton { align-self: flex-start; }

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

.mercados { padding: 40px 0 100px; }

.mercados__caja {
	display: flex;
	flex-direction: column;
	max-width: 960px;
	margin: 0 auto;
	padding: 10px;
}

.mercados .titulo-seccion { margin-bottom: 20px; }

.mercados__cuadro { display: block; width: 100%; height: 650px; margin: -30px 0; }

.mercados__comisiones { margin: 10px 0 20px; color: var(--gris); font: 600 16px/28px var(--titulos); }

.comisiones { margin: 20px 50px 0; }
.comisiones table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9em; }

.comisiones th {
	padding: 10px 15px;
	border-top: 1px solid hsla(0, 0%, 50%, .502);
	background: var(--gris);
	color: #fff;
	font: 400 16px/16px var(--cuerpo);
	text-align: left;
	vertical-align: top;
}

.comisiones td {
	padding: 12px 15px;
	border: 0 none hsla(0, 0%, 50%, .502);
	color: #000;
	font: 300 14px/14px var(--cuerpo);
	vertical-align: top;
}

.comisiones tbody tr:nth-child(odd) td { background-color: hsla(0, 0%, 50%, .071); }
.comisiones tbody tr:nth-child(odd):hover td { background-color: hsla(0, 0%, 50%, .102); }
.comisiones tbody tr:nth-child(odd) td:hover { color: #6d7882; }
.comisiones tbody tr:nth-child(even) td { background: #f2f2f2; }

/* ---------- Promociones ---------- */

.promociones { position: relative; padding: 40px 0 20px; }
.promociones__fondo { position: absolute; inset: 0; overflow: hidden; }

/* Capa un 10 % más grande que la sección: el JS la corre siguiendo al mouse, como el
   efecto «mouse track» de Elementor. */
.promociones__capa {
	position: absolute;
	top: 0;
	left: 0;
	width: 110%;
	height: 110%;
	background: url("../images/promociones-fondo-tractor.jpg") 50% 100% / cover no-repeat;
	transition: transform 1s var(--curva-fondo);
}

.promociones__fondo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #A87823;
	opacity: .67;
}

.promociones__caja {
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: 1300px;
	margin: 0 auto;
	padding: 20px;
}

.promociones .titulo-seccion { margin-bottom: 50px; color: var(--claro); }
.promociones__accion { margin-bottom: 20px; padding-top: 20px; text-align: center; }

/* ---------- Nuestros Insumos ---------- */

.insumos { padding: 40px 0; background: #FBFBFB; }
.insumos__caja { display: flex; max-width: 1300px; margin: 0 auto; }
.insumos__texto, .insumos__fotos { width: 50%; padding: 20px; }
.insumos__texto { display: flex; flex-direction: column; }
.insumos .titulo-seccion { margin-bottom: 20px; }
.insumos__rubros { margin-bottom: 30px; color: var(--naranja); font: 800 20px/28px var(--titulos); }
.insumos__bajada { margin-bottom: 34.4px; padding-right: 100px; }
.insumos .boton { align-self: flex-start; margin-top: 10px; }

.carrusel { position: relative; overflow: hidden; touch-action: pan-y; }

.carrusel__pista {
	display: flex;
	transition-property: transform;
	transition-timing-function: ease;
	cursor: default;
	user-select: none;
}

.carrusel__foto { flex: 0 0 100%; }
.carrusel__foto img { width: 100%; -webkit-user-drag: none; }

/* ---------- Noticias del Sector ---------- */

.noticias {
	position: relative;
	padding: 40px 0 20px;
	background: var(--claro) url("../images/noticias-fondo-red.jpg") 50% 0 / cover;
}

.noticias::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .31) 100%);
	opacity: .71;
}

.noticias__caja {
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: 1300px;
	margin: 0 auto;
	padding: 20px;
}

.noticias .titulo-seccion { margin-bottom: 50px; }

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

.noticia {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 20px 25px 15px;
	border-bottom: 6px solid var(--amarillo);
	background: #fff;
}

.noticia__titulo { margin-bottom: 10px; color: var(--gris); font: 700 20px/30px var(--titulos); }
.noticia__titulo a { color: var(--gris); font: inherit; }
.noticia__fecha { margin-bottom: 10px; color: var(--gris-claro); font: 800 12px/28px var(--titulos); }
.noticias__accion { margin-bottom: 20px; padding-top: 20px; text-align: center; }

/* ---------- Nuestros Representantes ---------- */

.representantes { padding: 40px 0; background: var(--oscuro); }

.representantes__caja {
	display: flex;
	flex-direction: column;
	max-width: 1300px;
	margin: 0 auto;
	padding: 20px;
}

.representantes .titulo-seccion { margin-bottom: 40px; color: #fff; }
.representantes__fila { display: flex; align-items: flex-start; margin-top: 10px; }

/* Cada tarjeta tiene su propio corrimiento vertical, como las columnas del original. */
.representante { width: 33.3333%; padding: 10px; }
.representante--1 { margin-bottom: 15px; }
.representante--2 { margin-top: -15px; }
.representante--3 { margin-top: 15px; }
.representante--4 { margin-top: -15px; }
.representante--5 { margin-top: 20px; }
.representante--6 { margin-top: 5px; }

.representante__mapa {
	display: block;
	width: 100%;
	height: 200px;
	filter: brightness(101%) contrast(100%) saturate(60%) blur(0) hue-rotate(0deg);
}

.representante__nombre {
	padding: 30px 20px 10px;
	background: #fff;
	color: var(--gris);
	font: 700 20px/25px var(--titulos);
}

.representante__datos { padding: 0 20px 25px; background: #fff; }

.representante__datos li, .representante__datos a, .contacto__telefonos a, .pie__datos a {
	display: flex;
	align-items: center;
}

.representante__datos li:not(:last-child) { padding-bottom: 2.5px; }
.representante__datos li:not(:first-child) { margin-top: 2.5px; }
.representante__datos a { width: 100%; color: var(--gris); font: 300 15px/32px var(--cuerpo); }

.representante__icono, .contacto__icono { display: flex; flex-shrink: 0; width: 1.25em; }
.representante__icono { color: var(--texto); font-size: 18px; transition: color .3s; }

.representante__texto {
	padding-left: 5px;
	color: var(--texto);
	font: 300 15px/32px var(--cuerpo);
	transition: color .3s;
}

/* ---------- Nuestros Socios Comerciales ---------- */

.socios { position: relative; padding: 40px 0; }
.socios__fondo { position: absolute; inset: 0; overflow: hidden; }

/* El JS la agranda al bajar por la página (efecto «scale» de Elementor). */
.socios__capa {
	position: absolute;
	inset: 0;
	background: url("../images/socios-fondo-rosario.jpg") 0 0 / cover no-repeat;
	transition: transform 1s var(--curva-fondo);
}

.socios__fondo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	opacity: .7;
}

.socios__caja {
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: 1300px;
	margin: 0 auto;
	padding: 20px;
}

.socios .titulo-seccion { margin-bottom: 20px; }
.socios__fila { display: flex; margin-top: 10px; }
.socios__fila li { width: 20%; padding: 20px 10px; }

.socio {
	display: block;
	padding: 30px;
	background: #fff;
	font: 400 16px/28px var(--cuerpo);
	text-align: center;
}

.socio--relleno-15 { padding: 15px; }
.socio--relleno-20 { padding: 20px; }
/* Como en el original: el logo no se agranda más allá de su tamaño (TSA Bursátil mide 186 px). */
.socio__logo { display: inline-block; }
.socio--ancho .socio__logo { width: 100%; }

.socio__logo img {
	display: block;
	filter: brightness(100%) contrast(100%) saturate(50%) blur(0) hue-rotate(0deg);
	transition-duration: .3s;
}

/* ---------- Contáctenos ---------- */

.contacto { padding: 80px 0; background: #fff; }
.contacto__caja { display: flex; max-width: 1300px; margin: 0 auto; }

.contacto__datos {
	display: flex;
	flex-direction: column;
	width: 50%;
	padding: 0 75px 0 0;
	background: #fff;
}

.contacto .titulo-seccion { margin-bottom: 20px; }
.contacto__intro { margin-bottom: 20px; padding: 10px 110px 0 0; }
.contacto__telefonos { margin: -14px 0 20px; }
.contacto__telefonos a { color: var(--gris); font: 400 16px/28px var(--cuerpo); }
.contacto__icono { font-size: 14px; transition: color .3s; }
.contacto__texto { padding-left: 5px; transition: color .3s; }

.formulario { display: flex; flex-wrap: wrap; margin: 20px -5px 0; }
.formulario__campo { width: 100%; padding: 0 5px; }

.formulario input, .formulario textarea {
	display: block;
	width: 100%;
	min-height: 40px;
	padding: 15px 20px;
	border: 0;
	border-bottom: 1px solid var(--texto);
	border-radius: 0;
	background: rgba(255, 68, 255, 0);
	color: var(--texto);
	font: 400 16px/28px var(--cuerpo);
	transition: all .3s;
}

.formulario textarea { overflow: auto; resize: vertical; }

.formulario input:focus, .formulario textarea:focus {
	outline: 0;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}

.formulario ::placeholder { color: inherit; font-family: inherit; opacity: .6; }
.formulario__espacio { width: 100%; height: 28px; }
.formulario__enviar { width: 25%; }
.formulario__enviar .boton { width: 100%; min-height: 40px; margin-top: 40px; }
.formulario__enviar .boton:disabled { opacity: .6; cursor: wait; }
.formulario__estado { width: 100%; min-height: 28px; margin: 15px 5px 0; color: var(--gris); font: 400 16px/28px var(--cuerpo); }
.formulario__estado--error { color: #b3261e; }
.formulario__estado--cargando::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 10px;
	border: 2px solid var(--gris-claro);
	border-top-color: var(--amarillo);
	border-radius: 50%;
	vertical-align: -3px;
	animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.contacto__aviso { width: 50%; padding: 20px; }
.contacto__imagen { padding-top: 20px; }

.contacto__imagen img {
	display: block;
	width: 630px;
	margin: 0 auto;
	filter: brightness(100%) contrast(100%) saturate(50%) blur(0) hue-rotate(0deg);
}

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

.pie { padding: 40px 0 30px; background: var(--oscuro); }
.pie__caja { display: flex; max-width: 1040px; margin: 0 auto; }
.pie__columna { width: 33.3333%; padding: 30px; }
.pie__menu, .pie__marcas { border-radius: 4px; box-shadow: 0 3px 12px 0 rgba(0, 0, 0, .03); }

.pie__datos li:not(:last-child) { padding-bottom: 8px; }
.pie__datos li:not(:first-child) { margin-top: 8px; }
.pie__datos a { color: var(--gris); font: 400 14px/21px var(--cuerpo); }

.pie__icono {
	display: flex;
	flex-shrink: 0;
	width: calc(1.25em + 14px);
	padding-right: 14px;
	color: var(--cobre);
	font-size: 16px;
	transition: color .3s;
}

.pie__texto { padding-left: 5px; color: rgba(255, 255, 255, .7); transition: color .3s; }

.pie__menu a {
	position: relative;
	display: flex;
	align-items: center;
	padding: 10px 0;
	color: #fff;
	font: 400 16px/20px var(--cuerpo);
	white-space: nowrap;
	transition: .4s;
}

.pie__menu a::after { height: 1px; }

.pie__logo {
	width: max-content;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--texto);
}

.pie__logo img { display: block; }

/* Los logos van como en el original: un enlace en línea con la imagen centrada en la línea,
   así el ancho en % se calcula igual (sobre el ancho natural de la imagen si sobra lugar). */
.pie__marca { margin-bottom: 16px; }
.pie__marca a { display: inline-block; font: 800 16px/28px var(--titulos); }
.pie__marca img { display: inline-block; vertical-align: middle; }
.pie__marca--bcr { width: 45%; }
.pie__marca--confirma { width: 42%; }
.pie__matricula { margin-bottom: 16px; color: var(--gris-claro); font: 400 12px/28px var(--cuerpo); }
.pie__marca--matba { margin-top: -6px; }
.pie__marca--matba img { width: 45%; }
.pie__marca--cnv { margin-bottom: 0; }
.pie__marca--cnv img { width: 50%; }

/* Botón de volver arriba: aparece al bajar más del 40 % de la página. */
.volver-arriba {
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 9999;
	width: 100px;
	height: 77px;
}

.volver-arriba[hidden] { display: none; }
.volver-arriba.visible { animation: fadeIn 2s; }

.volver-arriba a {
	position: absolute;
	top: 10px;
	left: 25px;
	color: var(--amarillo);
	font-size: 50px;
	line-height: 1;
	transition: all .3s;
}

.volver-arriba .icono { width: 1em; }

/* ---------- Noticias: archivo y tarjetas ---------- */

.archivo { background: var(--claro); }
.archivo__cabeza { max-width: 1300px; margin: 0 auto; padding: 120px 20px 40px; }
.archivo__caja { max-width: 1300px; margin: 0 auto; padding: 10px 10px 110px; }
.archivo__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px 30px; }

.tarjeta-noticia {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 20px;
	border-bottom: 6px solid var(--amarillo);
	background: #fff;
}

.tarjeta-noticia__texto { flex-grow: 1; }
.tarjeta-noticia__titulo { margin-bottom: 12px; color: var(--gris); font: 800 18px/1.4em var(--titulos); }
.tarjeta-noticia__titulo a { color: var(--gris); font: inherit; }
.tarjeta-noticia__fecha { margin-bottom: 13px; color: #adadad; font: 400 12px/1.3em var(--cuerpo); }
.tarjeta-noticia__resumen { margin-bottom: 10px; }
.tarjeta-noticia__resumen p { color: #777; font: 400 14px/1.5em var(--cuerpo); }
.tarjeta-noticia__mas { color: var(--gris); font: 700 12px/28px var(--titulos); }

/* Las de «Más Noticias», debajo de cada nota, van sin fondo ni borde. */
.tarjeta-noticia--simple { padding: 0; border: 0; background: none; }
.tarjeta-noticia--simple .tarjeta-noticia__titulo { margin-bottom: 10px; }

/* Paginación de muestra: el número actual y «Anterior» son texto; el resto, enlaces. Entre
   cada uno queda un espacio, como en el original. */
.paginacion { margin-top: 50px; text-align: center; }
.paginacion__item { color: var(--texto); }
a.paginacion__item { color: var(--gris); }
.paginacion__item:not(:first-child) { margin-left: 5px; }
.paginacion__item:not(:last-child) { margin-right: 5px; }

/* ---------- Noticias: nota ---------- */

.nota__cabeza { display: flex; flex-direction: column; max-width: 1300px; margin: 0 auto; padding: 10px; }
.nota__categoria { margin-bottom: 20px; padding: 10px 0 50px; }
.nota__categoria a { text-transform: uppercase; }
.nota__titulo { margin-bottom: 40px; color: var(--gris); font: 800 32px/50px var(--titulos); }
.nota__cuerpo { width: min(720px, 100%); margin: 0 auto 50px; padding: 10px; }
.nota__cuerpo p { margin-bottom: 14.4px; }

.mas-noticias { padding: 0 0 80px; background: var(--claro); }

.mas-noticias__caja {
	display: flex;
	flex-direction: column;
	max-width: 1300px;
	margin: 0 auto;
	padding: 10px;
}

.mas-noticias__titulo {
	margin-bottom: 20px;
	padding: 35px 0 25px;
	color: var(--gris);
	font: 800 28px/42px var(--titulos);
}

.mas-noticias__titulo a { font: inherit; }
.mas-noticias__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px 30px; margin-bottom: 20px; }
.mas-noticias__accion { padding-top: 40px; text-align: center; }

/* El botón de las notas usa el peso del kit (bold), no el 800 de los botones de la portada. */
.boton--liviano { font-weight: 700; }

/* ---------- Tablet (hasta 1024 px) ---------- */

@media (max-width: 1024px) {
	.cabecera { padding: 20px 30px 30px; }
	.cabecera__caja { max-width: 1024px; }
	.menu-principal, .boton--clientes { display: none; }
	.menu-boton { display: flex; }
	.menu-panel { display: block; }

	.presentacion__caja { max-width: 1024px; }
	.presentacion__texto { padding: 80px 20px 80px 30px; }
	.presentacion__lado { min-height: 440px; }

	.mercados { padding: 40px 30px; }

	.promociones { padding: 40px 30px 20px; }
	.promociones__caja { max-width: 1024px; }

	.insumos { padding: 40px 30px; }
	.insumos__caja { flex-wrap: wrap; max-width: 1024px; }
	.insumos__texto, .insumos__fotos { width: 100%; }

	.noticias { padding: 40px 30px; }
	.noticias__caja { max-width: 1024px; }
	.noticias__lista { grid-template-columns: 1fr; }

	.representantes { padding: 40px 30px; }
	.representantes__caja { max-width: 1024px; }
	.representantes__fila { flex-wrap: wrap; }
	.representante { width: 50%; padding: 0 10px 20px; }
	.representante--2, .representante--4 { padding-top: 30px; }

	.socios { padding: 40px 30px; }
	.socios__caja { max-width: 1024px; }
	.socios__fila { flex-wrap: wrap; }
	.socios__fila li { width: 33.3333%; }

	.contacto { padding: 0 30px; }
	.contacto__caja { flex-direction: column-reverse; max-width: 1024px; }
	.contacto__datos, .contacto__aviso { width: 100%; }
	.contacto__datos { padding: 60px 60px 80px 20px; }

	.pie { padding: 20px 0; }
	.pie__columna { width: 33%; }

	.archivo__cabeza { max-width: 1024px; padding: 60px 40px 40px; }
	.archivo__caja { max-width: 1024px; }
	.archivo__lista { grid-template-columns: repeat(2, 1fr); }

	.nota__cabeza { max-width: none; margin: 0 30px; }
	.nota__categoria { padding: 0; }
	.nota__titulo { margin-bottom: 20px; }
	.nota__cuerpo { width: min(720px, 100% - 60px); }
	.mas-noticias { padding: 0 30px 40px; }
	.mas-noticias__caja { max-width: 1024px; }
	.mas-noticias__lista { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Teléfono (hasta 767 px) ---------- */

@media (max-width: 767px) {
	.cabecera { padding: 0 10px 0 20px; }
	.cabecera__caja { max-width: 767px; }
	.cabecera__logo img { width: 85%; }
	.menu-panel { top: 92.5px; }

	.presentacion__video { display: none; }
	.presentacion__caja { max-width: 767px; }
	.presentacion__texto { width: 100%; padding: 50px 20px 80px; }
	.presentacion__lado { display: none; }

	.comisiones { overflow-x: scroll; padding-bottom: 5px; }
	.comisiones td span { display: flex; align-items: center; justify-content: center; }

	.promociones { padding: 30px 0 0; }
	.promociones__caja { max-width: 767px; }
	.promociones__accion { padding-top: 40px; text-align: left; }

	.insumos { padding: 30px 0 0; }
	.insumos__caja { max-width: 767px; }
	.insumos__rubros { line-height: 1.4em; }
	.insumos__bajada { padding-right: 0; }

	.noticias { padding: 30px 0 0; }
	.noticias__caja { max-width: 767px; }
	.noticias__accion { padding-top: 40px; text-align: left; }

	.representantes { padding: 30px 0 0; }
	.representantes__caja { max-width: 767px; }
	.representantes .titulo-seccion { line-height: 1.3em; }
	.representante, .representante--2, .representante--4 { width: 100%; margin: 30px 0 0; padding: 0; }
	.representante--1 { margin: 0; }

	.socios { padding: 30px 0 0; }
	.socios__caja { max-width: 767px; }
	.socios .titulo-seccion { line-height: 1.3em; }
	.socios__fila li { width: 100%; }
	.socio__logo, .socio--ancho .socio__logo { width: 70%; }

	.contacto { padding: 0; }
	.contacto__caja { max-width: 767px; }
	.contacto__datos { padding: 60px 20px; }
	.contacto__intro { padding: 0; }
	.formulario__enviar { width: 100%; }

	.pie { padding: 40px 0 0; }
	.pie__caja { flex-direction: column-reverse; }
	.pie__columna { width: 100%; }
	.pie__contacto { padding: 0 30px 30px; }
	.pie__datos { padding-bottom: 40px; }
	.pie__datos a { justify-content: center; text-align: center; }
	.pie__icono { font-size: 20px; }
	.pie__menu { padding: 15px 30px 30px; }
	.pie__marcas { padding: 16px; text-align: center; }
	.pie__logo { margin-right: auto; margin-left: auto; }

	.archivo__cabeza { max-width: 767px; padding: 40px 20px; }
	.archivo__caja { max-width: 767px; }
	.archivo__lista { grid-template-columns: 1fr; }

	.nota__cabeza { margin: 0 10px; }
	.nota__cuerpo { width: min(720px, 100% - 20px); }
	.mas-noticias { padding: 0 10px 30px; }
	.mas-noticias__caja { max-width: 767px; }
	.mas-noticias__lista { grid-template-columns: 1fr; }
}