:root{
    --bg: #070B13;
    --bg-alt: #0B1220;
    --surface: #101A2C;
    --surface-2: #16223A;
    --border: rgba(140,170,210,0.14);
    --accent: #22E5C8;
    --accent-soft: rgba(34,229,200,0.14);
    --accent-2: #5B8CFF;
    --accent-2-soft: rgba(91,140,255,0.14);
    --warm: #FF7A5C;
    --text: #E9F1F8;
    --text-muted: #8FA0B8;
    --text-dim: #5C6C84;
    --radius: 14px;
    --maxw: 1180px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{ font-family:'Space Grotesk', sans-serif; font-weight:600; letter-spacing:-0.01em; }
  a{ color:inherit; text-decoration:none; }
  .mono{ font-family:'JetBrains Mono', monospace; }
  .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
  img{max-width:100%; display:block;}

  /* background texture */
  .grid-bg{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(140,170,210,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(140,170,210,0.05) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 75%);
  }
  .glow{
    position:fixed; border-radius:50%; filter:blur(110px); z-index:0; pointer-events:none; opacity:0.35;
  }
  .glow-1{ width:520px; height:520px; background:var(--accent); top:-180px; left:-120px; }
  .glow-2{ width:480px; height:480px; background:var(--accent-2); top:280px; right:-160px; opacity:0.22;}

  /* header */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(7,11,19,0.72);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 28px; max-width:var(--maxw); margin:0 auto;
  }
  .logo{ display:flex; align-items:center; gap:10px; }
  .logo svg{ width:34px; height:34px; }
  .logo-text{ font-family:'Space Grotesk'; font-weight:700; font-size:20px; letter-spacing:0.02em;}
  .logo-text span{ color:var(--accent); }
  nav ul{ display:flex; gap:34px; list-style:none; }
  nav ul li a{
    font-size:14.5px; color:var(--text-muted); font-weight:500; transition:color .2s;
    position:relative;
  }
  nav ul li a:hover{ color:var(--text); }
  nav ul li a.active{ color:var(--accent); }
  .cta-btn{
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#04140F; font-weight:600; font-size:14px;
    padding:10px 20px; border-radius:999px; border:none; cursor:pointer;
    transition:transform .2s, box-shadow .2s;
    box-shadow:0 0 0 rgba(34,229,200,0);
  }
  .cta-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(34,229,200,0.25); }
  .cta-outline{
    border:1px solid var(--border); color:var(--text); background:transparent;
    padding:10px 20px; border-radius:999px; font-weight:500; font-size:14px; cursor:pointer;
    transition:border-color .2s, background .2s;
  }
  .cta-outline:hover{ border-color:var(--accent); background:var(--accent-soft); }
  .menu-toggle{ display:none; background:none; border:none; color:var(--text); font-size:24px; cursor:pointer; }

  /* hero */
  .hero{
    position:relative; padding:168px 0 100px; overflow:hidden;
  }
  #netCanvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:0.55;}
  .hero-inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'JetBrains Mono'; font-size:12.5px; color:var(--accent);
    background:var(--accent-soft); border:1px solid rgba(34,229,200,0.3);
    padding:6px 14px; border-radius:999px; margin-bottom:22px;
  }
  .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); animation:pulse 1.8s infinite; }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.3;} }
  .hero h1{
    font-size:clamp(38px, 5.4vw, 66px); line-height:1.05; max-width:820px; margin-bottom:22px;
  }
  .hero h1 em{ font-style:normal; color:var(--accent); }
  .hero p.lead{
    max-width:560px; font-size:17.5px; color:var(--text-muted); margin-bottom:36px;
  }
  .hero-ctas{ display:flex; gap:14px; margin-bottom:64px; flex-wrap:wrap;}
  .hero-ctas .cta-btn, .hero-ctas .cta-outline{ padding:14px 26px; font-size:15px;}

  .stat-row{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
    max-width:760px;
  }
  .stat{ background:rgba(11,18,32,0.75); padding:20px 22px; }
  .stat .num{ font-family:'JetBrains Mono'; font-size:26px; color:var(--accent); font-weight:500;}
  .stat .lbl{ font-size:12.5px; color:var(--text-muted); margin-top:4px;}

  section{ position:relative; z-index:1; padding:100px 0; }
  .section-head{ max-width:620px; margin-bottom:56px; }
  .section-head .eyebrow{ background:var(--accent-2-soft); color:var(--accent-2); border-color:rgba(91,140,255,0.3); }
  .section-head h2{ font-size:clamp(28px,3.4vw,40px); margin-bottom:14px; }
  .section-head p{ color:var(--text-muted); font-size:16px; }

  /* about */
  .about-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center; }
  .about-grid p{ color:var(--text-muted); font-size:16px; margin-bottom:18px; }
  .about-grid p strong{ color:var(--text); font-weight:600;}
  .sector-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
  .chip{
    font-family:'JetBrains Mono'; font-size:12.5px; color:var(--text-muted);
    border:1px solid var(--border); padding:7px 13px; border-radius:8px;
    transition:border-color .2s, color .2s;
  }
  .chip:hover{ border-color:var(--accent); color:var(--accent); }
  .panel{
    background:linear-gradient(160deg, var(--surface), var(--bg-alt));
    border:1px solid var(--border); border-radius:20px; padding:36px;
    position:relative; overflow:hidden;
  }
  .panel::before{
    content:''; position:absolute; width:220px; height:220px; border-radius:50%;
    background:var(--accent); filter:blur(90px); opacity:0.18; top:-60px; right:-60px;
  }
  .panel-row{ display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid var(--border); }
  .panel-row:last-child{ border-bottom:none; }
  .panel-row .k{ color:var(--text-muted); font-size:14px;}
  .panel-row .v{ font-family:'JetBrains Mono'; color:var(--accent); font-size:14px; }

  /* services */
  .svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .svc-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:30px; transition:transform .25s, border-color .25s, background .25s;
  }
  .svc-card:hover{ transform:translateY(-6px); border-color:rgba(34,229,200,0.4); background:var(--surface-2); }
  .svc-icon{
    width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    background:var(--accent-soft); color:var(--accent); margin-bottom:20px;
  }
  .svc-card h3{ font-size:18px; margin-bottom:10px; }
  .svc-card p{ color:var(--text-muted); font-size:14.5px; }

  /* brands */
  .brands-strip{
    display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  }
  .brand-badge{
    flex:1 1 150px; text-align:center; padding:22px 10px; border:1px solid var(--border);
    border-radius:12px; font-family:'Space Grotesk'; font-weight:600; letter-spacing:0.04em;
    color:var(--text-muted); font-size:15px; transition:all .25s;
  }
  .brand-badge:hover{ color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }

  /* products */
  .filter-pills{ display:flex; gap:10px; margin-bottom:36px; flex-wrap:wrap; }
  .pill{
    font-size:13.5px; padding:9px 18px; border-radius:999px; border:1px solid var(--border);
    color:var(--text-muted); cursor:pointer; background:transparent; font-family:'Inter'; transition:all .2s;
  }
  .pill.active, .pill:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
  .prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  .prod-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
    transition:transform .25s, border-color .25s;
  }
  .prod-card:hover{ transform:translateY(-4px); border-color:rgba(91,140,255,0.4); }
  .prod-thumb{
    height:120px; background:
      repeating-linear-gradient(135deg, rgba(91,140,255,0.08) 0 2px, transparent 2px 14px),
      linear-gradient(160deg, #0E1930, #0A0F1C);
    display:flex; align-items:center; justify-content:center;
  }
  .prod-thumb svg{ width:38px; height:38px; color:var(--accent-2); opacity:0.8; }
  .prod-body{ padding:20px; }
  .prod-body .tag{ font-family:'JetBrains Mono'; font-size:11.5px; color:var(--warm); margin-bottom:6px; display:block;}
  .prod-body h4{ font-size:16px; margin-bottom:6px; }
  .prod-body p{ font-size:13px; color:var(--text-muted); margin-bottom:14px; }
  .prod-link{ font-size:13px; color:var(--accent); font-weight:500; display:inline-flex; align-items:center; gap:5px;}

  /* cta band */
  .cta-band{
    background:linear-gradient(120deg, rgba(34,229,200,0.12), rgba(91,140,255,0.12));
    border:1px solid var(--border); border-radius:24px; padding:56px; text-align:center;
    max-width:var(--maxw); margin:0 auto;
  }
  .cta-band h2{ font-size:clamp(24px,3vw,34px); margin-bottom:14px; }
  .cta-band p{ color:var(--text-muted); margin-bottom:30px; }

  /* contact form */
  .contact-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:50px; align-items:start; max-width:var(--maxw); margin:0 auto; }
  .contact-info p{ color:var(--text-muted); font-size:16px; margin:16px 0 30px; max-width:440px; }
  .contact-alt{ display:flex; flex-direction:column; gap:14px; }
  .contact-alt-item{ display:flex; align-items:center; gap:12px; cursor:pointer; transition:transform .2s; }
  .contact-alt-item:hover{ transform:translateX(4px); }
  .contact-alt-item:hover .v{ color:var(--accent); }
  .contact-alt-item .ic{
    width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    background:var(--accent-soft); color:var(--accent); flex-shrink:0; font-size:16px;
  }
  .contact-alt-item .k{ font-size:12px; color:var(--text-dim); }
  .contact-alt-item .v{ font-size:14.5px; color:var(--text); }
  .contact-form{
    background:linear-gradient(160deg, var(--surface), var(--bg-alt));
    border:1px solid var(--border); border-radius:20px; padding:36px;
    position:relative; overflow:hidden;
  }
  .contact-form::before{
    content:''; position:absolute; width:220px; height:220px; border-radius:50%;
    background:var(--accent-2); filter:blur(90px); opacity:0.16; top:-60px; right:-60px; pointer-events:none;
  }
  .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; position:relative; z-index:1; }
  .field{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
  .field.full{ grid-column:1 / -1; }
  .field label{ font-size:13px; color:var(--text-muted); font-weight:500; }
  .field label .req{ color:var(--warm); }
  .field input, .field textarea{
    background:var(--bg-alt); border:1px solid var(--border); color:var(--text);
    padding:12px 14px; border-radius:10px; font-size:14.5px; font-family:'Inter'; outline:none;
    transition:border-color .2s, box-shadow .2s; width:100%;
  }
  .field textarea{ resize:vertical; min-height:110px; font-family:'Inter'; }
  .field input:focus, .field textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  .field input:invalid:not(:placeholder-shown){ border-color:var(--warm); }
  .field .err{ font-size:12px; color:var(--warm); min-height:14px; }
  .form-submit{ width:100%; padding:14px 26px; font-size:15px; position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:8px; }
  .form-submit:disabled{ opacity:0.6; cursor:not-allowed; transform:none !important; box-shadow:none !important; }
  .form-status{
    margin-top:16px; padding:12px 16px; border-radius:10px; font-size:13.5px; display:none; position:relative; z-index:1;
  }
  .form-status.show{ display:block; }
  .form-status.ok{ background:var(--accent-soft); color:var(--accent); border:1px solid rgba(34,229,200,0.3); }
  .form-status.bad{ background:rgba(255,122,92,0.12); color:var(--warm); border:1px solid rgba(255,122,92,0.3); }
  .spinner{
    width:15px; height:15px; border-radius:50%; border:2px solid rgba(4,20,15,0.35); border-top-color:#04140F;
    animation:spin .7s linear infinite; display:none;
  }
  .form-submit.loading .spinner{ display:inline-block; }
  .form-submit.loading .btn-label{ opacity:0.85; }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  @media(max-width:920px){
    .contact-grid{ grid-template-columns:1fr; gap:36px; }
  }
  @media(max-width:560px){
    .form-grid{ grid-template-columns:1fr; }
    .contact-form{ padding:26px; }
  }

  /* WhatsApp help widget */
  #waToggle{
    position:fixed; bottom:26px; right:96px; z-index:200;
    width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
    background:#25D366;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 30px rgba(37,211,102,0.4);
    transition:transform .2s;
  }
  #waToggle:hover{ transform:scale(1.06); }
  #waToggle svg{ width:28px; height:28px; }
  #waToggle .ping{
    position:absolute; inset:0; border-radius:50%; border:2px solid #25D366;
    animation:ping 2.2s infinite;
  }

  #waPanel{
    position:fixed; bottom:100px; right:96px; z-index:200;
    width:340px; max-width:92vw; max-height:74vh;
    background:var(--bg-alt); border:1px solid var(--border); border-radius:18px;
    display:flex; flex-direction:column; overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,0.5);
    transform:translateY(16px) scale(0.98); opacity:0; pointer-events:none;
    transition:transform .25s ease, opacity .25s ease;
  }
  #waPanel.open{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
  .wa-head{
    padding:16px 18px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:12px;
    background:linear-gradient(120deg, rgba(37,211,102,0.16), rgba(37,211,102,0.05));
  }
  .wa-head .avatar{
    width:36px; height:36px; border-radius:50%; background:#25D366;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .wa-head .avatar svg{ width:20px; height:20px; }
  .wa-head .info h4{ font-size:14.5px; margin-bottom:2px;}
  .wa-head .info span{ font-size:12px; color:#25D366; display:flex; align-items:center; gap:5px;}
  .wa-head .info span::before{ content:''; width:6px; height:6px; border-radius:50%; background:#25D366; }
  .wa-close{ margin-left:auto; background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:18px; }
  .wa-body{ padding:18px; display:flex; flex-direction:column; gap:14px; }
  .wa-msg{
    max-width:92%; font-size:13.8px; padding:11px 14px; border-radius:12px; line-height:1.5;
    background:var(--surface); border:1px solid var(--border); align-self:flex-start; border-bottom-left-radius:3px;
  }
  .wa-agents{ display:flex; flex-direction:column; gap:8px; }
  .wa-agent{
    display:flex; align-items:center; gap:10px; padding:10px 12px;
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
  }
  .wa-agent .dot{ width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--accent-2)); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#04140F; font-weight:700; font-family:'Space Grotesk'; font-size:13px;}
  .wa-agent .who{ font-size:13px; font-weight:500; }
  .wa-agent .role{ font-size:11.5px; color:var(--text-muted); }
  .wa-start{
    display:flex; align-items:center; justify-content:center; gap:10px;
    background:#25D366; color:#04140F; font-weight:600; font-size:14px;
    padding:13px 16px; border-radius:12px; margin:0 18px 18px; text-align:center;
    transition:transform .2s, box-shadow .2s;
  }
  .wa-start:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(37,211,102,0.35); }
  .wa-start svg{ width:18px; height:18px; }

  @media(max-width:600px){
    #waToggle{ right:88px; bottom:20px; width:54px; height:54px; }
    #waToggle svg{ width:25px; height:25px; }
    #waPanel{ right:8px; left:8px; width:auto; bottom:88px; }
  }

  /* footer */
  footer{ border-top:1px solid var(--border); padding:64px 0 30px; background:var(--bg-alt); position:relative; z-index:1;}
  .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:50px; }
  .footer-grid h5{ font-family:'JetBrains Mono'; font-size:12.5px; color:var(--accent); letter-spacing:0.08em; margin-bottom:18px; text-transform:uppercase;}
  .footer-grid ul{ list-style:none; }
  .footer-grid li{ margin-bottom:11px; }
  .footer-grid a{ color:var(--text-muted); font-size:14px; transition:color .2s; }
  .footer-grid a:hover{ color:var(--accent); }
  .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid var(--border); font-size:13px; color:var(--text-dim); flex-wrap:wrap; gap:10px;}

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

  @keyframes ping{ 0%{ transform:scale(1); opacity:0.7;} 100%{ transform:scale(1.7); opacity:0;} }

  @media(max-width:920px){
    nav ul{ display:none; }
    .menu-toggle{ display:block; }
    .about-grid{ grid-template-columns:1fr; }
    .svc-grid{ grid-template-columns:1fr 1fr; }
    .prod-grid{ grid-template-columns:1fr 1fr; }
    .footer-grid{ grid-template-columns:1fr 1fr; }
    .stat-row{ grid-template-columns:1fr 1fr; }
  }
  @media(max-width:560px){
    .svc-grid{ grid-template-columns:1fr; }
    .prod-grid{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr; }
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  }

  /* =========================================================
     AURA / MOTION SITES VISUAL LAYER
     Functional selectors and JavaScript from ASN remain intact.
     ========================================================= */
  :root{
    --bg:#0c0c0c;
    --bg-alt:rgba(12,12,12,0.72);
    --surface:rgba(255,255,255,0.01);
    --surface-2:rgba(255,255,255,0.045);
    --border:rgba(255,255,255,0.10);
    --accent:#00d2ff;
    --accent-soft:rgba(0,210,255,0.10);
    --accent-2:#A4F4FD;
    --accent-2-soft:rgba(164,244,253,0.10);
    --warm:#f59e0b;
    --text:#ffffff;
    --text-muted:rgba(255,255,255,0.60);
    --text-dim:rgba(255,255,255,0.40);
    --radius:18px;
    --maxw:1152px;
  }

  html,body{
    font-family:'Inter',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    background:#0c0c0c;
    color:#fff;
  }
  body{ position:relative; isolation:isolate; }
  ::selection{ background:rgba(61,129,227,0.30); color:#fff; }

  .aura-video-bg{
    position:fixed; inset:0; z-index:-5; pointer-events:none;
  }
  .aura-video-bg video{
    width:100%; height:100%; object-fit:cover; pointer-events:none;
    opacity:.72;
  }
  .aura-video-bg::after{
    content:'';
    position:absolute; inset:0;
    background:
      linear-gradient(180deg,rgba(12,12,12,.20) 0%,rgba(12,12,12,.48) 46%,rgba(12,12,12,.88) 100%),
      radial-gradient(700px circle at 50% 0%,rgba(255,255,255,.09),transparent 70%);
  }
  .aura-guide{
    position:fixed; inset-block:0; width:1px; background:rgba(255,255,255,.10);
    z-index:5; pointer-events:none;
  }
  .aura-guide.left{ left:calc(50% - 36rem); }
  .aura-guide.right{ right:calc(50% - 36rem); }

  .grid-bg,.glow{ display:none !important; }

  /* exact liquid-glass treatment from the supplied design */
  .liquid-glass,
  .panel,.svc-card,.brand-badge,.prod-card,.contact-form,.cta-band,
  #waPanel,.stat{
    background: rgba(255,255,255,0.01);
    background-blend-mode: luminosity;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: none;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
    position: relative;
    overflow: hidden;
  }
  .liquid-glass::before,
  .panel::before,.svc-card::before,.brand-badge::before,.prod-card::before,
  .contact-form::before,.cta-band::before,.stat::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:1.4px;
    background:linear-gradient(180deg,
      rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
      rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
      rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
  }

  /* Fix: el bloque "liquid-glass" de arriba pone position:relative en
     #waPanel, lo que rompe su position:fixed original y hace
     que floten fuera de la pantalla en vez de quedar anclados abajo a la
     derecha. Se restaura aquí su comportamiento flotante. */
  #waPanel{
    position:fixed !important;
  }

  header{
    position:fixed;
    top:0; left:0; right:0;
    background:rgba(0,0,0,.22);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.08);
    animation:auraNavIn .6s ease-out both;
  }
  @keyframes auraNavIn{
    from{ opacity:0; transform:translateY(-10px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .nav{ max-width:1152px; padding:18px 24px; }
  .logo svg{ width:32px; height:32px; filter:grayscale(1) brightness(10); }
  .logo-text{
    font-family:'Inter',system-ui,sans-serif;
    font-size:17px; font-weight:700; letter-spacing:.12em; color:#fff;
  }
  .logo-text span{ color:#fff; }
  nav ul{ gap:32px; }
  nav ul li a{
    color:rgba(255,255,255,.70);
    font-size:14px;
    font-weight:500;
  }
  nav ul li a:hover,nav ul li a.active{ color:#fff; }
  nav ul li a.active::after{
    content:'';
    display:block;
    width:4px;height:4px;border-radius:50%;
    background:#fff;
    margin:5px auto 0;
  }

  .cta-btn{
    background:#fff;
    color:#000;
    border-radius:999px;
    padding:11px 20px;
    font-weight:600;
    box-shadow:none;
    transition:all .3s cubic-bezier(.22,1,.36,1);
  }
  .cta-btn:hover{
    transform:scale(1.02);
    background:#f5f5f5;
    box-shadow:0 8px 24px rgba(255,255,255,.15);
  }
  .cta-outline{
    border:1px solid rgba(255,255,255,.15);
    color:#fff;
    background:rgba(255,255,255,.03);
    border-radius:999px;
    transition:all .3s cubic-bezier(.22,1,.36,1);
  }
  .cta-outline:hover{
    border-color:rgba(255,255,255,.28);
    background:rgba(255,255,255,.07);
  }

  .hero{
    min-height:760px;
    padding:190px 0 90px;
    display:flex;
    align-items:center;
  }
  #netCanvas{ opacity:.13; mix-blend-mode:screen; }
  .hero-inner{
    max-width:1152px;
    padding:0 24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .eyebrow{
    font-family:'Inter',system-ui,sans-serif;
    font-size:12px;
    letter-spacing:.08em;
    color:rgba(255,255,255,.70);
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.10);
    padding:7px 12px;
    border-radius:999px;
  }
  .eyebrow .dot{
    background:#fff; box-shadow:none;
  }
  .hero h1{
    max-width:900px;
    font-family:'Inter',system-ui,sans-serif;
    font-size:clamp(44px,7vw,80px);
    font-weight:600;
    letter-spacing:-.05em;
    line-height:.96;
    margin:6px auto 28px;
  }
  .hero h1 em{
    display:inline;
    font-style:normal;
    background-image:linear-gradient(to right,#091020 0%,#0B2551 12.5%,#A4F4FD 32.5%,#00d2ff 50%,#0B2551 67.5%,#091020 87.5%,#091020 100%);
    background-size:200% auto;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    filter:url(#c3-noise);
    animation:shiny 6s linear infinite;
  }
  @keyframes shiny{
    0%{ background-position:-200% center; }
    100%{ background-position:200% center; }
  }
  .hero p.lead{
    max-width:610px;
    color:rgba(255,255,255,.60);
    font-size:16px;
    line-height:1.5;
    margin-bottom:32px;
  }
  .hero-ctas{
    justify-content:center;
    margin-bottom:56px;
  }
  .stat-row{
    width:min(820px,100%);
    max-width:none;
    gap:12px;
    background:none;
    border:none;
    border-radius:20px;
    overflow:visible;
  }
  .stat{
    border-radius:16px;
    padding:20px 18px;
  }
  .stat .num{
    font-family:'Inter',system-ui,sans-serif;
    font-size:26px;
    font-weight:600;
    color:#fff;
  }
  .stat .lbl{ color:rgba(255,255,255,.45); }

  .aura-menubar{
    height:40px;
    background:rgba(0,0,0,.40);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-top:1px solid rgba(255,255,255,.10);
    border-bottom:1px solid rgba(255,255,255,.10);
    position:relative;
    z-index:2;
  }
  .aura-menubar-inner{
    max-width:1152px;
    margin:0 auto;
    padding:0 24px;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:12px;
  }
  .aura-menubar-left,.aura-menubar-right{ display:flex;align-items:center;gap:16px; }
  .aura-menubar-left strong{ color:#fff; }
  .aura-menubar-left span,.aura-menubar-right{ color:rgba(255,255,255,.60); }

  section:not(.hero){ padding:112px 0; }
  .wrap{ max-width:1152px; padding:0 24px; }
  .section-head{ max-width:650px; margin-bottom:52px; }
  .section-head h2,
  .about-grid h2,
  .contact-info h2,
  .cta-band h2{
    font-family:'Inter',system-ui,sans-serif !important;
    font-size:clamp(32px,4vw,52px) !important;
    line-height:1.02;
    letter-spacing:-.04em;
    font-weight:600;
  }
  .section-head p,.about-grid p,.contact-info p,.cta-band p{
    color:rgba(255,255,255,.60);
  }

  .about-grid{ gap:48px; }
  .panel{
    border-radius:22px;
    padding:28px;
  }
  .panel-row{ border-bottom:1px solid rgba(255,255,255,.10); }
  .panel-row .k{ color:rgba(255,255,255,.70); }
  .panel-row .v{ color:#A4F4FD; }

  .sector-chips{ gap:8px; }
  .chip,.pill{
    font-family:'Inter',system-ui,sans-serif;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.03);
    color:rgba(255,255,255,.68);
    border-radius:999px;
  }
  .chip:hover,.pill:hover,.pill.active{
    border-color:rgba(255,255,255,.28);
    background:rgba(255,255,255,.08);
    color:#fff;
  }

  .svc-grid{ gap:18px; }
  .svc-card{
    border-radius:20px;
    padding:28px;
    min-height:220px;
    transition:all .6s cubic-bezier(.22,1,.36,1);
  }
  .svc-card:hover{
    transform:translateY(-10px) scale(1.01);
    background:rgba(15,15,15,.55);
  }
  .svc-icon{
    width:42px;height:42px;
    background:rgba(255,255,255,.06);
    color:#fff;
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
  }
  .svc-card h3{ font-family:'Inter',system-ui,sans-serif; font-weight:600; }
  .svc-card p{ color:rgba(255,255,255,.55); }

  .brands-strip{ gap:12px; }
  .brand-badge{
    border-radius:16px;
    padding:26px 12px;
    font-family:'Inter',system-ui,sans-serif;
    color:rgba(255,255,255,.50);
    letter-spacing:.02em;
  }
  .brand-badge:hover{
    color:#fff;
    background:rgba(255,255,255,.04);
    transform:translateY(-4px);
  }

  .prod-grid{ gap:18px; }
  .prod-card{
    border-radius:22px;
    transition:all .6s cubic-bezier(.22,1,.36,1);
  }
  .prod-card:hover{
    transform:translateY(-10px) scale(1.01);
    background:rgba(15,15,15,.55);
  }
  .prod-thumb{
    height:148px;
    background:
      radial-gradient(180px circle at 50% 0%,rgba(164,244,253,.12),transparent 70%),
      rgba(255,255,255,.015);
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .prod-thumb svg{ color:#A4F4FD; opacity:.85; }
  .prod-body .tag{ color:#A4F4FD; }
  .prod-body p{ color:rgba(255,255,255,.50); }
  .prod-link{ color:#fff; }

  .cta-band{
    border-radius:32px;
    padding:68px 40px;
    background:rgba(255,255,255,.01);
  }
  .cta-band::after{
    content:'';
    position:absolute; inset:0;
    background:radial-gradient(600px circle at 50% 0%,rgba(255,255,255,0.15),transparent 70%);
    opacity:.3; pointer-events:none;
  }
  .cta-band > *{ position:relative; z-index:2; }

  .contact-grid{ max-width:1152px; gap:52px; }
  .contact-form{
    border-radius:28px;
    padding:34px;
  }
  .contact-form::before{ opacity:1; filter:none; width:auto;height:auto;top:0;right:0; }
  .field input,.field textarea{
    background:rgba(0,0,0,.30);
    border:1px solid rgba(255,255,255,.10);
    color:#fff;
    border-radius:12px;
  }
  .field input:focus,.field textarea:focus{
    border-color:rgba(164,244,253,.65);
    box-shadow:0 0 0 3px rgba(164,244,253,.08);
  }
  .field label{ color:rgba(255,255,255,.60); }
  .contact-alt-item .ic{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
    color:#fff;
  }
  .contact-alt-item .k{ color:rgba(255,255,255,.35); }

  footer{
    background:rgba(0,0,0,.40);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-top:1px solid rgba(255,255,255,.10);
  }
  .footer-grid h5{ font-family:'Inter',system-ui,sans-serif; color:#fff; }
  .footer-grid a{ color:rgba(255,255,255,.50); }
  .footer-grid a:hover{ color:#fff; }
  .footer-bottom{ border-color:rgba(255,255,255,.10); color:rgba(255,255,255,.35); }

  #waPanel{
    background:rgba(10,10,10,.78);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 24px 60px rgba(0,0,0,.55);
  }
  .wa-agent,.wa-msg{
    background:rgba(255,255,255,.04);
    border-color:rgba(255,255,255,.10);
  }
  .wa-agent .dot{
    background:linear-gradient(135deg,#A4F4FD,#00d2ff);
  }

  .reveal{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
  }
  .reveal.in{ opacity:1; transform:translateY(0); }

  @media(max-width:920px){
    .aura-guide{ display:none; }
    .hero{ min-height:auto; padding-top:150px; }
    .hero h1{ font-size:clamp(42px,11vw,64px); }
  }
  @media(max-width:600px){
    .aura-menubar-left span:nth-of-type(n+4){ display:none; }
    .aura-menubar-right span{ display:none; }
    section:not(.hero){ padding:82px 0; }
    .stat-row{ grid-template-columns:1fr 1fr; }
    .contact-form{ padding:24px; }
  }


  .social-links{ display:flex; align-items:center; gap:14px; }
  .social-links a{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:#fff; transition:transform .2s, background .2s, border-color .2s; }
  .social-links a:hover{ transform:translateY(-2px); background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.28); }
  .social-links svg{ width:19px; height:19px; fill:currentColor; }



  /* =========================================================
     PRODUCT CATALOG · Interactive professional experience
     ========================================================= */
  .product-showcase{ overflow:hidden; }
  .product-tabs-wrap{
    display:flex; gap:10px; flex-wrap:wrap; align-items:center;
    padding:10px; margin-bottom:38px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    background:rgba(0,0,0,.24);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
  .product-tab{
    appearance:none; border:1px solid rgba(255,255,255,.10); outline:none;
    color:rgba(255,255,255,.74); background:rgba(255,255,255,.035);
    font:500 13.5px/1 'Inter',system-ui,sans-serif;
    padding:12px 18px; border-radius:999px; cursor:pointer;
    transition:background .25s,border-color .25s,color .25s,transform .25s,box-shadow .25s;
  }
  .product-tab:hover{ color:#fff; border-color:rgba(255,255,255,.26); transform:translateY(-1px); }
  .product-tab.active{
    color:#041417;
    background:linear-gradient(135deg,#A4F4FD,#00d2ff);
    border-color:transparent;
    box-shadow:0 8px 24px rgba(0,210,255,.18);
  }
  .product-category-intro{
    display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center;
    padding:26px; margin-bottom:28px; border-radius:24px;
    background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  }
  .product-category-icon{
    width:62px;height:62px;border-radius:18px;display:grid;place-items:center;
    color:#A4F4FD;background:rgba(164,244,253,.08);border:1px solid rgba(164,244,253,.16);
  }
  .product-category-icon svg{ width:30px;height:30px; }
  .product-category-icon.has-image{ width:150px;height:100px;border-radius:16px;overflow:hidden;padding:0; }
  .product-category-icon.has-image img{ width:100%;height:100%;object-fit:cover;display:block; }
  .product-category-kicker{ display:block;font-size:11px;letter-spacing:.12em;color:#A4F4FD;margin-bottom:5px; }
  .product-category-intro h3{ font-family:'Inter',system-ui,sans-serif;font-size:25px;margin:0 0 5px; }
  .product-category-intro p{ color:rgba(255,255,255,.56);font-size:14px;max-width:760px;margin:0; }
  .product-category-count{ min-width:86px;text-align:center;padding-left:22px;border-left:1px solid rgba(255,255,255,.10); }
  .product-category-count strong{ display:block;font-size:28px;line-height:1;color:#fff; }
  .product-category-count span{ display:block;margin-top:5px;font-size:11px;color:rgba(255,255,255,.42); }

  .product-catalog-grid{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }
  .catalog-card{
    min-height:355px;display:flex;flex-direction:column;position:relative;overflow:hidden;
    border-radius:24px;border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.018);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.08);
    cursor:pointer;transition:transform .45s cubic-bezier(.22,1,.36,1),background .3s,border-color .3s;
  }
  .catalog-card:hover{ transform:translateY(-8px);background:rgba(255,255,255,.04);border-color:rgba(164,244,253,.24); }
  .catalog-card-visual{
    min-height:170px;display:grid;place-items:center;position:relative;overflow:hidden;
    background:
      radial-gradient(260px circle at 50% 0%,rgba(0,210,255,.15),transparent 68%),
      linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.008));
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .catalog-card-visual::before{
    content:'';position:absolute;inset:18px;border:1px solid rgba(255,255,255,.07);border-radius:18px;
    background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.035),transparent 70%);
  }
  .catalog-card-icon{ position:relative;z-index:2;width:78px;height:78px;border-radius:22px;display:grid;place-items:center;
    background:rgba(0,0,0,.36);border:1px solid rgba(255,255,255,.12);color:#A4F4FD;box-shadow:0 18px 45px rgba(0,0,0,.30); }
  .catalog-card-icon svg{ width:38px;height:38px; }
  .catalog-card-visual.has-image{padding:0;background:#090b0e;}
  .catalog-card-product-image{width:100%;height:100%;object-fit:cover;object-position:center;display:block;position:relative;z-index:2;}
  .product-modal-visual.has-image{padding:0;}
  .product-modal-visual .product-modal-image{width:100%;height:100%;min-height:420px;object-fit:cover;object-position:center;display:block;}
  .catalog-card-body{ padding:22px;display:flex;flex-direction:column;flex:1; }
  .catalog-card-brand{ display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px; }
  .catalog-card-brand span:first-child{ font-size:11px;letter-spacing:.12em;color:#A4F4FD;text-transform:uppercase; }
  .catalog-card-brand .catalog-arrow{ width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);color:#fff;transition:transform .25s,background .25s; }
  .catalog-card:hover .catalog-arrow{ transform:translate(2px,-2px);background:rgba(255,255,255,.08); }
  .catalog-card h4{ font-family:'Inter',system-ui,sans-serif;font-size:19px;line-height:1.15;margin:0 0 9px; }
  .catalog-card p{ color:rgba(255,255,255,.52);font-size:13.5px;line-height:1.55;margin:0; }
  .catalog-card-footer{ display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:18px;font-size:12px;color:rgba(255,255,255,.38); }
  .catalog-card-footer svg{ width:16px;height:16px;color:#25D366; }

  .product-modal{ position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:22px;opacity:0;pointer-events:none;transition:opacity .25s ease; }
  .product-modal.open{ opacity:1;pointer-events:auto; }
  .product-modal-backdrop{ position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); }
  .product-modal-panel{
    position:relative;z-index:2;width:min(920px,100%);max-height:min(760px,92vh);overflow:auto;
    display:grid;grid-template-columns:.82fr 1.18fr;border-radius:30px;
    background:#0f1114;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 100px rgba(0,0,0,.65);
    transform:translateY(16px) scale(.985);transition:transform .32s cubic-bezier(.22,1,.36,1);
  }
  .product-modal.open .product-modal-panel{ transform:translateY(0) scale(1); }
  .product-modal-close{ position:absolute;right:16px;top:16px;z-index:5;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.45);color:#fff;cursor:pointer; }
  .product-modal-visual{ min-height:420px;display:grid;place-items:center;background:radial-gradient(420px circle at 40% 18%,rgba(0,210,255,.18),transparent 64%),#090b0e;border-right:1px solid rgba(255,255,255,.08); }
  .product-modal-visual .catalog-card-icon{ width:118px;height:118px;border-radius:30px; }
  .product-modal-visual .catalog-card-icon svg{ width:58px;height:58px; }
  .product-modal-content{ padding:48px 42px 40px; }
  .product-modal-category{ display:block;font-size:11px;letter-spacing:.13em;color:#A4F4FD;text-transform:uppercase;margin-bottom:10px; }
  .product-modal-content h3{ font-family:'Inter',system-ui,sans-serif;font-size:clamp(28px,4vw,42px);line-height:1.04;letter-spacing:-.035em;margin:0 0 16px; }
  .product-modal-content>p{ color:rgba(255,255,255,.60);font-size:15px;line-height:1.65;margin:0 0 26px; }
  .product-modal-points{ display:grid;gap:10px;margin-bottom:30px; }
  .product-modal-point{ display:flex;gap:10px;align-items:flex-start;color:rgba(255,255,255,.70);font-size:13.5px; }
  .product-modal-point::before{ content:'✓';flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:rgba(164,244,253,.10);color:#A4F4FD;font-size:11px;margin-top:1px; }
  .product-modal-actions{ display:flex;gap:10px;flex-wrap:wrap; }
  .product-wa-btn,.product-secondary-btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;padding:13px 18px;font:600 13px/1 'Inter',system-ui,sans-serif;text-decoration:none;cursor:pointer; }
  .product-wa-btn{ background:#25D366;color:#04130a;border:1px solid #25D366; }
  .product-wa-btn svg{ width:18px;height:18px; }
  .product-secondary-btn{ background:transparent;color:#fff;border:1px solid rgba(255,255,255,.14); }
  .product-secondary-btn:hover{ background:rgba(255,255,255,.06); }
  body.product-modal-open{ overflow:hidden; }

  @media(max-width:920px){
    .product-tabs-wrap{ border-radius:24px; }
    .product-catalog-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .product-modal-panel{ grid-template-columns:1fr; }
    .product-modal-visual{ min-height:220px;border-right:0;border-bottom:1px solid rgba(255,255,255,.08); }
    .product-modal-visual .catalog-card-icon{ width:88px;height:88px; }
  }
  @media(max-width:620px){
    .product-tabs-wrap{ gap:8px;padding:8px; }
    .product-tab{ flex:1 1 calc(50% - 8px);padding:11px 12px; }
    .product-category-intro{ grid-template-columns:auto 1fr;gap:15px;padding:20px; }
    .product-category-icon.has-image{ width:96px;height:72px; }
    .product-category-count{ grid-column:1/-1;border-left:0;border-top:1px solid rgba(255,255,255,.10);padding:15px 0 0;text-align:left;display:flex;gap:8px;align-items:baseline; }
    .product-category-count strong{ font-size:22px; }
    .product-catalog-grid{ grid-template-columns:1fr; }
    .catalog-card{ min-height:330px; }
    .product-modal{ padding:10px; }
    .product-modal-content{ padding:34px 24px 28px; }
  }


/* ===== DESIGNPRO full-site visual system ===== */
:root{--bg:#000;--bg-alt:#070707;--surface:rgba(12,12,12,.82);--surface-2:rgba(22,22,22,.9);--border:rgba(255,255,255,.18);--accent:#64CEFB;--accent-soft:rgba(100,206,251,.14);--accent-2:#fff;--accent-2-soft:rgba(255,255,255,.08);--warm:#64CEFB;--text:#fff;--text-muted:rgba(255,255,255,.80);--text-dim:rgba(255,255,255,.52);--radius:22px;--maxw:1280px}
html,body{background:#000!important;color:#fff;font-family:Inter,sans-serif}
h1,h2,h3,h4,.logo-text{font-family:Inter,sans-serif!important}.grid-bg,.glow{display:none!important}
.designpro-bg{position:fixed;inset:0;z-index:0;background:#000;overflow:hidden;pointer-events:none}.designpro-bg video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.designpro-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.68) 0%,rgba(0,0,0,.34) 48%,rgba(0,0,0,.18) 100%),linear-gradient(0deg,rgba(0,0,0,.62),transparent 52%,rgba(0,0,0,.26))}
header{background:transparent!important;border:0!important;backdrop-filter:none!important;padding-top:8px}.nav{max-width:1280px;padding:20px 28px}.logo{gap:12px}.logo svg{width:32px;height:32px;border:2px solid #fff;border-radius:50%;padding:7px}.logo svg path{fill:#fff}.logo-text{font-weight:600;font-size:21px;color:#fff}.logo-text span{color:#fff}
nav ul{gap:0!important;border:1px solid rgba(255,255,255,.34);border-radius:999px;padding:5px;background:rgba(0,0,0,.12);backdrop-filter:blur(10px)}nav ul li a{display:block;color:rgba(255,255,255,.8)!important;font-size:14px;padding:7px 13px;border-radius:999px}nav ul li a:hover,nav ul li a.active{color:#fff!important;background:rgba(255,255,255,.10)}
.cta-btn{background:#000!important;color:#fff!important;border:1px solid rgba(255,255,255,.22)!important;box-shadow:none!important;border-radius:999px}.cta-btn:hover{background:#171717!important;box-shadow:none!important}.cta-outline{border-color:rgba(255,255,255,.55)!important;color:#fff!important;background:rgba(0,0,0,.14)!important}.cta-outline:hover{background:#fff!important;color:#000!important;border-color:#fff!important}
.hero{height:100vh;min-height:720px;padding:0!important;display:flex;align-items:center;overflow:hidden;position:relative;z-index:1;background:transparent!important}#netCanvas{display:none!important}.hero-inner{width:100%;max-width:1280px;padding:135px 28px 54px;margin:auto;display:flex;flex-direction:column;justify-content:center;min-height:100vh}.hero .eyebrow{background:none!important;border:0!important;padding:0!important;margin:0 0 22px!important;color:rgba(255,255,255,.8)!important;font-family:Inter!important;font-size:12px!important;letter-spacing:.08em;text-transform:uppercase}.hero .eyebrow .dot{display:none}.hero h1{font-size:clamp(48px,8vw,118px)!important;line-height:.85!important;letter-spacing:-.055em!important;font-weight:500!important;max-width:1050px!important;margin-bottom:30px!important;color:#fff!important}.hero h1 em{font-style:normal;color:transparent!important;background:linear-gradient(100deg,#64CEFB 15%,#64CEFB 38%,#fff 50%,#64CEFB 62%,#64CEFB 85%);background-size:250% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:designproShine 3s linear infinite}@keyframes designproShine{0%{background-position:130% 0}100%{background-position:-130% 0}}.hero p.lead{max-width:680px!important;color:rgba(255,255,255,.8)!important;font-size:16px!important;line-height:1.55;margin-bottom:28px!important}.hero-ctas{margin-bottom:0!important}
section:not(.hero){background:#000!important;padding:112px 0!important}.wrap{max-width:1280px!important;padding:0 28px!important}.section-head{max-width:760px!important}.section-head .eyebrow,.about-grid .eyebrow,.contact-info .eyebrow{background:none!important;border:0!important;padding:0!important;color:#64CEFB!important;font-family:Inter!important;font-size:12px!important;letter-spacing:.08em}.section-head h2,.about-grid h2,.contact-info h2{font-size:clamp(36px,5vw,68px)!important;line-height:.98!important;letter-spacing:-.04em!important;font-weight:500!important}.section-head p,.about-grid p,.contact-info p{color:rgba(255,255,255,.7)!important}
.panel,.svc-card,.prod-card,.contact-form,.product-category-intro,.product-card,.product-modal-panel{background:#0c0c0c!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:24px!important}.panel::before,.contact-form::before{display:none!important}.svc-card:hover,.prod-card:hover,.product-card:hover{border-color:rgba(100,206,251,.65)!important;background:#111!important;transform:translateY(-5px)}.svc-icon{background:rgba(100,206,251,.12)!important;color:#64CEFB!important;border-radius:50%!important}.svc-card p,.prod-body p{color:rgba(255,255,255,.64)!important}
.chip,.brand-badge,.pill,.product-tab{border-color:rgba(255,255,255,.20)!important;color:rgba(255,255,255,.74)!important;border-radius:999px!important;background:transparent!important}.chip:hover,.brand-badge:hover,.pill.active,.pill:hover,.product-tab.active,.product-tab:hover{border-color:#64CEFB!important;color:#fff!important;background:rgba(100,206,251,.10)!important}
.product-showcase{background:#000!important}.product-showcase::before,.product-showcase::after{display:none!important}.product-category-kicker,.product-card-brand,.product-modal-category,.prod-body .tag,.prod-link{color:#64CEFB!important}.product-category-icon{background:rgba(100,206,251,.12)!important;color:#64CEFB!important;border-color:rgba(100,206,251,.3)!important}.product-category-count strong{color:#64CEFB!important}.product-card-image,.product-modal-visual{background:linear-gradient(145deg,#111,#050505)!important}.product-card-image img,.product-modal-visual img{filter:none!important}.product-card h4,.product-card h3,.product-modal-content h3{color:#fff!important}.product-card p,.product-modal-content p,.product-category-intro p{color:rgba(255,255,255,.66)!important}.product-wa-btn{background:#fff!important;color:#000!important;border-radius:999px!important}.product-secondary-btn{background:#111!important;color:#fff!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:999px!important}
.aura-menubar{background:#050505!important;border-color:rgba(255,255,255,.14)!important}.aura-menubar-left strong{color:#64CEFB!important}
.cta-band{background:#0c0c0c!important;border-color:rgba(255,255,255,.16)!important;border-radius:28px!important}.contact-form{background:#000!important}.field input,.field textarea{background:#050505!important;border-color:rgba(255,255,255,.18)!important;color:#fff!important}.field input:focus,.field textarea:focus{border-color:#64CEFB!important;box-shadow:0 0 0 3px rgba(100,206,251,.12)!important}
footer{background:#050505!important;border-color:rgba(255,255,255,.12)!important}.footer-grid h5{color:#64CEFB!important}.footer-grid a{color:rgba(255,255,255,.65)!important}#waPanel{background:#090909!important;border-color:rgba(255,255,255,.18)!important;color:#fff!important}.wa-msg,.wa-agent{background:#111!important;border-color:rgba(255,255,255,.14)!important}
@media(max-width:920px){.hero{min-height:760px}.hero-inner{padding-top:125px;justify-content:flex-end;padding-bottom:56px}.hero h1{font-size:clamp(48px,12vw,82px)!important}nav ul{display:none!important}.menu-toggle{display:block!important;color:#fff!important}}@media(max-width:560px){.nav{padding:17px 20px}.wrap{padding:0 20px!important}.hero-inner{padding:110px 20px 42px}.hero h1{font-size:49px!important}.hero p.lead{font-size:14px!important}section:not(.hero){padding:78px 0!important}.contact-form{padding:24px!important}}


/* ===== NEXTLAYER visual — SOLO FORMULARIO / CONTACTO ===== */
#contacto.nextlayer-contact{
  position:relative!important; isolation:isolate; overflow:hidden;
  background:#050505!important; min-height:100vh;
}
#contacto .nl-contact-bg{position:absolute;inset:0;z-index:-3;overflow:hidden;background:#050505;pointer-events:none}
#contacto .nl-contact-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;filter:saturate(.78) contrast(1.06)}
#contacto .nl-contact-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(5,5,5,.90) 0%,rgba(5,5,5,.70) 42%,rgba(5,5,5,.24) 78%,rgba(5,5,5,.14) 100%),linear-gradient(to bottom,rgba(5,5,5,.55) 0%,rgba(5,5,5,.18) 28%,rgba(5,5,5,.34) 64%,rgba(5,5,5,.90) 100%)}
#contacto .wrap{position:relative;z-index:2}
#contacto .contact-grid{min-height:78vh;align-items:center}
#contacto .contact-info .eyebrow{color:#b6b5b5!important;letter-spacing:.14em!important;text-transform:uppercase}
#contacto .contact-info h2{color:#fafafa!important;font-weight:400!important;letter-spacing:-.035em!important;line-height:1.02!important;text-shadow:0 3px 28px rgba(0,0,0,.62)}
#contacto .contact-info p{color:#a7a6a6!important;max-width:480px}
#contacto .contact-form{background:rgba(5,5,5,.60)!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:26px!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 28px 80px rgba(0,0,0,.38)!important}
#contacto .contact-form::before{display:none!important}
#contacto .field label{color:#b6b5b5!important}
#contacto .field input,#contacto .field textarea{background:rgba(5,5,5,.72)!important;border:1px solid rgba(255,255,255,.18)!important;color:#fafafa!important}
#contacto .field input:focus,#contacto .field textarea:focus{border-color:#fff!important;box-shadow:0 0 0 3px rgba(255,255,255,.08)!important}
#contacto .form-submit{background:#fff!important;color:#050505!important;border-color:#fff!important;border-radius:999px!important;box-shadow:none!important}
#contacto .form-submit:hover{background:#e9e9e9!important;transform:translateY(-2px)}
#contacto .contact-alt-item .ic{background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid rgba(255,255,255,.14)}
#contacto .contact-alt-item .k{color:#8b8a8a!important}#contacto .contact-alt-item .v{color:#fafafa!important}
#contacto .contact-info>a.cta-btn{background:#fff!important;color:#050505!important;border:1px solid #fff!important;border-radius:999px!important;box-shadow:none!important}
@media(max-width:920px){#contacto .nl-contact-bg video{object-position:43% center}#contacto .nl-contact-bg::after{background:linear-gradient(to right,rgba(5,5,5,.86),rgba(5,5,5,.66) 42%,rgba(5,5,5,.20) 78%,rgba(5,5,5,.10)),linear-gradient(to bottom,rgba(5,5,5,.72),rgba(5,5,5,.34) 24%,rgba(5,5,5,.34) 56%,rgba(5,5,5,.80) 82%,rgba(5,5,5,.97) 94%,#050505)}#contacto .contact-grid{min-height:auto}}


/* Logo original ASN */
.logo-original{width:118px;height:auto;display:block;object-fit:contain;background:#000;}
.footer-logo-original{width:145px;}
/* Movimiento visual de datos sobre cableado */
.catalog-card-visual{position:relative;overflow:hidden;}
.catalog-card-visual::before{content:'';position:absolute;left:-8%;right:-8%;top:70%;height:2px;z-index:3;background:linear-gradient(90deg,transparent 0%,rgba(100,206,251,.16) 18%,rgba(100,206,251,.72) 50%,rgba(100,206,251,.16) 82%,transparent 100%);transform:rotate(-7deg);box-shadow:0 0 10px rgba(100,206,251,.45);opacity:.72;}
.catalog-card-visual::after{content:'';position:absolute;z-index:4;width:7px;height:7px;border-radius:50%;left:-12px;top:calc(70% - 3px);background:#64CEFB;box-shadow:0 0 12px #64CEFB,0 0 22px rgba(100,206,251,.7);animation:cableDataFlow 2.8s linear infinite;}
@keyframes cableDataFlow{0%{left:-12px;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:calc(100% + 12px);opacity:0}}
.catalog-card-visual.has-image::before{opacity:.5;}
.catalog-card-visual.has-image::after{opacity:1;}
@media(max-width:620px){.logo-original{width:100px}.footer-logo-original{width:130px}}
/* Fondo del formulario limpio (sin video) */
#contacto.nextlayer-contact{background:#050505 !important;}
#contacto .nl-contact-bg{display:none !important;}
/* ===== Rediseño SOLO del formulario de contacto: hero con video + formulario ===== */
#contacto.nextlayer-contact{ min-height:0 !important; }

#contacto .chf-shell{
  display:flex; align-items:stretch; gap:0;
  border-radius:26px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  min-height:640px;
  background:#050505;
}

/* --- columna izquierda: video --- */
#contacto .chf-hero{
  position:relative; display:none; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  width:52%; padding:48px 44px; overflow:hidden;
}
#contacto .chf-hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
#contacto .chf-hero-content{ position:relative; z-index:1; width:100%; max-width:340px; display:flex; flex-direction:column; gap:26px; }

#contacto .chf-logo{ display:flex; align-items:center; gap:10px; }
#contacto .chf-logo-img{ width:34px; height:34px; object-fit:contain; filter:drop-shadow(0 2px 8px rgba(0,0,0,.6)); }
#contacto .chf-logo-text{ font-size:19px; font-weight:600; letter-spacing:-.01em; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.7); }

#contacto .chf-heading h3{ font-size:32px; font-weight:500; letter-spacing:-.02em; color:#fff; margin-bottom:8px; line-height:1.1; text-shadow:0 3px 16px rgba(0,0,0,.7); }
#contacto .chf-heading p{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.75); text-shadow:0 2px 10px rgba(0,0,0,.7); }

#contacto .chf-steps{ display:flex; flex-direction:column; gap:10px; width:100%; }
#contacto .chf-step{
  display:flex; align-items:center; gap:12px; padding:11px 16px; border-radius:14px;
  background:#1A1A1A; color:#fff; font-size:13.5px; font-weight:500;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
#contacto .chf-step-num{
  width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.1); color:rgba(255,255,255,.4); font-size:12px; font-weight:600; flex-shrink:0;
}
#contacto .chf-step.is-active{ background:#fff; color:#050505; }
#contacto .chf-step.is-active .chf-step-num{ background:#050505; color:#fff; }

#contacto .chf-alt{ margin-top:4px; }
#contacto .chf-alt .contact-alt-item{ background:rgba(0,0,0,.38); border-radius:12px; padding:8px 10px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }

/* stagger de entrada, reutilizando el observer .reveal ya existente en el sitio */
#contacto .chf-logo.reveal{ transition-delay:.05s; }
#contacto .chf-heading.reveal{ transition-delay:.15s; }
#contacto .chf-steps .chf-step:nth-child(1){ transition-delay:.25s; }
#contacto .chf-steps .chf-step:nth-child(2){ transition-delay:.32s; }
#contacto .chf-steps .chf-step:nth-child(3){ transition-delay:.39s; }
#contacto .chf-alt.reveal{ transition-delay:.46s; }
#contacto .chf-form-col.reveal{ transition-delay:.1s; }

/* --- columna derecha: formulario --- */
#contacto .chf-form-col{ flex:1; display:flex; align-items:center; justify-content:center; padding:56px 40px; background:#0c0c0c; }
#contacto .chf-form-inner{ width:100%; max-width:440px; }
#contacto .chf-form-header{ margin-bottom:28px; }
#contacto .chf-form-header h2{ font-size:28px; font-weight:500; letter-spacing:-.02em; color:#fff; margin-bottom:6px; }
#contacto .chf-form-header p{ font-size:13.5px; color:rgba(255,255,255,.45); }

#contacto .contact-form{ background:transparent !important; border:none !important; border-radius:0 !important; padding:0 !important; box-shadow:none !important; backdrop-filter:none !important; }
#contacto .contact-form::before{ display:none !important; }
#contacto .form-grid{ grid-template-columns:1fr 1fr; gap:16px; }
#contacto .field{ gap:6px; margin-bottom:16px; }
#contacto .field label{ font-size:13px; font-weight:500; color:#fff !important; }
#contacto .field input, #contacto .field textarea{
  background:#1A1A1A !important; border:none !important; border-radius:12px !important;
  height:44px; padding:0 16px; color:#fff !important; font-size:14px;
}
#contacto .field textarea{ height:auto; min-height:110px; padding:12px 16px; }
#contacto .field input::placeholder, #contacto .field textarea::placeholder{ color:rgba(255,255,255,.2); }
#contacto .field input:focus, #contacto .field textarea:focus{ box-shadow:0 0 0 2px rgba(255,255,255,.2) !important; border:none !important; }

#contacto .form-submit{
  width:100%; height:56px; background:#fff !important; color:#050505 !important; font-weight:600;
  border-radius:12px !important; border:none !important; margin-top:4px;
}
#contacto .form-submit:hover{ background:rgba(255,255,255,.9) !important; }
#contacto .form-submit:active{ transform:scale(.98); }

#contacto .chf-footer-link{ margin-top:20px; text-align:center; font-size:13px; color:rgba(255,255,255,.4); }
#contacto .chf-footer-link a{ color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:3px; }

@media(min-width:921px){
  #contacto .chf-hero{ display:flex; }
}
@media(max-width:920px){
  #contacto .chf-shell{ flex-direction:column; border-radius:20px; min-height:0; }
  #contacto .chf-form-col{ padding:32px 22px; }
}
@media(max-width:560px){
  #contacto .form-grid{ grid-template-columns:1fr; }
  #contacto .chf-form-col{ padding:26px 18px; }
}
/* =========================================================================
   REDISEÑO AZUL + PAGE TRANSITIONS + ENLACES (estilo "archivo 1")
   Capa final: solo visual, no toca IDs/clases usados por el <script> ni
   por el formulario (contact.php sigue recibiendo los mismos campos).
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Instrument+Serif:ital@0;1&display=swap');

:root{
  --blue:        #3054FF;
  --blue-hover:  #2040E0;
  --blue-deep:   #0B1E52;
  --blue-glow:   #10245C;
  --blue-light:  #B4C0FF;
  --accent:        var(--blue)       !important;
  --accent-soft:   rgba(48,84,255,.14)  !important;
  --accent-2:      var(--blue-light) !important;
  --accent-2-soft: rgba(180,192,255,.14) !important;
  --warm:          var(--blue-light) !important;
}
html,body{ font-family:'Instrument Sans','Inter',system-ui,sans-serif; }
::selection{ background:rgba(48,84,255,.38); color:#fff; }

/* ---------- Page Transitions ---------- */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:asn-fade-out .32s cubic-bezier(.22,1,.36,1) both; }
::view-transition-new(root){ animation:asn-fade-in .45s cubic-bezier(.22,1,.36,1) both; }
@keyframes asn-fade-out{ to{ opacity:0; transform:scale(.99); } }
@keyframes asn-fade-in{ from{ opacity:0; transform:translateY(12px) scale(1.01); } to{ opacity:1; transform:none; } }
body{ animation:asn-page-in .55s ease both; }
@keyframes asn-page-in{ from{ opacity:0; } to{ opacity:1; } }
@media(prefers-reduced-motion:reduce){ body{ animation:none!important; } ::view-transition-old(root),::view-transition-new(root){ animation:none!important; } }

/* ---------- Sello azul: quita cualquier resto cian/morado de capas previas ---------- */
.hero h1 em{
  background-image:linear-gradient(to right,#000 0%,var(--blue-deep) 12.5%,var(--blue-light) 32.5%,var(--blue) 50%,var(--blue-deep) 67.5%,#000 87.5%,#000 100%) !important;
}
.code{ background:linear-gradient(90deg,var(--blue-light),var(--blue),var(--blue-deep)) !important; }
.btn-primary{ background:linear-gradient(90deg,var(--blue),var(--blue-light)) !important; color:#04070F !important; }
.panel-row .v,.prod-thumb svg,.prod-body .tag,.prod-link,
.product-category-kicker,.product-card-brand,.product-modal-category,
.product-category-count strong,.aura-menubar-left strong,
.field label .req{ color:var(--blue-light) !important; }
.svc-icon,.product-category-icon{ background:rgba(48,84,255,.14) !important; color:var(--blue-light) !important; border-color:rgba(48,84,255,.30) !important; }
.svc-card:hover,.prod-card:hover,.product-card:hover,.chip:hover,.brand-badge:hover,.pill.active,.pill:hover,.product-tab.active,.product-tab:hover{
  border-color:rgba(48,84,255,.55) !important; background:rgba(48,84,255,.08) !important; color:#fff !important;
}
.prod-thumb{ background:radial-gradient(180px circle at 50% 0%,rgba(48,84,255,.16),transparent 70%),rgba(255,255,255,.015) !important; }
.wa-agent .dot{ background:linear-gradient(135deg,var(--blue-light),var(--blue)) !important; }
.btn-primary,.cta-btn{ background:linear-gradient(135deg,var(--blue),var(--blue-hover)) !important; color:#fff !important; box-shadow:0 10px 30px rgba(48,84,255,.35) !important; }
.cta-btn:hover{ background:linear-gradient(135deg,var(--blue-hover),var(--blue)) !important; box-shadow:0 8px 24px rgba(48,84,255,.4) !important; }
.field input:focus,.field textarea:focus{ border-color:var(--blue) !important; box-shadow:0 0 0 3px rgba(48,84,255,.18) !important; }
.aura-menubar-left strong{ color:var(--blue-light) !important; }
.footer-grid h5{ color:var(--blue-light) !important; }
.catalog-card-visual::before{ background:linear-gradient(90deg,transparent 0%,rgba(48,84,255,.18) 18%,rgba(48,84,255,.75) 50%,rgba(48,84,255,.18) 82%,transparent 100%) !important; box-shadow:0 0 10px rgba(48,84,255,.5) !important; }
.catalog-card-visual::after{ background:var(--blue) !important; box-shadow:0 0 12px var(--blue),0 0 22px rgba(48,84,255,.7) !important; }

/* lava de fondo (videos) — sello azul para que nunca se perciba morado */
.designpro-overlay{
  background:
    linear-gradient(90deg,rgba(0,0,0,.68) 0%,rgba(0,0,0,.34) 48%,rgba(0,0,0,.18) 100%),
    linear-gradient(0deg,rgba(0,0,0,.62),transparent 52%,rgba(0,0,0,.26)),
    linear-gradient(160deg,rgba(11,30,82,.34),rgba(0,0,0,.15) 60%) !important;
}
.aura-video-bg::after{
  background:
    linear-gradient(180deg,rgba(12,12,12,.20) 0%,rgba(12,12,12,.48) 46%,rgba(12,12,12,.88) 100%),
    radial-gradient(700px circle at 50% 0%,rgba(48,84,255,.14),transparent 70%) !important;
}

/* ---------- Formulario de contacto: azul, no morado ---------- */
#contacto .field input:focus,#contacto .field textarea:focus{
  border:1px solid rgba(48,84,255,.55) !important;
  box-shadow:0 0 0 3px rgba(48,84,255,.20) !important;
}
#contacto .form-submit{
  background:linear-gradient(120deg,var(--blue),var(--blue-hover)) !important;
  color:#fff !important;
  box-shadow:0 10px 26px rgba(48,84,255,.35) !important;
}
#contacto .form-submit:hover{
  background:linear-gradient(120deg,var(--blue-hover),var(--blue)) !important;
  box-shadow:0 12px 30px rgba(48,84,255,.45) !important;
  transform:translateY(-2px);
}
#contacto .chf-step.is-active{ background:var(--blue) !important; color:#fff !important; }
#contacto .chf-step.is-active .chf-step-num{ background:#fff !important; color:var(--blue) !important; }
#contacto .chf-footer-link a{ color:var(--blue-light) !important; }
#contacto .contact-info>a.cta-btn{ background:linear-gradient(135deg,var(--blue),var(--blue-hover)) !important; color:#fff !important; border-color:var(--blue) !important; }
.form-status.ok{ background:rgba(48,84,255,.14) !important; color:var(--blue-light) !important; border:1px solid rgba(48,84,255,.35) !important; }
/* sello azul sobre el video de la columna izquierda del formulario */
#contacto .chf-hero{ position:relative; }
#contacto .chf-hero::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(165deg,rgba(11,30,82,.45) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.78) 100%);
  mix-blend-mode:multiply;
}


/* ---------- Servicios: tarjetas clicables hacia WhatsApp ---------- */
a.svc-link{ display:block; color:inherit; text-decoration:none; cursor:pointer; }
a.svc-link h3{ color:#fff; }
.svc-cta{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:13px; font-weight:600; color:var(--blue-light); }
.svc-cta svg{ transition:transform .2s; }
a.svc-link:hover .svc-cta svg{ transform:translateX(4px); }

/* ---------- Formulario: video de la izquierda forzado a azul ---------- */
#contacto .chf-hero-video{ filter:hue-rotate(-40deg) saturate(1.15); }
#contacto .chf-hero::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:#3054FF; mix-blend-mode:color; opacity:.9;
}
#contacto .chf-hero-content{ z-index:2; }

/* ---------- Nav superior: tipografía estilo "archivo 1" ---------- */
nav ul li a{ font-family:'Instrument Sans',sans-serif; }
nav ul li a.active{ color:var(--blue-light) !important; }
nav ul li a.active::after{ background:var(--blue-light) !important; }

/* ---------- Enlaces del footer (estilo "archivo 1": nav-link + flecha) ---------- */
.footer-grid{ column-gap:40px; }
.footer-grid h5{
  font-family:'Instrument Sans',sans-serif !important; font-weight:600 !important;
  letter-spacing:.10em !important; font-size:12px !important;
}
.footer-grid ul{ display:flex; flex-direction:column; gap:2px; }
.footer-grid li{ margin-bottom:3px; }
.footer-grid ul li{ margin-bottom:1px; }
.footer-bottom .social-links{ display:flex; gap:10px; }
.footer-bottom .social-links a{
  width:36px; height:36px; display:flex !important; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.14); border-radius:999px; color:rgba(255,255,255,.65) !important;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.footer-bottom .social-links a:hover{ border-color:var(--blue); color:#fff !important; background:rgba(48,84,255,.14); }
.footer-bottom .social-links svg{ width:16px; height:16px; fill:currentColor; }

/* ---------- Botones "archivo 1": pill blanco + círculo azul con flecha ---------- */
a.asn-btn-primary{
  display:inline-flex; align-items:center; gap:0;
  background:#fff !important; color:#0a0400 !important; font-family:'Instrument Sans',sans-serif; font-weight:500; font-size:15px;
  padding:4px 4px 4px 22px; border-radius:999px; text-decoration:none;
  transition:box-shadow .25s ease, transform .25s ease; margin-top:6px;
}
a.asn-btn-primary:hover{ box-shadow:0 0 20px rgba(255,255,255,.3); transform:scale(1.05); color:#0a0400 !important; background:#fff !important; }
a.asn-btn-primary .asn-btn-arrow{
  width:40px; height:40px; border-radius:50%; background:var(--blue) !important;
  display:flex; align-items:center; justify-content:center; color:#fff !important; margin-left:14px; flex-shrink:0;
  transition:background .2s ease;
}
a.asn-btn-primary:hover .asn-btn-arrow{ background:var(--blue-hover) !important; }
a.asn-btn-primary .asn-btn-arrow svg{ width:18px; height:18px; }

a.asn-btn-secondary{
  font-family:'Instrument Sans',sans-serif !important; font-weight:500 !important; font-size:14.5px !important;
  display:inline-flex !important; align-items:center; gap:8px;
  color:rgba(255,255,255,.70) !important;
  padding:8px 10px; margin:0 0 0 -10px; border-radius:10px; text-decoration:none;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:color .2s ease, background .2s ease;
}
a.asn-btn-secondary:hover{ color:#fff !important; background:rgba(255,255,255,.05); }
a.asn-btn-secondary svg{ width:15px; height:15px; flex-shrink:0; color:var(--blue-light); transition:transform .2s ease; }
a.asn-btn-secondary:hover svg{ transform:translateX(4px); }

/* Etiqueta estilo pre-headline (Instrument Serif) para el bloque de marca del footer */
.footer-tagline{
  font-family:'Instrument Serif', serif; font-style:italic; font-weight:400;
  font-size:19px; line-height:1.3; color:#fff; margin:14px 0 22px; max-width:300px;
}
.footer-tagline em{ font-style:italic; color:var(--blue-light); }
#video-proyectos.asn-video{ background:#000 !important; padding:24px 0 72px !important; }
#video-proyectos .vp-frame{
  position:relative; max-width:960px; margin:0 auto; border-radius:22px; overflow:hidden;
  border:1px solid rgba(48,84,255,.35); background:#0c0c0c;
  box-shadow:0 24px 70px rgba(48,84,255,.18);
}
#video-proyectos .vp-frame video{ display:block; width:100%; height:auto; aspect-ratio:848/478; object-fit:cover; pointer-events:none; }
#video-proyectos .vp-frame::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(165deg,rgba(11,30,82,.18) 0%,rgba(0,0,0,0) 45%,rgba(0,0,0,.22) 100%);
}
@media(max-width:920px){
  #video-proyectos.asn-video{ padding:8px 0 56px !important; }
  #video-proyectos .vp-frame{ border-radius:16px; }
}
#ubicacion.asn-ubicacion{ background:#000 !important; padding:96px 0 !important; position:relative; }
#ubicacion .ub-head{ max-width:760px; margin-bottom:40px; }
#ubicacion .ub-eyebrow{ color:var(--blue-light,#B4C0FF); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; margin-bottom:12px; display:block; }
#ubicacion .ub-head h2{ font-size:clamp(30px,4.2vw,52px); line-height:1.02; letter-spacing:-.035em; font-weight:500; color:#fafafa; margin:0; }
#ubicacion .ub-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:40px; align-items:center; }
#ubicacion .ub-map{
  position:relative; border-radius:22px; overflow:hidden; min-height:440px; height:100%;
  border:1px solid rgba(48,84,255,.35); background:#0c0c0c;
  box-shadow:0 24px 70px rgba(48,84,255,.16);
}
#ubicacion .ub-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
#ubicacion .ub-list{ display:flex; flex-direction:column; gap:20px; }
#ubicacion .ub-item{
  display:flex; align-items:center; gap:20px; padding:14px 16px; border-radius:18px;
  border:1px solid transparent; text-decoration:none; color:inherit;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
#ubicacion a.ub-item:hover{ border-color:rgba(48,84,255,.45); background:rgba(48,84,255,.08); transform:translateX(4px); }
#ubicacion .ub-ic{
  flex:0 0 auto; width:64px; height:64px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--blue,#3054FF),var(--blue-hover,#2040E0)); color:#fff;
  box-shadow:0 10px 26px rgba(48,84,255,.35);
}
#ubicacion .ub-ic svg{ width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#ubicacion .ub-txt{ font-size:clamp(16px,1.5vw,20px); line-height:1.4; color:rgba(255,255,255,.88); min-width:0; overflow-wrap:anywhere; }
#ubicacion .ub-txt b{ color:#fff; font-weight:700; }
@media(max-width:920px){
  #ubicacion.asn-ubicacion{ padding:72px 0 !important; }
  #ubicacion .ub-grid{ grid-template-columns:1fr; gap:28px; }
  #ubicacion .ub-map{ min-height:320px; height:320px; }
}
@media(max-width:480px){
  #ubicacion .ub-ic{ width:54px; height:54px; border-radius:14px; }
  #ubicacion .ub-ic svg{ width:25px; height:25px; }
  #ubicacion .ub-item{ gap:14px; padding:10px 8px; }
}

/* =====================================================================
   SEO · secciones nuevas, páginas de categoría y servicio, FAQ, menú móvil
   ===================================================================== */
.skip-link{position:absolute;left:-9999px;top:8px;z-index:1000;background:#fff;color:#000;padding:10px 16px;border-radius:8px;font-weight:600}
.skip-link:focus{left:12px}
.seo-prose p{color:rgba(255,255,255,.72);max-width:880px;margin:0 0 16px;font-size:16.5px;line-height:1.75}
.seo-prose p strong{color:#fff;font-weight:600}
.seo-prose a,.faq a{color:#64CEFB;text-decoration:underline;text-underline-offset:3px}
.seo-head{max-width:880px;margin-bottom:38px}
.seo-head h2{font-family:Inter,system-ui,sans-serif;font-size:clamp(30px,4.2vw,52px);line-height:1.02;letter-spacing:-.035em;font-weight:500;margin:10px 0 16px}
.seo-head .kicker{font-size:12px;letter-spacing:.1em;color:#64CEFB;text-transform:uppercase}
.seo-head p{color:rgba(255,255,255,.7);font-size:17px;max-width:760px}
.seo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:8px}
.seo-grid .svc-card{display:block}
.seo-grid .svc-card h3{font-size:19px}
.seo-grid .svc-card p{font-size:14.5px;line-height:1.6}
.seo-split{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start}
.seo-facts{background:#0c0c0c;border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:28px}
.seo-facts h3{font-family:Inter,system-ui,sans-serif;font-size:18px;margin-bottom:14px}
.seo-facts ul{list-style:none;margin:0;padding:0}
.seo-facts li{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.74);font-size:14.5px}
.seo-facts li:last-child{border-bottom:0}
.seo-facts a{color:#64CEFB}
.brand-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.brand-row span{border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:8px 16px;font-size:13px;color:rgba(255,255,255,.8);background:rgba(255,255,255,.03)}
.cat-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.cat-links a{border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:10px 18px;font-size:13.5px;color:#fff;background:rgba(255,255,255,.04);transition:border-color .2s,background .2s}
.cat-links a:hover{border-color:#64CEFB;background:rgba(100,206,251,.1)}
.cat-link-all{display:inline-block;margin-top:14px;color:#64CEFB;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.faq{max-width:900px}
.faq details{border:1px solid rgba(255,255,255,.14);border-radius:18px;background:#0c0c0c;padding:0 24px;margin-bottom:12px;transition:border-color .2s}
.faq details[open]{border-color:rgba(100,206,251,.45)}
.faq summary{cursor:pointer;padding:20px 32px 20px 0;font-weight:600;font-size:16.5px;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:24px;color:#64CEFB;font-weight:400}
.faq details[open] summary::after{content:'–'}
.faq details p{color:rgba(255,255,255,.72);padding:0 0 20px;font-size:15.5px;line-height:1.7;margin:0}
/* páginas internas */
section.seo-page.seo-first{padding-top:150px!important;padding-bottom:40px!important}
section.seo-page.seo-next{padding-top:56px!important;padding-bottom:56px!important}
.seo-page h1{font-family:Inter,system-ui,sans-serif;font-size:clamp(34px,5.2vw,62px);line-height:1.02;letter-spacing:-.04em;font-weight:500;margin:14px 0 22px;max-width:960px}
.seo-page h2{font-family:Inter,system-ui,sans-serif;font-size:clamp(24px,3vw,36px);line-height:1.1;letter-spacing:-.03em;font-weight:500;margin:0 0 18px}
.seo-page .lead{font-size:18px;color:rgba(255,255,255,.76);max-width:820px;line-height:1.7;margin-bottom:28px}
.breadcrumb{font-size:13px;color:rgba(255,255,255,.55)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.breadcrumb li+li::before{content:'/';margin-right:6px;color:rgba(255,255,255,.3)}
.breadcrumb a{color:rgba(255,255,255,.75)}
.breadcrumb a:hover{color:#64CEFB}
.page-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.page-ctas .cta-btn{padding:14px 26px;font-size:15px;display:inline-block}
.page-ctas .cta-outline{padding:14px 26px;font-size:15px;display:inline-block}
.catalog-card.is-static{cursor:default;min-height:0}
.catalog-card.is-static:hover{transform:none}
.catalog-card.is-static .catalog-card-visual{min-height:200px}
.catalog-card.is-static .catalog-card-visual img{aspect-ratio:4/3}
.catalog-card.is-static h3{font-family:Inter,system-ui,sans-serif;font-size:19px;line-height:1.15;margin:0 0 9px}
.catalog-card.is-static ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.catalog-card.is-static li{display:flex;gap:9px;color:rgba(255,255,255,.7);font-size:13px;line-height:1.5}
.catalog-card.is-static li::before{content:'✓';flex:0 0 auto;color:#64CEFB;font-size:11px;margin-top:2px}
.catalog-card.is-static .product-wa-btn{margin-top:20px;align-self:flex-start;padding:11px 16px;font-size:12.5px}
.catalog-card.is-static .desc{margin-top:10px;color:rgba(255,255,255,.6)}
.page-footnav{display:flex;flex-wrap:wrap;gap:10px}
.page-footnav a{border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:10px 18px;font-size:13.5px;color:#fff;background:rgba(255,255,255,.04)}
.page-footnav a:hover{border-color:#64CEFB}
.seo-footer-links{margin:30px 0 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:13.5px;color:rgba(255,255,255,.55)}
@media(min-width:921px){
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr!important}
}
@media(max-width:920px){
  .seo-split{grid-template-columns:1fr;gap:28px}
  header.nav-open nav ul{display:flex!important;flex-direction:column;gap:6px;position:absolute;top:100%;left:0;right:0;background:rgba(5,5,5,.97);padding:14px 28px 22px;border:0!important;border-radius:0!important;border-bottom:1px solid rgba(255,255,255,.14)!important;backdrop-filter:none!important;width:auto;margin:0}
  header.nav-open nav ul li a{display:block;padding:10px 0!important;font-size:16px!important}
  header.nav-open nav{position:static}
}
.footer-grid li a.plain{font-size:14px}

/* Social icons: slightly larger, centered and gently bouncing on interaction. */
.footer-bottom .social-links{gap:15px;align-items:center;justify-content:center;}
.footer-bottom .social-links a{width:48px;height:48px;flex:0 0 48px;transition:background .25s,border-color .25s,color .25s,transform .25s;animation:asn-social-bounce 3s ease-in-out infinite;}
.footer-bottom .social-links a:nth-child(2){animation-delay:.22s;}
.footer-bottom .social-links a:nth-child(3){animation-delay:.44s;}
.footer-bottom .social-links svg{width:23px;height:23px;}
.footer-bottom .social-links a:hover,.footer-bottom .social-links a:focus-visible{animation:asn-social-hover .55s ease;transform:scale(1.13);color:#fff!important;}
@keyframes asn-social-bounce{0%,72%,100%{transform:translateY(0)}78%{transform:translateY(-7px)}84%{transform:translateY(0)}89%{transform:translateY(-3px)}94%{transform:translateY(0)}}
@keyframes asn-social-hover{0%,100%{transform:scale(1.13) translateY(0)}45%{transform:scale(1.13) translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.footer-bottom .social-links a{animation:none!important;transition:none!important;}}

/* Redes sociales dentro del pie de pagina: sin cubrir contenido ni WhatsApp. */
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;}
.footer-bottom .social-links{position:static;transform:none;display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;justify-content:flex-start;margin:0;z-index:auto;}
.footer-bottom .social-links a{width:48px;height:48px;flex:0 0 48px;background:#152033;border-color:rgba(255,255,255,.25);box-shadow:0 4px 16px rgba(0,0,0,.24);}
@media(max-width:600px){.footer-bottom .social-links{position:static;transform:none;gap:10px}.footer-bottom .social-links a{width:42px;height:42px;flex-basis:42px}.footer-bottom .social-links svg{width:21px;height:21px}}

/* Redes sociales centradas horizontalmente en la parte baja del pie de pagina. */
.footer-bottom{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;}
.footer-bottom .social-links{position:static!important;display:flex;flex-direction:row;justify-content:center;align-items:center;align-self:center;flex-wrap:wrap;margin:0 auto;transform:none!important;gap:14px;}
@media(max-width:600px){.footer-bottom{gap:16px}.footer-bottom .social-links{justify-content:center;gap:12px}}