/*============================================================
  PSM Cereales — capa de marca sobre el template Manrox
  Guía de marca 2026: paleta, tipografías y ajustes mínimos.
  No modifica style.css: sólo redefine variables y detalles.
==============================================================*/

/* Tipografías de marca (Montserrat / Inter) — servidas localmente.
   .ttf de Google Fonts; se pasarán a woff2 subsetado en la etapa de performance. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-400.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-500.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-600.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-700.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/montserrat-500.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-600.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-700.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/montserrat-800.ttf") format("truetype"); }

:root {
  /* Tipografía */
  --body-font: "Inter", "Roboto", system-ui, sans-serif;
  --heading-font: "Montserrat", "Sora", system-ui, sans-serif;

  /* Paleta corporativa PSM */
  --theme-color: #b8892e;        /* Dorado trigo / bronce — acento principal */
  --theme-color2: #3b5f3a;       /* Verde institucional profundo — secundario */
  --color-dark: #2e343b;         /* Gris grafito */
  --color-green: #3b5f3a;
  --theme-bg-light: #f4f5f6;
  --theme-bg-light2: #f1ede6;    /* dorado muy desaturado */
  --body-text-color: #5b6570;

  --footer-bg: #2e343b;          /* Grafito — seriedad y contraste */
  --footer-text-color: #d7dbe0;
}

/* El template pinta algunos detalles con el verde original (#0d403e).
   Reforzamos el verde institucional donde queda hardcodeado. */
.bg-theme,
.theme-btn2:hover,
.hero-section.hs-1 .hero-item-box .call-box .call-icon {
  background-color: var(--theme-color2) !important;
}


/* Botón primario: dorado con texto grafito para contraste AA */
.theme-btn {
  color: #fff;
}

/* Header: doble botón "Acceso a clientes" + "Contacto", como el par de
   la Hero (uno relleno, uno secundario). */
.nav-btn {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* "Acceso a clientes": el template capitaliza cada palabra (.theme-btn
   text-transform: capitalize) y dejaba "Acceso A Clientes". Se respeta
   como está escrito, con la "a" en minúscula. */
a[href="acceso-clientes.html"] { text-transform: none; }

/* Footer (widget "Atención"): los dos botones, uno arriba del otro. */
.footer-atencion-btns {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* Servicios: íconos FontAwesome, más representativos de cada proceso.
   Van por encima del círculo animado del hover (::before, z-index 0). */
.service-icon i {
  position: relative;
  z-index: 1;
  line-height: 60px;
  font-size: 26px;
  color: #fff;
  transition: var(--transition);
}
.service-item:hover .service-icon i {
  color: var(--color-dark);
}

/* Logo institucional (wordmark horizontal PSM) */
.navbar-brand img,
.offcanvas-brand img { height: 44px; width: auto; }
@media (min-width: 992px) {
  .navbar-brand img { height: 52px; }
}
.footer-logo img { height: 52px; width: auto; }

/* Bloque "Operamos junto a Agripuerto" en el footer */
.footer-group { margin-top: 26px; }
.footer-group > span:first-child {
  display: block;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--footer-text-color);
  opacity: 0.6;
  margin-bottom: 10px;
}
/* El logo nuevo de Agripuerto ya viene pensado para fondo oscuro (texto
   blanco), así que va directo sobre el footer, sin chip blanco. */
.footer-group-logo { display: inline-flex; }
.footer-group-logo img { height: 80px; width: auto; display: block; }
/* El Facebook de Agripuerto va junto a su logo (no en el bloque "Seguinos"
   de PSM) para que la cercanía con el logo indique de qué cuenta es. */
.footer-group-brand { display: flex; align-items: center; gap: 11px; margin-top: 12px; }
.footer-group-social i {
  display: inline-block;
  height: 42px;
  width: 42px;
  line-height: 38px;
  text-align: center;
  border-radius: 50px;
  border: 1.5px solid var(--border-white-color);
  color: var(--color-white);
  transition: var(--transition);
}
.footer-group-social:hover i { background: var(--theme-color); color: var(--color-white); }

/* Barra superior: separador entre las redes de PSM y la de Agripuerto.
   Margen simétrico a ambos lados (el ícono de Agripuerto no suma su
   propio margin-left) y centrado verticalmente contra los íconos. */
.header-top-social-divider {
  display: inline-block;
  position: relative;
  top: -1.6px;
  width: 1px;
  height: 16px;
  margin: 0 12px;
  background: rgba(255, 255, 255, 0.3);
  vertical-align: middle;
}
.header-top-social a:last-child { margin-left: 0; }

/* Footer: Teléfono / Correo / Planta — el título de cada bloque queda
   a la misma altura en los tres, en vez de centrarse individualmente
   según el largo de cada contenido (el de Teléfono, más corto, quedaba
   más abajo que los otros dos). */
.footer-contact,
.footer-contact-item { align-items: flex-start; }

/* Ajuste fino: enlaces del footer en dorado al hover */
.footer-list a:hover { color: var(--theme-color); }

/* Footer — bloque de contacto: logo + 3 datos como 4 elementos equidistantes.
   Se aplanó el HTML (sin .footer-contact-wrap) para que el reparto sea parejo. */
.footer-area.ft-2 .footer-contact {
  gap: 24px 40px;
  flex-wrap: wrap;
}
.footer-contact .footer-logo { flex: 0 0 auto; }
.footer-contact .footer-contact-item { flex: 0 0 auto; }
/* Interlineado más respirado (el template lo dejaba en 1) y bloques compactos:
   los saltos de línea los controla el HTML con <br>. */
.footer-contact-item .content { line-height: 1.5; }
.footer-contact-item .content h5 { margin-bottom: 6px; }
.footer-contact-item .content a,
.footer-contact-item .content p { white-space: nowrap; margin-bottom: 0; }

/* Quita el franjón blanco bajo el footer: la marca de agua "psm" (.text-shape,
   bottom:-22%) se desbordaba por debajo y agrandaba el scroll. */
.footer-area { overflow: hidden; }

/* Header flotante al inicio, como en el template: transparente y superpuesto
   sobre el hero (position:absolute) hasta que el scroll pasa los 50px, momento
   en que main.js agrega .fixed-top al navbar y pasa a ser la barra blanca sólida
   y fija. El template lo logra con ScrollSmoother (que quitamos); position:absolute
   reproduce el mismo efecto con scroll nativo.
   z-index:1000 además evita que secciones con z-index:2 queden por delante de
   la barra al hacer scroll (el <header> original crea su propio contexto de
   apilamiento con z-index:1). */
.header.hd-1 { position: absolute; top: 0; left: 0; width: 100%; z-index: 1000; }
.navbar.fixed-top { z-index: 1000; }

/* Servicios — los 5 en una sola fila (en desktop).
   El template fija .service-img en 220px, lo que impide que 5 tarjetas entren;
   dentro de esta fila se ajusta el ancho de tarjeta y de imagen, y todas quedan
   de la misma altura (imagen y "Ver más" alineados). En < 992px colapsa a
   3 / 2 columnas por el propio grid de Bootstrap. */
@media (min-width: 992px) {
  .services-row-5 > [class*="col-"] {
    flex: 0 0 20%;
    max-width: 20%;
    display: flex;
  }
  .services-row-5 .service-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 18px;
  }
  .services-row-5 .service-content { display: flex; flex-direction: column; flex: 1 1 auto; }
  /* mínimo 40px entre el texto descriptivo y la imagen: fijo en el párrafo
     (así la tarjeta con el texto más largo también lo respeta); en las demás
     tarjetas el margin-top:auto de la imagen suma el resto hasta emparejar
     la altura de todas. */
  .services-row-5 .service-content p { margin-bottom: 40px; }
  .services-row-5 .service-img { width: 100%; margin-top: auto; margin-bottom: 24px; }
  .services-row-5 .service-item .count { right: 20px; top: 20px; font-size: 17px; }
  .services-row-5 .service-icon { margin-bottom: 22px; }
}

/* Feature cards ("diferenciales" bajo el hero): todas la misma altura,
   igualadas a la más alta con relleno inferior. */
.feature-wrap .row { align-items: stretch; }
.feature-wrap [class*="col-"] { display: flex; }
.feature-wrap .feature-item { width: 100%; }

/* Contadores de "Capacidad instalada": los títulos tienen distinta cantidad
   de líneas (algunos envuelven a 2), lo que dejaba los números a distinta
   altura. Se ensancha el título para que "200 tn/h" y "Coordinación
   operativa" no partan la última palabra, y el número se ancla siempre
   abajo del box (flex + margin-top:auto), así todos quedan alineados sin
   importar cuántas líneas ocupe cada título. */
.counter-area .row.g-4 > [class*="col-"] { display: flex; }
.counter-box { width: 100%; display: flex; }
.counter-box .content { display: flex; flex-direction: column; width: 100%; }
.counter-box .content .title { width: 100%; margin-bottom: 24px; }
.counter-box .content .info { margin-top: auto; }

/* About — las dos columnas arrancan alineadas arriba: el borde superior del
   bloque de imágenes (25+ años de trayectoria) queda a la misma altura que
   el borde superior del texto ("Institucional"). */
@media (min-width: 992px) {
  .about-area > .container > .row { align-items: flex-start; }
}

/* About — bordes y recorte de las imágenes. */
.about-left .about-img .img-1,
.about-left .about-img .img-2 {
  border-radius: 20px;
  overflow: hidden;
}
.about-left .about-img .img-1 { aspect-ratio: 500 / 650; }
.about-left .about-img .img-1 .ani-img { display: block; height: 100%; }
.about-left .about-img .img-1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

/* En escritorio, la imagen inferior derecha conserva el ancho de la columna
   y toma la proporción vertical 2:3 del template. El JPG tiene la foto entre
   Y=197 y Y=703 dentro de un lienzo blanco de 600x900; el zoom y el offset
   excluyen ese relleno para que la fotografía cubra realmente la caja.
   En móvil se mantiene el comportamiento original. */
@media (min-width: 992px) {
  .about-left .about-img .img-2 {
    aspect-ratio: 2 / 3 !important;
  }
  .about-left .about-img .img-2 .ani-img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .about-left .about-img .img-2 img {
    position: absolute;
    top: -38.86%;
    left: 50%;
    display: block;
    width: auto !important;
    max-width: none;
    height: 177.52% !important;
    transform: translateX(-50%);
    border-radius: 0;
  }
}

/* Imagen redonda junto a los bullets, sobre el botón "Conocé la empresa":
   el template la muestra circular (foto cuadrada); forzamos caja cuadrada
   de 120px para que quede perfectamente circular y la lista quede al lado. */
.about-content .about-info .img,
.about-content .about-info .img .ani-img {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
.about-content .about-info .img img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  display: block;
}
/* que la lista de bullets quede al lado del círculo (como el template):
   se deja que el texto de cada bullet baje a dos líneas si hace falta. */
.about-content .about-info .about-list { flex: 1 1 0; min-width: 0; }
.about-content .about-info .about-list li p { min-width: 0; }

/* About — "Filosofía corporativa" y "Política de gestión de la calidad" tienen
   textos de distinto largo; se igualan las alturas para que la línea inferior
   de los dos ítems quede a la misma altura. */
@media (min-width: 992px) {
  .about-content > .row > [class*="col-"] { display: flex; }
  .about-content > .row > [class*="col-"] > .about-item { flex: 1 1 auto; }
}

/* Hero — con tres ítems (antes dos), a 20px se pasaban a dos renglones.
   Se achican apenas para que entren en una sola línea. */
@media (min-width: 992px) {
  .hs-1 .hero-single .hero-content .hero-info li {
    font-size: 18px;
    margin-right: 18px;
  }
}

/* "Por qué elegirnos" — en escritorio las columnas laterales se estiran
   solas hasta el alto del bloque verde central (antes iban con alturas
   fijas en píxeles, que se descolocaban cada vez que cambiaba el texto).
   A la derecha, el cartel "¿Tenés una partida...?" conserva su alto y la
   foto ocupa lo que sobra. */
@media (min-width: 992px) {
  .choose-area > .container > .row.g-4 > .col-lg-3 {
    display: flex;
    flex-direction: column;
  }
  .choose-area > .container > .row.g-4 > .col-lg-3 > .choose-img {
    flex: 1 1 auto;
    min-height: 0;
  }
  .choose-area > .container > .row.g-4 > .col-lg-3 > .choose-img > .ani-img {
    height: 100%;
  }
  .choose-area > .container > .row.g-4 > .col-lg-3 > .choose-project {
    flex: 0 0 auto;
  }
  .choose-area .choose-img img.img-1,
  .choose-area .choose-img img.img-2 {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Las cuatro tarjetas del bloque verde quedan a la misma altura aunque
     un título ocupe dos renglones. */
  .choose-content .row > [class*="col-"] { display: flex; }
  .choose-content .row > [class*="col-"] > .choose-item { flex: 1 1 auto; }
}

/* ============================================================
   Efectos del template Manrox, reimplementados sin GSAP.
   - Aparición de textos/bloques: WOW.js (fadeInUp/fadeInLeft) —
     ya venía cableado en el HTML y en main.js.
   - Revelado de imágenes (.reveal) y parallax del hero: brand-fx.js
     con IntersectionObserver + scroll.
   Todo lo que maneja JS queda "apagado" salvo que <html> tenga la
   clase fx-ready (la agrega brand-fx.js): si el script no corre, la
   página se ve en su estado final, sin nada invisible.
   Se respeta prefers-reduced-motion. Las animaciones de texto por
   caracteres del template (.ani-text-*, SplitText) no se usan. */
.ani-text-1, .ani-text-2, .ani-text-3 { opacity: 1 !important; }
.ani-text-1 *, .split-line, .split-line * { opacity: 1 !important; transform: none !important; }

/* Revelado tipo "cortina" que se corre de izquierda a derecha, como el
   template (que lo hacía con GSAP xPercent). En el template, por el punto
   de disparo, el barrido se ve entrar recién sobre el último cuarto: acá
   se replica arrancando a 3/4 (el 75% de la foto SIEMPRE se ve) y
   terminando en el borde derecho. Así, aunque el JS no marque .is-in, la
   foto igual queda casi entera — nada se corta.
   El efecto va sobre el CONTENEDOR (clip-path), nunca sobre el <img>: la
   foto de abajo (.img-2) se centra con transform:translateX y un
   transform en la imagen la rompía (quedaba corrida a la derecha). */
.reveal { visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .fx-ready .ani-img.reveal.is-in {
    -webkit-animation: psm-reveal-wipe .95s cubic-bezier(.5, 1, .89, 1) forwards;
            animation: psm-reveal-wipe .95s cubic-bezier(.5, 1, .89, 1) forwards;
  }
}
@-webkit-keyframes psm-reveal-wipe {
  from { -webkit-clip-path: inset(0 25% 0 0); }
  to   { -webkit-clip-path: inset(0 0 0 0); }
}
@keyframes psm-reveal-wipe {
  from { -webkit-clip-path: inset(0 25% 0 0); clip-path: inset(0 25% 0 0); }
  to   { -webkit-clip-path: inset(0 0 0 0);   clip-path: inset(0 0 0 0); }
}

/* Parallax del fondo del hero — igual que el template: alto 110% y
   brand-fx.js lo desplaza HACIA ABAJO a la mitad de la velocidad del
   scroll (data-speed 0.5). Con ese alto y esa dirección el borde
   superior nunca deja hueco. Sólo desktop / con movimiento. */
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  .fx-ready .hs-1 .hero-bg-img { height: 110%; will-change: transform; }
}

@media (prefers-reduced-motion: reduce) {
  .wow { animation: none !important; opacity: 1 !important; visibility: visible !important; }
}

/* Hero: se deja align-items:end y padding-bottom:60px tal como el template
   (style.css), así el margen entre la tarjeta de contacto y el borde inferior
   del hero queda igual (60px). Nuestro copy es más largo que el del template,
   así que a igual altura (100vh) el bloque de texto "come" más espacio y el
   respiro entre el header y el subtítulo queda menor que en Manrox. Para
   igualarlo se agranda el alto del hero (no cambia el margen inferior, que
   depende sólo de padding-bottom, no de la altura). */
@media (min-width: 992px) {
  .hs-1 .hero-single { height: calc(100vh + 120px); }
}