/* ═══════════════════════════════════════════════════════════
   VARIABLES & RESET
════════════════════════════════════════════════════════════ */
:root {
  --navy:    #002B6B;
  --navy2:   #001A45;
  --cyan:    #0099CC;
  --cyan2:   #00C5E8;
  --orange:  #FF5500;
  --white:   #FFFFFF;
  --offwhite:#F4F8FC;
  --text:    #1A2340;
  --muted:   #6B7A99;
  --border:  rgba(0,43,107,0.1);
  --shadow:  0 8px 40px rgba(0,43,107,0.12);
  --shadow2: 0 20px 60px rgba(0,43,107,0.18);
  --font-h:  'Century Gothic','CenturyGothic','Futura','Trebuchet MS','Segoe UI',sans-serif;
  --font-b:  'Montserrat',sans-serif;
  --r:       12px;
  --r2:      20px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;touch-action:inherit}
html{
  scroll-behavior:smooth;
  font-size:16px;
  scroll-padding-top:82px;
  touch-action:pan-x pan-y;
  -webkit-text-size-adjust:100%;  /* evita que iOS ajuste fuentes al rotar */
  text-size-adjust:100%;
}
body{
  background:#FFFFFF;
  color:var(--text);
  font-family:var(--font-b);
  overflow-x:clip; /* clip no crea scroll-context — position:fixed funciona en iOS */
  cursor:none;
  overscroll-behavior-y:none; /* evita pull-to-refresh accidental en Android */
}
/* Elimina el flash azul al tocar en iOS/Android */
a,button,input,select,textarea,[role="button"]{
  -webkit-tap-highlight-color:transparent;
}
/* pan-x pan-y: elimina delay de taps Y bloquea pinch zoom (manipulation lo permite) */
a,button,.pf-btn,.btab,.prod-btn,.prod-btn-o,.btn-p,.btn-o,.btn-send,.wa-branch-btn{
  touch-action:pan-x pan-y;
}
#adm-overlay,#adm-overlay *{cursor:auto!important;}
img{max-width:100%;display:block}
canvas{max-width:100%;}
a{text-decoration:none;color:inherit}

/* dot-grid background texture */
body::before{
  content:'';
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle,rgba(0,43,107,0.06) 1px,transparent 1px);
  background-size:28px 28px;
}

/* ── CURSOR ── */
#cur{position:fixed;display:none;width:10px;height:10px;background:var(--cyan);border-radius:50%;
  pointer-events:none;z-index:9999;transform:translate(-50%,-50%);
  transition:transform .1s;box-shadow:0 0 12px var(--cyan)}
#cur-ring{position:fixed;display:none;width:34px;height:34px;border:2px solid var(--cyan);
  border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);
  transition:all .22s cubic-bezier(.2,1,.3,1);opacity:.5}

/* ═══════════════════════════════════════════════════════════
   NAV
════════════════════════════════════════════════════════════ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 60px;height:72px;
  background:rgba(255,255,255,0.92);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s;
}
nav.scrolled{box-shadow:var(--shadow)}
.nav-logo{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;flex-shrink:0;
}
.nav-logo>img{height:46px!important;width:auto!important;max-width:none;object-fit:contain;display:block;flex-shrink:0;}
.nav-logo-img{height:40px;width:auto;object-fit:contain;display:block;}
.nav-links{display:flex;gap:0;list-style:none}
.nav-links a{
  display:block;padding:0 20px;
  font-family:var(--font-b);font-size:.8rem;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);
  line-height:72px;
  position:relative;transition:color .25s;
}
.nav-links a::after{
  content:'';position:absolute;bottom:0;left:20px;right:20px;
  height:2px;background:var(--cyan);
  transform:scaleX(0);transform-origin:left;transition:transform .3s;
}
.nav-links a:hover,
.nav-links a.active{color:var(--navy)}
.nav-links a:hover::after,
.nav-links a.active::after{transform:scaleX(1)}
.nav-cta{
  background:#25D366;
  color:#fff;padding:10px 20px;border-radius:6px;
  font-family:var(--font-b);font-size:.78rem;font-weight:700;
  letter-spacing:.02em;text-decoration:none;
  display:flex;align-items:center;gap:7px;
  transition:box-shadow .3s,transform .2s,background .2s;
  white-space:nowrap;
}
.nav-cta:hover{background:#1ebe5d;box-shadow:0 4px 20px rgba(37,211,102,.4);transform:translateY(-1px)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.hamburger span{display:block;width:24px;height:2px;background:var(--navy);transition:all .3s;border-radius:2px}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ═══════════════════════════════════════════════════════════
   SECTION COMMONS
════════════════════════════════════════════════════════════ */
section{position:relative;z-index:1}
section[id]{scroll-margin-top:80px}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.sec-pad{padding:90px 0}
.sec-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-b);font-size:.7rem;font-weight:700;
  letter-spacing:4px;text-transform:uppercase;
  color:var(--cyan);margin-bottom:14px;
}
.sec-tag::before{content:'';width:28px;height:2px;background:var(--cyan)}
.sec-title{
  font-family:var(--font-h);font-weight:700;
  font-size:clamp(2rem,3.5vw,3.2rem);
  line-height:1.1;color:var(--navy);margin-bottom:18px;
}
.sec-title span{color:var(--cyan)}
.sec-desc{
  font-family:var(--font-b);font-size:1rem;
  color:var(--muted);line-height:1.9;max-width:560px;
}
.divider{
  width:100%;height:1px;
  background:linear-gradient(to right,transparent,var(--border),var(--border),transparent);
}
/* reveal */
.rev{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .8s ease}
.rev.vis{opacity:1;transform:none}
.rev-l{opacity:0;transform:translateX(-36px);transition:opacity .8s ease,transform .8s ease}
.rev-l.vis{opacity:1;transform:none}
.rev-r{opacity:0;transform:translateX(36px);transition:opacity .8s ease,transform .8s ease}
.rev-r.vis{opacity:1;transform:none}

/* ═══════════════════════════════════════════════════════════
   HERO / PRESENTACIÓN
════════════════════════════════════════════════════════════ */
#presentacion{
  min-height:100vh;
  display:flex;align-items:center;
  background:linear-gradient(160deg,#FFFFFF 0%,#EBF4FF 60%,#D6ECFF 100%);
  overflow:hidden;
  padding-top:30px;
}
#hero-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;
}
.hero-wrap{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;
  gap:60px;align-items:center;
  max-width:1240px;margin:0 auto;padding:0 40px;
}
.hero-label{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(0,153,204,.1);border:1px solid rgba(0,153,204,.2);
  border-radius:30px;padding:6px 16px;
  font-size:.7rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:var(--cyan);margin-bottom:24px;
  opacity:0;transform:translateY(12px);
  transition:opacity .6s,transform .6s;
}
.hero-label.vis{opacity:1;transform:translateY(0)}
.hero-label::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--cyan2);animation:pulse-dot 2s infinite;
}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(1.8)}}
.hero-h1{
  font-family:var(--font-h);font-weight:700;
  font-size:clamp(2.6rem,5vw,4.5rem);
  line-height:.95;letter-spacing:-1px;
  color:var(--navy);margin-bottom:22px;
}
.hero-h1 em{
  font-style:normal;
  background:linear-gradient(90deg,var(--cyan),var(--cyan2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-sub{
  font-size:1rem;color:var(--muted);line-height:1.9;
  max-width:480px;margin-bottom:40px;
}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.btn-p{
  background:linear-gradient(135deg,var(--navy),var(--cyan));
  color:#fff;padding:15px 32px;border-radius:8px;
  font-family:var(--font-b);font-weight:700;font-size:.82rem;
  letter-spacing:1.2px;text-transform:uppercase;
  transition:all .3s;box-shadow:0 4px 20px rgba(0,43,107,.2);
  display:inline-flex;align-items:center;gap:8px;
}
.btn-p:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,153,204,.35)}
.btn-o{
  background:transparent;color:var(--navy);
  padding:15px 32px;border-radius:8px;
  font-family:var(--font-b);font-weight:700;font-size:.82rem;
  letter-spacing:1.2px;text-transform:uppercase;
  border:2px solid var(--border);transition:all .3s;
}
.btn-o:hover{border-color:var(--cyan);color:var(--cyan)}
.hero-stats{
  display:flex;gap:32px;margin-top:50px;flex-wrap:wrap;
}
.hstat{
  padding:16px 20px;background:rgba(255,255,255,.8);
  border:1px solid var(--border);border-radius:var(--r);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:120px;
  transition:box-shadow .3s;
}
.hstat:hover{box-shadow:var(--shadow)}
.hstat-n{
  font-family:var(--font-h);font-weight:700;font-size:2rem;
  background:linear-gradient(135deg,var(--navy),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  line-height:1;
}
.hstat-l{font-size:.68rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* 3D Face Scanner visual */
.hero-visual{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  height:520px;
}
.scan-stage{
  position:relative;width:380px;height:480px;
  perspective:800px;
}
.face-frame{
  position:absolute;inset:20px;
  border:1.5px solid rgba(0,153,204,.25);
  border-radius:50% / 45%;
}
.face-frame::before,
.face-frame::after{
  content:'';position:absolute;
  background:linear-gradient(to right,transparent,var(--cyan),transparent);
}
.face-frame::before{
  top:var(--scan-y,20%);left:0;right:0;height:2px;
  box-shadow:0 0 12px var(--cyan);
  animation:facecan 3s linear infinite;
}
@keyframes facecan{0%{top:5%}100%{top:95%}}
.face-frame::after{
  top:0;bottom:0;left:calc(50% - 1px);width:2px;
  background:linear-gradient(to bottom,transparent,rgba(0,153,204,.15),transparent);
}
/* Corner brackets */
.scan-stage .c{
  position:absolute;width:22px;height:22px;
  border-color:var(--cyan);border-style:solid;
}
.scan-stage .c.tl{top:16px;left:16px;border-width:2px 0 0 2px}
.scan-stage .c.tr{top:16px;right:16px;border-width:2px 2px 0 0}
.scan-stage .c.bl{bottom:16px;left:16px;border-width:0 0 2px 2px}
.scan-stage .c.br{bottom:16px;right:16px;border-width:0 2px 2px 0}
/* Landmark dots */
.lm{
  position:absolute;width:5px;height:5px;
  background:var(--cyan);border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 8px var(--cyan);
  animation:lm-blink 2s infinite;
}
@keyframes lm-blink{0%,100%{opacity:1}50%{opacity:.2}}
/* Fingerprint ring */
.fp-ring{
  position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);
  width:100px;height:100px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(0,43,107,.08),rgba(0,153,204,.12));
  border:1px solid rgba(0,153,204,.3);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 30px rgba(0,153,204,.15);
}
.fp-icon{font-size:32px}
/* Data readouts */
.readout{
  position:absolute;right:-60px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border:1px solid rgba(0,153,204,.2);
  border-radius:8px;padding:10px 14px;
  font-family:var(--font-b);font-size:.65rem;
  color:var(--navy);line-height:1.6;
  box-shadow:var(--shadow);
  white-space:nowrap;
}
.readout.r1{top:15%}
.readout.r2{top:45%}
.readout.r3{top:70%}
.readout-dot{
  display:inline-block;width:6px;height:6px;
  background:var(--cyan2);border-radius:50%;
  margin-right:6px;vertical-align:middle;
  animation:pulse-dot 1.5s infinite;
}

/* ═══════════════════════════════════════════════════════════
   INSIGHT
════════════════════════════════════════════════════════════ */
#insight{background:var(--offwhite);padding:110px 0 80px}
.insight-header{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:50px;flex-wrap:wrap;gap:20px;
}
@media(max-width:768px){.insight-header{margin-bottom:28px;}}
@media(max-width:480px){.insight-header{margin-bottom:20px;}}
.insight-header .left{}
.btn-add{
  background:linear-gradient(135deg,var(--navy),var(--cyan));
  color:#fff;padding:12px 24px;border-radius:8px;
  font-family:var(--font-b);font-size:.78rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  border:none;cursor:pointer;transition:all .3s;
  display:flex;align-items:center;gap:8px;
}
.btn-add:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,153,204,.3)}
.news-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.news-card{
  background:#fff;border-radius:var(--r2);overflow:hidden;
  border:1px solid var(--border);
  transition:transform .4s,box-shadow .4s;
  position:relative;
}
.news-card:hover{transform:translateY(-8px);box-shadow:var(--shadow2)}
.news-card.featured{grid-column:span 2}
.news-img{
  width:100%;height:200px;overflow:hidden;
  position:relative;background:#D6ECFF;
}
.news-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.news-card:hover .news-img img{transform:scale(1.06)}
.news-img.featured-img{height:260px}
.news-cat{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--navy);color:#fff;
  font-size:.62rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  padding:5px 12px;border-radius:20px;
}
.news-body{padding:24px}
.news-date{
  font-size:.7rem;color:var(--muted);font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;
}
.news-title{
  font-family:var(--font-h);font-weight:700;
  font-size:1.05rem;color:var(--navy);
  line-height:1.3;margin-bottom:10px;
}
.news-text{font-size:.88rem;color:var(--muted);line-height:1.7;margin-bottom:16px}
.news-link{
  font-size:.75rem;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--cyan);
  display:flex;align-items:center;gap:6px;transition:gap .3s;
}
.news-link:hover{gap:10px}
.news-delete{
  position:absolute;top:12px;right:12px;z-index:10;
  background:rgba(255,85,0,.1);border:1px solid rgba(255,85,0,.3);
  color:var(--orange);width:28px;height:28px;border-radius:50%;
  font-size:12px;cursor:pointer;display:none;align-items:center;justify-content:center;
  border:none;transition:background .2s;
}
.news-delete:hover{background:var(--orange);color:#fff}
.admin-mode .news-delete{display:flex}

/* Modal */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,27,70,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{
  background:#fff;border-radius:var(--r2);
  padding:40px;width:90%;max-width:540px;
  max-height:90vh;overflow-y:auto;
  transform:scale(.95);transition:transform .3s;
}
.modal-overlay.open .modal{transform:scale(1)}
.modal h3{
  font-family:var(--font-h);font-weight:700;font-size:1.5rem;
  color:var(--navy);margin-bottom:24px;
}
.form-g{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.form-g label{
  font-size:.72rem;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--muted);
}
.form-g input,.form-g textarea,.form-g select{
  padding:13px 16px;border:1.5px solid var(--border);border-radius:8px;
  font-family:var(--font-b);font-size:.9rem;color:var(--text);
  outline:none;transition:border-color .3s,box-shadow .3s;
  background:#fff;resize:none;
}
.form-g input:focus,.form-g textarea:focus,.form-g select:focus{
  border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,153,204,.1);
}
.modal-btns{display:flex;gap:12px;justify-content:flex-end;margin-top:8px}
.btn-cancel{
  background:transparent;border:1.5px solid var(--border);
  padding:11px 22px;border-radius:8px;
  font-family:var(--font-b);font-size:.82rem;font-weight:600;
  cursor:pointer;color:var(--muted);transition:all .2s;
}
.btn-cancel:hover{border-color:var(--muted);color:var(--text)}
.btn-save{
  background:linear-gradient(135deg,var(--navy),var(--cyan));
  color:#fff;padding:12px 28px;border-radius:8px;
  font-family:var(--font-b);font-size:.82rem;font-weight:700;
  border:none;cursor:pointer;transition:all .3s;
}
.btn-save:hover{box-shadow:0 4px 16px rgba(0,153,204,.3)}

/* ═══════════════════════════════════════════════════════════
   PRODUCTOS — 360 VIEWER
════════════════════════════════════════════════════════════ */
#productos{background:#fff;padding:90px 0}
.products-filter{
  display:flex;gap:12px;margin-bottom:48px;flex-wrap:wrap;
}
.pf-btn{
  padding:9px 22px;border-radius:30px;
  font-family:var(--font-b);font-size:.78rem;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;
  border:1.5px solid var(--border);color:var(--muted);
  cursor:pointer;background:transparent;transition:all .3s;
}
.pf-btn.active,.pf-btn:hover{
  background:var(--navy);color:#fff;border-color:var(--navy);
}
.prod-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:32px;
}
.prod-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--r2);
  overflow:hidden;
  position:relative;
  transform-style:preserve-3d;
  will-change:transform;
  transition:box-shadow .5s ease, transform .08s linear;
  cursor:default;
}
/* Tilt glare overlay */
.tilt-glare{
  position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:15;overflow:hidden;
  opacity:0;transition:opacity .4s;
}
.tilt-glare-inner{
  position:absolute;
  width:200%;height:200%;
  top:-50%;left:-50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18) 0%, transparent 60%);
  pointer-events:none;
}
/* Floating layers depth */
.prod-card 
.prod-card .prod-info{
  transform:translateZ(4px);
  transition:transform .08s linear;
}
/* Dynamic shadow handled by JS */

/* Subtle shine on card border while tilting */

/* Card top color bar appears on tilt */
.prod-card::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:3px;z-index:20;border-radius:var(--r2) var(--r2) 0 0;
  background:linear-gradient(90deg,var(--cyan),var(--blue));
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.2,1,.3,1);
}
.prod-card.is-tilting::before{transform:scaleX(1);}
.prod-card::after{content:none;}

/* 360 viewer */





.v-face img{width:100%;height:100%;object-fit:contain}









.viewer-360-btn:hover{background:var(--cyan);color:#fff;border-color:var(--cyan)}
.prod-info{padding:28px}
.prod-cat{
  font-size:.65rem;font-weight:700;letter-spacing:3px;
  text-transform:uppercase;color:var(--cyan);margin-bottom:10px;
  text-align:center;
}
.prod-name{
  font-family:var(--font-h);font-weight:700;font-size:1.2rem;
  color:var(--navy);margin-bottom:12px;
  text-align:center;
}
.prod-desc{font-size:.88rem;color:var(--muted);line-height:1.7;margin-bottom:18px;text-align:center;}
.prod-specs{
  display:flex;flex-direction:column;gap:8px;margin-bottom:22px;
  background:rgba(0,43,107,.035);
  border-radius:10px;
  padding:14px 16px;
}
.spec-row{
  display:flex;align-items:center;gap:10px;
  font-size:.82rem;
}
.spec-icon{
  width:24px;height:24px;border-radius:6px;flex-shrink:0;
  background:rgba(0,153,204,.1);
  display:flex;align-items:center;justify-content:center;font-size:11px;
}
.spec-key{font-weight:600;color:var(--text);min-width:110px;}
.spec-val{color:var(--muted)}
.prod-footer{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  justify-content:center;
}
.prod-btn{
  background:linear-gradient(135deg,var(--navy),var(--cyan));
  color:#fff;padding:11px 22px;border-radius:8px;
  font-family:var(--font-b);font-size:.78rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  border:none;cursor:pointer;transition:all .3s;
  display:flex;align-items:center;gap:6px;
}
.prod-btn:hover{box-shadow:0 4px 16px rgba(0,153,204,.3);transform:translateY(-2px)}
.prod-btn-o{
  background:transparent;color:var(--navy);
  padding:11px 22px;border-radius:8px;
  font-family:var(--font-b);font-size:.78rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  border:1.5px solid var(--border);cursor:pointer;transition:all .3s;
}
.prod-btn-o:hover{border-color:var(--cyan);color:var(--cyan)}

/* ═══════════════════════════════════════════════════════════
   NOSOTROS
════════════════════════════════════════════════════════════ */
#nosotros{
  background:linear-gradient(160deg,var(--offwhite) 0%,#EBF4FF 100%);
  padding:90px 0;overflow:hidden;
}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.about-imgs{
  position:relative;height:540px;
}
.ab-img{
  position:absolute;border-radius:var(--r2);overflow:hidden;
  box-shadow:var(--shadow2);transition:transform .5s;
}
.ab-img img{width:100%;height:100%;object-fit:cover}
.ab-img:hover{transform:scale(1.02)}
.ab-img.main{
  width:75%;height:70%;top:0;left:0;
  border:4px solid #fff;
}
.ab-img.sec{
  width:60%;height:55%;bottom:0;right:0;
  border:4px solid #fff;
}
.ab-badge{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);z-index:10;
  background:linear-gradient(135deg,var(--navy),var(--cyan));
  color:#fff;border-radius:16px;padding:18px 20px;
  text-align:center;box-shadow:0 10px 30px rgba(0,43,107,.3);
  white-space:nowrap;
  border:3px solid #fff;
}
.ab-badge-n{
  font-family:var(--font-h);font-weight:700;font-size:2rem;line-height:1;
}
.ab-badge-l{font-size:.65rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;opacity:.8;margin-top:2px}
.about-values{display:flex;flex-direction:column;gap:18px;margin:30px 0}
.av-item{
  display:flex;align-items:flex-start;gap:16px;
  padding:18px;background:#fff;border-radius:var(--r);
  border:1px solid var(--border);
  transition:box-shadow .3s,border-color .3s;
}
.av-item:hover{box-shadow:var(--shadow);border-color:rgba(0,153,204,.25)}
.av-ico{
  width:42px;height:42px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(0,43,107,.08),rgba(0,153,204,.12));
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.av-body h4{
  font-family:var(--font-h);font-weight:700;font-size:.95rem;
  color:var(--navy);margin-bottom:4px;
}
.av-body p{font-size:.84rem;color:var(--muted);line-height:1.6}

/* Team */
.team-section{margin-top:90px}
.team-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:24px;margin-top:40px;
}
.team-card{
  background:#fff;border-radius:var(--r2);overflow:hidden;
  border:1px solid var(--border);
  transition:transform .4s,box-shadow .4s;
  text-align:center;
}
.team-card:hover{transform:translateY(-8px);box-shadow:var(--shadow2)}
.team-img{
  width:100%;height:200px;overflow:hidden;
  position:relative;
  background:linear-gradient(135deg,#D6ECFF,#EBF4FF);
}
.team-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.team-card:hover .team-img img{transform:scale(1.08)}
.team-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,43,107,.7),transparent);
  opacity:0;transition:opacity .4s;
  display:flex;align-items:flex-end;padding:16px;
}
.team-card:hover .team-overlay{opacity:1}
.team-social{display:flex;gap:8px}
.ts-link{
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.2);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:12px;font-weight:700;transition:background .2s;
}
.ts-link:hover{background:var(--cyan)}
.team-body{padding:18px 16px}
.team-name{
  font-family:var(--font-h);font-weight:700;font-size:.95rem;
  color:var(--navy);margin-bottom:4px;
}
.team-role{font-size:.72rem;color:var(--cyan);font-weight:600;letter-spacing:1px;text-transform:uppercase}

/* Testimonials */
.testi-section{
  margin-top:50px;padding:60px 50px;
  background:var(--navy);border-radius:var(--r2);
  position:relative;overflow:hidden;
}
.testi-section::before{
  content:'';position:absolute;top:-100px;right:-100px;
  width:400px;height:400px;border-radius:50%;
  background:rgba(0,153,204,.1);
}
.testi-section::after{
  content:'';position:absolute;bottom:-80px;left:-80px;
  width:300px;height:300px;border-radius:50%;
  background:rgba(0,197,232,.07);
}
.testi-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:24px;margin-top:40px;
  position:relative;z-index:1;
}
.testi-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r2);padding:28px;
  transition:background .3s,transform .3s;
}
.testi-card:hover{background:rgba(255,255,255,.1);transform:translateY(-5px)}
.testi-stars{color:#FFC107;font-size:.9rem;margin-bottom:14px}
.testi-text{
  font-size:.9rem;color:rgba(255,255,255,.75);
  line-height:1.8;margin-bottom:20px;
}
.testi-author{display:flex;align-items:center;gap:12px}
.testi-av{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--cyan2));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-h);font-weight:700;color:var(--navy);font-size:.9rem;
  flex-shrink:0;
}
.testi-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.testi-name{
  font-family:var(--font-h);font-weight:700;
  font-size:.88rem;color:#fff;
}
.testi-role{font-size:.7rem;color:rgba(255,255,255,.5);letter-spacing:1px}

/* ═══════════════════════════════════════════════════════════
   CONTACTO
════════════════════════════════════════════════════════════ */
#contacto{background:#fff;padding:60px 0}
.contact-layout{
  display:grid;grid-template-columns:1fr 1.2fr;
  gap:60px;margin-top:50px;
}
/* Branch tabs */
.branch-tabs{
  display:flex;gap:0;margin-bottom:28px;
  border:1px solid var(--border);border-radius:10px;overflow:hidden;
}
.btab{
  flex:1;padding:11px;
  font-family:var(--font-b);font-size:.75rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  text-align:center;cursor:pointer;
  background:transparent;border:none;color:var(--muted);
  transition:all .25s;
}
.btab.active{background:var(--navy);color:#fff}
.btab:hover:not(.active){background:var(--offwhite);color:var(--navy)}
.branch-panel{display:none}
.branch-panel.active{display:block}
.binfo{display:flex;flex-direction:column;gap:16px}
.binfo-row{
  display:flex;align-items:flex-start;gap:14px;
  padding:16px;background:var(--offwhite);border-radius:var(--r);
  border:1px solid var(--border);transition:border-color .3s;
}
.binfo-row:hover{border-color:rgba(0,153,204,.3)}
.binfo-ico{
  width:38px;height:38px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(0,43,107,.1),rgba(0,153,204,.15));
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.binfo-detail h4{
  font-family:var(--font-h);font-weight:700;font-size:.88rem;
  color:var(--navy);margin-bottom:3px;
}
.binfo-detail p,.binfo-detail a{
  font-size:.82rem;color:var(--muted);line-height:1.7;
  transition:color .2s;
}
.binfo-detail a:hover{color:var(--cyan)}

/* Contact form */
.cform{
  background:var(--offwhite);border-radius:var(--r2);
  padding:40px;border:1px solid var(--border);
}
.cform h3{
  font-family:var(--font-h);font-weight:700;font-size:1.4rem;
  color:var(--navy);margin-bottom:28px;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cform .form-g{margin-bottom:16px}
.btn-send{
  width:100%;background:linear-gradient(135deg,var(--navy),var(--cyan));
  color:#fff;padding:16px;border-radius:8px;
  font-family:var(--font-b);font-size:.85rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  border:none;cursor:pointer;transition:all .3s;
  margin-top:4px;
}
.btn-send:hover{box-shadow:0 6px 24px rgba(0,153,204,.3);transform:translateY(-2px)}

/* WhatsApp widget */
.wa-widget{
  margin-top:28px;
  background:linear-gradient(135deg,#1FAB53,#25D366);
  border-radius:var(--r2);overflow:hidden;
  box-shadow:0 8px 30px rgba(31,171,83,.25);
}
.wa-header{
  display:flex;align-items:center;gap:14px;
  padding:18px 24px;
  background:rgba(0,0,0,.1);
}
.wa-av{
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;
}
.wa-header-txt h4{font-family:var(--font-h);font-weight:700;font-size:.95rem;color:#fff}
.wa-header-txt p{font-size:.72rem;color:rgba(255,255,255,.8)}
.wa-status{
  width:8px;height:8px;background:#A8FF78;border-radius:50%;
  display:inline-block;margin-right:5px;
  animation:pulse-dot 2s infinite;
}
.wa-body{padding:20px 24px}
.wa-bubble{
  background:rgba(255,255,255,.15);
  border-radius:0 12px 12px 12px;
  padding:12px 16px;
  font-size:.85rem;color:#fff;line-height:1.6;
  margin-bottom:14px;
  max-width:90%;
}
.wa-btns{display:flex;flex-direction:column;gap:10px}
.wa-branch-btn{
  background:#fff;color:#1FAB53;
  padding:12px 18px;border-radius:8px;
  font-family:var(--font-b);font-size:.78rem;font-weight:700;
  display:flex;align-items:center;gap:10px;
  transition:all .3s;cursor:pointer;border:none;
}
.wa-branch-btn:hover{background:#E8FFE8;transform:translateX(4px)}
.wa-branch-btn .city{flex:1;text-align:left}
.wa-branch-btn .phone{color:var(--muted);font-weight:400}

/* ═══════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════════ */
footer{
  background:var(--navy2);color:rgba(255,255,255,.7);
  padding:70px 0 30px;
}
.footer-grid{
  display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;
  gap:50px;margin-bottom:50px;
}
.f-brand .nav-logo{color:#fff;margin-bottom:14px}
.f-brand .nav-logo span{color:var(--cyan2)}
.f-desc{font-size:.85rem;line-height:1.8;margin-bottom:20px;color:rgba(255,255,255,.55)}
.f-socials{display:flex;gap:8px}
.f-soc{
  width:36px;height:36px;border-radius:8px;
  border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:rgba(255,255,255,.5);
  transition:all .3s;cursor:pointer;
  text-decoration:none;
}
.f-soc:hover{background:var(--cyan);border-color:var(--cyan);color:#fff}
.f-col h5{
  font-family:var(--font-h);font-weight:700;font-size:.8rem;
  letter-spacing:2px;text-transform:uppercase;
  color:#fff;margin-bottom:20px;
}
.f-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.f-col ul li a{
  font-size:.85rem;color:rgba(255,255,255,.5);
  transition:color .2s;
}
.f-col ul li a:hover{color:var(--cyan2)}
.f-bottom{
  border-top:1px solid rgba(255,255,255,.07);
  padding-top:24px;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;
}
.f-bottom p{font-size:.78rem;color:rgba(255,255,255,.35)}
.f-bottom span{color:var(--cyan2)}

/* ═══════════════════════════════════════════════════════════
   CLIENTES — LOGO STRIP
════════════════════════════════════════════════════════════ */
#clientes{
  background:var(--navy2);
  padding:60px 0;overflow:hidden;
  position:relative;z-index:1;
}
.strip-header{
  text-align:center;margin-bottom:36px;position:relative;z-index:2;
}
.strip-header .sec-tag{color:rgba(255,255,255,.5)}
.strip-header h2{
  font-family:var(--font-h);font-weight:700;
  font-size:clamp(1.4rem,2.5vw,2rem);
  color:#fff;margin-bottom:0;
}
.strip-header h2 span{color:var(--cyan2)}
.logos-stage{
  position:relative;overflow:hidden;padding:12px 0;
}
.logos-stage::before,
.logos-stage::after{
  content:'';position:absolute;top:0;bottom:0;width:120px;z-index:3;pointer-events:none;
}
.logos-stage::before{left:0;background:linear-gradient(to right,#001129,transparent)}
.logos-stage::after{right:0;background:linear-gradient(to left,#001129,transparent)}
.logos-row{
  display:flex;gap:20px;width:max-content;margin-bottom:16px;
}
.logos-row:last-child{margin-bottom:0}
.logos-row.row-1{animation:scrollLeft 60s linear infinite}
.logos-row.row-2{animation:scrollLeft 48s linear infinite reverse}
.logos-row:hover{animation-play-state:paused}
@keyframes scrollLeft{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.logo-chip{
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(255,255,255,.2);
  border-radius:10px;padding:12px 20px;
  min-width:150px;height:70px;flex-shrink:0;
  transition:background .3s,border-color .3s,transform .3s;cursor:default;
}
.logo-chip:hover{background:rgba(255,255,255,1);border-color:rgba(0,197,232,.5);transform:scale(1.04)}
.logo-chip img{max-width:120px;max-height:44px;object-fit:contain;filter:none;opacity:0.9;transition:opacity .3s}
.logo-chip:hover img{opacity:1;transform:scale(1.05)}
.logo-chip .chip-text{
  font-family:var(--font-h);font-weight:700;font-size:.72rem;
  letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(255,255,255,.6);text-align:center;transition:color .3s;
}
.logo-chip:hover .chip-text{color:#fff}
.strip-admin{
  display:flex;justify-content:center;gap:12px;
  margin-top:28px;position:relative;z-index:2;
}
.strip-admin-btn{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.7);padding:9px 20px;border-radius:6px;
  font-family:var(--font-b);font-size:.75rem;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;
  cursor:pointer;transition:all .3s;
}
.strip-admin-btn:hover{background:rgba(0,197,232,.15);border-color:var(--cyan2);color:#fff}
/* product viewer pause overlay */




.viewer-wrap.paused-spin 


/* WhatsApp FAB */
.wa-fab{
  position:fixed;bottom:30px;right:30px;z-index:400;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:27px;box-shadow:0 4px 20px rgba(37,211,102,.4);
  transition:transform .3s,box-shadow .3s;
  text-decoration:none;
}
.wa-fab:hover{transform:scale(1.12);box-shadow:0 6px 28px rgba(37,211,102,.5)}
.wa-fab-ring{
  position:absolute;inset:-8px;border-radius:50%;
  border:2px solid rgba(37,211,102,.3);
  animation:wa-pulse 2.5s infinite;
}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.5);opacity:0}}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════
   RESPONSIVE — Desktop / Tablet / Mobile
   1200px+ : Desktop full
   1024px  : Tablet landscape
   768px   : Tablet portrait / Mobile large
   480px   : Mobile
   360px   : Mobile small
═══════════════════════════════════ */

/* ── Tablet Landscape 1024px ── */
@media(max-width:1024px){
  nav{padding:0 24px;}
  .nav-links a{padding:0 14px;font-size:.75rem;}
  .prod-grid{grid-template-columns:repeat(2,1fr);}
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px;}
  .hero-title{font-size:clamp(2.4rem,5vw,4rem);}
  .about-imgs{height:420px;}
  .testi-section{padding:50px 30px;}
}

/* ── Tablet Portrait 768px ── */
@media(max-width:768px){
  /* Nav */
  nav{padding:0 16px;height:64px;}
  .nav-links{display:none;position:fixed;top:64px;left:0;right:0;
    background:rgba(255,255,255,0.98);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    flex-direction:column;padding:16px 0;gap:0;
    border-bottom:1px solid var(--border);z-index:499;
    box-shadow:0 8px 30px rgba(0,43,107,0.12);}
  .nav-links.open{display:flex;}
  .nav-links a{line-height:48px;padding:0 24px;font-size:.9rem;border-bottom:1px solid var(--border);}
  .nav-links a::after{display:none;}
  .hamburger{display:flex;}
  .nav-cta{font-size:.72rem;padding:8px 14px;}
  #nav-logo-img{height:38px!important;width:auto!important;object-fit:contain;}

  /* Hero */
  .hero-wrap{grid-template-columns:1fr;padding:50px 20px 40px;gap:30px;}
  .hero-visual{display:none;}
  .hero-title{font-size:clamp(2.2rem,8vw,3.2rem);letter-spacing:-1px;line-height:1.05;}
  .hero-sub{font-size:.95rem;margin-bottom:24px;}
  .hero-stats{gap:16px;flex-wrap:wrap;margin-top:28px;}
  .hstat{min-width:100px;padding:12px 14px;}
  .hstat-n{font-size:2rem;}
  .hero-btns{flex-direction:column;align-items:stretch;gap:12px;}
  .btn-p,.btn-o{width:100%;text-align:center;justify-content:center;}

  /* Sections */
  .sec-pad{padding:70px 0;}
  .wrap{padding:0 16px;}
  .section-pad{padding:70px 0;}

  /* Products */
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
  .products-filter{gap:8px;}
  .pf-btn{padding:7px 14px;font-size:.7rem;}
  .prod-img-box{height:240px;}
  .prod-img-photo{max-height:200px;}
  .prod-info{padding:18px;}
  .prod-name{font-size:1rem;}

  /* News */
  .news-grid{grid-template-columns:1fr;}
  .news-card.featured{grid-column:span 1;}
  .news-img.featured-img{height:200px;}

  /* About */
  .about-grid{grid-template-columns:1fr;gap:28px;}
  .about-imgs{height:320px;}
  .ab-img.main{width:72%;height:65%;}
  .ab-img.sec{width:58%;height:50%;}

  /* Team */
  .team-grid{grid-template-columns:repeat(2,1fr);gap:16px;}

  /* Testimonios */
  .testi-grid{grid-template-columns:1fr;}
  .testi-section{padding:40px 24px;border-radius:16px;margin-top:28px;}

  /* Contact */
  .contact-layout{grid-template-columns:1fr;gap:20px;margin-top:24px;}
  .branch-tabs .btab{font-size:.7rem;padding:9px 8px;}
  .form-row{grid-template-columns:1fr;}
  .cform{padding:28px 20px;}

  /* Footer — 2 columnas en tablet */
  .footer-grid{grid-template-columns:1fr 1fr;gap:20px;}
  .f-brand{grid-column:1/-1;}
  footer{padding:50px 0 24px;}
  .f-bottom{flex-direction:column;text-align:center;gap:6px;}

  /* Clients strip */
  .logo-chip{min-width:130px;height:60px;padding:10px 14px;}
  .logo-chip img{max-width:90px;max-height:36px;}
  .strip-header{margin-bottom:24px;}

  /* Instalaciones wave padding */
  #instalaciones{padding-top:70px;}
  #instalaciones .sec-pad{padding-top:48px;padding-bottom:40px;}

  /* Hero section scroll-pad */
  #presentacion{padding-top:64px;}

  /* Section padding overrides */
  #productos{padding:60px 0;}
  #nosotros{padding:60px 0;}

  /* Filters & team spacing */
  .products-filter{margin-bottom:24px;}
  .team-section{margin-top:48px;}

  /* Scroll padding matches mobile nav height */
  html{scroll-padding-top:68px;}

  /* Scroll-margin for anchor links */
  section[id]{scroll-margin-top:68px;}

  /* Hero — 100vh como fallback, 100svh para browsers modernos */
  #presentacion{min-height:100vh;min-height:100svh;}
  .hero-sub{max-width:100%;}

  /* Fix iOS auto-zoom al enfocar inputs (requiere font-size>=16px) */
  .form-g input,.form-g textarea,.form-g select,
  .cform input,.cform textarea,.cform select{font-size:16px;}

  /* Safe area insets — iPhone X/11/12/13/14/15 con notch/Dynamic Island */
  .wa-fab{bottom:calc(30px + env(safe-area-inset-bottom));}
  #btt{bottom:calc(86px + env(safe-area-inset-bottom));}
  footer{padding-bottom:calc(24px + env(safe-area-inset-bottom));}

  /* Filtros de productos — scroll horizontal en lugar de wrap */
  .products-filter{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;
    scrollbar-width:none;-ms-overflow-style:none;}
  .products-filter::-webkit-scrollbar{display:none;}
  .pf-btn{flex-shrink:0;white-space:nowrap;min-height:40px;}

  /* Anillos decorativos nosotros — reducir tamaño */
  .nosotros-rings span:nth-child(3){display:none;}
  .nosotros-rings span:nth-child(2){width:260px;height:260px;}
  .nosotros-rings span:nth-child(1){width:180px;height:180px;}

  /* Circuit bg — desactivar animación en móvil (rendimiento) */
  .circuit-bg{animation:none;opacity:.015;}

  /* Tap targets mínimos para botones de contacto */
  .btab{min-height:42px;}
}

/* ── Mobile 480px ── */
@media(max-width:480px){
  /* Nav */
  nav{height:58px;padding:0 12px;}
  .nav-links{top:58px;}
  #nav-logo-img{height:30px!important;width:auto!important;object-fit:contain;}
  .nav-logo > div{display:flex!important;}
  .nav-logo > div span:first-child{font-size:.68rem!important;letter-spacing:.2px!important;}
  .nav-logo > div span:last-child{font-size:.48rem!important;letter-spacing:1px!important;}
  .nav-cta{display:none;}

  /* Hero */
  .hero-wrap{padding:44px 16px 32px;}
  .hero-title{font-size:clamp(1.8rem,9vw,2.6rem);}
  .hero-badge{font-size:.62rem;padding:5px 12px;}
  .hero-stats{gap:10px;margin-top:20px;}
  .hstat{min-width:80px;padding:10px 8px;flex:1;}
  .hstat-n{font-size:1.7rem;}
  .hstat-l{font-size:.62rem;letter-spacing:1px;}

  /* Products — single column on small mobile */
  .prod-grid{grid-template-columns:1fr;gap:20px;}
  .prod-img-box{height:260px;}
  .prod-img-photo{max-height:220px;}
  .prod-info{padding:20px 16px;}
  .prod-specs{gap:7px;}
  .spec-key{min-width:90px;font-size:.76rem;}
  .prod-footer{flex-direction:column;gap:10px;}
  .prod-btn,.prod-btn-o{width:100%;justify-content:center;text-align:center;min-height:44px;}

  /* News */
  .news-body{padding:16px 14px;}
  .news-title{font-size:.93rem;}
  .news-img{height:170px;}

  /* About */
  .about-imgs{height:280px;}
  .ab-badge{padding:12px 14px;}
  .ab-badge-n{font-size:1.6rem;}
  .about-values{gap:12px;}
  .av-item{padding:14px;}

  /* Team — 1 column on very small screens */
  .team-grid{grid-template-columns:1fr;}
  .team-img{height:220px;}

  /* Testimonios */
  .testi-section{padding:32px 16px;border-radius:12px;}
  .testi-card{padding:22px 18px;}

  /* Contact */
  .branch-tabs{flex-wrap:wrap;}
  .btab{flex:none;width:calc(33% - 4px);font-size:.65rem;padding:8px 4px;}
  .wa-widget{border-radius:14px;}
  .cform{padding:22px 14px;}

  /* Clients */
  .logo-chip{min-width:110px;height:54px;padding:8px 10px;}
  .logo-chip img{max-width:76px;max-height:30px;}

  /* Sections padding */
  .sec-pad{padding:56px 0;}
  .wrap{padding:0 14px;}

  /* Footer */
  .f-socials{gap:6px;}
  .f-soc{width:32px;height:32px;}

  /* Instalaciones wave padding */
  #instalaciones{padding-top:50px;}
  #instalaciones .sec-pad{padding-top:36px;padding-bottom:32px;}

  /* Hero section scroll-pad */
  #presentacion{padding-top:58px;}

  /* Section padding overrides */
  #productos{padding:48px 0;}
  #nosotros{padding:48px 0;}

  /* Filters & team spacing */
  .products-filter{margin-bottom:16px;}
  .team-section{margin-top:32px;}

  /* Scroll padding matches mobile nav height */
  html{scroll-padding-top:62px;}

  /* Scroll-margin for anchor links */
  section[id]{scroll-margin-top:62px;}

  /* About images — una sola imagen en pantallas pequeñas */
  .ab-img.sec{display:none;}
  .ab-img.main{width:100%;height:100%;top:0;left:0;border-radius:var(--r2);}
  .about-imgs{overflow:hidden;border-radius:var(--r2);}

  /* Footer — 1 columna en móvil pequeño */
  .footer-grid{grid-template-columns:1fr;}
  .f-brand{grid-column:auto;}

  /* Logo strip — gradientes laterales más angostos */
  .logos-stage::before,.logos-stage::after{width:40px;}

  /* Insight header apilado */
  .insight-header{flex-direction:column;align-items:flex-start;}

  /* Anillos — ocultar en pantallas muy pequeñas */
  .nosotros-rings{display:none;}
}

/* ── Mobile Small 360px ── */
@media(max-width:360px){
  .hero-title{font-size:1.7rem;}
  .prod-grid{grid-template-columns:1fr;}
  .pf-btn{padding:6px 10px;font-size:.65rem;}
  .hero-stats{gap:8px;}
  .hstat{min-width:76px;padding:8px;}
  .hstat-n{font-size:1.5rem;}
  .sec-title{font-size:1.6rem;word-break:break-word;}
  .testi-section{padding:28px 12px;}
  .wrap{padding:0 12px;}
}

/* ══════════════════════════════════════════════════════
   MEJORAS VISUALES MÓVIL
══════════════════════════════════════════════════════ */

/* ── Animaciones de entrada: solo fade en táctil (sin slide horizontal que causa overflow) ── */
@media(hover:none),(pointer:coarse){
  .rev-l{transform:translateY(24px);}
  .rev-l.vis{transform:none;}
  .rev-r{transform:translateY(24px);}
  .rev-r.vis{transform:none;}
}

/* ── Noticias: carrusel horizontal deslizable en móvil ── */
@media(max-width:768px){
  .news-grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:16px;
    padding-bottom:14px;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .news-grid::-webkit-scrollbar{display:none;}
  .news-card{
    flex:0 0 82%;
    scroll-snap-align:start;
    min-width:0;
  }
  .news-card.featured{
    flex:0 0 88%;
    grid-column:auto;
  }
}
@media(max-width:480px){
  .news-card{flex:0 0 88%;}
  .news-card.featured{flex:0 0 92%;}
}

/* ── Indicador visual de scroll en carrusel ── */
@media(max-width:768px){
  .news-grid::after{
    content:'';flex:0 0 4px;
  }
}

/* ── Textos pequeños — más legibles en móvil ── */
@media(max-width:768px){
  .news-date{font-size:.72rem;letter-spacing:1px;}
  .f-col ul li a{font-size:.9rem;}
  .f-desc{font-size:.88rem;}
  .spec-key{font-size:.82rem;}
  .spec-val{font-size:.82rem;}
  .prod-cat{font-size:.68rem;}
  .sec-tag{font-size:.72rem;}
  .news-link{font-size:.78rem;}
}

/* ── Prod card: sombra y borde al tocar en móvil (reemplaza el tilt) ── */
@media(hover:none),(pointer:coarse){
  .prod-card:active{
    box-shadow:0 8px 32px rgba(0,153,204,.18);
    border-color:rgba(0,153,204,.3);
    transform:scale(.985);
    transition:transform .15s,box-shadow .15s;
  }
}

/* ── prefers-reduced-motion: desactivar animaciones decorativas ── */
@media(prefers-reduced-motion:reduce){
  .rev,.rev-l,.rev-r{transition:none;opacity:1;transform:none;}
  .nosotros-rings span,.wa-fab-ring,.hero-label::before{animation:none;}
  .circuit-bg{animation:none;}
  .logos-row{animation-play-state:paused;}
}

/* ── TILT extra depth effects ── */
.prod-card .prod-name{
  transition:letter-spacing .3s ease, color .3s;
}
.prod-card.is-tilting .prod-name{
  letter-spacing:.5px;color:var(--navy);
}
.prod-card .prod-btn{
  transition:box-shadow .3s,transform .2s,background .3s;
}
.prod-card.is-tilting .prod-btn{
  box-shadow:0 8px 20px rgba(0,153,204,.35);
  transform:translateY(-2px);
}
/* Holographic shimmer on specs */
.prod-card.is-tilting .spec-row:nth-child(odd){
  background:rgba(0,153,204,0.04);
  border-radius:6px;
}
/* Cat badge lifts */
.prod-card .prod-cat{
  transition:transform .3s ease, color .3s;
}
.prod-card.is-tilting .prod-cat{
  transform:translateY(-1px);
  color:var(--cyan);
}


.prod-img-box{
  height:300px;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
}
.prod-img-box::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 50% at 50% 60%,
    rgba(0,98,255,0.04),transparent 70%);
}
.prod-img-box{
  cursor:zoom-in;
}
.prod-img-photo{
  position:relative;z-index:1;
  max-height:258px;max-width:85%;
  object-fit:contain;
  filter:drop-shadow(0 14px 28px rgba(0,43,107,0.22))
         drop-shadow(0 4px 8px rgba(0,43,107,0.12));
  transform-origin:center center;
  transition:transform .25s ease, filter .3s ease;
  will-change:transform;
  display:block;
}

/* ═══════════════════════════════════════════════════════════
   POLISH — Enhanced Visual Design v2
════════════════════════════════════════════════════════════ */

/* ── Custom scrollbar ── */
::-webkit-scrollbar{width:7px}
::-webkit-scrollbar-track{background:#f0f4f8}
::-webkit-scrollbar-thumb{background:var(--navy);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--cyan)}

/* ── Focus ring accessibility ── */
a:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

/* ── Hero enhancements ── */
#presentacion{
  background:linear-gradient(150deg,#fff 0%,#edf5ff 40%,#d5eaff 72%,#bfdcff 100%);
}
#presentacion::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 70% 55% at 78% 45%,rgba(0,153,204,.07) 0%,transparent 65%);
}
/* Hero headline gradient shimmer */
.hero-h1 em{
  background-size:200% 100%;
  animation:shimmer-grad 4s ease-in-out infinite;
}
@keyframes shimmer-grad{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
/* Hero stat cards top accent */
.hstat{position:relative;overflow:hidden}
.hstat::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--cyan2));
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.2,1,.3,1);
}
.hstat:hover::before{transform:scaleX(1)}
/* Button shimmer */
.btn-p{position:relative;overflow:hidden}
.btn-p::after{
  content:'';position:absolute;top:0;left:-100%;
  width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transform:skewX(-20deg);
  transition:left .55s ease;
}
.btn-p:hover::after{left:160%}

/* ── Nav glass upgrade ── */
nav{background:rgba(255,255,255,.94);border-bottom:1px solid rgba(0,43,107,.07)}
nav.scrolled{box-shadow:0 4px 30px rgba(0,43,107,.09)}

/* ── Section tag improved ── */
.sec-tag{
  padding:5px 14px;
  background:rgba(0,153,204,.07);
  border:1px solid rgba(0,153,204,.18);
  border-radius:30px;
  gap:10px;
}
.sec-tag::before{width:20px}

/* ── News cards ── */
.news-card{transition:transform .4s cubic-bezier(.2,1,.3,1),box-shadow .4s ease}
.news-card:hover{transform:translateY(-10px);box-shadow:0 24px 60px rgba(0,43,107,.15)}

/* ── Product cards stronger glow ── */
.prod-card:hover{box-shadow:0 24px 64px rgba(0,153,204,.18),0 8px 24px rgba(0,43,107,.1)}
.prod-specs{border:1px solid rgba(0,153,204,.1)}

/* ── About value items — slide accent ── */
.av-item{border-left:3px solid transparent;transition:box-shadow .3s,border-color .3s,transform .3s}
.av-item:hover{border-left-color:var(--cyan);transform:translateX(5px)}

/* ── Badge inner glow ── */
.ab-badge{
  box-shadow:0 15px 40px rgba(0,43,107,.35),
             0 0 0 1px rgba(255,255,255,.25) inset,
             0 0 30px rgba(0,153,204,.15) inset;
}

/* ── Team cards ── */
.team-card{transition:transform .4s cubic-bezier(.2,1,.3,1),box-shadow .4s}
.team-card:hover{transform:translateY(-10px);box-shadow:0 20px 50px rgba(0,43,107,.14)}
.team-overlay{
  background:linear-gradient(to top,rgba(0,20,60,.88) 0%,rgba(0,43,107,.45) 55%,transparent 100%);
}

/* ── Testimonial decorative quote ── */
.testi-card{position:relative;overflow:hidden}
.testi-card::before{
  content:'\201C';
  position:absolute;top:-14px;right:18px;
  font-size:7rem;font-family:Georgia,serif;
  color:rgba(255,255,255,.05);line-height:1;
  pointer-events:none;
}
.testi-stars{font-size:1rem;letter-spacing:3px;text-shadow:0 0 8px rgba(255,193,7,.4)}
.testi-text{font-style:italic;color:rgba(255,255,255,.8)}
.testi-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,.25)}

/* ── Contact form enhancements ── */
.cform{
  background:linear-gradient(160deg,var(--offwhite),#e8f4ff);
  box-shadow:0 8px 40px rgba(0,43,107,.08);
}
.form-g input,.form-g textarea,.form-g select{
  background:#fafdff;
  border-color:rgba(0,43,107,.13);
  transition:border-color .3s,box-shadow .3s,background .3s;
}
.form-g input:focus,.form-g textarea:focus,.form-g select:focus{
  background:#fff;
  border-color:var(--cyan);
  box-shadow:0 0 0 4px rgba(0,153,204,.09);
}
/* Contact info row hover slide */
.binfo-row{transition:border-color .3s,transform .3s,box-shadow .3s}
.binfo-row:hover{transform:translateX(5px);box-shadow:0 4px 18px rgba(0,43,107,.08);border-color:rgba(0,153,204,.3)}
/* Send button shimmer */
.btn-send{position:relative;overflow:hidden;letter-spacing:2px}
.btn-send::after{
  content:'';position:absolute;top:0;left:-100%;
  width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  transform:skewX(-18deg);transition:left .55s ease;
}
.btn-send:hover::after{left:160%}
.btn-send:hover{box-shadow:0 8px 30px rgba(0,153,204,.35);transform:translateY(-2px)}

/* ── Footer enhanced ── */
footer{position:relative}
footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent 0%,var(--cyan) 30%,var(--cyan2) 70%,transparent 100%);
}
.f-soc{border-radius:10px;transition:all .3s cubic-bezier(.2,1,.3,1)}
.f-soc:hover{transform:translateY(-3px);background:var(--cyan);border-color:var(--cyan);color:#fff}
.f-col ul li a{transition:color .2s,padding-left .2s}
.f-col ul li a:hover{color:var(--cyan2);padding-left:6px}

/* ── Logo chips ── */
.logo-chip{
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  transition:transform .3s cubic-bezier(.2,1,.3,1),box-shadow .3s,background .3s;
}
.logo-chip:hover{transform:scale(1.06);box-shadow:0 6px 24px rgba(0,0,0,.12)}

/* ── WhatsApp FAB pulse ── */
.wa-fab{animation:wa-float 3s ease-in-out infinite}
@keyframes wa-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.wa-fab:hover{animation:none;transform:scale(1.12)}

/* ── Reveal animation smoother ── */
.rev,.rev-l,.rev-r{transition:opacity .9s cubic-bezier(.2,1,.3,1),transform .9s cubic-bezier(.2,1,.3,1)}

/* ── Nav links hover underline width ── */
.nav-links a::after{left:16px;right:16px}

/* ── WhatsApp branch button ── */
.wa-branch-btn{
  transition:all .3s cubic-bezier(.2,1,.3,1);
  border-radius:10px;
}
.wa-branch-btn:hover{background:#e3fff0;transform:translateX(6px);box-shadow:0 4px 14px rgba(31,171,83,.15)}

/* ── Hero stat icon ── */
.hstat-ico{
  font-size:1.1rem;margin-bottom:4px;
  filter:drop-shadow(0 2px 6px rgba(0,153,204,.3));
}

/* ── Sec-tag animated glow ── */
.sec-tag{
  animation:tag-glow 4s ease-in-out infinite;
}
@keyframes tag-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(0,153,204,0)}
  50%{box-shadow:0 0 14px 2px rgba(0,153,204,.13)}
}

/* ── Contact form gradient border ── */
.cform{
  border:1px solid transparent;
  background-clip:padding-box;
  position:relative;
}
.cform::before{
  content:'';position:absolute;inset:0;border-radius:var(--r2);padding:1px;
  background:linear-gradient(135deg,rgba(0,153,204,.25),rgba(0,43,107,.08),rgba(0,197,232,.2));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}

/* ── Products header readout chip ── */
.readout{
  box-shadow:0 4px 20px rgba(0,43,107,.12),0 0 0 1px rgba(0,153,204,.08);
}

/* ── News card featured extra presence ── */
.news-card.featured{box-shadow:0 4px 24px rgba(0,43,107,.08)}
.news-card.featured:hover{box-shadow:0 24px 60px rgba(0,43,107,.16)}

/* ── Smooth hstat-n counter ── */
.hstat-n{transition:color .3s}

/* ── Insight / instalaciones section ── */
#insight,.wrap.sec-pad{position:relative}

/* ── Team body border-top accent ── */
.team-body{
  border-top:2px solid var(--border);
  transition:border-color .3s;
}
.team-card:hover .team-body{border-top-color:rgba(0,153,204,.3)}

/* ── Testimonials header improved ── */
.testi-section>.wrap>div[style*="text-align:center"]{
  position:relative;z-index:2;
}

/* ── WA widget improved ── */
.wa-widget{
  box-shadow:0 12px 40px rgba(31,171,83,.2),0 4px 16px rgba(0,0,0,.08);
}

/* ── Fingerprint ring glow ── */
.fp-ring{
  box-shadow:0 0 40px rgba(0,153,204,.2),0 0 0 1px rgba(0,153,204,.15);
  animation:fp-pulse 3s ease-in-out infinite;
}
@keyframes fp-pulse{
  0%,100%{box-shadow:0 0 30px rgba(0,153,204,.15),0 0 0 1px rgba(0,153,204,.1)}
  50%{box-shadow:0 0 50px rgba(0,153,204,.3),0 0 0 1px rgba(0,153,204,.25)}
}

/* ── Scan stage depth ── */
.scan-stage{
  filter:drop-shadow(0 20px 60px rgba(0,43,107,.18));
}

/* ── Overall card hover transition timing ── */
.news-card,.prod-card,.team-card,.testi-card,.av-item,.hstat{
  will-change:transform;
}

/* ── Testi-section sec-tag override (dark bg) ── */
.testi-section .sec-tag{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.18);
  animation:none;box-shadow:none;
}

/* ── Nosotros section gradient ── */
#nosotros{
  background:linear-gradient(160deg,var(--offwhite) 0%,#e8f4ff 55%,#deedff 100%);
}

/* ── Contact section subtle background ── */
#contacto{
  background:linear-gradient(180deg,#fff 0%,var(--offwhite) 100%);
}

/* ═══════════════════════════════════════════════════════════
   WOW ANIMATIONS — v3 additions
════════════════════════════════════════════════════════════ */

/* ── Scroll progress bar ── */
#scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--navy),var(--cyan),var(--cyan2),var(--cyan));
  background-size:200% 100%;
  z-index:9997;box-shadow:0 0 10px rgba(0,153,204,.6);
  transition:width .08s linear;
  animation:prog-shimmer 2s linear infinite;
}
@keyframes prog-shimmer{0%{background-position:0 50%}100%{background-position:200% 50%}}

/* ── Ripple ── */
.ripple{
  position:absolute;border-radius:50%;
  width:8px;height:8px;
  background:rgba(255,255,255,.45);
  transform:translate(-50%,-50%) scale(0);
  animation:ripple-go .7s cubic-bezier(0,.5,.5,1) forwards;
  pointer-events:none;
}
@keyframes ripple-go{to{transform:translate(-50%,-50%) scale(90);opacity:0}}

/* ── Card spotlight ── */
.prod-card.has-spot{
  background-image:radial-gradient(circle at var(--sx,50%) var(--sy,50%),rgba(0,153,204,.1) 0%,transparent 55%);
}
.news-card.has-spot{
  background-image:radial-gradient(circle at var(--sx,50%) var(--sy,50%),rgba(0,153,204,.07) 0%,transparent 55%);
}
.team-card.has-spot{
  background-image:radial-gradient(circle at var(--sx,50%) var(--sy,50%),rgba(0,43,107,.07) 0%,transparent 55%);
}
.testi-card.has-spot{
  background-image:radial-gradient(circle at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.07) 0%,transparent 55%);
}

/* ── Floating orbs in hero ── */
.hero-visual::before{
  content:'';position:absolute;
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,153,204,.12) 0%,transparent 70%);
  top:-90px;left:-90px;
  animation:orb-float 9s ease-in-out infinite;
  pointer-events:none;z-index:-1;
}
.hero-visual::after{
  content:'';position:absolute;
  width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,43,107,.09) 0%,transparent 70%);
  bottom:-60px;right:-70px;
  animation:orb-float 7s ease-in-out infinite reverse;
  pointer-events:none;z-index:-1;
}
@keyframes orb-float{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(26px,-20px) scale(1.12)}
  66%{transform:translate(-14px,24px) scale(.93)}
}

/* ── Nosotros aurora orb ── */
#nosotros::before{
  content:'';position:absolute;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,153,204,.05) 0%,transparent 70%);
  top:-200px;right:-150px;
  animation:orb-float 14s ease-in-out infinite;
  pointer-events:none;z-index:0;
}

/* ── Testimonial cards stagger-in ── */
.testi-card{
  opacity:0;transform:translateY(30px);
  transition:opacity .75s cubic-bezier(.2,1,.3,1),transform .75s cubic-bezier(.2,1,.3,1);
}
.testi-card.vis{opacity:1;transform:none}

/* ── Product card animated gradient border ── */
.prod-card{
  transition:box-shadow .5s ease,transform .08s linear,border-color .4s ease;
}
.prod-card:hover{border-color:rgba(0,153,204,.35)}

/* ── Team card 3D tilt glow ── */
.team-card{
  transition:transform .5s cubic-bezier(.2,1,.3,1),box-shadow .4s;
  transform-style:preserve-3d;
}

/* ── Team card animated border ── */
.team-card{
  border:1px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(160deg,rgba(0,43,107,.12),transparent 50%,rgba(0,153,204,.12)) border-box;
}
.team-card:hover{
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(135deg,var(--cyan),var(--cyan2),var(--navy)) border-box;
}

/* ── Animated section title span ── */
.sec-title span{
  background:linear-gradient(90deg,var(--cyan) 0%,var(--cyan2) 30%,#0077aa 60%,var(--cyan) 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:title-flow 5s linear infinite;
}
@keyframes title-flow{0%{background-position:0 50%}100%{background-position:250% 50%}}

/* ── Hero h1 em shimmer (updated) ── */
.hero-h1 em{
  background:linear-gradient(90deg,var(--cyan) 0%,var(--cyan2) 40%,#00d4f0 70%,var(--cyan) 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:title-flow 4s linear infinite;
}

/* ── Cursor trail dot ── */
.cursor-trail{
  position:fixed;border-radius:50%;background:var(--cyan);
  pointer-events:none;z-index:9996;
  transform:translate(-50%,-50%);mix-blend-mode:screen;
}
body.adm-open .cursor-trail{display:none;}
@media(hover:none),(pointer:coarse){
  #cur,#cur-ring,.cursor-trail{display:none!important;}
  body{cursor:auto!important;}
}

/* ── News link animated arrow ── */
.news-link span{
  display:inline-block;transition:transform .3s cubic-bezier(.2,1,.3,1);
}
.news-link:hover span{transform:translateX(6px)}

/* ── Pf-btn filter pill hover lift ── */
.pf-btn{
  transition:all .3s cubic-bezier(.2,1,.3,1);
  position:relative;overflow:hidden;
}
.pf-btn::after{
  content:'';position:absolute;inset:0;border-radius:30px;
  background:linear-gradient(135deg,rgba(255,255,255,.08),transparent);
  opacity:0;transition:opacity .3s;
}
.pf-btn.active::after,.pf-btn:hover::after{opacity:1}
.pf-btn:hover,.pf-btn.active{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,43,107,.15);
}

/* ── Branch tabs hover ── */
.btab{transition:all .25s cubic-bezier(.2,1,.3,1)}
.btab.active{
  box-shadow:0 4px 12px rgba(0,43,107,.2);
}

/* ── WhatsApp FAB glow pulse on hover ── */
.wa-fab:hover{
  box-shadow:0 0 0 0 rgba(37,211,102,.5),0 6px 28px rgba(37,211,102,.5);
  animation:wa-glow 1s ease infinite;
}
@keyframes wa-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}
  50%{box-shadow:0 0 0 12px rgba(37,211,102,0)}
}

/* ── Insight section entrance ── */
#insight{
  background:linear-gradient(180deg,var(--offwhite) 0%,#fff 100%);
}

/* ── Hero animated mesh grid ── */
#presentacion{
  background-image:
    linear-gradient(150deg,#fff 0%,#edf5ff 40%,#d5eaff 72%,#bfdcff 100%),
    repeating-linear-gradient(0deg,transparent,transparent 50px,rgba(0,153,204,.025) 50px,rgba(0,153,204,.025) 51px),
    repeating-linear-gradient(90deg,transparent,transparent 50px,rgba(0,153,204,.025) 50px,rgba(0,153,204,.025) 51px);
  background-blend-mode:normal,overlay,overlay;
}

/* ── Scan stage glowing border ── */
.scan-stage{
  background:rgba(255,255,255,.03);
  border-radius:24px;
  border:1px solid rgba(0,153,204,.1);
  animation:stage-glow 4s ease-in-out infinite;
}
@keyframes stage-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(0,153,204,0),0 20px 60px rgba(0,43,107,.15)}
  50%{box-shadow:0 0 40px 8px rgba(0,153,204,.08),0 20px 60px rgba(0,43,107,.18)}
}

/* ── Readout float animation ── */
.readout.r1{animation:readout-float 4s ease-in-out infinite}
.readout.r2{animation:readout-float 4s ease-in-out 1.3s infinite}
.readout.r3{animation:readout-float 4s ease-in-out 2.6s infinite}
@keyframes readout-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

/* ── Landmark dot enhanced ── */
.lm{box-shadow:0 0 0 3px rgba(0,153,204,.15),0 0 8px var(--cyan);}

/* ── Hero label enhanced pulse ── */
.hero-label{animation:label-pulse 3s ease-in-out infinite}
@keyframes label-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,153,204,0);border-color:rgba(0,153,204,.2)}
  50%{box-shadow:0 0 16px 3px rgba(0,153,204,.12);border-color:rgba(0,153,204,.4)}
}

/* ── News date line ── */
.news-date{position:relative;padding-left:14px}
.news-date::before{
  content:'';position:absolute;left:0;top:50%;
  width:6px;height:6px;border-radius:50%;
  background:var(--cyan);transform:translateY(-50%);
}

/* ── Testi section grid fade ── */
.testi-grid{position:relative;z-index:2}

/* ── About badge animated number ── */
.ab-badge-n{
  font-size:2.2rem;
  animation:badge-pop 3s ease-in-out infinite;
}
@keyframes badge-pop{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.04)}
}

/* ── Footer links enhanced ── */
.f-col ul li{position:relative}
.f-col ul li a::before{
  content:'›';position:absolute;left:-12px;
  opacity:0;color:var(--cyan2);
  transition:opacity .2s,left .2s;
}
.f-col ul li a:hover::before{opacity:1;left:-8px}

/* ── Animated avatar ring in testimonials ── */
.testi-av{
  position:relative;
}
.testi-av::after{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--cyan2));
  z-index:-1;opacity:0;transition:opacity .3s;
}
.testi-card:hover .testi-av::after{opacity:1}

/* ── Spec row animated left bar ── */
.spec-row{
  position:relative;padding-left:10px;
  border-left:2px solid transparent;
  transition:border-color .3s;
}
.prod-card:hover .spec-row{border-left-color:rgba(0,153,204,.3)}

/* ── Products section aurora ── */
#productos::before{
  content:'';position:absolute;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,153,204,.04) 0%,transparent 70%);
  bottom:-150px;left:-100px;
  animation:orb-float 16s ease-in-out infinite;
  pointer-events:none;z-index:0;
}

/* ── Contact form header tag ── */
.cform-head-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-b);font-size:.68rem;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;
  color:var(--cyan);margin-bottom:10px;
  background:rgba(0,153,204,.07);
  border:1px solid rgba(0,153,204,.18);
  border-radius:20px;padding:5px 14px;
}
/* ═══════════════════════════════════════════════════════════
   MEGA UPGRADE — v4
════════════════════════════════════════════════════════════ */


/* ── SIDE NAV DOTS ── */
#side-nav{
  position:fixed;
  left:auto;right:24px;top:50%;bottom:auto;
  transform:translateY(-50%);
  z-index:400;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;
  padding:0;height:auto;width:auto;
  background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:none;box-shadow:none;
}
.sn-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(0,43,107,.25);
  border:2px solid rgba(0,43,107,.2);
  transition:all .35s cubic-bezier(.2,1,.3,1);
  position:relative;
}
.sn-dot::after{
  content:attr(title);
  position:absolute;right:18px;top:50%;transform:translateY(-50%);
  background:var(--navy);color:#fff;
  font-family:var(--font-b);font-size:.65rem;font-weight:600;
  letter-spacing:1px;padding:4px 10px;border-radius:6px;
  opacity:0;pointer-events:none;white-space:nowrap;
  transition:opacity .2s;
}
.sn-dot:hover::after{opacity:1}
.sn-dot.active{
  background:var(--cyan);border-color:var(--cyan);
  transform:scale(1.5);
  box-shadow:0 0 12px rgba(0,153,204,.5);
}
.sn-dot:hover:not(.active){
  background:rgba(0,153,204,.5);border-color:rgba(0,153,204,.6);transform:scale(1.3);
}
@media(max-width:768px){#side-nav{display:none}}

/* ── BACK TO TOP ── */
#btt{
  position:fixed;bottom:100px;right:28px;z-index:399;
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--navy),var(--cyan));
  color:#fff;border:none;font-size:1.1rem;font-weight:700;
  cursor:pointer;
  box-shadow:0 4px 20px rgba(0,43,107,.3);
  opacity:0;transform:translateY(16px);
  transition:opacity .4s,transform .4s cubic-bezier(.2,1,.3,1),box-shadow .3s;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
#btt.show{opacity:1;transform:translateY(0);pointer-events:auto}
#btt:hover{box-shadow:0 6px 28px rgba(0,153,204,.4);transform:translateY(-3px)}

/* ── HERO H1 LINE REVEAL ── */
.hl{
  display:block;overflow:hidden;line-height:1.15;padding-bottom:0.08em;
}
.hl > *{
  display:block;
  transform:translateY(105%) skewY(4deg);
  opacity:0;
}
.hero-h1.revealed .hl:nth-child(1) > *{animation:line-rise .9s cubic-bezier(.16,1,.3,1) .1s forwards}
.hero-h1.revealed .hl:nth-child(2) > *{animation:line-rise .9s cubic-bezier(.16,1,.3,1) .28s forwards}
.hero-h1.revealed .hl:nth-child(3) > *{animation:line-rise .9s cubic-bezier(.16,1,.3,1) .46s forwards}
@keyframes line-rise{
  to{transform:translateY(0) skewY(0);opacity:1}
}

/* Fade-in for hero sub, stats, btns after h1 reveals */
.hero-sub,.hero-btns,.hero-stats{
  opacity:0;transform:translateY(20px);transition:opacity .8s,transform .8s;
}
.hero-sub.vis,.hero-btns.vis,.hero-stats.vis{opacity:1;transform:none}

/* ── NOISE GRAIN TEXTURE ── */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9995;
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:200px 200px;
}

/* ── NAV LINK GLOW HOVER ── */
.nav-links a:hover{
  text-shadow:0 0 20px rgba(0,153,204,.35);
}
.nav-links a.active{
  color:var(--navy);
  text-shadow:0 0 16px rgba(0,43,107,.15);
}

/* ── IMPROVED HERO STATS ── */
.hstat{
  border-radius:14px;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(16px);
  border:1px solid rgba(0,153,204,.12);
  box-shadow:0 4px 20px rgba(0,43,107,.06);
}
.hstat:hover{
  box-shadow:0 8px 32px rgba(0,153,204,.18);
  border-color:rgba(0,153,204,.3);
}

/* ── WAVE DIVIDER between sections ── */
.wave-div{
  overflow:hidden;line-height:0;
  position:relative;z-index:2;
}
.wave-div svg{
  display:block;width:100%;height:80px;
}

/* ── SECTION TITLE SPLIT ── */
.sec-title{
  overflow:hidden;
}

/* ── ENHANCED PRODUCT CARD ── */
.prod-card{
  background:linear-gradient(160deg,#fff 0%,#f8fbff 100%);
}
.prod-card::after{
  content:'';position:absolute;inset:0;border-radius:var(--r2);
  background:linear-gradient(135deg,rgba(0,153,204,.04),transparent 60%);
  pointer-events:none;z-index:1;
  opacity:0;transition:opacity .4s;
}
.prod-card:hover::after{opacity:1}

/* ── NEON SCAN LINE on scanner (hero) ── */
.face-frame::before{
  box-shadow:0 0 20px var(--cyan),0 0 40px rgba(0,153,204,.3);
}

/* ── ENHANCED TESTIMONIALS ── */
.testi-section{
  background:linear-gradient(160deg,#012055 0%,var(--navy) 40%,#013366 100%);
}
.testi-section::before{
  background:radial-gradient(circle,rgba(0,153,204,.15) 0%,transparent 70%);
  width:500px;height:500px;
}

/* ── BTN-P glow ring ── */
.btn-p::before{
  content:'';position:absolute;inset:-2px;border-radius:10px;
  background:linear-gradient(135deg,var(--cyan),var(--navy),var(--cyan2));
  z-index:-1;opacity:0;
  transition:opacity .4s;
}
.btn-p:hover::before{opacity:.6}

/* ── ANIMATED GRADIENT on ab-badge ── */
.ab-badge{
  background:linear-gradient(135deg,var(--navy),var(--cyan),#005a80,var(--navy));
  background-size:300% 300%;
  animation:badge-grad 6s ease infinite;
}
@keyframes badge-grad{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* ── GLOWING INPUTS on contact ── */
.form-g input:focus,.form-g textarea:focus{
  animation:input-glow .4s ease forwards;
}
@keyframes input-glow{
  from{box-shadow:0 0 0 0 rgba(0,153,204,.15)}
  to{box-shadow:0 0 0 5px rgba(0,153,204,.1)}
}

/* ── LOGO CHIP shimmer ── */
.logo-chip{position:relative;overflow:hidden}
.logo-chip::after{
  content:'';position:absolute;top:0;left:-100%;
  width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);
  transition:left .6s ease;
}
.logo-chip:hover::after{left:160%}

/* ── FOOTER brand subtle glow ── */
.f-brand .nav-logo:hover{filter:drop-shadow(0 0 12px rgba(0,197,232,.3))}

/* ── Pulse ring on hero label ── */
.hero-label{position:relative}
.hero-label::after{
  content:'';position:absolute;inset:-4px;border-radius:30px;
  border:1px solid rgba(0,153,204,.2);
  animation:label-ring 3s ease-in-out infinite;
  pointer-events:none;
}
@keyframes label-ring{
  0%,100%{transform:scale(1);opacity:.6}
  50%{transform:scale(1.06);opacity:0}
}

/* ── Binfo ico glow ── */
.binfo-ico{
  transition:background .3s,box-shadow .3s;
}
.binfo-row:hover .binfo-ico{
  background:linear-gradient(135deg,rgba(0,153,204,.15),rgba(0,43,107,.12));
  box-shadow:0 0 16px rgba(0,153,204,.2);
}

/* ── SECTION section counter badge ── */
.sec-tag-count{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  background:var(--cyan);color:#fff;
  font-size:.62rem;font-weight:700;margin-left:8px;
}

/* ── Smooth section entrance ── */
.adm-section,.adm-card{will-change:auto}

/* ── Hero visual depth shadow ── */
.hero-visual{
  filter:drop-shadow(0 30px 60px rgba(0,43,107,.2));
}

/* Responsive: hide btt on mobile to avoid overlap with wa-fab */
@media(max-width:480px){
  #btt{right:14px;bottom:86px;width:36px;height:36px;font-size:.95rem}
  .wa-fab{right:14px;bottom:24px;width:50px;height:50px;font-size:1.3rem;}
}

/* ── Wave clip between hero → instalaciones ── */
#instalaciones{
  position:relative;
  clip-path:polygon(0 40px,100% 0,100% 100%,0 100%);
  margin-top:-40px;
  padding-top:110px;
}
#instalaciones .sec-pad{padding-top:110px;padding-bottom:80px;}

/* ── Hero sub cursor blink ── */
.hero-sub{
  border-right:2px solid transparent;
  transition:border-color .4s;
}

/* ── Typewriter cursor blink ── */
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ── Side nav transition ── */
#side-nav{transition:opacity .4s}

/* ── BTT button icon animation ── */
#btt{animation:none}
#btt:hover{animation:btt-bounce .6s ease infinite}
@keyframes btt-bounce{
  0%,100%{transform:translateY(-3px)}
  50%{transform:translateY(-8px)}
}

/* ── Testimonial text quote style ── */
.testi-text{
  position:relative;padding-left:0;
}

/* ── Product section header text animated ── */
#productos .sec-title{
  background:linear-gradient(90deg,var(--navy) 0%,#0044aa 40%,var(--cyan) 70%,var(--navy) 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:title-flow 7s linear infinite;
}

/* ── Nosotros sec-title ── */
#nosotros .sec-title{
  -webkit-text-fill-color:var(--navy);
  background:none;animation:none;
}

/* ── Value icon animated gradient ── */
.av-ico{
  animation:ico-pulse 4s ease-in-out infinite;
}
@keyframes ico-pulse{
  0%,100%{background:linear-gradient(135deg,rgba(0,43,107,.08),rgba(0,153,204,.12))}
  50%{background:linear-gradient(135deg,rgba(0,153,204,.2),rgba(0,43,107,.1))}
}

/* ── News link arrow animation ── */
.news-link{overflow:hidden;position:relative}
.news-link::after{
  content:'→';position:absolute;left:-20px;
  transition:left .3s;opacity:0;
}
.news-link:hover::after{left:0;opacity:1}

/* ── Hero stats counter easing highlight ── */
.hstat-n{
  background:linear-gradient(135deg,var(--navy),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ── Logo chip alternate row styling ── */
.logos-row.row-2 .logo-chip{
  background:rgba(255,255,255,.88);
}

/* ── Testi section grid ── */
.testi-grid{gap:28px}

/* ── Footer bottom bar ── */
.f-bottom{
  background:rgba(0,0,0,.1);
  border-radius:12px;
  padding:16px 20px;
  margin:0 -10px;
}

/* ═══════════════════════════════════════════════════════════
   FX UPGRADE — v5
════════════════════════════════════════════════════════════ */

/* ── Testi canvas ── */
#testi-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  border-radius:inherit;pointer-events:none;z-index:0;opacity:.7;
}

/* ── Contact canvas ── */
#contact-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:.4;
}
#contacto{position:relative;overflow:hidden}

/* ── Nosotros tech rings ── */
.nosotros-rings{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;z-index:-1;
}
.nosotros-rings span{
  position:absolute;border-radius:50%;
  border:1px solid rgba(0,153,204,.18);
  top:50%;left:50%;transform:translate(-50%,-50%);
  animation:nr-spin 12s linear infinite;
}
.nosotros-rings span:nth-child(1){width:300px;height:300px;border-color:rgba(0,153,204,.22);animation-duration:10s}
.nosotros-rings span:nth-child(2){width:450px;height:450px;border-color:rgba(0,43,107,.15);animation-duration:16s;animation-direction:reverse}
.nosotros-rings span:nth-child(3){width:600px;height:600px;border-color:rgba(0,153,204,.09);animation-duration:22s}
@keyframes nr-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ── Rings orbit dot ── */
.nosotros-rings span::before{
  content:'';position:absolute;
  width:6px;height:6px;border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);
  top:0;left:50%;transform:translateX(-50%);
}
.nosotros-rings span:nth-child(2)::before{background:var(--navy);box-shadow:0 0 8px var(--navy)}
.nosotros-rings span:nth-child(3)::before{display:none}

/* ── Circuit background for productos ── */
.circuit-bg{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:.035;
  background-image:
    linear-gradient(rgba(0,43,107,1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,43,107,1) 1px, transparent 1px),
    radial-gradient(circle 2px at 50px 50px, rgba(0,153,204,1) 2px, transparent 0),
    radial-gradient(circle 2px at 100px 100px, rgba(0,153,204,1) 2px, transparent 0);
  background-size:100px 100px, 100px 100px, 100px 100px, 100px 100px;
  animation:circuit-move 20s linear infinite;
}
@keyframes circuit-move{to{background-position:100px 100px, 100px 100px, 100px 100px, 100px 100px}}

/* ── Products section needs position:relative ── */
#productos{position:relative;overflow:hidden}

/* ── Glitch on hero em ── */
.hero-h1 em{
  position:relative;display:inline-block;
}
.hero-h1 em::before,.hero-h1 em::after{
  content:attr(data-text);
  position:absolute;inset:0;
  background:inherit;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-h1 em::before{
  left:2px;
  clip-path:polygon(0 20%,100% 20%,100% 40%,0 40%);
  animation:glitch-a 5s infinite steps(1);
  opacity:.6;
}
.hero-h1 em::after{
  left:-2px;
  clip-path:polygon(0 60%,100% 60%,100% 80%,0 80%);
  animation:glitch-b 5s infinite steps(1) .3s;
  opacity:.5;
}
@keyframes glitch-a{
  0%,90%,100%{transform:none;opacity:0}
  91%{transform:translateX(-3px) skewX(-5deg);opacity:.6}
  93%{transform:translateX(3px) skewX(5deg);opacity:.6}
  95%{transform:none;opacity:0}
}
@keyframes glitch-b{
  0%,90%,100%{transform:none;opacity:0}
  92%{transform:translateX(3px) skewX(3deg);opacity:.5}
  94%{transform:translateX(-2px);opacity:.5}
  96%{transform:none;opacity:0}
}

/* ── Particle burst on CTA ── */
.burst-particle{
  position:fixed;border-radius:50%;pointer-events:none;
  animation:burst-go .8s cubic-bezier(.2,1,.3,1) forwards;
  z-index:9998;
}
@keyframes burst-go{
  0%{transform:translate(-50%,-50%) scale(1);opacity:1}
  100%{transform:translate(calc(-50% + var(--bx)),calc(-50% + var(--by))) scale(0);opacity:0}
}

/* ── Scramble text ── */
.scramble-running{
  letter-spacing:1px;
}

/* ── Enhanced news card shimmer ── */
.news-card{overflow:hidden}
.news-card::before{
  content:'';position:absolute;
  top:-50%;left:-75%;
  width:50%;height:200%;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.07),transparent);
  transform:skewX(-20deg);
  transition:left .8s ease;
  pointer-events:none;z-index:5;
}
.news-card:hover::before{left:150%}

/* ── Neon scan line on instalaciones header ── */
#instalaciones .sec-title{
  position:relative;
}
#instalaciones .sec-title::after{
  content:'';position:absolute;
  left:0;bottom:-8px;
  height:2px;width:60px;
  background:linear-gradient(90deg,var(--cyan),var(--cyan2),transparent);
  animation:scanline-grow 2s ease-in-out infinite;
}
@keyframes scanline-grow{
  0%,100%{width:40px;opacity:.7}
  50%{width:100px;opacity:1}
}

/* ── About section floating data badge ── */
.about-data-badge{
  position:absolute;
  bottom:30px;left:-20px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(16px);
  border:1px solid rgba(0,153,204,.2);
  border-radius:14px;padding:14px 18px;
  box-shadow:0 8px 32px rgba(0,43,107,.15);
  z-index:20;
  animation:badge-float 4s ease-in-out infinite;
  white-space:nowrap;
}
@keyframes badge-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.about-data-badge .dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--cyan);margin-right:7px;
  animation:pulse-dot 1.5s infinite;vertical-align:middle;
}
.about-data-badge .label{
  font-family:var(--font-b);font-size:.72rem;font-weight:700;
  color:var(--navy);
}
.about-data-badge .val{
  font-family:var(--font-h);font-weight:700;font-size:1rem;
  color:var(--cyan);margin-left:4px;
}

/* ── Floating HUD in hero ── */
.scan-stage::before{
  content:'SCAN:ACTIVE';
  position:absolute;top:12px;left:16px;
  font-family:monospace;font-size:.6rem;font-weight:700;
  color:rgba(0,153,204,.7);letter-spacing:2px;
  animation:hud-blink 2s step-end infinite;
}
@keyframes hud-blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ── Enhanced product card ── */
.prod-card{
  transition:box-shadow .5s,transform .08s linear,border-color .4s;
}
.prod-card:hover .prod-img-photo{
  filter:drop-shadow(0 20px 40px rgba(0,153,204,.35)) drop-shadow(0 4px 8px rgba(0,43,107,.15));
  transform:scale(1.04) translateY(-4px);
}

/* ── Section title glow on reveal ── */
.sec-title.vis-glow{
  text-shadow:0 0 40px rgba(0,153,204,.1);
}

/* ── Testi card neon border on hover ── */
.testi-card:hover{
  border-color:rgba(0,153,204,.35);
  box-shadow:0 0 0 1px rgba(0,153,204,.2),0 20px 60px rgba(0,0,0,.3);
}

/* ── Floating badge in nosotros ── */
.ab-badge{z-index:10}

/* ── News section label ── */
#instalaciones::before{display:none}

/* ── Contact section extra depth ── */
.cform{
  backdrop-filter:blur(8px);
}

/* ══ News View Modal ══ */
.nv-modal{
  padding:0;width:92%;max-width:680px;
  max-height:88vh;overflow-y:auto;
  display:flex;flex-direction:column;
  position:relative;
}
.nv-close{
  position:absolute;top:12px;right:12px;z-index:10;
  width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.45);color:#fff;
  border:none;font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.nv-close:hover{background:rgba(0,0,0,.7);}
.nv-img-wrap{position:relative;width:100%;aspect-ratio:16/7;overflow:hidden;flex-shrink:0;}
.nv-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.nv-img-wrap .news-cat{
  position:absolute;top:14px;left:14px;
  font-size:.72rem;font-weight:700;
  background:var(--cyan);color:#fff;
  padding:4px 10px;border-radius:20px;letter-spacing:.04em;
}
.nv-body{padding:28px 32px 32px;}
.nv-meta{margin-bottom:10px;}
.nv-meta .news-date{font-size:.82rem;color:var(--muted);}
.nv-title{
  font-family:var(--font-h);font-weight:700;
  font-size:1.35rem;color:var(--navy);
  line-height:1.3;margin-bottom:16px;
}
.nv-text{
  font-size:.95rem;color:var(--text);
  line-height:1.75;white-space:pre-wrap;
}
@media(max-width:600px){
  .nv-modal{width:96%;max-height:92vh;}
  .nv-body{padding:20px 18px 24px;}
  .nv-title{font-size:1.1rem;}
  .nv-img-wrap{aspect-ratio:16/9;}
}