/* =========================================================
   i4.css — estilos comunes a todo industria4.tech
   Lo cargan todas las páginas. Acá van: colores, base,
   nav, footer y el botón/popup del chat.
   ========================================================= */

/* ---- Tokens (colores de marca) ---- */
:root{
  --bg:#F7F9F9;
  --bg-alt:#FFFFFF;
  --ink:#122024;
  --ink-soft:#4B5B60;
  --teal:#59B4B4;
  --teal-deep:#2F7A78;
  --teal-tint:#E4F3F2;
  --violet:#9283BD;
  --violet-deep:#5D4E8C;
  --violet-tint:#EEEBF6;
  --line:#DDE4E4;
  --line-strong:#C3CDCD;
  --coral:#DB4E4F;
  --plum:#955A7C;
  --blue2:#3F69B2;

  /* Gradientes de marca */
  --grad-alt:linear-gradient(100deg, var(--coral) 0%, var(--plum) 50%, var(--blue2) 100%);
  --grad-brand:linear-gradient(100deg, var(--teal-deep) 0%, var(--violet) 55%, var(--violet-deep) 100%);
  --grad-teal:linear-gradient(135deg, var(--teal-deep) 0%, var(--teal) 40%, var(--violet) 100%);
}

/* ---- Base ---- */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Montserrat', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Montserrat', sans-serif; font-weight:700; color:var(--ink); letter-spacing:-0.02em;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1320px; margin:0 auto; padding:0 40px;}

/* ---- Logo ---- */
.logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; color:#fff;}
.logo-icon{height:46px; width:auto; display:block;}
nav .logo-icon{height:62px;}
/* ---- Logo ---- */
.logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; color:#fff;}
.logo-icon{height:46px; width:auto; display:block;}
nav .logo-icon{height:62px;}
.logo-seccion{background:linear-gradient(90deg, var(--teal), var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent;}

/* ---- Nav ---- */
nav{
  position:sticky; top:0; z-index:50;
  background:var(--ink);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:72px;}
.nav-links{display:flex; align-items:center; gap:36px; font-size:16px; color:rgba(255,255,255,0.65);}
.nav-links a:hover{color:#fff;}
.nav-cta{
  padding:9px 18px; border-radius:8px;
  background:var(--grad-alt);
  color:#fff; font-size:14px; font-weight:500;
}
.nav-cta:hover{opacity:0.88;}

/* Dropdown "Explorá i4" */
.nav-dropdown{position:relative;}
.nav-dropdown-toggle{
  display:flex; align-items:center; gap:5px;
  cursor:pointer; background:none; border:none; padding:0; margin:0;
  font-family:inherit; font-size:16px; line-height:inherit; color:rgba(255,255,255,0.65);
}
.nav-dropdown-toggle:hover{color:#fff;}
.nav-dropdown-toggle .caret{font-size:10px; transition:transform 0.2s;}
.nav-dropdown.open .nav-dropdown-toggle .caret{transform:rotate(180deg);}
.nav-dropdown-menu{
  display:none;
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  background:var(--bg-alt);
  border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,0.18);
  min-width:220px;
  padding:8px;
  z-index:60;
}
.nav-dropdown.open .nav-dropdown-menu{display:block;}
.nav-dropdown-menu a{
  display:block; padding:10px 14px; border-radius:6px;
  font-size:14px; font-weight:500; color:var(--ink);
}
.nav-dropdown-menu a:hover{background:var(--teal-tint); color:var(--teal-deep);}

/* Hamburguesa (solo mobile) */
.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  width:32px; height:32px;
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
  flex-shrink:0;
}
.nav-toggle span{
  display:block; width:24px; height:2px;
  background:#fff; border-radius:2px;
  transition:transform 0.25s, opacity 0.25s;
}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---- Footer ---- */
footer{
  padding:56px 0 40px;
  background:var(--ink);
  border-top:1px solid rgba(255,255,255,0.08);
}
footer .wrap{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px;}
footer .f-left .logo{margin-bottom:10px;}
footer p{margin:0; font-size:15px; color:rgba(255,255,255,0.6);}
footer p + p{margin-top:0.35rem;}
footer .f-right{text-align:right;}
footer .f-right a{color:#fff;}
footer .f-right a:hover{color:var(--teal);}

/* ---- Chat (botón flotante + popup) ---- */
.chat-toggle{
  position:fixed; bottom:20px; right:20px; z-index:9998;
  width:60px; height:60px; border-radius:50%; border:none;
  background:linear-gradient(135deg, var(--teal-deep) 0%, var(--violet) 100%);
  color:#fff; font-size:24px; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  display:flex; align-items:center; justify-content:center;
  transition:transform 0.2s ease;
}
.chat-toggle.active{transform:scale(0.9);}
.chat-popup{
  display:none;
  position:fixed; bottom:90px; right:20px; z-index:9999;
  width:min(420px, calc(100vw - 40px));
  height:min(580px, calc(100vh - 110px));
  background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 5px 40px rgba(0,0,0,0.16);
}
.chat-popup.open{display:block;}
.chat-popup iframe{width:100%; height:100%; border:none; border-radius:12px;}

/* ---- Desktop: el dropdown también abre con hover ---- */
@media (min-width:861px){
  .nav-dropdown:hover .nav-dropdown-menu{display:block;}
  .nav-dropdown:hover .nav-dropdown-toggle .caret{transform:rotate(180deg);}
}

/* ---- Mobile ---- */
@media (max-width:860px){
  .wrap{padding:0 20px;}

  .nav-toggle{display:flex;}
  .nav-cta{display:none;}
  .nav-links{
    display:none;
    position:absolute; top:72px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink);
    border-top:1px solid rgba(255,255,255,0.08);
    box-shadow:0 16px 32px rgba(0,0,0,0.3);
    padding:8px 0;
    z-index:55;
  }
  .nav-links.mobile-open{display:flex;}
  .nav-links > a{padding:14px 40px; width:100%;}
  .nav-links > a:hover{background:rgba(255,255,255,0.06);}

  .nav-dropdown{width:100%;}
  .nav-dropdown-toggle{width:100%; padding:14px 40px; justify-content:space-between;}
  .nav-dropdown-menu{
    position:static; transform:none;
    background:rgba(255,255,255,0.04);
    box-shadow:none; border-radius:0; min-width:0; padding:0;
  }
  .nav-dropdown-menu a{color:rgba(255,255,255,0.8); padding:12px 56px; border-radius:0;}
  .nav-dropdown-menu a:hover{background:rgba(255,255,255,0.08); color:#fff;}

  footer .wrap{flex-direction:column; gap:2rem;}
  footer .f-right{text-align:left;}
}