/* Mario Calandri e Hijos S.A. — hoja de estilos propia. Sin frameworks ni dependencias.
   Colores, tipografías y medidas tomadas del sitio original (kit y hojas de Elementor) y
   verificadas midiendo el original en 1440, 768 y 390 px de ancho.

   Índice: 1 base · 2 utilidades de sección · 3 encabezado · 4 búsqueda · 5 pie
           6 componentes (botón, caja de icono, tarjeta de nota, pestañas, tablas)
           7 portada · 8 animaciones de entrada */

:root {
  --azul: #405660;          /* primario: títulos y texto */
  --magenta: #a04374;       /* secundario: enlaces, bordes, botones */
  --rosa: #d394b8;          /* iconos, líneas divisorias, hover del menú */
  --gris-claro: #eaeaea;    /* fondo de sección */
  --gris-humo: #f5f6f6;     /* texto sobre fondos oscuros */
  --pie: #303d47;
  --borde-tabla: rgba(128, 128, 128, .5);
  --borde-pestana: #d5d8dc;
  --sistema: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
             "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

/* ============ 1. Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: #fff;
  color: #333;
  font: 400 16px/1.5 var(--sistema);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 .9rem; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; border-style: none; }
svg { fill: currentColor; }
a { color: #c36; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.sprite-iconos { display: none; }

.salto-contenido { position: absolute; top: -60px; left: 12px; z-index: 9999; padding: 8px 16px; background: #fff; color: var(--azul); }
.salto-contenido:focus { top: 12px; }
.solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============ 2. Secciones y columnas (retícula del original) ============ */
.seccion { position: relative; }
.contenedor { display: flex; max-width: 1200px; margin: 0 auto; }
.contenedor-completo { display: flex; }
.columna { display: flex; flex-direction: column; width: 100%; min-height: 1px; padding: 10px; }
.col-4 { width: 25%; }
.col-2 { width: 50%; }
.columna > * { flex: none; }
@media (max-width: 1024px) {
  .contenedor { max-width: 1024px; flex-wrap: wrap; }
  .contenedor-completo { flex-wrap: wrap; }
}
@media (max-width: 767px) {
  .contenedor { max-width: 767px; }
  .col-4, .col-2 { width: 100%; }
}

.titulo-seccion { font: 600 32px/1 Lato, var(--sistema); color: var(--azul); text-align: center; }
.titulo-seccion-caja { padding: 14px 0; }

/* ============ 3. Encabezado ============ */
.encabezado {
  position: sticky; top: 0; z-index: 99;
  padding: 22px 0;
  background-image: linear-gradient(270deg, #405660 0%, #a04374 100%);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
  transition: background .3s, border .3s, border-radius .3s, box-shadow .3s;
}
.encabezado-fila { display: flex; flex-wrap: wrap; align-items: center; max-width: 1200px; margin: 0 auto; }
.encabezado-marca { display: flex; align-items: center; width: 33.333%; }
.marca { display: inline-block; transition: transform .3s; }
.marca:hover, .marca:focus-visible { transform: scale(1.1); }
.marca img { display: inline-block; vertical-align: middle; width: 30%; max-width: 30%; }

.navegacion { display: flex; align-items: center; width: 62.632%; }
.navegacion-caja { display: flex; flex-direction: column; width: 100%; }
.menu-barra { display: flex; justify-content: flex-end; width: 100%; }
.menu { display: flex; flex-wrap: wrap; }
.menu li { position: relative; }
.menu a {
  position: relative;
  display: flex; align-items: center;
  padding: 13px 20px;
  font: 300 16px/20px Lato, var(--sistema);
  color: #fff;
  white-space: nowrap;
}
.menu a::after {
  content: ""; position: absolute; bottom: 0; left: 50%; z-index: 2;
  width: 0; height: 0;
  background-color: var(--rosa);
  opacity: 0;
  transition: .3s cubic-bezier(.58, .3, .005, 1);
}
.menu a:hover, .menu a:focus-visible, .menu a[aria-current="page"] { color: var(--rosa); }
.menu a:hover::after, .menu a:focus-visible::after, .menu a[aria-current="page"]::after {
  left: 0; width: 100%; height: 1px; opacity: 1;
}

.menu-boton {
  display: none; align-items: center; justify-content: center;
  margin-left: auto; padding: .25em;
  font-size: 25px; color: #fff;
  background-color: rgba(0, 0, 0, .05);
}
.menu-boton .icono { width: 1em; height: 1em; }
.menu-boton .menu-icono-cerrar { display: none; }
.menu-boton[aria-expanded="true"] .menu-icono-cerrar { display: block; }
.menu-boton[aria-expanded="true"] .menu-icono-abrir { display: none; }

.menu-panel {
  display: none;
  width: 100%;
  margin-top: 10px;
  background-color: #f2f2f2;
  font-size: 13px;
  overflow: hidden auto;
  max-height: 0;
  transform: scaleY(0); transform-origin: top;
  transition: max-height .3s, transform .3s;
}
.menu-panel .menu { display: block; position: relative; z-index: 2; }
.menu-panel a {
  padding: 10px 20px;
  font: 300 15px/20px Lato, var(--sistema);
  color: #000;
  white-space: normal;
}
.menu-panel a::after { content: none; }
.menu-panel a:hover, .menu-panel a:focus-visible, .menu-panel a[aria-current="page"] { color: #00ce1b; background-color: #ededed; }

@media (max-width: 1024px) {
  .encabezado { padding: 30px 25px; }
  .encabezado-fila { max-width: 1024px; }
  .marca img { max-width: 35%; }
  .menu-barra { display: none; }
  .menu-boton { display: flex; }
  .menu-panel { display: block; }
  .navegacion.is-open .menu-panel { max-height: var(--menu-alto, 80vh); transform: scaleY(1); }
}
@media (max-width: 767px) {
  .encabezado { padding: 20px; }
  .encabezado-fila { max-width: 767px; }
  .encabezado-marca { width: 50%; }
  .marca img { max-width: 55%; }
  .navegacion { width: 35%; }
}

/* ============ 4. Columna del buscador (sacado el 2026-10-30; queda vacía para no correr el encabezado) ============ */
.busqueda { display: flex; align-items: center; width: 4.032%; }
@media (max-width: 767px) {
  .busqueda { width: 15%; }
}

/* ============ 5. Pie ============ */
.pie {
  padding: 40px 0 50px;
  background-color: var(--pie);
  border-top: 3px solid var(--magenta);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
}
.pie-fila { display: flex; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; }
.pie-col-marca { display: flex; width: 18%; }
.pie-col-redes { display: flex; width: 34.332%; }
.pie-col-plantas { display: flex; align-items: flex-start; width: 33.333%; }
.pie-col-marca > div, .pie-col-redes > div { width: 100%; margin-right: 80px; }
.pie-col-plantas > div { width: 100%; }

.pie-marca { display: inline-block; margin-bottom: 20px; }
.pie-marca img { display: inline-block; vertical-align: middle; width: 87px; opacity: .4; }
.pie-atci { padding-top: 96px; }
.pie-atci a, .pie-atci-compacto a { display: inline-block; }
.pie-atci img, .pie-atci-compacto img { display: inline-block; vertical-align: middle; width: 38px; }
.pie-atci-compacto { display: none; }

.pie-redes { display: flex; }
.pie-redes a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2em; height: 2.2em;
  font-size: 13px; line-height: 1;
  color: #69727d;
  background-color: rgba(255, 255, 255, .21);
  border-radius: 10%;
  transition: background-color .3s;
}
.pie-redes li + li { margin-left: 13px; }
.pie-redes .icono { fill: #fff; }
.pie-redes a:hover, .pie-redes a:focus-visible { background-color: var(--magenta); }

.pie-titulo { margin-bottom: 20px; font: 500 18px/1 Lato, var(--sistema); color: #fff; }
.pie-lista { margin-bottom: 20px; }
.pie-lista li { display: flex; align-items: center; padding-bottom: 6px; }
.pie-lista li + li { margin-top: 6px; }
.pie-lista li:last-child { padding-bottom: 0; }
.pie-lista a { display: flex; align-items: center; width: 100%; }
.pie-lista-icono { display: flex; width: 1.25em; font-size: 16px; line-height: 1; color: var(--magenta); transition: color .3s; }
.pie-lista-texto { padding-left: 5px; font: 300 13px/1.5 Lato, var(--sistema); color: #fff; transition: color .3s; }
.pie-lista a:hover .pie-lista-texto, .pie-lista a:focus-visible .pie-lista-texto { color: var(--rosa); }

@media (max-width: 1024px) {
  .pie { padding: 50px 20px; }
  .pie-fila { max-width: 1024px; }
  .pie-col-marca, .pie-col-redes { width: 35%; }
  .pie-col-marca > div, .pie-col-redes > div { margin-right: 15%; }
  .pie-col-plantas { width: 100%; padding-top: 24px; }
  .pie-atci { display: none; }
  .pie-atci-compacto { display: block; padding-top: 50px; text-align: end; }
  .pie-redes a { font-size: 16px; }
}
@media (max-width: 767px) {
  .pie { padding: 35px 20px; }
  .pie-fila { max-width: 767px; }
  .pie-col-marca, .pie-col-redes { width: 50%; }
  .pie-col-plantas { padding-top: 0; }
  .pie-col-marca > div { margin: 0 0 20px; }
  .pie-col-redes > div { margin: 0 0 50px; }
  .pie-redes { justify-content: center; }
  .pie-titulo { text-align: center; }
}

/* ============ 6. Componentes ============ */
.boton {
  display: inline-block;
  padding: 12px 24px;
  font: 500 15px/1 Lato, var(--sistema);
  color: var(--magenta); text-align: center;
  background-color: rgba(0, 0, 0, 0);
  border: 2px solid var(--magenta);
  border-radius: 3px;
  transition: background-color .3s, color .3s;
}
.boton-md { padding: 15px 30px; font-size: 16px; }
.boton-xs { padding: 10px 20px; font-size: 13px; border-width: 3px; border-radius: 2px; }
.boton-centrado { text-align: center; }
.boton-derecha { text-align: end; }
.boton-contenido { display: flex; align-items: center; justify-content: center; gap: 5px; }
.boton-icono { display: flex; align-items: center; }
.boton-xs .boton-contenido { gap: 6px; }

.caja-icono { display: flex; flex-direction: column; gap: 12px; }
.caja-icono-icono { line-height: 0; text-align: center; }
/* Caja de 1 em con el icono centrado, como el glifo de la fuente del original: los iconos
   más anchos que altos (grupo, camión) desbordan a los lados sin agrandar la caja. */
.caja-icono-glifo { position: relative; display: inline-block; width: 1em; height: 1em; font-size: 35px; line-height: 1; color: var(--rosa); }
.caja-icono-glifo .icono { position: absolute; left: 50%; transform: translateX(-50%); }
.caja-icono-texto { margin: 0; font: 300 18px/1.5 Lato, var(--sistema); color: var(--azul); text-align: center; }

/* Tarjetas de notas (Noticias e Informes) */
.tarjetas-notas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px 30px; }
.tarjeta-nota { display: flex; flex-direction: column; }
.tarjeta-nota-caja {
  display: flex; flex-direction: column; min-height: 100%;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .15);
  overflow: hidden;
}
.tarjeta-nota-texto { flex-grow: 1; margin-top: 20px; padding: 0 30px; }
.tarjeta-nota-titulo { margin-bottom: 25px; font: 600 21px/1.2 Lato, var(--sistema); }
.tarjeta-nota-titulo a { color: var(--magenta); }
.tarjeta-nota-resumen { margin-bottom: 25px; }
.tarjeta-nota-resumen p { margin: 0; font: 400 14px/1.5 Lato, var(--sistema); color: #777; }
.tarjeta-nota-mas { display: inline-block; margin-bottom: 20px; font: 500 12px/1.5 Lato, var(--sistema); color: var(--magenta); text-transform: uppercase; }
.tarjeta-nota-pie { padding: 15px 30px; font: 400 12px/1.3 Lato, var(--sistema); color: #adadad; border-top: 1px solid var(--gris-claro); }
@media (max-width: 1024px) { .tarjetas-notas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .tarjetas-notas { grid-template-columns: 1fr; } }

/* Pestañas (Mercados) */
.pestanas-titulos { display: table; }
.pestana-titulo {
  position: relative;
  display: table-cell;
  padding: 20px 25px;
  font: 600 16px/1 Lato, var(--sistema);
  color: var(--azul);
  border: 1px solid transparent;
  white-space: nowrap;
}
/* La pestaña activa tapa la línea inferior con un borde blanco, como hace el original al
   quitarle el borde de abajo y dibujar la línea con ::before/::after. */
.pestana-titulo[aria-selected="true"] { color: var(--magenta); border-color: var(--borde-pestana); border-bottom-color: #fff; }
.pestana-titulo[aria-selected="true"]::before,
.pestana-titulo[aria-selected="true"]::after {
  content: ""; position: absolute; bottom: 0; display: block;
  width: 999em; height: 0;
  border-bottom: 1px solid var(--borde-pestana);
}
.pestana-titulo[aria-selected="true"]::before { right: 100%; }
.pestana-titulo[aria-selected="true"]::after { left: 100%; }
.pestana-titulo-movil { display: none; width: 100%; padding: 10px; font: 600 16px/1.5 Lato, var(--sistema); color: var(--azul); text-align: left; border: 1px solid var(--borde-pestana); border-bottom-style: none; }
.pestana-titulo-movil[aria-selected="true"] { color: var(--magenta); }
.pestanas-contenidos { border-bottom: 0 solid var(--borde-pestana); }
.pestana-contenido {
  display: none; padding: 20px;
  font-family: Lato, var(--sistema); color: var(--azul);
  border: 1px solid var(--borde-pestana); border-top-style: none;
}
.pestana-contenido.is-activa { display: block; }
@media (max-width: 767px) {
  .pestanas-titulos { display: none; }
  .pestana-titulo-movil { display: block; }
  .pestana-contenido { padding: 10px; border-top-style: solid; border-bottom-style: none; }
  .pestanas-contenidos { border-bottom-width: 1px; }
}

/* Cotizaciones: iframe de la extranet de Calandri (extranet.calandri.com.ar/mercados-2020/), como en acercereales.com.ar */
.mercados-cuadro { display: block; width: 100%; height: 650px; border: 0; }

/* ============ 7. Portada ============ */
.portada {
  padding: 100px 0 60px;
  background: url("../images/inicio-portada-campo-1665x937.jpg") 50% 50% / cover;
  border-bottom: 3px solid var(--magenta);
  overflow: hidden;
}
/* El video y el velo llegan hasta el borde magenta: el contenedor de Elementor es
   inset:0 de la caja de relleno, o sea sin descontar el borde inferior de 3 px. */
.portada-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portada-velo { position: absolute; inset: 0; background-color: rgba(64, 86, 96, .82); opacity: .75; }
.portada .contenedor-completo { position: relative; }
.portada-titulo-caja { margin-bottom: 20px; padding: 14px 0; }
.portada-titulo {
  font: 700 32px/1 Lato, var(--sistema);
  color: #fff; text-align: center;
  text-shadow: 0 0 12px var(--magenta);
}
.portada-texto { padding-bottom: 14.4px; }
.portada-texto p { margin: 0; font: 300 21px/1.8 Lato, var(--sistema); color: #fff; text-align: center; }
.portada-texto strong { font-weight: 400; }

.seccion-mision { padding: 20px 0 0; border-bottom: 1px solid var(--rosa); }
.seccion-bajada { padding: 25px 0 40px; }
.bajada { margin: 0; font: 400 24px/1.6 Lato, var(--sistema); color: var(--azul); text-align: center; }

.seccion-ecosistemas { padding: 0 0 50px; }
.ecosistema-imagen { margin: 0 0 13px; padding: 3px; text-align: center; }
.ecosistema-imagen img { display: inline-block; vertical-align: middle; width: 55px; }
.ecosistema-titulo { font: 300 18px/26px Lato, var(--sistema); color: var(--azul); text-align: center; }

.seccion-vision { padding: 0 0 50px; background-color: var(--gris-claro); }
.vision-titulo-caja { margin-bottom: 20px; padding: 40px 0 25px; border-bottom: 1px solid var(--rosa); }
.vision-caja { margin-top: 15px; gap: 15px; }
.vision-caja .caja-icono-glifo { font-size: 50px; }
.vision-texto { margin: 8px 0 16px; font: 400 24px/1.6 Lato, var(--sistema); color: var(--azul); text-align: center; }
.vision-texto b { font-weight: 700; }

.seccion-empresa {
  padding: 20px 0 55px;
  background: url("../images/inicio-empresa-composicion-2560x936.jpg") center center / cover;
  border-bottom: 3px solid var(--magenta);
}
.empresa-velo { position: absolute; inset: 0; background-color: #fff; opacity: .49; }
.seccion-empresa .contenedor-completo { position: relative; }
.empresa-titulo-fila { display: flex; }
.empresa-fila { display: flex; flex-wrap: wrap; }
.empresa-fila-1 { margin-top: 10px; }
.contador { padding-top: 6px; border-radius: 15px; }
.contador-azul { background-color: rgba(64, 86, 96, .46); }
.contador-magenta { background-color: rgba(160, 67, 116, .49); }
.contador-numero { display: flex; justify-content: center; font: 600 60px/1 Lato, var(--sistema); color: var(--gris-humo); }
.contador-titulo { display: flex; align-items: center; justify-content: center; font: 300 19px/2.5 Lato, var(--sistema); color: var(--gris-humo); text-align: center; }

.seccion-noticias-titulo { padding: 30px 0 10px; }
.seccion-noticias-titulo .titulo-seccion-caja { padding: 14px 0 30px; }
.seccion-noticias { padding: 0 0 50px; }
.seccion-noticias .tarjetas-notas { margin-bottom: 20px; }
.seccion-noticias .boton-centrado { padding-top: 20px; }

.seccion-mercados {
  padding: 0 0 95px;
  background: #fff url("../images/inicio-mercados-indices-1065x798.png") 0 0;
}
.mercados-velo { position: absolute; inset: 0; background-color: #a0889d; opacity: .5; }
.seccion-mercados .contenedor { position: relative; }
.mercados-titulo-fila { display: flex; padding: 14px 0 10px; }
.mercados-titulo-fila .titulo-seccion-caja { padding: 14px 0 30px; }
.mercados-titulo-fila .titulo-seccion { color: #fff; }
.mercados-caja { background-color: #fff; padding: 40px 20px; }
@media (max-width: 767px) { .mercados-caja { padding: 0; } }

/* ============ 8. Páginas internas ============ */
/* Banda del título, común a todas las páginas internas. El alto del espaciador cambia por
   página: va en la propia página como `style="--alto: 40px"`. */
.seccion-titulo-pagina { border-bottom: 1px solid var(--rosa); }
.espaciador { height: var(--alto, 50px); margin-bottom: 20px; }
.espaciador:last-child { margin-bottom: 0; }

/* Tarjetas de «¿En qué te podemos ayudar?» */
.seccion-ayuda-1 { padding: 60px 0 0; }
.seccion-ayuda-2 { padding: 0 0 70px; }
.tarjeta-cta { background-color: #000; overflow: hidden; }
.cta { display: flex; flex-wrap: wrap; overflow: hidden; }
.cta-imagen { position: relative; z-index: 1; width: 100%; min-height: 200px; overflow: hidden; }
.cta-imagen-fondo { position: absolute; inset: 0; z-index: 1; background-position: 50% 50%; background-size: cover; transition: filter 1.5s, transform 1.5s; }
.cta-imagen-velo { position: absolute; inset: 0; z-index: 2; }
.cta-contenido {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-content: center;
  width: 100%; padding: 35px;
  color: #fff;
  background-color: #f5f5f5;
  overflow: hidden;
}
.cta-boton-caja { color: #3f444b; }
.cta-titulo { width: 100%; margin-bottom: 15px; font: 600 23px/1.2 Lato, var(--sistema); color: #3f444b; text-align: center; }
.cta-texto { width: 100%; margin-bottom: 15px; font: 400 16px/1.5 Lato, var(--sistema); color: #3f444b; text-align: center; }
.cta-boton-caja { width: 100%; text-align: center; }

/* Cotizaciones */
.contenedor-ancho { max-width: 1330px; }
.contenedor-500 { max-width: 500px; }
.contenedor-600 { max-width: 600px; }
@media (max-width: 1024px) { .contenedor-ancho { max-width: 1024px; } }
@media (max-width: 767px) { .contenedor-ancho { max-width: 767px; } }
.seccion-cotizaciones { padding: 0 0 120px; background-image: linear-gradient(180deg, #f5f6f6 0%, #d2d2d2 100%); }
.boton-bloque { margin-bottom: 20px; }
.boton-solido {
  padding: 15px 30px;
  font-size: 16px; color: #fff;
  background-color: var(--magenta);
  border: 0; border-radius: 4px;
}
.boton-solido:hover, .boton-solido:focus-visible { background-color: var(--azul); }

/* Formulario de contacto */
.formulario { display: flex; flex-wrap: wrap; margin: 0 -5px -10px; }
.campo { display: flex; flex-wrap: wrap; align-items: center; width: 100%; min-height: 1px; margin-bottom: 10px; padding: 0 5px; }
.campo-etiqueta { display: block; font: 400 16px/1 Lato, var(--sistema); color: var(--azul); }
.campo-control {
  width: 100%; min-height: 40px; padding: 8px 16px;
  font: 400 15px/1.4 Lato, var(--sistema); color: var(--azul);
  background-color: #fff;
  border: 1px solid #69727d; border-radius: 3px;
  transition: all .3s;
}
.campo-area { padding: 5px 14px; resize: vertical; }
.campo-enviar { align-items: flex-end; }
.boton-enviar {
  width: 100%; min-height: 40px; padding: 0 24px;
  font: 500 15px/1 Lato, var(--sistema); color: #fff; text-align: center; white-space: nowrap;
  background-color: var(--magenta);
  border-radius: 3px;
}

/* Suscripción a informes (el original lo arma con MailPoet, con la tipografía del sistema) */
.suscripcion-campo { max-width: 100%; margin: 0 0 20px; line-height: 1.25; }
.suscripcion-campo-ultimo { margin-bottom: 0; }
.suscripcion-etiqueta { display: block; font: 700 16px/1 var(--sistema); color: #333; }
.suscripcion-control {
  width: 100%; padding: 8px 16px;
  font: 400 16px/1.5 var(--sistema); color: #000;
  background-color: #fff;
  border: 1px solid #666; border-radius: 3px;
  transition: all .3s;
}
.suscripcion-enviar {
  display: inline-block; padding: 8px 16px;
  font: 400 16px/1.5 var(--sistema); color: #fff; text-align: center;
  background-color: var(--magenta);
  border: 1px solid transparent; border-radius: 3px;
  cursor: pointer;
}
@media (max-width: 500px) {
  .suscripcion-campo, .suscripcion-etiqueta, .suscripcion-control, .suscripcion-enviar { line-height: 1.4; }
}

/* Fuente de los informes (comentarios de la Bolsa de Comercio de Rosario) */
.informes-fuente { margin: 30px 0 0; font: 400 14px/1.5 Lato, var(--sistema); color: var(--azul); }
.nota-contenido .nota-fuente { margin-top: 20px; font-size: 14px; font-style: italic; }

/* Mensajes de los formularios (enviando, gracias, error) */
.formulario__estado { width: 100%; margin: 10px 0; padding: 0 5px; font: 400 15px/1.5 Lato, var(--sistema); color: var(--azul); }
.formulario-suscripcion .formulario__estado { padding: 0; }
.formulario__estado:empty { display: none; }
.formulario__estado--error { color: #b3261e; }
.formulario__estado--cargando::before {
  content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 8px; vertical-align: -2px;
  border: 2px solid var(--rosa); border-top-color: var(--magenta); border-radius: 50%; animation: girar .8s linear infinite;
}
.boton-enviar:disabled, .suscripcion-enviar:disabled { opacity: .6; cursor: wait; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Listados de notas (Informes y Noticias) */
.notas-bloque-informes { padding-bottom: 40px; }
.notas-bloque-noticias { padding-bottom: 80px; }
.paginacion { padding-top: 35px; font: 400 16px/1.5 Lato, var(--sistema); text-align: center; }
.paginacion .pagina { display: inline; margin: 0 5px; transition: color .3s; }
.paginacion .pagina-anterior { margin-right: 5px; margin-left: 0; }
.paginacion .pagina-siguiente { margin-right: 0; margin-left: 5px; }
/* En Informes el listado sí trae colores propios; en Noticias quedan los del tema. */
.notas-bloque-informes .paginacion .pagina { color: var(--azul); }
.notas-bloque-informes .paginacion a.pagina:hover, .notas-bloque-informes .paginacion a.pagina:focus-visible,
.notas-bloque-informes .paginacion .pagina-actual { color: var(--magenta); }

.seccion-suscribirse .columna-65 { width: 65%; }
.seccion-suscribirse .columna-35 { width: 35%; }
.columna-centrada { justify-content: center; }
.columna-suscribirse { margin-left: -10px; }
.suscribirse-texto { margin-bottom: -30px; }
.suscribirse-texto p { font: 600 16px/1.5 Lato, var(--sistema); color: var(--magenta); text-align: end; }
.boton-izquierda { text-align: start; }
.boton-negrita { font-weight: 600; }
@media (max-width: 767px) {
  .seccion-suscribirse .columna-65, .seccion-suscribirse .columna-35 { width: 100%; }
  .columna-suscribirse { margin-left: 0; }
  .suscribirse-texto p { text-align: center; }
  .boton-izquierda { text-align: center; }
}

/* Plantas */
.ancla { pointer-events: none; }
.seccion-planta { padding: 0 0 35px; }
.seccion-planta-clara { background-color: var(--gris-humo); }
.seccion-planta-gris { background-color: var(--gris-claro); }
.seccion-planta-ultima { padding: 0 0 70px; }
.planta-titulo-fila, .planta-fila { display: flex; flex-wrap: wrap; }
.planta-titulo-caja { padding: 14px 0; }
.planta-titulo { font: 600 28px/1 Lato, var(--sistema); color: var(--azul); }
.columna-60 { width: 60%; }
.columna-40 { width: 40%; }
.planta-mapa { overflow: hidden; }
.planta-mapa iframe { display: block; width: 100%; height: 421px; border: 0; }
.planta-datos { margin-bottom: 20px; }
.planta-datos li { display: flex; align-items: center; }
/* El glifo va pegado a la izquierda de su caja de 1.25em, como en el original. */
.planta-dato-icono {
  display: flex;
  width: calc(1.25em + 13px); padding-right: 13px;
  font-size: 21px; line-height: 1; color: var(--magenta);
}
.planta-dato-texto { padding-left: 5px; font: 300 17px/3em Lato, var(--sistema); color: #636363; }
@media (max-width: 1024px) {
  .planta-dato-texto { font-size: 13px; }
}
@media (max-width: 767px) {
  .columna-60, .columna-40 { width: 100%; }
  .planta-datos { margin: -20px 0 80px; }
  /* Donde sigue un ancla (todas las plantas menos la última) el original suma 20 px más. */
  .planta-datos:has(+ .ancla) { margin-bottom: 100px; }
}

/* Agroinsumos y complementos */
.seccion-fertilizantes { padding: 50px 0; }
.seccion-rubros { padding: 0 0 25px; border-bottom: 1px solid var(--rosa); }
.seccion-consultas { padding: 25px 0 0; }
.col-3 { width: 33.333%; }
@media (max-width: 767px) { .col-3 { width: 100%; } }
.subtitulo-caja { margin-bottom: 20px; padding: 10px 0; border-bottom: 1px solid var(--magenta); }
.subtitulo { font: 600 28px/1 Lato, var(--sistema); color: var(--magenta); text-align: center; }
.fila-imagenes, .fila-rubro { display: flex; flex-wrap: wrap; }
.imagen-bloque { margin: 0; }
.imagen-bloque img { display: inline-block; vertical-align: middle; width: 100%; }
.imagen-bloque-margen { margin-bottom: 20px; }
.texto-rubro p, .acordeon-contenido p { margin: 0 0 14.4px; font: 400 16px/1.8 Lato, var(--sistema); color: var(--azul); }
.consultas-texto { margin-bottom: 20px; }
.consultas-texto p { margin: 0 0 14.4px; font: 600 16px/1.5 Lato, var(--sistema); color: var(--magenta); text-align: center; }

.acordeon { margin-bottom: 20px; }
.acordeon-item { border: 1px solid var(--borde-pestana); }
.acordeon-item + .acordeon-item { border-top-style: none; }
.acordeon-titulo { display: block; width: 100%; padding: 15px 20px; font: 700 16px/1 var(--sistema); text-align: start; }
/* `vertical-align: top` para que el icono no baje la línea base y el título mida lo mismo
   que en el original (46 px en escritorio, 40 en móvil). */
.acordeon-icono { display: inline-block; vertical-align: top; width: 1.5em; color: var(--azul); }
.acordeon-titulo-texto { font: 600 16px/1 Lato, var(--sistema); color: var(--azul); }
.acordeon-titulo[aria-expanded="true"] .acordeon-titulo-texto,
.acordeon-titulo[aria-expanded="true"] .acordeon-icono { color: var(--magenta); }
.acordeon-titulo[aria-expanded="true"] .acordeon-icono-cerrado,
.acordeon-titulo[aria-expanded="false"] .acordeon-icono-abierto { display: none; }
.acordeon-contenido { padding: 15px 20px; font: 400 16px/1.8 Lato, var(--sistema); color: var(--azul); border-top: 1px solid var(--borde-pestana); }
@media (max-width: 767px) {
  .acordeon-titulo { padding: 12px 15px; }
  .acordeon-icono { width: 1.2em; }
  .acordeon-contenido { padding: 7px 15px; }
}

/* Asesoramiento sobre Mercados */
.seccion-carrusel { padding: 30px 0 50px; }
.carrusel {
  position: relative; height: 400px; overflow: hidden;
  background: url("../images/mercados-portada-2560x1402.jpg") center center / cover;
}
.carrusel-lamina { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
.carrusel-lamina.es-activa { opacity: 1; }
.carrusel-velo { position: absolute; inset: 0; background-color: rgba(64, 86, 96, .77); }
.carrusel-interior { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 50px; }
.carrusel-contenido { max-width: 85%; text-align: center; }
.carrusel-titulo { font: 300 35px/1.5 Lato, var(--sistema); color: #fff; }
.carrusel-titulo b { font-weight: 400; }
.carrusel-titulo-boton { margin-bottom: 30px; }
.carrusel-boton { display: inline-block; padding: 12px 24px; font: 500 15px/1 Lato, var(--sistema); color: #fff; border: 2px solid #fff; border-radius: 3px; }
.carrusel-flecha { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); font-size: 25px; color: #fff; }
.carrusel-anterior { left: 10px; }
.carrusel-siguiente { right: 10px; }
.carrusel-puntos { position: absolute; inset: auto 0 5px; z-index: 10; height: 24px; text-align: center; }
.carrusel-punto { display: inline-block; width: 12px; height: 12px; margin: 0 6px; background-color: #000; opacity: .2; border-radius: 50%; }
.carrusel-punto.es-activo { background-color: #fff; opacity: 1; }
@media (max-width: 767px) { .carrusel-titulo { font-size: 19px; } }

.seccion-derivados {
  padding: 0 0 50px;
  background-color: rgba(64, 86, 96, .07);
  border-radius: 1px 0 0;
  box-shadow: 0 0 10px 0 rgba(64, 86, 96, .5);
}
.titulo-bloque-caja { margin-bottom: 20px; padding: 30px 0 15px; }
.titulo-bloque { font: 400 28px/1.6 Lato, var(--sistema); color: var(--azul); text-align: center; }
.titulo-bloque-violeta { color: #652f6c; }
.derivados-bajada { margin-bottom: 20px; }
.derivados-bajada p { margin: 0 0 14.4px; font: 400 16px/1.5 Lato, var(--sistema); color: var(--azul); text-align: center; }
.derivados-bajada span { font-size: 18.6667px; line-height: 28px; }
.fila-derivados, .fila-logo, .fila-fisico { display: flex; flex-wrap: wrap; }
.col-5 { width: 20%; }
@media (max-width: 767px) { .col-5 { width: 100%; } }
.caja-icono-glifo-violeta { color: #652f6c; }
.caja-icono-texto-producto { font-weight: 600; color: #652f6c; text-transform: uppercase; }
.columna-linea-violeta { border-bottom: 1px solid #652f6c; }
.logo-matba { margin: 0; padding-top: 10px; text-align: center; }
.logo-matba img { display: inline-block; vertical-align: middle; }

.seccion-fisico { padding: 0 0 50px; background-color: rgba(64, 86, 96, .26); border-radius: 1px 0 0; }
.fisico-velo { position: absolute; inset: 0; border-radius: 1px 0 0; opacity: .14; }
.seccion-fisico .contenedor { position: relative; }
.enlace-icono { margin-bottom: 20px; }
.enlace-icono-separado { margin-bottom: 0; padding-top: 20px; }
.enlace-icono-caja { display: flex; align-items: center; gap: 7px; }
.enlace-icono-glifo {
  position: relative; display: inline-block; width: 1em; height: 1em;
  font-size: 35px; line-height: 1; color: rgba(191, 93, 118, .82);
}
.enlace-icono-glifo .icono { position: absolute; left: 50%; transform: translateX(-50%); }
.enlace-icono-texto { flex: 1 1 auto; margin: 0; font: 400 16px/1.5 Lato, var(--sistema); color: var(--azul); }
.enlace-icono-texto a { color: rgba(191, 93, 118, .99); }
@media (max-width: 767px) {
  /* En móvil el original pone el icono arriba y centrado, y el texto debajo. */
  .enlace-icono-caja { flex-direction: column; align-items: center; }
  .enlace-icono-texto { width: 100%; }
}
.boton-volver-caja { padding-bottom: 80px; }

/* --- Nota e informe (la «single» del original: misma plantilla para las dos) --- */
.espaciador-10 { height: 10px; }
.espaciador-30 { height: 30px; }
.espaciador-40 { height: 40px; }
.espaciador-100 { height: 100px; }

.seccion-nota .columna { padding: 0 15px; }
.columna-nota { width: 75%; }
.columna-lateral { width: 25%; }
/* Elementor separa 20 px cada widget de la columna, menos el último. */
.seccion-nota .columna > *:not(:last-child) { margin-bottom: 20px; }

.nota-titulo-caja { padding: 14px 0; }
.nota-titulo { font: 600 40px/1.4 Lato, var(--sistema); color: var(--azul); }

.nota-datos { display: flex; flex-wrap: wrap; margin: 0 -8px; padding: 0; list-style: none; }
.nota-datos li { display: flex; align-items: center; margin: 0 8px; font: 400 14px/1.5 Lato, var(--sistema); }
.nota-dato-icono { display: flex; width: 14px; font-size: 14px; }
.nota-dato-icono .icono { color: #7a7a7a; }
.nota-dato-texto { padding-left: 5px; color: #7a7a7a; }
.nota-dato-texto a { color: #7a7a7a; }

/* El original deja el margen de 14,4 px también en el último párrafo. */
.nota-contenido { font-family: Lato, var(--sistema); color: var(--azul); }
.nota-contenido p { margin: 0 0 14.4px; font: 400 16px/1.5 Lato, var(--sistema); color: var(--azul); }

.nota-navegacion { display: flex; overflow: hidden; }
.nota-nav { flex: 1 1 0; overflow: hidden; }
.nota-nav a {
  display: flex; align-items: center; gap: 15px; max-width: 100%;
  white-space: nowrap; text-decoration: none;
}
.nota-nav-siguiente a { justify-content: flex-end; text-align: end; }
.nota-nav .icono { flex: none; width: .5em; height: 1em; font-size: 30px; color: var(--magenta); transform: translateY(-1.5px); }
.nota-nav-caja { display: flex; flex-direction: column; overflow: hidden; }
.nota-nav-etiqueta { overflow: hidden; font: 400 12.8px/1.5 Lato, var(--sistema); color: var(--azul); text-transform: uppercase; }
.nota-nav-titulo { overflow: hidden; font: 400 11.2px/1.5 Lato, var(--sistema); color: var(--magenta); }
.nota-nav-separador { flex: none; width: 1px; background-color: #d5d8dc; }

.lateral-titulo { font: 600 24px/1 Lato, var(--sistema); color: var(--azul); }
.lateral-notas { display: grid; row-gap: 15px; }
.lateral-nota { display: flex; overflow: hidden; }
/* Como en el original: el bloque de texto no baja de la palabra más larga del título y se
   sale de la tarjeta, que lo recorta. Con la columna angosta de tableta se nota. */
.lateral-nota-texto { min-width: min-content; }
.lateral-nota-titulo { margin: 0 0 10px; font: 400 16px/1.2 Lato, var(--sistema); }
.lateral-nota-titulo a { color: var(--magenta); }
.lateral-nota-pie { margin-bottom: 13px; font: 400 12px/1.3 Lato, var(--sistema); color: #adadad; }

@media (max-width: 1024px) {
  /* En tableta el original muestra las notas de la columna en dos columnas. */
  .lateral-notas { grid-template-columns: repeat(2, 1fr); column-gap: 30px; }
}
@media (max-width: 767px) {
  .columna-nota, .columna-lateral { width: 100%; }
  .lateral-notas { grid-template-columns: 1fr; }
}

/* ============ 9. Animaciones de entrada ============ */
.js .aparece { visibility: hidden; }
.aparece.es-visible { visibility: visible; animation-duration: 1.25s; animation-fill-mode: both; }
.aparece.es-visible.aparece-lenta { animation-duration: 2s; }
.aparece-fadein.es-visible { animation-name: aparecer; }
.aparece-fadeinup.es-visible { animation-name: aparecer-arriba; }
.aparece-fadeinleft.es-visible { animation-name: aparecer-izquierda; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes aparecer-arriba { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
@keyframes aparecer-izquierda { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .aparece.es-visible { animation: none; }
}