/* ===========================================================
   InfoMag — Hoja de estilos compartida
   Paleta de marca: navy fiordo + naranja señal
   =========================================================== */
:root{
  --fjord-navy:#0B1E2C;
  --fjord-navy-2:#0F2A3D;
  --deep-teal:#0E3A48;
  --glacier-ice:#F4F8FA;
  --frost:#C9DCE3;
  --steel:#5C7383;
  --steel-dark:#33475A;
  --signal-orange:#FF5A1F;
  --signal-orange-soft:#FFA97A;
  --ink:#0B1E2C;
  --line: rgba(255,255,255,0.14);
  --line-dark: rgba(11,30,44,0.12);
  --max: 1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  background:var(--glacier-ice);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
h1,h2,h3,h4{font-family:'Space Grotesk', sans-serif; font-weight:700; letter-spacing:-0.01em;}
.mono{font-family:'IBM Plex Mono', monospace;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--signal-orange);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--signal-orange);
  display:inline-block;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}


/* ===== NAV ===== */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:20px 0;
  transition:background .35s ease, padding .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
  background:rgba(11,30,44,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
header.transparent-top{background:transparent; border-bottom-color:transparent;}
header.scrolled{
  background:rgba(11,30,44,0.92);
  backdrop-filter:blur(10px);
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
nav.wrap{display:flex; align-items:center; justify-content:space-between;}
.brand{display:flex; align-items:center; gap:12px; color:#fff; font-family:'Space Grotesk'; font-weight:700; font-size:19px; letter-spacing:0.01em;}
.brand img{height:34px; width:auto; border-radius:6px;}
.navlinks{display:flex; gap:34px; align-items:center;}
.navlinks a{
  color:var(--frost); font-size:14px; font-weight:500;
  position:relative; padding:4px 0;
  transition:color .2s ease;
}
.navlinks a:hover{color:#fff;}
.navlinks a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--signal-orange); transition:width .25s ease;
}
.navlinks a:hover::after{width:100%;}
.navlinks a.active{color:var(--signal-orange-soft);}
.navlinks a.active::after{width:100%; background:var(--signal-orange);}
.nav-cta{
  background:var(--signal-orange); color:#fff !important; font-family:'IBM Plex Mono';
  font-size:12.5px; letter-spacing:0.04em; padding:10px 18px; border-radius:2px;
  transition:background .2s ease, transform .2s ease;
}
.nav-cta:hover{background:#e64d15; transform:translateY(-1px);}
.nav-cta::after{display:none;}
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:8px;}
.burger span{width:24px; height:2px; background:#fff; display:block;}

/* ===== HERO (home) ===== */
.hero{
  position:relative;
  min-height:100vh;
  background:radial-gradient(ellipse 90% 60% at 70% 15%, var(--deep-teal) 0%, var(--fjord-navy) 55%), var(--fjord-navy);
  color:#fff;
  overflow:hidden;
  display:flex; align-items:center;
  padding-top:100px;
}
.hero-lines{position:absolute; inset:0; z-index:0; opacity:0.55;}
.hero-content{position:relative; z-index:2; width:100%; padding:60px 0 90px;}
.coord{
  font-family:'IBM Plex Mono'; font-size:13px; color:var(--signal-orange-soft);
  letter-spacing:0.08em; margin-bottom:26px; display:flex; align-items:center; gap:10px;
}
.coord .dot{width:6px; height:6px; border-radius:50%; background:var(--signal-orange); box-shadow:0 0 0 4px rgba(255,90,31,0.25); animation:pulse 2.4s infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.4;}}
.hero h1{
  font-size:clamp(42px, 7.2vw, 92px);
  line-height:0.98;
  max-width:900px;
  color:#fff;
}
.hero h1 em{font-style:normal; color:transparent; -webkit-text-stroke:1.5px var(--frost);}
.hero p.lead{
  margin-top:26px; max-width:520px; font-size:18px; color:var(--frost); font-weight:400;
}
.hero-ctas{display:flex; gap:16px; margin-top:42px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px; font-family:'IBM Plex Mono'; font-size:13.5px; letter-spacing:0.03em;
  border-radius:2px; transition:all .22s ease; border:1px solid transparent; cursor:pointer;
}
.btn-primary{background:var(--signal-orange); color:#fff;}
.btn-primary:hover{background:#e64d15; transform:translateY(-2px); box-shadow:0 10px 24px rgba(255,90,31,0.28);}
.btn-ghost{border-color:rgba(255,255,255,0.3); color:#fff;}
.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,0.06);}
.hero-stats{
  display:flex; gap:0; margin-top:70px; border-top:1px solid var(--line); padding-top:26px; max-width:720px; flex-wrap:wrap;
}
.hstat{padding-right:44px; margin-right:44px; border-right:1px solid var(--line);}
.hstat:last-child{border-right:none;}
.hstat .num{font-family:'Space Grotesk'; font-size:28px; font-weight:700; color:#fff;}
.hstat .lbl{font-family:'IBM Plex Mono'; font-size:11px; color:var(--frost); opacity:0.75; letter-spacing:0.04em; margin-top:4px;}

/* ===== PAGE HERO (subpáginas) ===== */
.page-hero{
  background:radial-gradient(ellipse 90% 60% at 80% 0%, var(--deep-teal) 0%, var(--fjord-navy) 55%), var(--fjord-navy);
  color:#fff; padding:170px 0 80px; position:relative; overflow:hidden;
}
.page-hero .wrap{position:relative; z-index:2;}
.page-hero h1{font-size:clamp(34px,5vw,58px); color:#fff; max-width:760px;}
.page-hero p.lead{margin-top:20px; max-width:560px; color:var(--frost); font-size:17px;}
.breadcrumb{font-family:'IBM Plex Mono'; font-size:12px; color:var(--frost); opacity:0.7; margin-bottom:22px; letter-spacing:0.05em;}
.breadcrumb a{color:var(--signal-orange-soft);}
.breadcrumb a:hover{text-decoration:underline;}

/* ===== SECTION GENERIC ===== */
section{padding:120px 0;}
.section-tight{padding:80px 0;}
.section-head{max-width:640px; margin-bottom:64px;}
.section-head h2{font-size:clamp(30px,4vw,44px); line-height:1.08;}
.section-head p{margin-top:18px; color:var(--steel); font-size:16.5px;}

/* ===== QUIENES SOMOS ===== */
.about{background:var(--glacier-ice);}
.about-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:70px; align-items:start;}
.about-text p{color:var(--steel-dark); font-size:16.5px; margin-bottom:18px; max-width:520px;}
.about-text strong{color:var(--ink); font-weight:600;}
.panels{display:flex; flex-direction:column; gap:2px;}
.panel{
  background:var(--fjord-navy); color:#fff; padding:34px 32px; position:relative;
  border-left:3px solid var(--signal-orange);
}
.panel .tag{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:0.12em; color:var(--signal-orange-soft); text-transform:uppercase; margin-bottom:12px;}
.panel h3{font-size:20px; margin-bottom:10px; color:#fff;}
.panel p{color:var(--frost); font-size:14.5px;}

/* ===== SERVICIOS ===== */
.services{background:var(--fjord-navy); color:#fff; position:relative; overflow:hidden;}
.services .section-head p{color:var(--frost);}
.services .section-head h2{color:#fff;}
.svc-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  position:relative; z-index:1;
}
.svc-card{
  background:var(--fjord-navy-2); padding:38px 32px; min-height:290px;
  display:flex; flex-direction:column;
  transition:background .25s ease;
  position:relative;
}
.svc-card:hover{background:#122F42;}
.svc-num{font-family:'IBM Plex Mono'; font-size:12px; color:var(--signal-orange-soft); margin-bottom:22px; letter-spacing:0.05em;}
.svc-icon{width:38px; height:38px; margin-bottom:20px; color:var(--signal-orange);}
.svc-card h3{font-size:19px; margin-bottom:12px; color:#fff;}
.svc-card p{font-size:14.5px; color:var(--frost); flex:1;}
.svc-link{
  margin-top:20px; display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono'; font-size:12.5px; color:var(--signal-orange-soft);
  border-top:1px solid var(--line); padding-top:16px;
  transition:gap .2s ease, color .2s ease;
}
.svc-link:hover{gap:13px; color:var(--signal-orange);}
.svc-link svg{width:14px; height:14px;}

/* ===== CLIENTES ===== */
.clients{background:var(--glacier-ice);}
.clients-strip{
  display:flex; align-items:center; gap:56px; flex-wrap:wrap;
  padding:44px 0; border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
}
.clients-strip img{
  height:38px; width:auto; max-width:130px; object-fit:contain;
  filter:grayscale(1); opacity:0.55; transition:opacity .25s ease, filter .25s ease;
}
.clients-strip img:hover{filter:grayscale(0); opacity:1;}
.clients-note{margin-top:22px; font-family:'IBM Plex Mono'; font-size:12px; color:var(--steel); letter-spacing:0.04em;}

/* ===== CONTACTO ===== */
.contact{background:var(--fjord-navy); color:#fff;}
.contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:stretch;}
.contact-info h2{color:#fff; font-size:clamp(30px,4vw,42px); margin-bottom:20px;}
.contact-info > p{color:var(--frost); max-width:420px; margin-bottom:40px; font-size:16px;}
.cline{display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--line); align-items:flex-start;}
.cline:last-of-type{border-bottom:1px solid var(--line);}
.cline .k{font-family:'IBM Plex Mono'; font-size:11px; color:var(--signal-orange-soft); letter-spacing:0.1em; text-transform:uppercase; width:100px; flex-shrink:0; padding-top:2px;}
.cline .v{font-size:15.5px; color:#fff;}
.contact-whatsapp{
  margin-top:34px; display:inline-flex; gap:10px; align-items:center;
  background:var(--signal-orange); color:#fff; padding:16px 26px; font-family:'IBM Plex Mono'; font-size:13.5px;
  border-radius:2px; transition:all .22s ease;
}
.contact-whatsapp:hover{background:#e64d15; transform:translateY(-2px);}
.map-frame{
  position:relative; min-height:380px; border:1px solid var(--line); overflow:hidden;
}
.map-frame iframe{width:100%; height:100%; min-height:380px; filter:grayscale(0.3) contrast(1.05); border:0;}

/* ===== FOOTER ===== */
footer{background:#081420; color:var(--frost); padding:70px 0 30px;}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:50px; padding-bottom:50px; border-bottom:1px solid var(--line);}
.foot-brand{display:flex; align-items:center; gap:10px; color:#fff; font-family:'Space Grotesk'; font-weight:700; font-size:18px; margin-bottom:16px;}
.foot-brand img{height:28px; border-radius:5px;}
.foot-col h4{font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--signal-orange-soft); margin-bottom:18px;}
.foot-col p, .foot-col a{font-size:14.5px; color:var(--frost); display:block; margin-bottom:10px;}
.foot-col a:hover{color:#fff;}
.foot-social{display:flex; gap:14px; margin-top:6px;}
.foot-social a{width:36px; height:36px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:border-color .2s ease, background .2s ease;}
.foot-social a:hover{border-color:var(--signal-orange); background:rgba(255,90,31,0.1);}
.foot-social img{width:16px; height:16px; filter:brightness(0) invert(1); opacity:0.85;}
.foot-bottom{padding-top:26px; display:flex; justify-content:space-between; font-size:12.5px; color:var(--steel); font-family:'IBM Plex Mono'; flex-wrap:wrap; gap:10px;}

.wa-float{
  position:fixed; bottom:26px; right:26px; z-index:90;
  width:58px; height:58px; border-radius:50%; background:var(--signal-orange);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(255,90,31,0.4);
  transition:transform .2s ease;
}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:26px; height:26px; fill:#fff;}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ===========================================================
   CATÁLOGOS (Equipos / Insumos) — listos para cargar imágenes
   =========================================================== */
.catalog-intro-bar{
  background:#fff; border-bottom:1px solid var(--line-dark);
  padding:22px 0; position:sticky; top:0; z-index:40;
}
.filter-tabs{display:flex; gap:10px; flex-wrap:wrap;}
.filter-tab{
  font-family:'IBM Plex Mono'; font-size:12.5px; letter-spacing:0.03em;
  padding:9px 16px; border:1px solid var(--line-dark); border-radius:20px;
  color:var(--steel-dark); background:#fff; cursor:pointer; transition:all .2s ease;
}
.filter-tab:hover{border-color:var(--signal-orange); color:var(--signal-orange);}
.filter-tab.active{background:var(--fjord-navy); border-color:var(--fjord-navy); color:#fff;}

.prod-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:28px;
  padding:70px 0;
}
.prod-card{
  background:#fff; border:1px solid var(--line-dark); border-radius:4px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.prod-card:hover{transform:translateY(-4px); box-shadow:0 16px 34px rgba(11,30,44,0.1);}
.prod-media{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:#ffffff;
  padding:20px;
}
.prod-media img{width:100%; height:100%; object-fit:contain;}
.prod-media img.ph{display:none;}
.ph-placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:var(--steel); text-align:center; padding:16px;
}
.ph-placeholder svg{width:34px; height:34px; opacity:0.55;}
.ph-placeholder .ph-path{
  font-family:'IBM Plex Mono'; font-size:10.5px; color:var(--steel-dark); opacity:0.75;
  background:rgba(255,255,255,0.7); padding:3px 8px; border-radius:3px; word-break:break-all;
}
.prod-body{padding:20px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1;}
.prod-cat{font-family:'IBM Plex Mono'; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--signal-orange);}
.prod-card h3{font-size:17px; line-height:1.25;}
.prod-card p{font-size:13.5px; color:var(--steel); flex:1;}
.prod-cta{
  margin-top:8px; font-family:'IBM Plex Mono'; font-size:12px; color:var(--fjord-navy);
  display:inline-flex; align-items:center; gap:6px; border-top:1px solid var(--line-dark); padding-top:12px;
}
.prod-cta:hover{color:var(--signal-orange);}

.catalog-note{
  background:#FFF4EE; border:1px dashed var(--signal-orange); color:var(--steel-dark);
  padding:18px 22px; border-radius:4px; font-size:14px; margin-top:0; display:flex; gap:12px; align-items:flex-start;
}
.catalog-note svg{width:20px; height:20px; flex-shrink:0; color:var(--signal-orange); margin-top:1px;}
.catalog-note strong{color:var(--ink);}

/* ===========================================================
   SISTEMAS (Nuestros Sistemas)
   =========================================================== */
.sys-block{padding:100px 0; border-bottom:1px solid var(--line-dark);}
.sys-block:last-of-type{border-bottom:none;}
.sys-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
.sys-grid.reverse .sys-media{order:2;}
.sys-grid.reverse .sys-copy{order:1;}
.sys-media{
  aspect-ratio:16/11; border-radius:6px; overflow:hidden; position:relative;
  background:repeating-linear-gradient(45deg, #E9EFF2, #E9EFF2 12px, #DCE6EA 12px, #DCE6EA 24px);
  border:1px solid var(--line-dark);
}
.sys-media img{width:100%; height:100%; object-fit:cover;}
.sys-copy h3{font-size:clamp(26px,3.2vw,34px); margin-bottom:16px;}
.sys-copy p{color:var(--steel-dark); font-size:16px; margin-bottom:22px; max-width:480px;}
.sys-feats{list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:28px;}
.sys-feats li{display:flex; gap:12px; font-size:14.5px; color:var(--steel-dark);}
.sys-feats li::before{content:"→"; color:var(--signal-orange); font-family:'IBM Plex Mono'; flex-shrink:0;}

@media (max-width: 900px){
  .about-grid, .contact-grid{grid-template-columns:1fr; gap:44px;}
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr; gap:36px;}
  .sys-grid{grid-template-columns:1fr; gap:32px;}
  .sys-grid.reverse .sys-media, .sys-grid.reverse .sys-copy{order:initial;}
}
@media (max-width: 640px){
  .wrap{padding:0 20px;}
  .navlinks{position:fixed; top:0; right:0; height:100vh; width:80%; background:var(--fjord-navy); flex-direction:column; justify-content:center; align-items:flex-start; gap:28px; padding:0 40px; transform:translateX(100%); transition:transform .35s ease; border-left:1px solid var(--line);}
  .navlinks.open{transform:translateX(0);}
  .burger{display:flex; z-index:101;}
  .hero{padding-top:90px;}
  .hero-stats{gap:0;}
  .hstat{padding-right:24px; margin-right:24px;}
  section{padding:80px 0;}
  .svc-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .foot-bottom{flex-direction:column;}
  .page-hero{padding:150px 0 60px;}
  .prod-grid{grid-template-columns:1fr 1fr; gap:16px; padding:40px 0;}
  .sys-block{padding:70px 0;}
}
@media (max-width: 460px){
  .prod-grid{grid-template-columns:1fr;}
}