/* =========================================================
   PG METALÚRGICA — design tokens (extraídos de Figma)
   ========================================================= */
:root{
  /* Color */
  --navy-logo:   #001e7e;
  --navy-dark:   #0f1550;
  --blue-vivid:  #2f5fe0;
  --blue-tint:   #e8eaf6;
  --ochre:       #efa31d;
  --text-dark:   #1a1a2e;
  --text-gray:   #5a5f73;
  --bg-light:    #f4f5f9;
  --white:       #ffffff;

  /* Spacing */
  --pad-desktop: 80px;
  --pad-tablet:  48px;
  --pad-mobile:  24px;
  --header-height: 115px;

  /* Radius */
  --radius-md:   12px;
  --radius-pill: 999px;

  /* Type */
  --font: 'Poppins', sans-serif;
  --font-heading: 'Montserrat', sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--text-dark);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6{ font-family: var(--font-heading); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

/* Focus visibility (accesibilidad) */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--blue-vivid);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   Botones / tipografía reutilizable
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  cursor:pointer;
  font-family:var(--font);
  font-weight:600;
  font-size:15px;
  line-height:20px;
  letter-spacing:0.075px;
  border-radius:var(--radius-pill);
  padding:16px 32px;
  transition: background-color .15s ease, transform .15s ease;
}
.btn--primary{ background:var(--blue-vivid); color:var(--white); }
.btn--primary:hover{ background:#2650c0; }
.btn--sm{ padding:12px 24px; }

.eyebrow{
  font-weight:600;
  font-size:13px;
  line-height:18px;
  letter-spacing:0.195px;
  color:var(--ochre);
  margin:0;
}
.eyebrow--on-dark{ color:var(--ochre); }

.section-title{
  font-weight:700;
  font-size:40px;
  line-height:48px;
  letter-spacing:-0.2px;
  color:var(--navy-logo);
  margin:0;
}
.section-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
  margin:0 auto 48px;
}
.section-sub{
  font-weight:400;
  font-size:18px;
  line-height:28px;
  color:var(--text-gray);
  max-width:700px;
  margin:0;
}

.section{
  padding: 96px var(--pad-desktop);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.section--table{ padding:40px var(--pad-desktop); }
.section--table .section-head{ margin-bottom:16px; }
/* En secciones de tabla centradas, centrar también la tabla y su nota */
.section--table.section--head-center .table-wrap,
.section--table.section--head-center .table-note{ align-self:center; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  background:var(--white);
  position:sticky;
  top:0;
  z-index:100;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.header-inner{
  max-width:1440px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px var(--pad-desktop);
}
.logo-img{ height:75px; width:125px; object-fit:contain; }
.logo-link{ display:block; }

.main-nav{
  display:flex;
  align-items:center;
  gap:26px;
}
.nav-link{
  font-weight:500;
  font-size:15px;
  line-height:20px;
  letter-spacing:0.0375px;
  color:var(--text-dark);
  white-space:nowrap;
}
.nav-link:hover, .nav-link.is-active{ color:var(--blue-vivid); }

/* Dropdown de Productos */
.nav-dropdown{ position:relative; }
.nav-dropdown-toggle{
  background:none;
  border:none;
  font-family:var(--font);
  font-weight:500;
  font-size:15px;
  line-height:20px;
  letter-spacing:0.0375px;
  color:var(--text-dark);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:0;
}
.nav-dropdown-toggle .caret{ font-size:18px; line-height:1; margin-top:-2px; transition: transform .2s ease; }
.nav-dropdown.is-open > .nav-dropdown-toggle .caret{ transform: rotate(180deg); }
.dropdown-menu{
  position:absolute;
  top:calc(100% + 14px);
  left:50%;
  transform:translateX(-50%) translateY(-8px);
  width:270px;
  background:var(--white);
  border:1px solid var(--blue-tint);
  border-radius:var(--radius-md);
  box-shadow:0 12px 28px rgba(0,0,0,0.1);
  padding:8px;
  display:flex;
  flex-direction:column;
  opacity:0;
  visibility:hidden;
  transition: opacity .35s cubic-bezier(.25,.8,.35,1), transform .35s cubic-bezier(.25,.8,.35,1), visibility .35s ease;
  z-index:120;
}
.nav-dropdown.is-open > .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}
.dropdown-link{
  padding:11px 14px;
  border-radius:8px;
  font-weight:500;
  font-size:15px;
  line-height:21px;
  color:var(--text-dark);
  white-space:normal;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  background:none;
  border:none;
  font-family:var(--font);
  cursor:pointer;
  text-align:left;
}
.dropdown-link:hover{ background:var(--blue-tint); color:var(--blue-vivid); }

/* Sub-dropdown anidado (Silos / Plantas de extracción) dentro del menú de Productos */
.nav-dropdown--nested{ position:relative; width:100%; }
.nav-dropdown--nested::after{
  /* puente invisible que mantiene el hover activo al cruzar hacia el submenú flotante */
  content:"";
  position:absolute;
  top:0;
  left:100%;
  width:14px;
  height:100%;
}
.dropdown-link--parent{ align-items:flex-start; }
.dropdown-link--parent .caret--side{ font-size:16px; flex-shrink:0; margin-top:2px; color:var(--blue-vivid); transform:rotate(-90deg); transition:transform .2s ease; }
.nav-dropdown--nested.is-open > .dropdown-link--parent .caret--side{ color:var(--blue-vivid); }

.dropdown-menu--flyout{
  position:absolute;
  top:0;
  left:100%;
  margin-left:6px;
  width:230px;
  background:var(--white);
  border:1px solid var(--blue-tint);
  border-radius:var(--radius-md);
  box-shadow:0 12px 28px rgba(0,0,0,0.1);
  padding:8px;
  display:flex;
  flex-direction:column;
  opacity:0;
  visibility:hidden;
  transform:translateX(-6px);
  transition:opacity .35s cubic-bezier(.25,.8,.35,1), transform .35s cubic-bezier(.25,.8,.35,1), visibility .35s ease;
  z-index:130;
}
.nav-dropdown--nested.is-open > .dropdown-menu--flyout{
  opacity:1;
  visibility:visible;
  transform:translateX(0);
}
.dropdown-link--sub{ font-weight:400; }

/* Apertura por hover en escritorio (mismo comportamiento que JM Sitios):
   el menú se abre solo al pasar el mouse, sin necesidad de clic.
   El teclado también lo abre al navegar con Tab (:focus-visible). */
@media (min-width:1025px) and (hover:hover){
  /* Cerrado (o mientras se desvanece) el menú no capta el mouse:
     así no se "reabre" al pasar cerca, por ejemplo sobre "Proyectos Realizados" */
  .dropdown-menu{ pointer-events:none; }
  .nav-dropdown.is-open > .dropdown-menu{ pointer-events:auto; }

  /* puente invisible entre "Productos" y el menú, para bajar el mouse sin que se cierre.
     Solo ocupa el ancho del botón "Productos", no el del menú completo */
  .nav-dropdown:not(.nav-dropdown--nested) > .dropdown-menu::before{
    content:"";
    position:absolute;
    left:50%;
    width:120px;
    margin-left:-60px;
    top:-16px;
    height:16px;
  }
  .nav-dropdown:not(.nav-dropdown--nested):hover > .dropdown-menu,
  .nav-dropdown:not(.nav-dropdown--nested):has(:focus-visible) > .dropdown-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
  }
  .nav-dropdown:not(.nav-dropdown--nested):hover > .nav-dropdown-toggle{ color:var(--blue-vivid); }
  .nav-dropdown:not(.nav-dropdown--nested):hover > .nav-dropdown-toggle .caret,
  .nav-dropdown:not(.nav-dropdown--nested):has(:focus-visible) > .nav-dropdown-toggle .caret{ transform:rotate(180deg); }

  /* Silos / Plantas de extracción: el submenú lateral se abre al pasar el mouse */
  .nav-dropdown--nested:hover > .dropdown-menu--flyout,
  .nav-dropdown--nested:has(:focus-visible) > .dropdown-menu--flyout{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(0);
  }
  /* el ítem padre queda resaltado mientras su submenú está abierto */
  .nav-dropdown--nested:hover > .dropdown-link--parent{ background:var(--blue-tint); color:var(--blue-vivid); }
}

.menu-toggle{
  display:none;
  position:relative;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:32px;
  height:24px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
}
.menu-toggle span{
  display:block;
  height:3px;
  width:100%;
  background:var(--navy-logo);
  border-radius:2px;
  transition: transform .35s cubic-bezier(.25,.8,.35,1), opacity .25s ease, width .35s ease;
  transform-origin:center;
}
/* Transformación a X cuando el menú está abierto */
.menu-toggle.is-active span:nth-child(1){
  transform: translateY(9px) rotate(45deg);
}
.menu-toggle.is-active span:nth-child(2){
  opacity:0;
  width:0;
}
.menu-toggle.is-active span:nth-child(3){
  transform: translateY(-9px) rotate(-45deg);
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  height: calc(100vh - var(--header-height));
  min-height:560px;
  display:flex;
  align-items:center;
  padding-left: max(var(--pad-desktop), calc((100vw - 1440px) / 2 + var(--pad-desktop)));
  padding-right: max(var(--pad-desktop), calc((100vw - 1440px) / 2 + var(--pad-desktop)));
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,0.6), rgba(0,0,0,0.35));
}
.hero-overlay--dark{
  background:linear-gradient(90deg, rgba(0,0,0,0.72), rgba(0,0,0,0.5));
}
.hero-content{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:24px;
  max-width:600px;
}
.hero-content > *{
  opacity:0;
  transform: translateY(28px);
}
/* El fade-up del hero arranca recién cuando el preloader
   terminó (body.is-loaded), para que se vea el efecto en vez de
   jugarse tapado por el preloader. */
body.is-loaded .hero-content > *{
  animation: heroFadeUp .8s ease forwards;
}
.hero-content > *:nth-child(1){ animation-delay: .25s; }
.hero-content > *:nth-child(2){ animation-delay: .38s; }
.hero-body--full, .hero-body--short{ animation-delay: .51s; }
.hero-actions{ animation-delay: .64s; }

@keyframes heroFadeUp{
  from{ opacity:0; transform: translateY(28px); }
  to{ opacity:1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero-content > *{ opacity:1; transform:none; animation:none; }
}
.hero-tag{
  display:inline-flex;
  align-items:center;
  font-weight:600;
  font-size:13px;
  line-height:18px;
  letter-spacing:0.195px;
  color:var(--ochre);
}
.hero-title{
  font-weight:800;
  font-size:56px;
  line-height:64px;
  letter-spacing:-0.56px;
  color:var(--white);
  margin:0;
}
.hero-body{
  font-weight:400;
  font-size:18px;
  line-height:28px;
  color:var(--white);
  margin:0;
}
.hero-body--short{ display:none; }
@media (max-width:640px) and (max-height:800px){
  .hero-tag{ display:none; }
  .hero-body--full{ display:none; }
  .hero-body--short{ display:block; }
}
.hero-actions{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top:8px;
}
.btn--outline-light{
  background:none;
  border:1.5px solid rgba(255,255,255,0.7);
  color:var(--white);
}
.btn--outline-light:hover{ background:rgba(255,255,255,0.12); border-color:var(--white); }

/* =========================================================
   SOBRE NOSOTROS (texto grande a ancho completo,
   aparece línea por línea ligado al scroll)
   ========================================================= */
.about-intro{ padding-top:96px; padding-bottom:0; }
.about-intro-inner{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:24px;
}
.about-intro-eyebrow{ margin-bottom:4px; }
.about-intro-title{
  font-family: var(--font);
  font-weight:400;
  font-size:50px;
  line-height:62px;
  letter-spacing:-0.5px;
  color:var(--navy-logo);
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  mask-repeat:no-repeat;
  -webkit-mask-repeat:no-repeat;
  mask-size:100% 100%;
  -webkit-mask-size:100% 100%;
  will-change:mask-image;
}
.about-intro-title .reveal-line{ display:block; }

/* Ancho tope del bloque de texto: en pantallas con espacio de sobra queda
   fijo en 1150px (mismo cono siempre), pero SE ACHICA solo si el espacio
   real disponible (descontando el padding de la sección) es menor, así
   nunca se desborda del contenedor ni de la pantalla. */
.about-intro-title{ width:100%; max-width:1150px; margin:0 auto; }

/* =========================================================
   PRODUCTOS (grid de cards con foto + overlay)
   ========================================================= */
.products-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  width:100%;
  max-width:1280px;
  margin:0 auto;
}
.card{
  position:relative;
  display:block;
  border-radius:var(--radius-md);
  overflow:hidden;
  height:280px;
  text-decoration:none;
}
/* Bloque de texto + CTA que solo se muestra debajo de la card en móvil */
.product-info{ display:none; }
.card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:filter .3s ease, transform .3s ease;
  filter:brightness(0.82);
}
.card img[src*="proyecto-nueva-11"]{ object-position:center 65%; }
.card img[src*="silo-hormigon-nueva"]{ object-position:center 35%; }
.card img[src*="card-5-PR"]{ object-position:center 75%; }
.card img[src*="brillito2"]{ object-position:center 50%; }
.card img[src*="limpiadora-card-nueva"]{ object-position:center 50%; }
.card img[src*="card-silo-elevada-desktop"]{ object-position:center 55%; }
.card img[src*="noria-card"]{ object-position:center 10%; }
.img-limpiadora{ object-position:center 45%; }
@media (min-width:641px){
  .img-limpiadora{ object-position:center 55%; }
}
.card-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(0deg, rgba(0,10,40,0.75) 0%, rgba(0,10,40,0.05) 55%, rgba(0,10,40,0.25) 100%);
}
.card::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:20%;
  background:rgba(0,10,40,0.15);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
/* Efectos de hover de la card: solo en dispositivos con mouse real
   (desktop). Así se evita que el tap en móvil deje el "hover" pegado. */
@media (hover: hover) and (pointer: fine){
  .card:hover::after{ opacity:1; }
  .card:hover img{ filter:brightness(1.05); transform:scale(1.04); }
  .card:hover .card-title{ transform:translateY(-42px); }
  .card:hover .card-desc{ opacity:1; transform:translateY(0); }
}
.card .card-title{
  position:absolute;
  left:20px;
  bottom:18px;
  right:20px;
  z-index:1;
  font-weight:600;
  font-size:20px;
  line-height:26px;
  color:var(--white);
  margin:0;
  transition:transform .3s ease;
}
.card .card-desc{
  position:absolute;
  left:20px;
  right:20px;
  bottom:18px;
  z-index:1;
  font-weight:400;
  font-size:15px;
  line-height:18px;
  color:rgba(255,255,255,0.9);
  margin:0;
  max-height:36px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
/* =========================================================
   CONTADOR
   ========================================================= */
.counter{
  background:var(--navy-logo);
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:64px;
  padding:64px var(--pad-desktop);
  text-align:center;
}
.counter-stat{ flex:1; max-width:280px; display:flex; flex-direction:column; gap:8px; align-items:center; position:relative; }
.counter-stat + .counter-stat::before{ content:''; position:absolute; left:-32px; top:50%; transform:translateY(-50%); width:1px; height:56px; background:rgba(255,255,255,0.25); }
.counter-number{
  font-weight:800;
  font-size:48px;
  line-height:56px;
  letter-spacing:-0.24px;
  margin:0;
}
.counter-label{
  font-weight:400;
  font-size:16px;
  line-height:26px;
  margin:0;
}

/* =========================================================
   PROYECTOS REALIZADOS
   ========================================================= */
.section--projects{
  background:var(--bg-light);
  gap:40px;
}
.section--projects .section-head{ margin-bottom:0; }
.projects-marquee{
  width:100%;
  max-width:1280px;
  margin:0 auto 8px;
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y;
  -webkit-user-select:none;
  user-select:none;
}
.projects-marquee.is-dragging{ cursor:grabbing; }
.projects-marquee-track{
  display:flex;
  gap:16px;
  width:max-content;
  will-change:transform;
}
.project-img{
  flex:0 0 auto;
  width:320px;
  height:240px;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--bg-light);
}
.project-img img{ width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; pointer-events:auto; }
.projects-caption{
  max-width:720px;
  color:var(--text-gray);
  font-size:16px;
  line-height:26px;
}
.project-img img[src*="proyecto1.jpg"], .gallery-img img[src*="proyecto1.jpg"]{ object-position:center 65%; }
.project-img img[src*="proyecto-r5"], .gallery-img img[src*="proyecto-r5"]{ object-position:center 65%; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--navy-dark);
  color:var(--white);
  padding:72px var(--pad-desktop) 40px;
}
.footer-columns{
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:24px;
}
.footer-col{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.footer-col--logo{ min-width:0; }
.footer-logo{ height:90px; width:150px; object-fit:contain; }
.footer-address{
  font-size:16px;
  line-height:26px;
  margin:0;
}
.footer-heading{
  font-weight:600;
  font-size:13px;
  line-height:18px;
  letter-spacing:0.195px;
  margin:0;
}
.footer-col p{ margin:0; font-size:16px; line-height:26px; overflow-wrap:break-word; word-break:break-word; }
.footer-col a:hover{ text-decoration:underline; }
.social-icon{
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(255,255,255,0.1);
  display:flex; align-items:center; justify-content:center;
  font-weight:600;
  font-size:15px;
}
.footer-divider{
  border:none;
  border-top:1px solid rgba(255,255,255,0.12);
  max-width:1280px;
  margin:40px auto;
}
.footer-copy{
  font-size:14px;
  line-height:22px;
  margin:0;
}

/* =========================================================
   RESPONSIVE — TABLET (≤1024px, spec de Figma: 768px)
   ========================================================= */
@media (max-width: 1024px){
  :root{ --header-height: 104px; }
  .header-inner{ padding:16px var(--pad-mobile); }
  .about-intro-title{ font-size:40px; line-height:50px; }
  .main-nav{ display:none; }
  .menu-toggle{ display:flex; }
  .logo-img{ height:72px; width:120px; }

  .hero{ min-height:420px; padding-left:var(--pad-tablet); padding-right:var(--pad-tablet); }
  .hero-title{ font-size:44px; line-height:52px; }

  .section{ padding:96px var(--pad-tablet); }
  .products-grid{ grid-template-columns:repeat(2, 1fr); max-width:720px; }
  .projects-marquee{ max-width:720px; }
  .project-img{ width:260px; height:195px; }

  .counter{ padding:64px var(--pad-tablet); flex-wrap:wrap; gap:32px 64px; }

  .site-footer{ padding:64px var(--pad-tablet) 40px; }
  .footer-columns{ grid-template-columns:1fr 1fr 1fr; gap:32px 24px; }
  .footer-col--logo{ grid-column:1 / -1; }
}

/* Menú hamburguesa desplegable: tablet y móvil (≤1024px) */
@media (max-width: 1024px){
  .main-nav{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--white);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    box-shadow:0 8px 16px rgba(0,0,0,0.08);
  }
  .main-nav.is-open{ display:flex; }
  .main-nav .nav-link{
    width:100%;
    padding:16px var(--pad-mobile);
    border-bottom:1px solid var(--blue-tint);
  }
  /* Dropdown en móvil: se muestra en línea, expandido */
  .nav-dropdown{ width:100%; }
  .nav-dropdown-toggle{
    width:100%;
    justify-content:space-between;
    padding:16px var(--pad-mobile);
    border-bottom:1px solid var(--blue-tint);
  }
  .dropdown-menu{
    position:static;
    transform:none;
    opacity:1;
    visibility:visible;
    box-shadow:none;
    border:none;
    border-radius:0;
    width:100%;
    min-width:0;
    padding:0;
    max-height:0;
    overflow:hidden;
    transition:max-height .35s cubic-bezier(.25,.8,.35,1);
  }
  .nav-dropdown.is-open > .dropdown-menu{ max-height:600px; transform:none; }
  /* flecha de Silos / Plantas: hacia la derecha cerrado, hacia abajo abierto */
  .nav-dropdown--nested.is-open > .dropdown-link--parent .caret--side{ transform:rotate(0deg); }
  .dropdown-link{
    padding:14px var(--pad-mobile) 14px calc(var(--pad-mobile) + 16px);
    border-bottom:1px solid var(--blue-tint);
    border-radius:0;
    background:var(--bg-light);
    white-space:normal;
    align-items:flex-start;
    line-height:22px;
  }
  .dropdown-link--parent .caret--side{ margin-top:3px; }

  /* Nivel 2 (Silos / Plantas de extracción) anidado dentro del acordeón */
  .dropdown-menu--flyout{
    position:static;
    margin-left:0;
    transform:none;
    opacity:1;
    visibility:visible;
    box-shadow:none;
    border:none;
    min-width:0;
    padding:0;
    max-height:0;
    overflow:hidden;
    transition:max-height .35s cubic-bezier(.25,.8,.35,1);
  }
  .nav-dropdown--nested.is-open > .dropdown-menu--flyout{ max-height:300px; }
  .dropdown-link--sub{
    padding-left:calc(var(--pad-mobile) + 32px);
    background:var(--white);
  }
  .dropdown-link--parent{ background:var(--bg-light); }
}

/* =========================================================
   RESPONSIVE — MÓVIL (≤640px, spec de Figma: 390px)
   ========================================================= */
@media (max-width: 640px){
  .header-inner{ padding:16px var(--pad-mobile); }

  .about-intro-title{
    font-size:26px;
    line-height:33px;
  }


  .hero{
    height: auto;
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100svh - var(--header-height));
    padding:32px var(--pad-mobile) 56px;
  }
  .hero-content{ max-width:100%; gap:18px; }
  .hero-title{ font-size:34px; line-height:40px; }
  .hero-actions{ width:100%; flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  .hero-overlay--dark{ background:linear-gradient(90deg, rgba(0,0,0,0.6), rgba(0,0,0,0.35)); }

  /* Pantallas de poca altura (celulares horizontal, o con teclado/URL bar
     ocupando espacio): compactamos el hero en vez de dejarlo colapsar. */
  @media (max-height: 480px){
    .hero{ padding:24px var(--pad-mobile) 32px; }
    .hero-content{ gap:12px; }
    .hero-title{ font-size:28px; line-height:34px; }
    .hero-body{ font-size:16px; line-height:24px; }
    .hero-actions{ margin-top:4px; }
  }

  .section{ padding:80px var(--pad-mobile); }
  .about-intro{ padding-bottom:0; }
  .section--products{ padding-top:80px; }
  .section-title{ font-size:32px; line-height:38px; }
  .products-grid{ grid-template-columns:1fr; max-width:100%; gap:0; }
  .product-item{ margin-bottom:32px; }
  .product-item:last-child{ margin-bottom:0; }
  .card{
    height:auto;
    display:flex;
    flex-direction:column;
    overflow:visible;
  }
  .card img{
    position:static;
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:var(--radius-md);
    filter:brightness(1);
  }
  .card-overlay{ display:none; }
  /* En móvil la imagen de la card muestra el difuminado del hover de desktop, pero solo con el título (sin párrafo) */
  .card::after{ display:none; }
  .card .card-title{
    position:static;
    color:var(--navy-logo);
    padding:16px 4px 0;
    margin:0;
  }
  .card .card-desc{ display:none; }
  .product-info{
    display:block;
    padding:8px 4px 0;
  }
  .product-info-desc{
    margin:0 0 16px;
    font-size:15px;
    line-height:22px;
    color:var(--text-gray);
  }
  .product-info-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-family:var(--font);
    font-weight:600;
    font-size:15px;
    line-height:20px;
    letter-spacing:0.075px;
    color:var(--white);
    background:var(--blue-vivid);
    border:none;
    border-radius:var(--radius-pill);
    padding:14px 28px;
    transition:background-color .15s ease;
  }
  .product-info-cta::after{ content:'→'; }
  .product-info-cta:hover{ background:#2650c0; }
  .projects-marquee{ max-width:100%; }
  .projects-marquee-track{ gap:10px; }
  .project-img{ width:220px; height:165px; }

  .counter{ flex-direction:column; padding:48px var(--pad-mobile); gap:32px; }
  .counter-stat{ max-width:100%; }
  .counter-stat + .counter-stat::before{ position:static; transform:none; width:60px; height:1px; margin:0 0 24px; }

  .site-footer{ padding:48px var(--pad-mobile) 32px; }
  .footer-columns{ grid-template-columns:1fr 1fr; gap:32px 24px; }
  .footer-col--logo{ grid-column:1 / -1; }
}

/* Título "Sobre nosotros" (Inicio) — ajustes finos de tamaño en pantallas
   muy chicas, dentro del rango móvil (≤640px). */
@media (max-width: 475px){
  .about-intro-title{ font-size:22px; line-height:28px; }
}
@media (max-width: 400px){
  .about-intro-title{ font-size:20px; line-height:26px; }
}
@media (max-width: 370px){
  .about-intro-title{ font-size:18px; line-height:23px; }
}

/* =========================================================
   PÁGINAS INTERNAS — componentes reutilizables
   ========================================================= */

/* Hero de página interna (banda con imagen de fondo) */
.page-hero{
  position:relative;
  height:340px;
  max-height:340px;
  display:flex;
  align-items:center;
  padding:0 var(--pad-desktop);
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.page-hero-content{ position:relative; z-index:1; display:flex; flex-direction:column; gap:12px; }
.page-hero-title{
  font-weight:800;
  font-size:56px;
  line-height:64px;
  letter-spacing:-0.56px;
  color:var(--white);
  margin:0;
}

/* Título alineado a la izquierda (variante) */
.section-title--left{ text-align:left; }

/* Texto de cuerpo */
.body-text{
  font-weight:400;
  font-size:18px;
  line-height:28px;
  color:var(--text-gray);
  margin:0;
}

/* Sección 2 columnas (imagen + texto) */
.two-col{
  display:flex;
  gap:64px;
  align-items:center;
  padding:96px var(--pad-desktop);
  max-width:1440px;
  margin:0 auto;
}
.two-col--reverse{ flex-direction:row-reverse; }
.two-col-img{
  flex:0 0 560px;
  max-width:560px;
  border-radius:var(--radius-md);
  overflow:hidden;
}
.two-col-img img{ width:100%; height:460px; object-fit:cover; display:block; }
.two-col-text{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items:flex-start;
}

/* Valores (tarjetas con ícono) */
.section--values{ background:var(--white); }
.values-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  width:100%;
  max-width:1280px;
}
.value-card{
  background:var(--white);
  border-radius:var(--radius-md);
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-start;
}
.value-icon{ width:48px; height:48px; }
.value-title{
  font-weight:600;
  font-size:22px;
  line-height:30px;
  color:var(--navy-logo);
  margin:0;
}
.value-text{
  font-weight:400;
  font-size:16px;
  line-height:26px;
  color:var(--text-gray);
  margin:0;
}

/* Intro de producto (banda "El producto" con imagen) */
.product-intro{
  display:flex;
  gap:64px;
  align-items:center;
  padding:96px var(--pad-desktop);
  max-width:1440px;
  margin:0 auto;
}
.product-intro--reverse{ flex-direction:row-reverse; }
.product-intro-img{
  flex:0 0 480px;
  max-width:480px;
  border-radius:var(--radius-md);
  overflow:hidden;
}
.product-intro-img img{ width:100%; height:420px; object-fit:cover; display:block; }
.product-intro--full-image{ flex-direction:column; align-items:stretch; }
.product-intro-img--full{ flex-basis:auto; max-width:100%; width:100%; background:#eef0f2; }
.product-intro-img--full img{ width:100%; height:auto; object-fit:contain; display:block; }
.product-intro-img--tall{ flex-basis:420px; max-width:420px; background:#eef0f2; }
.product-intro-img--tall img{ height:600px; object-fit:contain; }
.product-intro-text{ flex:1; display:flex; flex-direction:column; gap:20px; align-items:flex-start; }

/* Grid de productos/equipos reutilizable (cards con imagen contenida) */
.equip-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  width:100%;
  max-width:1280px;
  margin:0 auto;
}
.equip-grid--3{ grid-template-columns:repeat(3, 1fr); }
.equip-card{
  background:var(--white);
  border-radius:var(--radius-md);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.equip-card-img{ height:180px; background:var(--white); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.equip-card-img img{ width:100%; height:100%; object-fit:contain; }
.equip-card-body{ padding:20px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.equip-card-title{ font-weight:600; font-size:18px; line-height:24px; color:var(--navy-logo); margin:0; }
.equip-card-text{ font-weight:400; font-size:15px; line-height:23px; color:var(--text-gray); margin:0; }

/* Pasos "del grano al aceite" y similares */
.steps-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  width:100%;
  max-width:1280px;
  margin:0 auto;
}
.step-card{
  background:var(--white);
  border-radius:var(--radius-md);
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.step-num{ font-weight:700; font-size:14px; color:var(--ochre); margin:0; letter-spacing:0.5px; }
.step-title{ font-weight:600; font-size:18px; line-height:24px; color:var(--navy-logo); margin:0; }
.step-text{ font-weight:400; font-size:15px; line-height:23px; color:var(--text-gray); margin:0; }

/* Bloque CTA (banda) */
.cta-band{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:56px var(--pad-desktop);
  max-width:1440px;
  margin:0 auto;
  width:100%;
}
.cta-band--tint{ background:var(--bg-light); }
.cta-band-text{ display:flex; flex-direction:column; gap:8px; }
.cta-band-title{ font-weight:700; font-size:28px; line-height:36px; color:var(--navy-logo); margin:0; }
.cta-band-sub{ font-weight:400; font-size:16px; line-height:26px; color:var(--text-gray); margin:0; }

/* ===== CTA Parallax (banda con imagen de fondo fija) ===== */
.cta-parallax-wrap{
  padding-top:0;
  padding-right:var(--pad-desktop);
  padding-bottom:64px;
  padding-left:var(--pad-desktop);
  display:flex;
  justify-content:center;
}
.cta-parallax{
  position:relative;
  width:100%;
  max-width:1105px;
  min-height:420px;
  border-radius:var(--radius-md);
  overflow:hidden;
  background-size:cover;
  background-position:center 20%;
  background-attachment:fixed;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cta-parallax-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,30,126,0.82), rgba(15,21,80,0.88));
}
.cta-parallax-overlay--dark{
  background:linear-gradient(180deg, rgba(0,0,0,0.72), rgba(0,0,0,0.6));
}
.cta-parallax-content{
  position:relative;
  z-index:1;
  max-width:640px;
  padding:64px 56px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:18px;
}
.eyebrow--light{ color:#8fa4ff; }
.cta-parallax-title{
  font-weight:800;
  font-size:40px;
  line-height:48px;
  letter-spacing:-0.4px;
  color:var(--white);
  margin:0;
}
.cta-parallax-sub{
  font-weight:400;
  font-size:18px;
  line-height:28px;
  color:rgba(255,255,255,0.9);
  margin:0;
}
.btn--lg{ padding:16px 32px; font-size:16px; margin-top:8px; }

/* Galería de proyectos */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
  width:100%;
  max-width:1280px;
  margin:0 auto;
}
.gallery-img{ border-radius:var(--radius-md); overflow:hidden; height:300px; background:var(--bg-light); }
.gallery-img.is-hidden{ display:none; }
.gallery-loadmore{ display:flex; justify-content:center; margin:32px auto 0; width:100%; max-width:1280px; }
.gallery-img img{ width:100%; height:100%; object-fit:cover; }

/* Sección componentes de silo (filas alternadas) */
.comp-row{
  display:flex;
  gap:64px;
  align-items:center;
  padding:40px var(--pad-desktop);
  max-width:1440px;
  margin:0 auto;
  width:100%;
}
.comp-row--reverse{ flex-direction:row-reverse; }
.comp-text{ flex:1; display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.comp-title{ font-weight:700; font-size:32px; line-height:40px; color:var(--navy-logo); margin:0; }
.comp-img{ flex:0 0 480px; max-width:480px; border-radius:var(--radius-md); overflow:hidden; height:420px; }
.comp-img img{ width:100%; height:100%; object-fit:cover; }

/* Contacto */
.contact-wrap{
  display:flex;
  gap:64px;
  padding:96px var(--pad-desktop);
  max-width:1440px;
  margin:0 auto;
  align-items:flex-start;
}
.contact-info{ flex:1; display:flex; flex-direction:column; gap:24px; }
.contact-block{ display:flex; flex-direction:column; gap:6px; }
.contact-block-head{ display:flex; align-items:center; gap:10px; }
.contact-block .eyebrow{ margin-bottom:2px; }
.contact-block a, .contact-block p{ font-size:17px; line-height:26px; color:var(--text-dark); margin:0; }
.contact-block a:hover{ color:var(--blue-vivid); }
.contact-side{ flex:0 0 440px; max-width:440px; background:var(--navy-logo); border-radius:var(--radius-md); padding:40px; color:var(--white); display:flex; flex-direction:column; gap:20px; }
.contact-side .contact-block a, .contact-side .contact-block p{ color:var(--white); }
.contact-side-title{ font-weight:700; font-size:24px; margin:0 0 8px; }

/* Tablas responsive */
.table-wrap{ width:100%; max-width:1280px; overflow-x:auto; margin:0 auto; }
.data-table{ border-collapse:collapse; width:100%; font-size:14px; }
.data-table th, .data-table td{ border:1px solid var(--blue-tint); padding:10px 12px; text-align:center; }
.data-table thead th{ background:var(--navy-logo); color:var(--white); font-weight:600; }
.data-table tbody tr:nth-child(even){ background:var(--bg-light); }

/* ===== responsive de páginas internas ===== */
@media (max-width: 1024px){
  .page-hero{ padding:0 var(--pad-tablet); height:300px; max-height:300px; }
  .page-hero-title{ font-size:44px; line-height:52px; }
  .two-col, .product-intro, .comp-row, .contact-wrap, .cta-band{ padding-left:var(--pad-tablet); padding-right:var(--pad-tablet); }
  .two-col, .product-intro{ flex-direction:column; }
  .two-col--reverse, .product-intro--reverse{ flex-direction:column; }
  .two-col-img, .product-intro-img{ flex-basis:auto; max-width:100%; width:100%; }
  .values-grid{ grid-template-columns:repeat(2,1fr); max-width:720px; }
  .equip-grid, .equip-grid--3{ grid-template-columns:repeat(2,1fr); max-width:720px; }
  .steps-grid{ grid-template-columns:repeat(2,1fr); max-width:720px; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); max-width:720px; }
  .comp-row{ flex-direction:column; }
  .comp-row--reverse{ flex-direction:column; }
  .comp-img{ flex-basis:auto; max-width:100%; width:100%; }
  .contact-wrap{ flex-direction:column; }
  .contact-side{ flex-basis:auto; max-width:100%; width:100%; }
}
@media (max-width: 640px){
  .page-hero{ padding:0 var(--pad-mobile); height:240px; max-height:240px; }
  .page-hero-title{ font-size:34px; line-height:40px; }
  .two-col, .product-intro, .comp-row, .contact-wrap{ padding:64px var(--pad-mobile); gap:32px; }
  .cta-band{ flex-direction:column; align-items:flex-start; padding:48px var(--pad-mobile); }
  .cta-parallax-wrap{ padding:80px var(--pad-mobile) 80px; }
  .cta-parallax{ background-attachment:scroll; min-height:0; }
  .cta-parallax-content{ padding:48px 28px; gap:14px; }
  .cta-parallax-sub{ display:none; }
  .two-col-img img, .product-intro-img img, .comp-img{ height:280px; }
  .product-intro-img:not(.product-intro-img--full) img[src*="planta-completa-intro"]{ transform:scale(1.9); transform-origin:50% 42%; }
  .product-intro-img--full img{ height:auto; }
  .product-intro-img--tall img{ height:420px; }
  .values-grid, .equip-grid, .equip-grid--3, .steps-grid{ grid-template-columns:1fr; max-width:100%; }
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); max-width:100%; gap:10px; }
  .gallery-img{ height:150px; }
  .section-title--left{ font-size:30px; line-height:38px; }
}

/* Mapa contacto */
.map-section{ width:100%; }
.map-section iframe{ display:block; width:100%; }
.contact-info-img img{ max-height:420px; object-fit:cover; }

/* Grid de características (tarjetas simples) */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  width:100%;
  max-width:1280px;
  margin:0 auto;
}
.feature-card{
  background:var(--white);
  border-radius:var(--radius-md);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.feature-title{ font-weight:600; font-size:20px; line-height:26px; color:var(--navy-logo); margin:0; }
.feature-text{ font-weight:400; font-size:15px; line-height:23px; color:var(--text-gray); margin:0; }

/* Variante con foto arriba del título (Estructuras metálicas) */
.feature-card-img{
  width:100%;
  height:140px;
  object-fit:cover;
  border-radius:var(--radius-md);
  background:var(--bg-light);
  margin-bottom:4px;
}
/* Placeholder para las cards sin foto real disponible todavía, para que
   el título quede a la misma altura que el resto de la fila */
.feature-grid--photo .feature-card:not(:has(.feature-card-img))::before{
  content:'';
  display:block;
  width:100%;
  height:140px;
  border-radius:var(--radius-md);
  background:var(--bg-light);
  margin-bottom:4px;
}

/* Sección con fondo claro y contenido alineado a la izquierda */
.section--left{ align-items:flex-start; }
.section--left .section-head{ align-items:flex-start; text-align:left; }
/* Centra solo el encabezado, manteniendo el contenido alineado a la izquierda */
.section--left.section--head-center .section-head{ align-items:center; text-align:center; align-self:center; }

/* Banda diferencial (fondo navy, 2 columnas) */
.band-dark{
  background:var(--navy-dark);
  color:var(--white);
  display:flex;
  justify-content:center;
  gap:64px;
  align-items:center;
  padding:96px var(--pad-desktop);
  width:100%;
}
.band-dark--reverse{ flex-direction:row-reverse; }
.band-dark-text{ flex:1; max-width:560px; display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
.band-dark-title{ font-weight:700; font-size:40px; line-height:48px; letter-spacing:-0.2px; color:var(--white); margin:0; }
.band-dark-body{ font-weight:400; font-size:18px; line-height:28px; color:rgba(255,255,255,0.8); margin:0; }
.band-dark-img{ flex:0 0 500px; max-width:500px; height:340px; border-radius:var(--radius-md); overflow:hidden; }
.band-dark-img img{ width:100%; height:100%; object-fit:cover; }

@media (max-width:1024px){
  .feature-grid{ grid-template-columns:repeat(2,1fr); max-width:720px; }
  .band-dark{ flex-direction:column; padding:80px var(--pad-tablet); }
  .band-dark--reverse{ flex-direction:column; }
  .band-dark-img{ flex-basis:auto; max-width:100%; width:100%; }
  .band-dark-text{ max-width:100%; }
}
@media (max-width:640px){
  .feature-grid{ grid-template-columns:1fr; max-width:100%; }
  .band-dark{ padding:64px var(--pad-mobile); gap:32px; }
  .band-dark-title{ font-size:30px; line-height:38px; }
}

/* Nota de tabla */
.table-note{ font-weight:400; font-size:14px; line-height:22px; color:var(--text-gray); margin:16px 0 0; max-width:1280px; align-self:flex-start; }
.table-note--top{ margin:0 0 16px; }

/* Collage de 2 imágenes superpuestas (componentes) */
.comp-collage{ position:relative; flex:0 0 480px; max-width:480px; height:420px; }
.comp-collage .c-back,
.comp-collage .c-front{
  position:absolute;
  width:340px; height:300px;
  border-radius:var(--radius-md);
  overflow:hidden;
}
.comp-collage .c-back img,
.comp-collage .c-front img{ width:100%; height:100%; object-fit:cover; }
.comp-collage .c-back img[src*="elevada-cono-back"]{ object-position:center 78%; }
/* variante A: back arriba-izq, front abajo-der */
.comp-collage.collage-a .c-back{ left:0; top:0; }
.comp-collage.collage-a .c-front{ left:140px; top:120px; border:6px solid var(--white); }
/* variante B: back arriba-der, front abajo-izq */
.comp-collage.collage-b .c-back{ left:140px; top:0; }
.comp-collage.collage-b .c-front{ left:0; top:120px; border:6px solid var(--white); }

.comp-header{ text-align:center; padding-bottom:16px; }
.comp-header .section-title{ text-align:center; }
.comp-section{ padding:64px 0; max-width:1440px; margin:0 auto; width:100%; }

@media (max-width:1024px){
  .comp-collage{ flex-basis:auto; max-width:100%; width:100%; height:auto; display:flex; justify-content:center; margin-top:40px; }
  .comp-collage .c-back{ position:relative; left:0!important; top:0!important; width:70%; height:auto; aspect-ratio:340/300; }
  .comp-collage .c-front{ display:none; }
}
@media (max-width:640px){
  .comp-collage .c-back{ width:100%; }
}

/* CTA band con imagen (2 columnas) */
.cta-img-band{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:64px;
  padding:64px var(--pad-desktop);
  width:100%;
}
.cta-img-band--tint{ background:var(--bg-light); }
.cta-img-band-text{ flex:1; display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.cta-img-band-img{ flex:0 0 360px; max-width:360px; height:240px; border-radius:var(--radius-md); overflow:hidden; }
.cta-img-band-img img{ width:100%; height:100%; object-fit:cover; }
.cta-band-title-lg{ font-weight:700; font-size:36px; line-height:44px; color:var(--navy-logo); margin:0; }

@media (max-width:1024px){
  .cta-img-band{ flex-direction:column; align-items:flex-start; padding:64px var(--pad-tablet); }
  .cta-img-band-img{ flex-basis:auto; max-width:100%; width:100%; }
}
@media (max-width:640px){
  .cta-img-band{ padding:48px var(--pad-mobile); gap:32px; }
  .cta-band-title-lg{ font-size:28px; line-height:36px; }
}

/* =========================================================
   LIGHTBOX (galerías de Proyectos)
   ========================================================= */

/* Hover: capa blanca sutil + cursor de zoom en las miniaturas
   (solo en dispositivos con mouse real — en táctiles el :hover
   puede quedar "pegado" después de tocar y se ve la miniatura rara) */
.lb-trigger{ position:relative; cursor:pointer; overflow:hidden; }
.lb-trigger::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(255,255,255,0);
  pointer-events:none;
}
.lb-trigger img{ transition: transform .35s ease; }

@media (hover: hover) and (pointer: fine){
  .lb-trigger::after{ transition: background-color .25s ease; }
  .lb-trigger:hover::after,
  .lb-trigger:focus-visible::after{
    background:rgba(255,255,255,0.18);
  }
  .lb-trigger:hover img{ transform:scale(1.04); }
}

.lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
body.lb-open{ overflow:hidden; }

.lightbox-backdrop{
  position:absolute; inset:0;
  background:rgba(10,12,25,0.92);
}
.lightbox-stage{
  position:relative;
  z-index:1;
  max-width:min(1100px, 88vw);
  max-height:82vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox-img{
  max-width:100%;
  max-height:82vh;
  border-radius:8px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  opacity:1;
  transform:scale(1);
  transition: opacity .35s ease, transform .35s ease;
}
.lightbox-img.is-swapping{
  opacity:0;
  transform:scale(0.97);
}
.lightbox-spinner{
  position:absolute;
  top:50%; left:50%;
  width:44px; height:44px;
  margin:-22px 0 0 -22px;
  border:3px solid rgba(255,255,255,0.25);
  border-top-color:#fff;
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  z-index:0;
  animation:lb-spin 0.8s linear infinite;
  transition:opacity .2s ease;
}
.lightbox.is-loading .lightbox-spinner{ opacity:1; }
@keyframes lb-spin{ to{ transform:rotate(360deg); } }

.lightbox-close{
  position:absolute;
  top:24px; right:24px;
  z-index:2;
  width:44px; height:44px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.1);
  color:var(--white);
  font-size:26px;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background-color .15s ease;
}
.lightbox-close:hover{ background:rgba(255,255,255,0.22); }

.lightbox-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:52px; height:52px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.1);
  color:var(--white);
  font-size:30px;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background-color .15s ease;
}
.lightbox-arrow:hover{ background:rgba(255,255,255,0.22); }
.lightbox-arrow--prev{ left:24px; }
.lightbox-arrow--next{ right:24px; }

.lightbox-counter{
  position:absolute;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  color:rgba(255,255,255,0.75);
  font-size:14px;
  font-weight:500;
  margin:0;
}

@media (max-width:640px){
  .lightbox-arrow{ width:44px; height:44px; font-size:24px; }
  .lightbox-arrow--prev{ left:10px; }
  .lightbox-arrow--next{ right:10px; }
  .lightbox-close{ top:14px; right:14px; }
}

/* Íconos de datos de contacto */
.contact-icon{ width:22px; height:22px; color:rgba(255,255,255,0.85); flex-shrink:0; }

/* Ícono de Instagram en footer */
.social-icon svg{ width:22px; height:22px; }
.social-icon{ transition: background-color .15s ease, transform .15s ease; }
.social-icon:hover{ background:rgba(255,255,255,0.2); transform:translateY(-2px); }

/* Fade-up del título en heroes de páginas internas (no-slider) */
.page-hero-content > *{
  opacity:0;
  transform: translateY(28px);
}
/* Arranca recién cuando el preloader terminó (body.is-loaded) */
body.is-loaded .page-hero-content > *{
  animation: heroFadeUp .8s ease forwards;
}
.page-hero-content > *:nth-child(1){ animation-delay:.15s; }
.page-hero-content > *:nth-child(2){ animation-delay:.28s; }
@media (prefers-reduced-motion: reduce){
  .page-hero-content > *{ opacity:1; transform:none; animation:none; }
}

/* =========================================================
   PÁGINA 404
   ========================================================= */
.error-page{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:16px;
  padding:120px var(--pad-desktop) 100px;
  max-width:720px;
  margin:0 auto;
}
.error-code{
  font-weight:800;
  font-size:120px;
  line-height:1;
  color:#001E7E;
  margin:0;
  letter-spacing:-4px;
}
.error-title{
  font-weight:700;
  font-size:32px;
  line-height:40px;
  color:var(--navy-logo);
  margin:0;
}
.error-text{
  font-weight:400;
  font-size:17px;
  line-height:27px;
  color:var(--text-gray);
  margin:0;
  max-width:480px;
}
.error-actions{
  display:flex;
  gap:16px;
  margin-top:8px;
  flex-wrap:wrap;
  justify-content:center;
}
.btn--outline{
  background:none;
  border:1.5px solid var(--blue-vivid);
  color:var(--blue-vivid);
}
.btn--outline:hover{ background:var(--blue-tint); }
.error-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  justify-content:center;
  margin-top:40px;
  padding-top:32px;
  border-top:1px solid var(--blue-tint);
  width:100%;
}
.error-links a{
  font-size:14px;
  font-weight:500;
  color:var(--text-gray);
}
.error-links a:hover{ color:var(--blue-vivid); }

@media (max-width:640px){
  .error-page{ padding:80px var(--pad-mobile) 64px; }
  .error-code{ font-size:80px; }
  .error-title{ font-size:26px; line-height:34px; }
}

/* =========================================================
   PÁGINAS LEGALES (Política de Privacidad)
   ========================================================= */
.legal-page{
  display:flex;
  justify-content:center;
  padding:80px var(--pad-desktop) 100px;
}
.legal-content{
  max-width:760px;
  width:100%;
}
.legal-updated{
  font-size:14px;
  color:var(--text-gray);
  margin:0 0 32px;
  font-style:italic;
}
.legal-content h2{
  font-weight:700;
  font-size:24px;
  line-height:32px;
  color:var(--navy-logo);
  margin:40px 0 12px;
}
.legal-content h2:first-of-type{ margin-top:0; }
.legal-content p{
  font-weight:400;
  font-size:16px;
  line-height:27px;
  color:var(--text-gray);
  margin:0 0 16px;
}
.legal-content ul{
  margin:0 0 16px;
  padding-left:22px;
}
.legal-content li{
  font-size:16px;
  line-height:27px;
  color:var(--text-gray);
  margin-bottom:8px;
  list-style:disc;
}
.legal-content a{ color:var(--blue-vivid); text-decoration:underline; }
.legal-content a:hover{ color:var(--navy-logo); }
.legal-content strong{ color:var(--text-dark); font-weight:600; }

@media (max-width:1024px){
  .legal-page{ padding:64px var(--pad-tablet) 80px; }
}
@media (max-width:640px){
  .legal-page{ padding:48px var(--pad-mobile) 64px; }
  .legal-content h2{ font-size:21px; line-height:28px; margin-top:32px; }
}

/* Footer bottom row (copyright + link legal) */
.footer-bottom{
  max-width:1280px;
  margin:0 auto;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.footer-legal-link{
  font-size:14px;
  color:rgba(255,255,255,0.75);
  text-decoration:underline;
}
.footer-legal-link:hover{ color:var(--white); }
.footer-bottom-links{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}
.footer-credit{
  font-size:14px;
  color:rgba(255,255,255,0.75);
}

/* =========================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ========================================================= */
.wa-float{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:200;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
  color:var(--white);
  transition: transform .2s ease, box-shadow .2s ease;
}
/* Aparece con un "pop" recién cuando el preloader terminó */
body.is-loaded .wa-float{
  animation: waPop .4s cubic-bezier(.34,1.56,.64,1) both;
}
.wa-float svg{ width:30px; height:30px; }
.wa-float:hover{
  transform: translateY(-3px) scale(1.05);
  box-shadow:0 12px 28px rgba(0,0,0,0.3);
}
@keyframes waPop{
  from{ opacity:0; transform:scale(.4); }
  to{ opacity:1; transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .wa-float{ animation:none; }
}
@media (max-width:640px){
  .wa-float{ right:16px; bottom:16px; width:56px; height:56px; }
  .wa-float svg{ width:30px; height:30px; }
}

/* Tabla densa (matriz de capacidades y dimensiones, muchas filas/columnas) */
.data-table--dense{ font-size:11px; }
.data-table--dense th, .data-table--dense td{ padding:4px 7px; white-space:nowrap; line-height:1.25; }
.data-table--dense thead th{ line-height:1.15; padding-top:6px; padding-bottom:6px; }
.data-table--dense thead th:first-child,
.data-table--dense tbody td:first-child{ position:sticky; left:0; background:var(--navy-logo); z-index:1; }
.data-table--dense tbody td:first-child{ background:var(--white); font-weight:600; }
.data-table--dense tbody tr:nth-child(even) td:first-child{ background:var(--bg-light); }

/* =========================================================
   MECANIZACIONES — bloques editoriales estilo folleto
   ========================================================= */
.mec-blocks{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
}
.mec-block{
  display:flex;
  gap:48px;
  align-items:center;
  padding:36px 0;
  border-bottom:1px solid var(--blue-tint);
}
.mec-block:last-child{ border-bottom:none; }
.mec-block--reverse{ flex-direction:row-reverse; }

/* Par de bloques apilados (imagen arriba, texto abajo) lado a lado:
   para Aireaciones + Prelimpieza, que tienen una sola imagen cada una */
.mec-cons-pair{
  width:100%;
  max-width:1280px;
  margin:0 auto 8px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:48px;
}
.mec-block--stacked{
  flex-direction:column;
  align-items:stretch;
  gap:20px;
  padding:0;
  border-bottom:none;
}
.mec-block--stacked .mec-block-images{
  flex:0 0 auto;
  width:100%;
  height:350px;
}
.mec-block--stacked .mec-block-text{
  flex:0 0 auto;
}
@media (max-width:640px){
  .mec-cons-pair{ grid-template-columns:1fr; gap:32px; }
  /* Aireaciones y Prelimpieza: en móvil, título y párrafo arriba de la imagen */
  .mec-block--stacked .mec-block-text{ order:-1; }
}

.mec-block-text{
  flex:0 0 38%;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
}
.mec-block-title{
  font-weight:700;
  font-size:24px;
  line-height:30px;
  color:var(--navy-logo);
  margin:0;
}
.mec-block-images{
  flex:1;
  min-width:0;
  display:flex;
  gap:14px;
  height:240px;
}
.mec-block-images picture{ display:contents; }
.mec-block-images source{ display:none; }
/* Esquemas ilustrados: se muestran completos, sin recorte */
.mec-block-images--diagram img{ object-fit:contain; background:#f4f5f9; }
/* Bloque con una sola foto (ej. Equipos de aspiración): se muestra entera, en formato 3:2 */
.mec-block-images.mec-block-images--single{ height:auto; }
/* Grilla 2x2 con fotos de obra: cada foto llena su celda (Ventiladores centrífugos) */
.mec-block-images--quad.mec-block-images--fill img{ object-fit:cover; }
.mec-block-images.mec-block-images--single img{ height:auto; aspect-ratio:3 / 2; }
@media (min-width:1025px){
  .mec-block-images.mec-block-images--single{ flex:0 1 560px; margin-left:auto; }
  .mec-block--reverse .mec-block-images.mec-block-images--single{ margin-left:0; margin-right:auto; }
}
/* Imágenes que se ocultan en móvil (ej. segunda foto de Tolvas de almacenaje) */
@media (max-width:640px){
  .mec-block-images .hide-mobile{ display:none; }
}
.mec-block-images img{
  flex:1;
  min-width:0;
  height:100%;
  object-fit:cover;
  border-radius:var(--radius-md);
  background:var(--bg-light);
}

/* Variante 2x2: cuatro imágenes en grilla en vez de una sola fila */
.mec-block-images--quad{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-template-rows:repeat(2, minmax(0, 1fr));
  height:360px;
  gap:10px;
}

/* En desktop, más espacio para el texto: las imágenes quedan más chicas
   y contenidas dentro de su celda (nunca se recortan) */
@media (min-width:1025px){
  .mec-block:has(.mec-block-images--quad){ gap:32px; }
  .mec-block:has(.mec-block-images--quad) .mec-block-text{ flex:0 0 40%; }
}

/* Variante stack: 2 imágenes cuadradas arriba en fila, 1 rectangular abajo
   que ocupa el mismo ancho que las dos de arriba juntas (Sinfines extractores) */
.mec-block-images--stack{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  height:auto;
  gap:10px;
}
.mec-block-images--stack img{
  width:100%;
  min-width:0;
  min-height:0;
  height:auto;
  object-fit:contain;
  background:var(--bg-light);
}
.mec-block-images--stack img:nth-child(1),
.mec-block-images--stack img:nth-child(2){
  aspect-ratio:1/1;
}
.mec-block-images--stack img:nth-child(3){
  grid-column:1 / -1;
  aspect-ratio:2.4/1;
}
.mec-block-images--quad img{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  object-fit:contain;
  background:var(--bg-light);
}

@media (max-width:1024px){
  .mec-block{ flex-direction:column; align-items:stretch; gap:20px; padding:28px 0; }
  .mec-block--reverse{ flex-direction:column; }
  .mec-block-text{ flex-basis:auto; }
  .mec-block-images{ height:220px; }
  .mec-block-images--quad{ height:340px; }
  .mec-block-images--stack{ height:auto; }
}
@media (max-width:640px){
  .mec-block-images{ flex-direction:column; height:auto; }
  .mec-block-images img{ height:220px; }
  .mec-block-images--quad{ grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:repeat(2, minmax(0, 1fr)); height:300px; }
  .mec-block-images--quad img{ height:100%; }
  .mec-block-images--stack{ grid-template-columns:1fr; height:auto; }
  .mec-block-images--stack img{ height:auto; }
  .mec-block-images--stack img:nth-child(3){ grid-column:1; }
  .mec-block-title{ font-size:21px; line-height:27px; }
}

/* Mini-grid de Acondicionamiento y Conservación */
.mec-row-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
  width:100%;
  max-width:1280px;
  margin:0 auto;
}
.mec-row-card{
  display:flex;
  align-items:center;
  gap:20px;
  background:var(--white);
  border-radius:var(--radius-md);
  padding:20px;
}
.mec-row-card-text{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.mec-row-card-text .mec-block-title{ font-size:19px; line-height:25px; }
.mec-row-card-text .body-text{ font-size:14px; line-height:20px; }
.mec-row-card-images{
  flex:0 0 38%;
  display:flex;
  gap:8px;
  height:160px;
}
.mec-row-card-images img{
  flex:1;
  min-width:0;
  height:100%;
  object-fit:contain;
  background:var(--bg-light);
  border-radius:var(--radius-md);
}

/* Modificador: la card ocupa la fila completa del grid en vez de una
   mitad, para que las imágenes tengan mucho más espacio (Aspiración,
   Ventiladores centrífugos) */
.mec-row-card--full{
  grid-column:1 / -1;
}
.mec-row-card--reverse{
  flex-direction:row-reverse;
}
.mec-row-card--full .mec-row-card-text{
  flex:0 0 320px;
  max-width:320px;
}
.mec-row-card--full .mec-row-card-images{
  flex:1 1 auto;
  height:280px;
}

@media (max-width:1024px){
  .mec-row-grid{ grid-template-columns:1fr; max-width:720px; }
}
@media (max-width:640px){
  .mec-row-grid{ max-width:100%; }
  .mec-row-card{ flex-direction:column; align-items:stretch; }
  .mec-row-card-images{ flex:0 0 auto; height:180px; }
  .mec-row-card--full .mec-row-card-text{ flex:0 0 auto; max-width:100%; }
  .mec-row-card--full .mec-row-card-images{ height:220px; }
}

/* =========================================================
   PRELOADER — logo animado mientras cargan las imágenes
   ========================================================= */
.preloader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease, visibility .45s ease;
}
.preloader.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader-logo-wrap{
  position: relative;
  width: 150px;
  max-width: 50vw;
}
.preloader-logo{
  display: block;
  width: 100%;
  height: auto;
}
.preloader-logo--base{
  position: relative;
}
.preloader-logo--fill{
  position: absolute;
  inset: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path .35s ease-out;
}
@media (prefers-reduced-motion: reduce){
  .preloader-logo--fill{
    transition: none;
  }
}

/* Proceso de limpieza (Limpiadoras) — 2 columnas desktop, apilado en móvil */
.clean-process-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
  width:100%;
  max-width:1280px;
  margin:0 auto;
}
@media (max-width:640px){
  .clean-process-grid{ grid-template-columns:1fr; }
}

/* Que el botón flotante de WhatsApp no tape el crédito en celulares */
@media (max-width: 768px){
  .footer-bottom{ padding-bottom:64px; }
}

/* Redes en la tarjeta de Contacto */
.contact-social{ margin-top:4px; }