@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#030a18;--panel:#081a34;--blue:#21b8ff;--orange:#ff920d;--text:#edf2fa;--muted:#aeb9c8}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 76% 12%,#173a63 0,#07162d 28%,#020714 75%);color:var(--text);font-family:Inter,Arial;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(125deg,transparent 47%,#07599116 47.1%,transparent 47.3%);z-index:-1}
header{height:76px;display:flex;align-items:center;gap:25px;padding:0 3%;position:sticky;top:0;z-index:30;background:#071223ed;backdrop-filter:blur(12px);border-bottom:1px solid #105d94}.brand img{width:190px;height:47px;object-fit:contain;object-position:left center}.menuBtn{display:none;background:none;color:#fff;border:0;font-size:25px}nav{display:flex;justify-content:center;gap:30px;align-items:center;flex:1;height:100%}nav a{color:#d5dde7;text-decoration:none;font-size:13px;height:100%;display:flex;align-items:center;position:relative;white-space:nowrap}nav a.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--orange);box-shadow:0 0 12px var(--orange)}.talk{padding:16px 26px;border-radius:13px;text-decoration:none;color:#fff;background:linear-gradient(135deg,#ff7e00,#ffc148);font-weight:800;box-shadow:0 0 24px #ff850055}
.hero{max-width:1536px;height:540px;margin:auto;display:grid;grid-template-columns:43% 57%;padding:20px 5% 0}.heroCopy{text-align:center;position:relative;z-index:2}.officialLogo{width:min(390px,95%);height:245px;object-fit:contain;mix-blend-mode:screen;margin-top:0}.heroCopy p{color:#c3cddb;line-height:1.8;font-size:15px;margin:-15px 0 0}.heroActions{display:flex;justify-content:center;gap:25px;margin-top:18px}.heroActions a{height:50px;padding:0 25px;display:flex;align-items:center;justify-content:center;border-radius:13px;text-decoration:none;font-size:13px;font-weight:800}.primary{color:#fff;background:linear-gradient(135deg,#ff7c00,#ffc148);box-shadow:0 0 22px #ff850055}.secondary{color:#fff;border:1px solid #e67d0c;background:#07162a}
.heroVisual{position:relative;height:500px}.cloud{position:absolute;right:28%;top:10px;color:#39b7f4;font-size:100px;line-height:.7;text-shadow:0 0 28px #008cff77}.cloud b{position:absolute;left:44px;top:22px;font-size:38px}.netline{position:absolute;top:75px;left:20%;width:55%;height:110px;border-top:2px solid #118ce0;border-right:2px solid #118ce0;opacity:.6}.server{position:absolute;left:22%;top:80px;border:2px solid #1598eb;border-radius:20px;padding:16px;color:#2fc2ff;text-align:center;font-size:28px}
.laptop{position:absolute;left:0;top:180px;width:490px;height:290px;transform:rotate(6deg) skew(-4deg);filter:drop-shadow(0 18px 22px #000b)}.browser{height:28px;background:#b6c5d1;color:#173756;padding:8px 15px;font-size:8px;font-weight:800}.browser span{float:right;color:#d55}.screen{height:210px;background:#071a37;border:8px solid #17293f;display:flex}.screen aside{width:105px;padding:16px;border-right:1px solid #15518a}.screen aside i{display:block;height:9px;background:#1263a3;border-radius:7px;margin:15px 0}.dash{flex:1;background:#0a2a56;margin:15px;position:relative;padding:18px}.chart{height:125px;display:flex;align-items:end;gap:12px}.chart b{width:28px;background:linear-gradient(#33c6ff,#0877d1)}.chart b:nth-child(1){height:40%}.chart b:nth-child(2){height:63%}.chart b:nth-child(3){height:50%}.chart b:nth-child(4){height:93%}.chart b:nth-child(5){height:73%}.circle{position:absolute;right:25px;top:25px;width:76px;height:76px;border:8px solid #1bb1f6;border-left-color:#0b477a;border-radius:50%;display:grid;place-items:center;font-size:12px}.cards{display:flex;gap:8px}.cards span{width:55px;height:30px;background:#0d3d72}.keyboard{height:52px;background:#73808c;clip-path:polygon(5% 0,95% 0,100% 100%,0 100%)}
.device{position:absolute;right:0;top:68px;width:210px;height:390px;padding:70px 17px 15px;border:5px solid #111b2a;border-radius:55px 55px 38px 38px;background:linear-gradient(135deg,#263448,#080d16 58%,#182333);transform:rotate(6deg);box-shadow:0 20px 35px #000c,0 0 22px #ff850033;z-index:5}.speaker{position:absolute;top:15px;left:50px;width:105px;height:8px;background:#05080d;border-radius:9px}.device small{position:absolute;top:34px;left:0;width:100%;text-align:center;font-size:8px;font-weight:800}.deviceMark{width:53px;height:53px;border:2px solid var(--orange);border-radius:50%;display:grid;place-items:center;color:#ff9c16;font-size:25px;font-weight:900;margin:auto}.device strong{display:block;text-align:center;letter-spacing:2px;font-size:12px;margin:7px 0 14px}.device button{display:block;width:100%;border:0;background:linear-gradient(90deg,#154d89,#0b3869);color:#fff;padding:11px;margin:7px 0;border-radius:5px;text-align:left;font-size:9px}.codesCard{position:absolute;right:24%;bottom:0;width:210px;background:#e7f0f8;color:#294867;z-index:8;padding:15px 12px;transform:rotate(8deg);border-radius:8px;box-shadow:0 15px 30px #000b;font-size:9px}.codesCard b{display:block;margin-bottom:6px}.codesCard span{display:block;padding:7px;border-bottom:1px solid #bfd0df}
.metrics{max-width:1435px;margin:0 auto 18px;padding:20px 28px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #1169aa;border-radius:16px;background:#092442df}.metrics>div{display:flex;justify-content:center;align-items:center;gap:24px;border-right:1px solid #396d95}.metrics>div:last-child{border:0}.metrics i{font-style:normal;color:#2dbbff;font-size:40px}.metrics p{margin:0}.metrics b{display:block;font-size:23px}.metrics span{display:block;font-size:12px;color:#b7c2d1;margin-top:4px}
.section{max-width:1440px;margin:auto;padding:70px 3%}.sectionHead{text-align:center;max-width:850px;margin:0 auto 35px}.sectionHead>span,.about>div>span{font-size:11px;letter-spacing:3px;color:var(--orange);font-weight:800}.section h2{font:700 42px 'Barlow Condensed';margin:9px 0}.sectionHead p{color:var(--muted);line-height:1.7}.solutionGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}.solutionGrid article{min-height:210px;border:1px solid #116ba8;border-radius:16px;background:linear-gradient(145deg,#0b223f,#07172d);padding:22px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;transition:.2s}.solutionGrid article:hover{transform:translateY(-6px);box-shadow:0 18px 30px #0007}.ico{font-size:42px;color:#25b6ff;text-shadow:0 0 15px #0089ef}.orange{color:#ff960e}.solutionGrid h3{font:600 21px 'Barlow Condensed';margin:10px 0}.solutionGrid p{font-size:12px;color:#b7c2d1;line-height:1.55;margin:0}
.lab{background:linear-gradient(180deg,#07162b77,#061121)}.scannerDemo{display:grid;grid-template-columns:1.4fr .8fr;gap:28px;max-width:1000px;margin:auto}.cameraBox{height:380px;background:#020813;border:1px solid #1674b5;border-radius:18px;position:relative;overflow:hidden;display:grid;place-items:center}.cameraBox video{width:100%;height:100%;object-fit:cover}.scanLine{position:absolute;left:12%;right:12%;height:2px;top:50%;background:var(--orange);box-shadow:0 0 18px var(--orange);animation:scan 2s infinite}@keyframes scan{0%,100%{top:20%}50%{top:80%}}#cameraStatus{position:absolute;bottom:14px;background:#07172dcc;padding:8px 12px;border-radius:20px;font-size:12px}.demoControls{display:flex;flex-direction:column;gap:12px}.primaryBtn,.darkBtn,.fileBtn{border:0;border-radius:10px;padding:15px 17px;font-weight:800;font-size:14px;cursor:pointer}.primaryBtn,.fileBtn{background:linear-gradient(135deg,#ff7c00,#ffc148);color:#fff}.darkBtn{background:#0b2444;color:#fff;border:1px solid #1767a2}.fileBtn input{display:none}.resultBox{padding:22px;background:#091d38;border:1px solid #176ba6;border-radius:12px}.resultBox small{display:block;color:#6dbde9}.resultBox strong{display:block;margin-top:10px;font-size:18px;word-break:break-all}.demoNote{font-size:12px;color:#95a6ba}
.projects{border-top:1px solid #0b3559}.projectGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.projectGrid>div{padding:28px;border:1px solid #115d96;border-radius:15px;background:#07182f}.projectGrid b{font-size:32px;color:var(--orange)}.projectGrid h3{font:600 25px 'Barlow Condensed';margin:10px 0}.projectGrid p{color:var(--muted);line-height:1.7}.tech{background:#061326}.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.chips span{padding:12px 18px;border:1px solid #146da8;border-radius:25px;background:#091e3a}.about{text-align:center;max-width:900px}.about p{color:var(--muted);line-height:1.9}.contact{background:linear-gradient(180deg,#06152a,#030916);border-top:1px solid #0c3b63}.contact form{max-width:650px;margin:auto;display:grid;gap:12px}.contact input,.contact textarea{background:#07182e;border:1px solid #176ba6;color:#fff;padding:15px;border-radius:9px;font:inherit}.contact textarea{min-height:140px;resize:vertical}.mailHint{text-align:center;color:#8094ab;font-size:12px}footer{text-align:center;padding:30px;border-top:1px solid #0a3356;color:#8295ab;font-size:12px}
@media(max-width:1150px){nav{gap:14px}.solutionGrid{grid-template-columns:repeat(3,1fr)}.metrics{margin-left:3%;margin-right:3%}}@media(max-width:850px){header{height:68px}.menuBtn{display:block;margin-left:auto}.talk{display:none}nav{display:none;position:absolute;top:68px;left:0;right:0;background:#071326;flex-direction:column;height:auto;padding:15px}nav.open{display:flex}nav a{height:38px}.hero{height:auto;grid-template-columns:1fr;padding-bottom:0}.heroVisual{transform:scale(.8);transform-origin:top center;margin-bottom:-80px}.scannerDemo{grid-template-columns:1fr}.metrics{grid-template-columns:1fr 1fr}.metrics>div{padding:12px;border-bottom:1px solid #396d95}.projectGrid{grid-template-columns:1fr}}@media(max-width:560px){.brand img{width:160px}.officialLogo{height:210px}.heroCopy p{font-size:13px}.heroActions{flex-direction:column;gap:10px}.heroVisual{transform:scale(.48);height:250px;margin-left:-48%;margin-right:-48%;margin-bottom:-200px}.metrics{grid-template-columns:1fr}.metrics>div{border-right:0}.solutionGrid{grid-template-columns:1fr}.section{padding:55px 5%}.section h2{font-size:34px}.cameraBox{height:270px}}


/* =========================================================
   AJUSTE HERO MONSTEC – composición desktop similar al diseño
   de referencia, manteniendo logo y funciones existentes.
   ========================================================= */
@media (min-width: 851px){
  .hero{
    max-width:1536px;
    height:545px;
    grid-template-columns:36% 64%;
    padding:14px 3.5% 0;
    overflow:hidden;
  }

  .heroCopy{
    min-width:0;
    padding-top:4px;
  }

  .officialLogo{
    width:min(420px,100%);
    height:270px;
    margin:0 auto -2px;
    display:block;
    object-fit:contain;
    object-position:center;
  }

  .heroCopy p{
    margin:0 auto;
    max-width:480px;
    font-size:14px;
    line-height:1.8;
  }

  .heroActions{
    margin-top:20px;
    gap:22px;
  }

  .heroActions a{
    min-width:190px;
    height:48px;
    padding:0 22px;
    font-size:12px;
  }

  .heroVisual{
    height:505px;
    min-width:0;
    overflow:visible;
  }

  .cloud{
    right:26%;
    top:0;
    font-size:88px;
  }

  .cloud b{
    left:40px;
    top:19px;
    font-size:33px;
  }

  .netline{
    top:60px;
    left:20%;
    width:54%;
    height:96px;
  }

  .server{
    left:22%;
    top:68px;
    padding:13px;
    font-size:23px;
  }

  .laptop{
    left:0;
    top:165px;
    width:min(68%,500px);
    height:280px;
    transform:rotate(6deg) skew(-4deg);
  }

  .browser{height:27px}
  .screen{height:202px}
  .keyboard{height:50px}

  .device{
    right:2%;
    top:58px;
    width:190px;
    height:365px;
    padding:66px 15px 14px;
    border-radius:50px 50px 34px 34px;
  }

  .device .speaker{
    top:14px;
    left:42px;
    width:96px;
  }

  .deviceMark{
    width:49px;
    height:49px;
    font-size:23px;
  }

  .device strong{
    font-size:11px;
    margin:6px 0 12px;
  }

  .device button{
    padding:10px;
    margin:6px 0;
    font-size:8px;
  }

  .codesCard{
    right:24%;
    bottom:3px;
    width:205px;
    padding:14px 11px;
    transform:rotate(8deg);
  }
}

/* Ajuste para notebooks medianos, evitando que el móvil y notebook
   queden cortados como ocurría en la captura enviada. */
@media (min-width:851px) and (max-width:1320px){
  .hero{
    grid-template-columns:35% 65%;
    padding-left:3%;
    padding-right:3%;
  }

  .officialLogo{
    width:390px;
    height:255px;
  }

  .heroVisual{
    transform:scale(.94);
    transform-origin:top left;
    width:106.4%;
  }

  .heroCopy p{font-size:13px}
  .heroActions{gap:14px}
  .heroActions a{min-width:175px;padding:0 18px}
}

/* Pantallas grandes: más aire entre el bloque MONSTEC y el dashboard */
@media (min-width:1450px){
  .hero{
    grid-template-columns:38% 62%;
    padding-left:5%;
    padding-right:5%;
  }

  .laptop{width:510px}
  .device{width:210px;height:390px}
  .codesCard{width:215px}
}


/* =========================================================
   REFERENCIA FINAL HERO
   Composición ajustada directamente contra la imagen objetivo:
   bloque MONSTEC grande a la izquierda + notebook, lector móvil
   y tarjeta de códigos compactos y superpuestos a la derecha.
   ========================================================= */
@media (min-width: 851px){
  header{
    height:72px;
    padding:0 2.5%;
  }
  .brand img{width:180px;height:45px}
  nav{gap:24px}
  nav a{font-size:12px}
  .talk{padding:14px 24px;font-size:12px}

  .hero{
    position:relative;
    max-width:1536px;
    height:555px;
    grid-template-columns:42% 58%;
    padding:8px 4% 0;
    overflow:hidden;
    background:
      radial-gradient(circle at 78% 14%,#0e4d89 0,transparent 24%),
      linear-gradient(110deg,transparent 38%,#0b3b6b22 38.1%,transparent 38.3%);
  }

  .heroCopy{
    padding-top:0;
    text-align:center;
    z-index:3;
  }

  /* La imagen entregada contiene el logo MONSTEC original,
     por eso se muestra completa y sin recortarla. */
  .officialLogo{
    display:block;
    width:min(410px,100%);
    height:275px;
    margin:-2px auto -8px;
    object-fit:contain;
    object-position:center;
  }

  .heroCopy p{
    max-width:470px;
    margin:0 auto;
    font-size:14px;
    line-height:1.72;
    color:#c8d1dd;
  }

  .heroActions{
    margin-top:20px;
    gap:20px;
  }

  .heroActions a{
    min-width:175px;
    height:47px;
    padding:0 20px;
    border-radius:11px;
    font-size:12px;
  }

  .heroVisual{
    position:relative;
    height:510px;
    overflow:visible;
    margin-left:-5%;
  }

  /* Infraestructura cloud discreta detrás de los equipos */
  .cloud{
    right:24%;
    top:0;
    font-size:84px;
    opacity:.92;
  }
  .cloud b{left:38px;top:18px;font-size:30px}
  .netline{
    top:55px;
    left:19%;
    width:57%;
    height:105px;
  }
  .server{
    top:70px;
    left:21%;
    padding:12px;
    font-size:23px;
  }

  /* Notebook: más grande y bajo, como en la referencia */
  .laptop{
    left:0;
    top:158px;
    width:470px;
    height:280px;
    transform:rotate(6deg) skew(-4deg);
    transform-origin:center;
    z-index:2;
  }
  .browser{height:27px;padding:8px 14px}
  .screen{height:202px}
  .keyboard{height:51px}

  /* Lector móvil separado del notebook y completamente visible */
  .device{
    right:1%;
    top:58px;
    width:185px;
    height:355px;
    padding:62px 14px 12px;
    border-width:5px;
    border-radius:49px 49px 35px 35px;
    transform:rotate(6deg);
    z-index:6;
  }
  .device .speaker{top:14px;left:41px;width:94px}
  .device small{top:34px;font-size:7px}
  .deviceMark{width:48px;height:48px;font-size:22px}
  .device strong{font-size:10px;margin:6px 0 11px}
  .device button{padding:9px;margin:6px 0;font-size:8px}

  /* Tarjeta de capturas delante del notebook */
  .codesCard{
    right:21%;
    bottom:2px;
    width:205px;
    min-height:140px;
    padding:13px 11px;
    font-size:8px;
    transform:rotate(8deg);
    z-index:9;
  }
  .codesCard span{padding:7px}

  .metrics{
    max-width:1435px;
    margin:-1px auto 18px;
  }
}

/* 1200–1400px: composición densa, sin dejar grandes espacios vacíos */
@media (min-width:1100px) and (max-width:1400px){
  .hero{
    grid-template-columns:42% 58%;
    padding-left:3%;
    padding-right:3%;
  }
  .officialLogo{
    width:385px;
    height:260px;
  }
  .heroVisual{
    margin-left:-7%;
    transform:none;
  }
  .laptop{
    width:450px;
    top:164px;
  }
  .device{
    width:178px;
    height:345px;
    right:0;
  }
  .codesCard{
    right:20%;
    width:195px;
  }
  nav{gap:18px}
}

/* Tablet mantiene la página completa y pasa el hero a una sola columna. */
@media (max-width:850px){
  .hero{
    padding-top:10px;
  }
  .officialLogo{
    background:transparent;
  }
}


/* =========================================================
   MODO REFERENCIA EXACTA
   La cabecera/hero superior usa la imagen de referencia original
   proporcionada por el usuario. Se mantienen todas las secciones
   funcionales debajo: laboratorio, lector de códigos y contacto.
   ========================================================= */
.referenceHome{
  display:block;
  position:relative;
  width:100%;
  max-width:1536px;
  margin:0 auto;
  line-height:0;
  background:#061426;
}
.referenceHome>img{
  display:block;
  width:100%;
  height:auto;
}
.referenceHotspots{position:absolute;inset:0;line-height:normal}
.hs{position:absolute;display:block;border-radius:8px}
.hs:hover{outline:1px solid #ff921133;background:#ff92110b}

/* Áreas clicables ajustadas a la imagen real MONSTEC (944 px de ancho).
   Cada botón del menú coincide con su posición visual original. */
.hs.inicio{left:2.2%;top:0;width:9.2%;height:11.5%}
.hs.soluciones{left:11.8%;top:0;width:11.0%;height:11.5%}
.hs.laboratorio{left:23.6%;top:0;width:11.2%;height:11.5%}
.hs.proyectos{left:35.7%;top:0;width:10.2%;height:11.5%}
.hs.tecnologias{left:47.7%;top:0;width:10.7%;height:11.5%}
.hs.nosotros{left:59.8%;top:0;width:9.5%;height:11.5%}
.hs.contacto{left:70.6%;top:0;width:10.2%;height:11.5%}
.hs.hablemos{left:83.2%;top:0;width:15.0%;height:11.5%}

/* Botones del hero */
.hs.solucionesBtn{left:6.2%;top:56.8%;width:18.2%;height:8.2%}
.hs.demoBtn{left:26.0%;top:56.8%;width:12.0%;height:8.2%}

/* Los enlaces siempre quedan por encima de la imagen. */
.referenceHotspots{z-index:10}
html{scroll-behavior:smooth}
section{scroll-margin-top:18px}

/* Desktop: se muestra exactamente la composición de referencia. */
@media (min-width:851px){
  body>header{display:none}
  main>.hero{display:none}
  .metrics{display:none}

  /* Las soluciones reales siguen disponibles después de la imagen
     para mantener contenido y navegación de la aplicación. */
  #soluciones{padding-top:55px}
}

/* En móvil se conserva la página HTML responsive real. */
@media (max-width:850px){
  .referenceHome{display:none}
  body>header{display:flex}
  main>.hero{display:grid}
  .metrics{display:grid}
}

/* ===== MONSTEC Professional V2 ===== */
.professionalStatus{max-width:1440px;margin:0 auto;padding:0 3% 20px}.statusInner{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:1px;border:1px solid #155886;border-radius:14px;overflow:hidden;background:#155886;box-shadow:0 18px 40px #0005}.statusInner>div{background:linear-gradient(135deg,#091e38,#071426);padding:18px 22px;min-height:84px}.statusLive{display:flex;align-items:center;gap:11px;flex-wrap:wrap}.statusLive>span{width:10px;height:10px;border-radius:50%;background:#38df8c;box-shadow:0 0 16px #38df8c;animation:pulse 1.8s infinite}.statusLive strong{font-size:15px}.statusLive small{display:block;width:100%;padding-left:21px;color:#87a1b8;font-size:11px}.statusItem b{display:block;color:#42c4ff;font-size:20px}.statusItem span{font-size:11px;color:#9eb1c5;display:block;margin-top:5px}@keyframes pulse{50%{transform:scale(.75);opacity:.5}}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}.reveal.show{opacity:1;transform:none}.cardTag{margin-top:auto;font-size:9px;letter-spacing:.5px;color:#66c9ff;border:1px solid #155783;border-radius:20px;padding:7px 10px;background:#071a31}
.labConsole{max-width:1000px;margin:24px auto 0;border:1px solid #155f95;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#07182e,#05101f);box-shadow:0 18px 35px #0006}.consoleHeader{padding:13px 18px;border-bottom:1px solid #123f65;font-size:12px;font-weight:800;letter-spacing:1px}.consoleHeader small{float:right;color:#6d8fae;font-weight:500;letter-spacing:0}.liveDot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#39df91;box-shadow:0 0 12px #39df91;margin-right:8px}.labStats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #123f65}.labStats>div{padding:18px;border-right:1px solid #123f65}.labStats>div:last-child{border:0}.labStats small{display:block;color:#7191ad;font-size:9px;letter-spacing:1px}.labStats strong{display:block;margin-top:7px;font-size:15px;color:#dfeaf4}.historyTitle{padding:14px 18px 6px;color:#6fa9cf;font-size:10px;letter-spacing:1.5px;font-weight:800}.barcodeHistory{padding:8px 18px 18px;display:flex;flex-direction:column;gap:8px;min-height:70px}.barcodeHistory>span{color:#6e8499;font-size:12px}.historyRow{display:grid;grid-template-columns:1fr auto auto;gap:14px;padding:10px 12px;background:#0a213d;border-radius:8px;font-size:12px}.historyRow small{color:#6e98b7}
.projectGrid .projectCard{position:relative;padding:27px;border:1px solid #115d96;border-radius:16px;background:linear-gradient(145deg,#0a203c,#061326);overflow:hidden;transition:.25s}.projectCard:before{content:"";position:absolute;width:140px;height:140px;border-radius:50%;right:-60px;top:-70px;background:#0b7cc318}.projectCard:hover{transform:translateY(-7px);border-color:#219ee2;box-shadow:0 22px 38px #0008}.projectTop{display:flex;align-items:center;justify-content:space-between}.projectTop b{font-size:30px;color:var(--orange)}.projectTop span{font-size:10px;color:#5fc5fb;border:1px solid #176b9f;border-radius:20px;padding:7px 10px}.projectCard h3{font:600 26px 'Barlow Condensed';margin:14px 0 9px}.projectCard p{color:var(--muted);line-height:1.65}.projectCard ul{list-style:none;padding:0;margin:18px 0}.projectCard li{font-size:12px;color:#b9c9d9;margin:9px 0}.projectCard li:before{content:"✓";color:#3ac4ff;margin-right:9px}.projectCard a{display:inline-block;color:#ffad43;text-decoration:none;font-weight:800;font-size:12px;margin-top:8px}
.techCaption{max-width:1100px;margin:38px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.techCaption>div{padding:20px;border-left:2px solid #1e9fdc;background:#08192e}.techCaption strong{display:block;font-size:14px}.techCaption span{display:block;color:#93a8bb;font-size:12px;line-height:1.6;margin-top:7px}
.contactLayout{max-width:1050px;margin:auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:26px;align-items:start}.contactInfo{padding:28px;border:1px solid #135783;border-radius:16px;background:linear-gradient(145deg,#09213e,#061326)}.contactInfo>span{font-size:10px;letter-spacing:2px;color:#ff9b22;font-weight:800}.contactInfo h3{font:600 30px 'Barlow Condensed';margin:12px 0}.contactInfo p{color:#9eb1c4;line-height:1.7;font-size:13px}.contactMini{display:flex;gap:10px;margin-top:14px;font-size:12px;color:#c3d0dc}.contactMini b{color:#39c7ff}.contact #contactForm{max-width:none}.formTwo{display:grid;grid-template-columns:1fr 1fr;gap:12px}.solutionChecks{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:4px 0}.solutionChecks label{font-size:11px;color:#b5c4d2;cursor:pointer}.solutionChecks input{accent-color:#ff920d;margin-right:5px}
.professionalFooter{background:#030a16;border-top:1px solid #0d3e63;padding:50px 5% 0}.footerGrid{max-width:1250px;margin:auto;display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:38px}.footerGrid img{width:180px;height:50px;object-fit:contain;object-position:left}.footerGrid p{font-size:12px;color:#849aae;line-height:1.7;max-width:320px}.footerGrid h4{font-size:10px;color:#55c3ff;letter-spacing:1.5px;margin:10px 0 16px}.footerGrid a,.footerGrid span,.footerGrid small{display:block;color:#9bb0c2;text-decoration:none;font-size:12px;margin:10px 0}.footerGrid a:hover{color:#ff9d26}.footerBottom{max-width:1250px;margin:35px auto 0;padding:18px 0;border-top:1px solid #0b2d49;color:#647b90;font-size:11px;display:flex;justify-content:space-between}
@media(max-width:850px){.statusInner{grid-template-columns:1fr 1fr}.statusLive{grid-column:1/-1}.labStats{grid-template-columns:1fr}.labStats>div{border-right:0;border-bottom:1px solid #123f65}.labStats>div:last-child{border-bottom:0}.contactLayout,.footerGrid,.techCaption{grid-template-columns:1fr}.formTwo{grid-template-columns:1fr}.solutionChecks{grid-template-columns:1fr 1fr}.footerBottom{flex-direction:column;gap:8px}}@media(max-width:560px){.statusInner{grid-template-columns:1fr}.statusLive{grid-column:auto}.solutionChecks{grid-template-columns:1fr}.historyRow{grid-template-columns:1fr}.professionalStatus{padding-left:5%;padding-right:5%}}
/* ===== Producción / Hosting ===== */
.hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important}
.formSuccess{color:#5ee7a1!important}.formError{color:#ff8a8a!important}
.formLoading{opacity:.65;pointer-events:none}
.projectPage{min-height:100vh;background:radial-gradient(circle at 80% 10%,#113b621a,transparent 35%),#061426;color:#eaf3fb}.projectNav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:12px 6%;background:#061426f2;border-bottom:1px solid #16496d;backdrop-filter:blur(12px)}.projectNav img{height:42px;width:auto}.projectNav a{color:#dce8f2;text-decoration:none;font-size:13px}.projectNav .back{border:1px solid #ff941d;border-radius:9px;padding:10px 15px;color:#ffab45}.projectHero{max-width:1100px;margin:0 auto;padding:90px 6% 55px}.projectKicker{color:#ff9a22;letter-spacing:2px;font-size:11px;font-weight:800}.projectHero h1{font:700 clamp(44px,8vw,86px) 'Barlow Condensed';margin:14px 0;line-height:.95}.projectHero p{max-width:720px;color:#a9bdcf;font-size:18px;line-height:1.7}.projectPills{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.projectPills span{border:1px solid #196394;background:#08203a;border-radius:20px;padding:9px 14px;color:#70cfff;font-size:12px}.projectContent{max-width:1100px;margin:auto;padding:20px 6% 80px;display:grid;gap:22px;grid-template-columns:1.15fr .85fr}.projectPanel{padding:28px;border:1px solid #124c76;border-radius:16px;background:linear-gradient(145deg,#09203a,#061224)}.projectPanel h2{font:600 32px 'Barlow Condensed';margin:0 0 14px}.projectPanel p,.projectPanel li{color:#a6b9ca;line-height:1.75;font-size:14px}.projectPanel ul{padding-left:18px}.projectCTA{margin:30px 6% 80px;padding:32px;border:1px solid #f58a151f;border-radius:16px;background:linear-gradient(120deg,#132b45,#09182b);display:flex;align-items:center;justify-content:space-between;gap:20px}.projectCTA h2{margin:0;font:600 34px 'Barlow Condensed'}.projectCTA a{background:linear-gradient(90deg,#ff8611,#ffc14f);padding:14px 22px;border-radius:10px;color:#071426;text-decoration:none;font-weight:800;white-space:nowrap}
@media(max-width:700px){.projectContent{grid-template-columns:1fr}.projectCTA{flex-direction:column;align-items:flex-start}.projectNav{padding:10px 5%}.projectHero{padding-top:60px}}
/* Mejoras táctiles para Android y terminales industriales */
@media(max-width:850px){button,.primaryBtn,.darkBtn,.fileBtn,.talk,.heroActions a,.hs{min-height:44px;touch-action:manipulation}.scannerDemo{gap:16px}.cameraBox{min-height:260px}.solutionGrid article,.projectCard{min-height:190px}.referenceHotspots{pointer-events:auto}}


/* ===== MONSTEC SHOWCASE ===== */
.monstecShowcase{padding:80px 5%;position:relative;overflow:hidden;background:radial-gradient(circle at 15% 20%,#0b4b7624,transparent 35%),radial-gradient(circle at 85% 75%,#ff8a1512,transparent 32%)}
.showcaseHead{max-width:1050px;margin:0 auto 28px;text-align:center}
.showcaseHead span{font-size:10px;letter-spacing:2px;font-weight:800;color:#ff9d26}
.showcaseHead h2{margin:8px 0;font-size:clamp(32px,5vw,58px)}
.showcaseHead p{margin:0 auto;color:#93a9bd;max-width:720px;line-height:1.7}
.showcaseFrame{max-width:1450px;margin:auto;padding:9px;border:1px solid #155886;border-radius:20px;background:linear-gradient(145deg,#081b31,#030c18);box-shadow:0 28px 70px #000b,0 0 45px #0b83c51a}
.showcaseFrame img{display:block;width:100%;height:auto;border-radius:13px}
.showcaseGrid{max-width:1200px;margin:22px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.showcaseGrid article{padding:22px;border:1px solid #124d77;border-radius:15px;background:linear-gradient(145deg,#09203a,#061224)}
.showcaseGrid b{display:block;color:#ff9d26;font-size:10px;letter-spacing:1.5px;margin-bottom:10px}
.showcaseGrid h3{margin:0;color:#eef7ff;font-size:17px}
.showcaseGrid p{color:#94a9bc;font-size:12px;line-height:1.65;margin:8px 0 0}
.showcaseButton{text-align:center;margin-top:28px}
.showcaseButton a{display:inline-block;padding:14px 24px;border-radius:9px;background:linear-gradient(90deg,#ff8611,#ffc14f);color:#071426;text-decoration:none;font-weight:800;font-size:12px}
@media(max-width:950px){.showcaseGrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.monstecShowcase{padding:55px 4%}.showcaseFrame{padding:5px;border-radius:13px}.showcaseGrid{grid-template-columns:1fr}}