/* ============================================================
   BAES — Soluciones de pesaje agroindustrial
   Sistema de diseño: acero + chapa antideslizante + visor LCD
   ============================================================ */

:root{
  /* color */
  --charcoal:#15181A;
  --charcoal-2:#1D2224;
  --steel:#2B3234;
  --steel-line:#454D4F;
  --paper:#F3F1E9;
  --paper-2:#E9E5D8;
  --ink:#181B1A;
  --ink-soft:#4B514E;
  --red:#C42A2E;
  --red-600:#A83232;
  --red-dark:#8F1F22;
  --green:#1F5D3B;
  --green-700:#234E30;
  --green-light:#2E7A4E;
    --green-light-2:#6cb880;
  --lcd-bg:#C9CCC0;
  --lcd-fg:#1B1D16;

  /* type */
  --f-display:'Big Shoulders Display', sans-serif;
  --f-body:'Inter', sans-serif;
  --f-mono:'Space Mono', monospace;

  --container:1200px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
svg{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

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

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}

h1,h2,h3{
  font-family:var(--f-display);
  font-weight:800;
  line-height:0.95;
  letter-spacing:-0.01em;
  margin:0 0 .5em;
  text-transform:uppercase;
}
h1{ font-size:clamp(3rem, 7vw, 5.4rem); }
h2{ font-size:clamp(2.1rem, 4vw, 3.2rem); }
h3{ font-size:1.3rem; text-transform:none; font-weight:700; line-height:1.15; letter-spacing:0; }
p{ margin:0 0 1em; line-height:1.6; color:var(--ink-soft); }

.eyebrow{
  font-family:var(--f-mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red);
  margin:0 0 1em;
  display:flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:'';
  width:22px;
  height:2px;
  background:var(--red);
  display:inline-block;
}
.eyebrow-light{ color:#E9C8A6; }
.eyebrow-light::before{ background:#E9C8A6; }

.text-accent{ color:var(--green-light-2); }

/* ---------------- Reveal on scroll ---------------- */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  font-family:var(--f-body);
  font-weight:600;
  font-size:.95rem;
  padding:14px 26px;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-whatsapp{
  background:var(--green);
  color:#fff;
  box-shadow:0 8px 20px -8px rgba(31,93,59,.6);
}
.btn-whatsapp:hover{ background:var(--green-light); }
.btn-ghost{
  border-color:rgba(255,255,255,.35);
  color:#fff;
}
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.06); }
.btn-small{ padding:10px 18px; font-size:.85rem; }
.btn-large{ padding:18px 34px; font-size:1.05rem; }
.wa-icon{ width:18px; height:18px; fill:currentColor; stroke:none; flex:none; }

/* ---------------- Header ---------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(243,241,233,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px;
}
.brand-logo{ height:36px; width:auto; }
.main-nav{ display:flex; gap:32px; }
.main-nav a{
  font-size:.92rem; font-weight:600; color:var(--ink);
  position:relative; padding:4px 0;
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--red); transition:width .25s ease;
}
.main-nav a:hover::after{ width:100%; }
.header-inner .btn-whatsapp{ color:#fff; }

/* ---------------- Diamond plate texture ---------------- */
.cta-plate{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 26px);
  opacity:.6;
  mask-image:linear-gradient(to bottom, transparent, black 30%, black 85%, transparent);
}

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  /* background:radial-gradient(120% 140% at 15% 0%, var(--charcoal-2), var(--charcoal) 60%); */
  background:
    radial-gradient(120% 140% at 15% 0%,
      rgba(106, 106, 106, 0.5),
      rgba(43, 42, 42, 0.7) 60%
    ),
    url("assets/indicadores-detalle.avif") center center / cover no-repeat;
  color:#fff;
  padding:150px 0 110px;
  overflow:hidden;
}
.hero-video {
  position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* Equivale a background-size: cover */
    z-index: 0;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45); /* Ajusta la opacidad */
    z-index: 1;
}
.hero-grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:60px;
  align-items:center;
  z-index:2;
}
.hero h1{ color:#fff; }
.hero-lead{
  color:#dde4df;
  max-width:46ch;
  font-size:1.08rem;
}
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-top:8px; }

.hero-visual{ position:relative; }
.hero-frame{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(160deg, #2A3436, #14181A);
  border:1px solid var(--steel-line);
  padding:18px;
}
.hero-img{ border-radius:12px; width:100%; }
.hero-caption{
  font-family:var(--f-mono);
  font-size:.72rem;
  color:#8A908C;
  letter-spacing:.02em;
  margin-top:14px;
  text-align:center;
}

/* LCD readout chip — elemento de firma reutilizado en toda la página */
.lcd-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--lcd-bg);
  color:var(--lcd-fg);
  border-radius:8px;
  padding:10px 16px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 2px 6px rgba(0,0,0,.15);
}
.lcd-dot{ width:8px; height:8px; border-radius:50%; background:var(--red); flex:none; }
.lcd-value{
  font-family:var(--f-mono);
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.lcd-label{
  font-family:var(--f-mono);
  font-size:.66rem;
  letter-spacing:.02em;
  color:#3c4038;
  border-left:1px solid rgba(0,0,0,.2);
  padding-left:10px;
}
.lcd-float{
  position:absolute;
  left:34px; bottom:34px;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.15);
}
.lcd-static{ box-shadow:none; }

/* ---------------- Section base ---------------- */
.section{ padding:110px 0; }
.section-head{ max-width:700px; margin-bottom:56px; }
.section-lead{ font-size:1.05rem; }

/* ---------------- Nosotros ---------------- */
.section-nosotros{ padding-bottom:0; }
.nosotros-grid{
  display:grid;
  grid-template-columns:1fr .85fr;
  gap:64px;
  align-items:center;
  margin-bottom:90px;
}
.nosotros-copy h2{ color:var(--ink); }
.nosotros-copy p{ font-size:1.02rem; max-width:52ch; }
.nosotros-copy strong{ color:var(--ink); }

.spec-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }

.nosotros-visual{ position:relative; width: 100%; aspect-ratio: 3 / 2;}

/* .nosotros-img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    border-radius:16px; /* o el mismo radio que tenía el panel */
    
.carousel{
    position:absolute;
    inset:0;
}

.carousel-img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    border-radius:16px;
    box-shadow:0 15px 40px rgba(0,0,0,.15);

    opacity:0;
    transition:opacity .9s ease;

    display:block;
}

.carousel-img.active{
    opacity:1;
}
.steel-panel{
  aspect-ratio:4/5;
  border-radius:20px;
  padding:3px;
  background:linear-gradient(160deg, var(--steel-line), var(--charcoal));
}
.steel-panel-inner{
  height:100%;
  border-radius:18px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 24px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 24px),
    linear-gradient(155deg, var(--charcoal-2), var(--charcoal));
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  padding:36px;
  color:#fff;
}
.steel-badge{
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  color:var(--red);
  margin-bottom:auto;
}
.steel-quote{
  font-family:var(--f-display);
  font-size:2rem;
  text-transform:uppercase;
  font-weight:800;
  line-height:1;
  color:#fff;
  margin-bottom:.4em;
}
.steel-sub{ color:#9DA39F; font-size:.85rem; margin:0; }

/* ---------------- Clients marquee ---------------- */
.clients{ background:var(--paper); padding:4px 0 4px; overflow:hidden; }
.clients-label{
  font-family:var(--f-mono);
  font-size:.8rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:24px;
}
.marquee{ width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.marquee-track{
  display:flex;
  align-items:center;
  gap:10px;
  width:max-content;
  animation:marquee 20s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-item{ flex:none; display:flex; align-items:center; height:185px; }
.marquee-item img{ height:100%; width:auto; object-fit:contain; opacity:.92; }
.marquee-text{
  font-family:var(--f-display);
  font-size:1.5rem;
  text-transform:uppercase;
  color:#5B6260;
  letter-spacing:.01em;
  white-space:nowrap;
}
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------------- Catalogo ---------------- */
.section-catalogo{ background:var(--paper); }
.catalog-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
}
.product-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.07);
  border-radius:16px;
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.product-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 36px -18px rgba(21,24,26,.25);
  border-color:rgba(0,0,0,.1);
}
/* .product-media{
  aspect-ratio:16/10;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 22px),
    linear-gradient(160deg, var(--charcoal-2), var(--charcoal));
  display:flex;
  align-items:center;
  justify-content:center;
} */
 .product-media{
  aspect-ratio:4/3;
  overflow: hidden;
  background:linear-gradient(160deg, var(--steel-100), var(--steel-300));
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.product-media img {
    width: 100%;
    height: 100%;
    
    object-fit: contain; /* o contain si no querés que recorte */
    display: block;
}
.product-media-fallback{ width:70%; }
.product-icon{
  width:56px; height:56px;
  color:#E9E5D8;
  stroke-width:1.4;
}
.product-body{ padding:20px 22px 24px; }
.product-body h3{ margin-bottom:.4em; }
/* .product-body p{ font-size:.9rem; margin-bottom:0; } */
.dim{
  font-family:var(--f-mono);
  font-size:.72rem;
  color:var(--red);
  text-transform:none;
  letter-spacing:.02em;
}
.product-specs{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:4px;
}
.product-specs li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:0.92rem;
  line-height:1.4;
  color:var(--steel-700);
}
.spec-check{
  flex:0 0 auto;
  width:18px; height:18px;
  border-radius:50%;
  background:var(--green-700);
  color:#fff;
  font-size:0.65rem;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:2px;
}
.product-cta{
  margin-top:auto;
  padding-top:10px;
  font-weight:600;
  font-size:0.9rem;
  color:var(--red-600);
  transition:gap .25s ease;
}
.product-cta:hover{ text-decoration:underline; }

/* ---------------- CTA final ---------------- */
.cta-final{
  position:relative;
  background:radial-gradient(120% 160% at 85% 100%, #23342A, var(--charcoal) 55%);
  color:#fff;
  padding:130px 0;
  text-align:center;
  overflow:hidden;
}
.cta-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.cta-final h2{ color:#fff; max-width:16ch; }
.cta-final .btn-large{ margin-top:18px; }

/* ---------------- Footer ---------------- */
.site-footer{ background:var(--charcoal); color:#B9BDBA; padding-top:64px; }
.footer-inner{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:40px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-logo-chip{
  /* background:#fff; */
  filter: brightness(0) invert(1);
  display:inline-block;
  padding:10px 16px;
  border-radius:10px;
  margin-bottom:16px;
}
.footer-logo-chip img{ height:60px; width:auto; }
.footer-brand p{ max-width:32ch; color:#8A908C; }
.footer-heading{
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#6E756F;
  margin-bottom:14px;
}
.footer-col a{ display:block; color:#B9BDBA; font-size:.92rem; margin-bottom:10px; transition:color .2s ease; }
.footer-col a:hover{ color:#fff; }
.footer-col p { color: #B9BDBA; font-size:.92rem; margin-bottom:10px; }
.footer-bottom{ padding:22px 28px; }
.footer-bottom p{ margin:0; font-size:.8rem; color:#5B6260; text-align:center; }

/* ---------------- Responsive ---------------- */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero{ padding:130px 0 80px; text-align:left; }
  .nosotros-grid{ grid-template-columns:1fr; }
  .nosotros-visual{ order:-1; max-width:440px; }
  .catalog-grid{ grid-template-columns:repeat(2, 1fr); }
  .footer-inner{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}

@media (max-width: 640px){
  .main-nav{ display:none; }
  .wrap{ padding: 0 20px; }
  .wrap.header-inner { padding: 10px;}
  .section{ padding:80px 0; }
  .catalog-grid{ grid-template-columns:1fr; }
  .hero-ctas{ flex-direction:column; align-items:stretch; }
  .hero-ctas .btn{ justify-content:center; }
  .lcd-float{ position:static; margin-top:16px; display:inline-flex; }
  .footer-inner{ grid-template-columns:1fr; }
}

/* @media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
} */