:root{--bg:#050914;--bg2:#071323;--panel:rgba(9,20,35,.72);--panel2:rgba(12,29,50,.82);--line:rgba(157,203,255,.16);--line2:rgba(0,229,255,.42);--text:#f5f9ff;--muted:#aabbd1;--soft:#d7e6f8;--accent:#00e5ff;--accent2:#2f80ff;--green:#19e68c;--shadow:0 28px 80px rgba(0,0,0,.42);--radius:24px;--max:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(circle at 20% 0%,rgba(0,118,255,.18),transparent 34%),linear-gradient(180deg,#030812,#071322 55%,#030812);color:var(--text);line-height:1.55}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.container{width:min(100% - 44px,var(--max));margin-inline:auto}.eyebrow{font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);font-weight:900}.site-header{position:sticky;top:0;z-index:80;background:rgba(4,9,18,.68);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08);transition:.25s}.site-header.is-scrolled{background:rgba(4,9,18,.94);box-shadow:0 18px 56px rgba(0,0,0,.34)}.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:grid;line-height:1}.brand strong{font-size:1.48rem;letter-spacing:.12em}.brand span{font-size:.66rem;color:#8ba2bf;letter-spacing:.34em;text-transform:uppercase}.menu{display:flex;gap:24px;color:#c5d4e6;font-weight:800}.menu a{font-size:.92rem}.menu a:hover{color:var(--accent)}.nav-actions{display:flex;align-items:center;gap:10px}.hamb{display:none;border:1px solid var(--line);background:rgba(255,255,255,.05);color:#fff;border-radius:12px;padding:10px 12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line);border-radius:14px;padding:13px 18px;font-weight:900;background:rgba(255,255,255,.045);transition:.25s}.btn::after{content:'→';opacity:.9}.btn:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(0,229,255,.18)}.btn.primary{background:linear-gradient(135deg,#00e5ff,#2f80ff);color:#04101d;border-color:transparent}.btn.ghost{border-color:var(--line2);color:var(--accent);background:rgba(0,229,255,.06)}.hero-v4{position:relative;min-height:760px;overflow:hidden;border-bottom:1px solid var(--line);display:grid;align-items:end}.hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,9,18,.94) 0%,rgba(4,9,18,.72) 42%,rgba(4,9,18,.30) 100%),linear-gradient(180deg,rgba(4,9,18,.02),rgba(4,9,18,.85) 88%),url('../img/generated/logistica-terminal-camiones-barreras.jpg');background-size:cover;background-position:center}.hero-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 15% 28%,rgba(0,229,255,.16),transparent 24%),linear-gradient(90deg,rgba(0,229,255,.08) 0 1px,transparent 1px 100%);background-size:auto,74px 74px;mix-blend-mode:screen;opacity:.55}.hero-content{position:relative;z-index:1;padding-top:120px;padding-bottom:34px}.hero-copy{max-width:650px}.hero h1{font-size:clamp(2.8rem,6vw,5.35rem);line-height:.93;letter-spacing:-.07em;text-transform:uppercase;margin:16px 0 22px}.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);color:#c4d3e7;max-width:660px}.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}.hero-benefits{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:22px 0 34px}.hero-benefits>div{display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.10);background:rgba(4,14,28,.56);backdrop-filter:blur(14px);border-radius:18px;padding:16px}.hero-benefits span,.card-icon{color:var(--accent);font-size:1.4rem}.hero-benefits b{display:block}.hero-benefits small{color:var(--muted)}.section{padding:86px 0}.section-head{display:grid;grid-template-columns:1fr .75fr;gap:36px;align-items:end;margin-bottom:34px}.section h2,.evidence-section h2,.monitor-section h2,.energy-section h2,.cta h2{font-size:clamp(2rem,3.2vw,3.35rem);line-height:1.02;letter-spacing:-.05em;margin:.2rem 0 1rem}.section-head p,.evidence-section p,.monitor-section p,.energy-section p,.cta p,.note{color:var(--muted)}.v4-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.visual-card{min-height:255px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(90deg,rgba(5,11,22,.88),rgba(5,11,22,.62)),var(--img);background-size:cover;background-position:center;box-shadow:var(--shadow);padding:26px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}.visual-card::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,229,255,.08));opacity:.9}.visual-card>*{position:relative;z-index:1}.visual-card h3{font-size:1.25rem;margin:10px 0 8px}.visual-card p{color:#c3d1e3;max-width:320px}.visual-card:hover{border-color:var(--line2);transform:translateY(-4px)}.evidence-section{position:relative;padding:90px 0;overflow:hidden;border-block:1px solid var(--line);background:linear-gradient(90deg,rgba(5,9,20,.96),rgba(5,9,20,.72) 45%,rgba(5,9,20,.32)),url('../img/generated/control-acceso-industrial-dahua-nice.jpg');background-size:cover;background-position:center}.evidence-section::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 72% 45%,rgba(0,229,255,.18),transparent 28%);pointer-events:none}.evidence-grid{position:relative;z-index:1;display:grid;grid-template-columns:.78fr .52fr;gap:44px;align-items:center}.stats-row{display:flex;gap:28px;flex-wrap:wrap;margin:24px 0}.stats-row b{display:block;color:var(--accent);font-size:2rem}.stats-row span{color:#c8d6e8}.presence-card,.glass-list{border:1px solid var(--line2);background:rgba(5,14,28,.58);backdrop-filter:blur(16px);border-radius:24px;padding:26px;box-shadow:var(--shadow)}.presence-card ul,.glass-list{list-style:none;margin:0}.presence-card li,.glass-list div{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);color:#d9e8f7}.presence-card li::before{content:'▣';color:var(--accent);margin-right:10px}.monitor-section,.energy-section{position:relative;overflow:hidden;padding:90px 0;border-bottom:1px solid var(--line)}.monitor-section{background:linear-gradient(90deg,rgba(5,9,20,.98),rgba(5,9,20,.72),rgba(5,9,20,.35)),url('../img/generated/centro-monitoreo-cctv-redes.jpg');background-size:cover;background-position:center}.energy-section{background:linear-gradient(90deg,rgba(5,9,20,.98),rgba(5,9,20,.75),rgba(5,9,20,.28)),url('../img/generated/energia-solar-respaldo-industrial.jpg');background-size:cover;background-position:center}.monitor-layout,.energy-layout{display:grid;grid-template-columns:.78fr .64fr;gap:36px;align-items:center}.glass-list div{display:flex;gap:12px;align-items:center}.glass-list span{color:var(--accent);font-size:1.25rem}.sector-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.mini-card{border:1px solid var(--line);background:linear-gradient(180deg,rgba(14,31,52,.75),rgba(7,15,28,.86));border-radius:18px;padding:20px;font-weight:900;color:#dceaff}.brand-strip{display:flex;flex-wrap:wrap;gap:12px}.brand-strip span{flex:1;min-width:130px;text-align:center;border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:16px;padding:20px;font-weight:1000;letter-spacing:.08em}.gallery-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}.filter-btn{border:1px solid var(--line);background:rgba(255,255,255,.04);color:#c7d2e4;border-radius:999px;padding:10px 14px;font-weight:800;cursor:pointer}.filter-btn.active{background:rgba(0,229,255,.14);border-color:var(--line2);color:var(--accent)}.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.gallery-item{min-height:240px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,transparent,rgba(5,9,20,.92)),var(--img);background-size:cover;background-position:center;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:16px}.gallery-item b{display:block}.gallery-item span{color:var(--muted);font-size:.9rem}.gallery-item:hover{transform:translateY(-4px);border-color:var(--line2)}.os10-card{border:1px solid var(--line2);background:linear-gradient(135deg,rgba(0,229,255,.09),rgba(47,128,255,.07));border-radius:30px;padding:34px;display:grid;grid-template-columns:170px 1fr;gap:28px;align-items:center}.badge{width:145px;height:145px;border:2px solid var(--line2);border-radius:32px;display:grid;place-items:center;color:var(--accent);font-size:2rem;font-weight:1000;background:rgba(0,229,255,.06)}.cta{padding:72px 0}.cta-box{border:1px solid var(--line2);background:linear-gradient(135deg,rgba(11,30,55,.94),rgba(0,229,255,.08)),url('../img/generated/logistica-terminal-camiones-barreras.jpg');background-size:cover;background-position:center;border-radius:30px;padding:42px;display:flex;justify-content:space-between;align-items:center;gap:24px;box-shadow:var(--shadow)}.cta-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.whatsapp-chip{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;border:1px solid rgba(42,255,134,.35);background:rgba(18,130,70,.20);border-radius:18px;padding:12px 16px}.whatsapp-chip span{grid-row:1/3;width:42px;height:42px;border-radius:50%;background:#22c55e;display:grid;place-items:center;font-size:1.3rem}.whatsapp-chip small{color:#bdebd0}.footer{border-top:1px solid var(--line);background:#030711;padding:48px 0 26px}.footer-grid{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:28px}.footer a,.footer span,.footer p{display:block;color:#9fb0c9;margin:7px 0}.footer h4{margin:0 0 12px}.copy{border-top:1px solid rgba(255,255,255,.08);margin-top:28px;padding-top:16px;color:#73839b}.wa-float{position:fixed;right:22px;bottom:22px;z-index:100;display:grid;grid-template-columns:auto auto;column-gap:10px;align-items:center;border:1px solid rgba(42,255,134,.38);background:rgba(8,30,18,.84);backdrop-filter:blur(12px);border-radius:999px;padding:10px 14px;box-shadow:0 18px 40px rgba(0,0,0,.35)}.wa-float span{grid-row:1/3;width:46px;height:46px;border-radius:50%;background:#20d466;display:grid;place-items:center;color:#fff;font-weight:1000}.wa-float b{font-size:.85rem}.wa-float small{color:#d7ffe5}.reveal{opacity:0;transform:translateY(28px);transition:opacity .72s ease,transform .72s ease}.reveal.in{opacity:1;transform:none}@media(max-width:1024px){.v4-grid,.gallery,.sector-grid{grid-template-columns:repeat(2,1fr)}.hero-benefits,.evidence-grid,.monitor-layout,.energy-layout,.section-head,.cta-box,.footer-grid{grid-template-columns:1fr}.cta-box{display:block}.hero-benefits{margin-top:0}.menu{gap:14px}.nav-actions .btn{display:none}}@media(max-width:760px){.container{width:min(100% - 28px,var(--max))}.nav{height:68px}.hamb{display:block}.menu{position:fixed;top:68px;left:14px;right:14px;display:none;flex-direction:column;background:rgba(5,9,20,.96);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)}.menu.open{display:flex}.hero-v4{min-height:690px}.hero-content{padding-top:84px}.hero h1{font-size:2.75rem}.hero-benefits,.v4-grid,.gallery,.sector-grid,.os10-card{grid-template-columns:1fr}.section,.monitor-section,.energy-section,.evidence-section{padding:64px 0}.wa-float{right:14px;bottom:14px}.wa-float b,.wa-float small{display:none}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}


/* v6: sección compacta de ejemplos de servicios */
.examples-wrap {
  position: relative;
  overflow: hidden;
}
.examples-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 10%, rgba(0, 214, 255, .10), transparent 28%),
    radial-gradient(circle at 80% 30%, rgba(38, 116, 255, .10), transparent 32%);
  pointer-events: none;
}
.examples-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.example-card {
  min-height: 230px;
  border: 1px solid rgba(116, 232, 255, .18);
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  color: var(--text);
  text-decoration: none;
  background:
    linear-gradient(180deg, rgba(3, 9, 18, .12), rgba(3, 9, 18, .88)),
    var(--img) center/cover no-repeat;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .24);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.example-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 229, 255, .15), transparent 45%, rgba(33, 116, 255, .10));
  opacity: .75;
}
.example-card span,
.example-card b {
  position: relative;
  z-index: 1;
}
.example-card span {
  color: var(--cyan);
  text-transform: uppercase;
  font-size: .76rem;
  letter-spacing: .16em;
  font-weight: 800;
  margin-bottom: 9px;
}
.example-card b {
  max-width: 28ch;
  font-size: 1.05rem;
  line-height: 1.35;
}
.example-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 229, 255, .55);
  box-shadow: 0 28px 80px rgba(0, 190, 255, .13);
}

@media (max-width: 900px) {
  .examples-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .examples-grid {
    grid-template-columns: 1fr;
  }
  .example-card {
    min-height: 210px;
  }
}


/* v7: ejemplos de servicios con imágenes reales mediante <img>, evita tarjetas oscuras por background faltante */
.examples-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.example-card {
  min-height: 250px;
  border: 1px solid rgba(116, 232, 255, .18);
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  color: var(--text);
  text-decoration: none;
  background: rgba(7, 16, 31, .72) !important;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .24);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.example-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  display: block;
  opacity: .78;
  filter: saturate(1.12) contrast(1.05);
  transform: scale(1.01);
  transition: transform .35s ease, opacity .35s ease;
}
.example-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 9, 18, .08) 0%, rgba(3, 9, 18, .40) 42%, rgba(3, 9, 18, .92) 100%),
    linear-gradient(135deg, rgba(0, 229, 255, .15), transparent 46%, rgba(33, 116, 255, .12));
  z-index: 1;
}
.example-card::after {
  display: none;
}
.example-card > div {
  position: relative;
  z-index: 2;
  padding: 22px;
}
.example-card span {
  display: block;
  color: var(--cyan);
  text-transform: uppercase;
  font-size: .76rem;
  letter-spacing: .16em;
  font-weight: 800;
  margin-bottom: 9px;
}
.example-card b {
  display: block;
  max-width: 28ch;
  font-size: 1.05rem;
  line-height: 1.35;
}
.example-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 229, 255, .55);
  box-shadow: 0 28px 80px rgba(0, 190, 255, .13);
}
.example-card:hover > img {
  transform: scale(1.06);
  opacity: .92;
}

@media (max-width: 900px) {
  .examples-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .examples-grid {
    grid-template-columns: 1fr;
  }
  .example-card {
    min-height: 230px;
  }
}


/* v8 hotfix: nunca ocultar contenido si JS o IntersectionObserver falla.
   Las animaciones quedan suaves, pero el contenido base permanece visible. */
.reveal,
.reveal.in,
.reveal.is-visible,
.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
.hero-copy,
.hero-content,
.hero-benefits,
.section-head,
.visual-card,
.evidence-copy,
.presence-card,
.glass-list,
.example-card,
.os10-card,
.cta-box {
  opacity: 1 !important;
  visibility: visible !important;
}
.hero,
.hero-v4 {
  min-height: min(900px, 100svh);
}
.hero-content {
  position: relative;
  z-index: 2;
}
.hero-benefits {
  position: relative;
  z-index: 3;
}
.site-header {
  z-index: 20;
}
.wa-float {
  z-index: 25;
}

/* Mejora de legibilidad en hero si el fondo es muy oscuro */
.hero-copy {
  max-width: 720px;
}
.hero-copy h1,
.hero-copy .lead,
.hero-copy .eyebrow,
.hero-cta {
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
}