/* ===== Variables mínimas usadas ===== */
:root{
  --text:#111;
  --ml-white:#fff;
  --accent:#2a85ff;
  --hdr:86px;
  --texto:#1f2937;
  --celeste:#00A9D6;         /* celeste del título SISTEMAS */
  --celeste-bar:#00B5E2;
  --bs-body-font-family: "Futura", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --hero-left: clamp(24px, 6vw, 110px);
}

/* ===== Reset, layout y estilos existentes ===== */
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; overflow-x: hidden; }
body{ font-family:"Futura",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text); background:#fff; }
.container{ width:min(1200px,92vw); margin-inline:auto; }

/* ===== TOPBAR ===== */
.ml-topbar{ position:relative; top:0; left:0; right:0; height:var(--hdr); z-index:100; background:transparent; }
.ml-topbar__inner{ max-width:1280px; height:100%; margin-inline:auto; padding-left:clamp(10px,1.6vw,20px); padding-right:clamp(28px,8vw,120px); display:flex; align-items:center; gap:24px; color:var(--ml-white); }
.ml-brand{ display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center; }
.ml-logo__img{ height:42px; width:auto; display:block; margin-top:15px; }
.ml-logo__img.to-white{ filter:brightness(0) invert(1) contrast(110%); }
.ml-tagline{ margin:0; font-size:11px; line-height:1.1; letter-spacing:.12em; text-transform:uppercase; color:var(--ml-white); opacity:.95; white-space:nowrap; word-break:keep-all; margin-left: 25px;}

.ml-menu{
  margin-left:135px;
  display:flex; gap:clamp(18px,2.4vw,20px);
  white-space:nowrap; min-width:0; position:relative;
  align-items:center;
  
}
.ml-menu a{
  color:var(--ml-white);
  text-decoration:none;
  text-transform:uppercase;
  font-size:clamp(12.5px,.9vw,14px);
  letter-spacing:.08em;
  padding:6px 8px;
  border-radius:6px;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
  position:relative; z-index:1;
}
.ml-menu a.is-active{ font-weight:700; }

/* ===== EFECTO: recuadro blanco detrás de TODOS los ítems ===== */
.ml-menu a::after,
.ml-menu .dd-toggle::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:calc(100% + 22px);       /* ancho = palabra + colchón */
  height:36px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 8px 22px rgba(0,0,0,.30);
  opacity:0;
  transition:
    opacity .15s ease,
    height .22s ease,
    width .22s ease,
    top .22s ease,
    transform .22s ease;
  z-index:-1; /* detrás del texto */
}

.ml-menu a:hover::after,
.ml-menu a:focus-visible::after,
.ml-menu .ml-sys:hover .dd-toggle::after,
.ml-menu .ml-sys.is-open .dd-toggle::after{
  opacity:1; /* aparece el recuadro blanco */
}

/* ===== Hovers de texto del menú (color celeste) ===== */
.ml-topbar .ml-menu a:hover,
.ml-topbar .ml-menu a:focus-visible,
.ml-topbar .ml-menu .dd-toggle:hover,
.ml-topbar .ml-menu .dd-toggle:focus-visible{
  color:var(--celeste);
  background-color:transparent;
  text-shadow:none;
}

/* =========================================================
   SISTEMAS: tarjeta alineada al ítem, texto estable, sin duplicado
   ========================================================= */
.ml-item.ml-sys{ position:relative; display:inline-flex; align-items:center; }

/* 1) El texto del botón mantiene tamaño SIEMPRE */
.ml-menu .dd-toggle{
  font-size:14px;     /* tamaño fijo (igual al resto) */
  font-weight:400;
  line-height:1;
}

/* 2) Cuando la tarjeta está visible, ocultamos el texto detrás */
.ml-menu .ml-sys:hover .dd-toggle,
.ml-menu .ml-sys.is-open .dd-toggle{
  color:transparent;
  text-shadow:none;
}

/* 3) El recuadro se expande hacia abajo manteniendo mismo ancho */
.ml-item.ml-sys:hover .dd-toggle::after,
.ml-item.ml-sys.is-open .dd-toggle::after{
  width:calc(100% + 22px);
  height:148px;              /* alto compacto; ajusta si hace falta */
  top:0;
  transform:translateX(-50%);/* crece SOLO hacia abajo */
  border-radius:14px;
}

/* 4) Contenido de la tarjeta (logos) */
.nav-popup{
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:calc(100% + 22px);   /* mismo ancho que el recuadro */
  height:148px;
  padding:12px 10px 8px;
  display:none;              /* visible solo en hover / JS */
  z-index:3;
  pointer-events:auto;
}
.ml-item.ml-sys:hover .nav-popup,
.ml-item.ml-sys.is-open .nav-popup{ display:block; }

/* Título azul dentro de la tarjeta */
.popup-title{
  font-size:11px;
  letter-spacing:.14em;
  color:var(--celeste);
  text-transform:uppercase;
  text-align:center;
  margin-bottom:12px;
}

/* Logos (botones) */
.popup-logo{
  display:block;
  text-decoration:none;
  padding:2px 0;
  border-radius:6px;
}
.popup-logo:focus-visible{ outline:2px solid var(--celeste); outline-offset:2px; }

.popup-logo img{
  display:block;
  width:100%;
  height:auto;
  margin:4px 0 8px 0;
  object-fit:contain;
}
.popup-logo:last-of-type img{ margin-bottom:2px; }

/* =========================================================
   ALUMINIO: igual comportamiento que SISTEMAS
   ========================================================= */
.ml-item.ml-alum {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Texto del botón */
.ml-menu .ml-alum .dd-toggle {
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}

/* Ocultar texto cuando aparece la tarjeta */
.ml-menu .ml-alum:hover .dd-toggle,
.ml-menu .ml-alum.is-open .dd-toggle {
  color: transparent;
  text-shadow: none;
}

/* Recuadro desplegable */
.ml-item.ml-alum:hover .dd-toggle::after,
.ml-item.ml-alum.is-open .dd-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%);
  width: calc(100% + 22px);
  height: 148px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .30);
  opacity: 1;
  z-index: -1;
}

/* Contenedor de la tarjeta */
.ml-item.ml-alum .nav-popup {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% + 22px);
  height: 148px;
  padding: 12px 10px 8px;
  display: none;
  z-index: 3;
  pointer-events: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .30);
}

.ml-item.ml-alum:hover .nav-popup,
.ml-item.ml-alum.is-open .nav-popup {
  display: block;
}

/* Título azul del bloque */
.ml-item.ml-alum .popup-title {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--celeste);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 12px;
}

/* Botones de CAÑOS / ZÓCALOS / GUÍAS */
.ml-item.ml-alum .popup-logo {
  display: block;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: #111;
  padding: 6px 0;
  border-radius: 6px;
  transition: background .2s, color .2s;
}



/* ===== Responsivo ===== */
@media (max-width:960px){
  .ml-topbar__inner{ flex-direction:column; align-items:flex-start; gap:10px; }
  .ml-menu{ flex-wrap:wrap; }
}

/* ===== HERO ===== */
.hero{
  position:relative; min-height:100vh; display:grid; grid-template-rows:1fr auto;
  --hero-x:78%; --hero-y:22%;
  background:url('../img/insumoSuperior.png') var(--hero-x) var(--hero-y)/cover no-repeat;
   margin-top: -86px; /* igual a var(--hdr) */
}
.hero-overlay{
  position:absolute; left:0; right:0; top:0; height:100px;
  background:linear-gradient(to bottom, rgba(0,0,0,.62) 0%, rgba(0,0,0,.38) 60%, rgba(0,0,0,0) 100%);
  pointer-events:none; z-index:1;
}
.hero-content{ position:relative; z-index:2; display:grid; align-content:center; min-height:calc(100vh - var(--hdr)); padding-top:calc(var(--hdr) + 10px); }
.hero-title{
  color:#111; 
  max-width:780px; 
  font-size:clamp(28px,4.2vw,52px); 
  line-height:1.1; font-weight:700;
  text-shadow:0 1px 0 rgba(255,255,255,.5); 
  font-weight: 400 
}
.hero-title .accent{ color:var(--accent); font-weight: 700;}


/* ===== VALUES ===== */
.values{ background:#fff; }
.values-topband{ --band-h:110px; --band-speed:28s; overflow:hidden; background:#fff; box-shadow:0 8px 18px rgba(0,0,0,.08); }
.values-topband .band-track{ display:flex; width:max-content; will-change:transform; animation:band-scroll var(--band-speed) linear infinite; }
.values-topband img{ height:var(--band-h); width:auto; display:block; flex:0 0 auto; }
@keyframes band-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion:reduce){ .values-topband .band-track{ animation:none; } }

.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:46px; padding:38px 0 64px; text-align:center; }
.value-item{ 
  max-width:420px; 
  margin:0 auto; 
}
.value-icon{
  width:96px; 
  height:96px; 
  border-radius:999px; 
  margin:0 auto 16px; 
  background:var(--celeste); 
  place-items:center; 
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  display: flex;               /* centrado robusto */
  align-items: center;
  justify-content: center;
}
.value-icon i{ 
  width:56px; 
  height:46px; 
   display: inline-block;
  line-height: 1;              /* evita “salto” vertical por baseline */
  font-size: 52px;            /* ajustá si necesitás otro tamaño */
  margin-bottom: 5px;
  color: #fff;                 /* mantiene blanco dentro del círculo */
  text-align: center;
}
.values-grid h3{
  margin:10px 0 10px; font-size:1.05rem; letter-spacing:.6px; font-weight:800; text-transform:uppercase; color:#111;
}
.values-grid p{
  margin:0 auto; font-size:.92rem; line-height:1.55; color:#333; max-width:34ch;
}
@media (max-width:980px){ .values-grid{ grid-template-columns:repeat(2,1fr); gap:36px 24px; } }
@media (max-width:640px){
  .values-grid{ grid-template-columns:1fr; 
    gap:28px; padding:28px 0 48px; 
  }
  .value-icon{ width:84px; 
    height:84px; 
  } 
  .value-icon svg{ width:40px; height:40px; 
  }
  
  
}

/* ===== WhatsApp FAB ===== */
.whatsapp-fab{
  position:fixed; left:18px; bottom:18px; width:58px; height:58px; border-radius:999px;
  background:#25D366; color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 24px rgba(0,0,0,.25); text-decoration:none; z-index:90;
}
.whatsapp-fab .bi{ font-size:28px; line-height:1; }

/* ===== Banner ===== */
.ml-full-bleed{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.banner-cortina{
  --x:78%; --y:24%;
  width:100vw; aspect-ratio:5.05/1; min-height:140px; max-height:300px; overflow:hidden; background:#e9eef2;
}
.banner-cortina img{ width:100%; height:100%; display:block; object-fit:cover; object-position:var(--x) var(--y); }
.is-contain img{ object-fit:contain; } .is-cover img{ object-fit:cover; }

/* ===== Contacto ===== */
.contacto{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(24px,4vw,48px);
  align-items:start; padding:clamp(24px,5vw,48px) clamp(16px,5vw,56px);
  background:#fff; color:var(--texto);
}

/* Logo de la columna izquierda (forzado a gris) */
.contacto__logo{ 
  display:block;
  height:32px;
  width:auto;
  margin:0 0 18px;
  filter: grayscale(100%) brightness(0.45) contrast(110%);
}

#contacto .contacto__logo{
  display:block;
  height:32px;
  width:auto;
  margin:0 0 18px;
  filter: grayscale(100%) brightness(0.45) contrast(110%);
  
}
/* Reglas específicas para el archivo magic-line_logo.* dentro del bloque de contacto */
.contacto__info > img.contacto__logo[src*="magic-line_logo"]{
  opacity: 1 !important;
  -webkit-filter: grayscale(100%) brightness(0.60) contrast(95%) !important;
          filter: grayscale(100%) brightness(0.60) contrast(95%) !important;
}

.contacto__lista{ list-style:none; padding:0; margin:0 0 16px; }
.contacto__lista--compact li{
  display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #e7edf2;
}
.contacto__lista--compact li:last-child{ border-bottom:1px solid #e7edf2; }
.contacto__lista .ico{
  width:36px; height:36px; flex:0 0 36px; border-radius:50%;
  background:var(--celeste); display:grid; place-items:center; box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.contacto__lista .ico .bi{ font-size:18px; color:#fff; line-height:1; }
.contacto__lista .dato{ font-size:1rem; color:#0f1b2a; }
.contacto__lista .dato strong{ font-weight:800; }

.contacto__ubicacion--compact h4{
  margin:16px 0 6px; font-size:.82rem; letter-spacing:.12em; color:#6b7280;
}
.contacto__ubicacion--compact p{ margin:0; font-size:.78rem; line-height:1.25; color:#222; }

#contacto .contacto__titulo{ margin:0 0 12px; font-weight:700; letter-spacing:.02em; }
#contacto .contacto__form{
  display:grid; grid-template-columns:minmax(360px,1fr) minmax(520px,1.2fr);
  gap:16px 24px; align-items:start;
}
#contacto .campo{ display:flex; flex-direction:column; gap:6px; }
#contacto .campo label{ font-size:.82rem; color:#0f1b2a; margin-left:2px; }
#contacto .campo input, #contacto .campo textarea{
  width:100%; display:block; padding:12px 14px; background:#e9ecef; border:0; border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); outline:none; font:inherit;
}
#contacto .campo input:focus, #contacto .campo textarea:focus{ box-shadow:inset 0 0 0 2px #bfeaf6; }
#contacto .campo textarea{ min-height:210px; resize:vertical; }
#contacto .campo--mensaje{ grid-column:2; grid-row:1 / span 3; }
#contacto .btn-enviar{
  grid-column:2; justify-self:start; align-self:start; padding:10px 24px; background:var(--celeste); color:#fff;
  border:0; border-radius:6px; font-weight:700; letter-spacing:.4px; cursor:pointer;
  transition:filter .15s ease, transform .06s ease;
}
#contacto .btn-enviar:hover{ filter:brightness(1.06); }
#contacto .btn-enviar:active{ transform:translateY(1px); }

/* ===== Franja social inferior ===== */
.ml-socialbar{ background:var(--celeste-bar); padding:10px 0; }
.ml-socialbar__inner{ max-width:1200px; margin:0 auto; }
.ml-socials{
  list-style:none; margin:0; padding:0 16px; display:flex; gap:12px;
  justify-content:flex-end; align-items:center;
}
.ml-social{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:#fff; color:#00B5E2; border:2px solid #fff;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
  transition:transform .15s ease, background .2s, color .2s, border-color .2s; text-decoration:none;
}
.ml-social i{ font-size:18px; line-height:1; }
.ml-social:hover{ transform:translateY(-2px); background:transparent; color:#fff; border-color:#fff; }