*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#0A0630;                  /* Índigo Oscuro */
  --ink-soft:#110c4d;             /* Lighter Indigo for depth */
  --ink-mid:#1B365F;              /* Azul Corporativo Oscuro */
  --steel:#4370B6;                /* Azul Institucional */
  --steel-dim:#4D89E4;            /* Azul Brillante */
  --amber:#4D89E4;                /* Map amber accent to Azul Brillante */
  --amber-dim:#4370B6;            /* Map amber-dim accent to Azul Institucional */
  --amber-glow:rgba(77, 137, 228, 0.3); /* Glow using Azul Brillante */
  --text-light:#FFFFFF;           /* Blanco */
  --text-light-mute:#A7BDF1;      /* Azul Claro */
  --text-mute:#708cb8;            /* Muted Blue-grey for slate readability */
  --paper:#f5f3ef;
  --paper-alt:#ebe9e4;
  --radius:14px;
  --radius-sm:8px;
  --font-sans:'Montserrat',system-ui,sans-serif;
  --font-display:'Montserrat',system-ui,sans-serif;
  --font-mono:'Montserrat',monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(0,.55,.45,1);
  --nav-h:64px;
  --max-w:1160px;
}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  background:var(--ink);
  color:var(--text-light);
  line-height:1.6;
  font-size:15px;
  font-weight:600;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 24px;position:relative;z-index:2}
::selection{background:var(--amber);color:var(--ink)}
img{max-width:100%;display:block}

/* ===== HEADER ===== */
header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(10, 6, 48, 0.7);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(67, 112, 182, 0.3);transition:background .4s,box-shadow .4s}
header.scrolled{background:rgba(10, 6, 48, 0.92);box-shadow:0 4px 30px rgba(0,0,0,.35)}
nav.wrap{display:flex;align-items:center;height:var(--nav-h);gap:24px}
.logo{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.5px;display:flex;align-items:center;gap:10px;color:var(--text-light);flex-shrink:0;cursor:pointer}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--amber);box-shadow:0 0 14px var(--amber-glow)}
.navlinks{display:flex;align-items:center;gap:4px;flex:1}
.nav-tab{position:relative;padding:7px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--text-light-mute);transition:all .3s;cursor:pointer;background:none;border:none;font-family:var(--font-sans);white-space:nowrap}
.nav-tab:hover{color:var(--text-light);background:rgba(77, 137, 228, 0.08)}
.nav-tab.active{color:var(--amber)}
.nav-tab.active::after{content:'';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:20px;height:2px;background:var(--amber);border-radius:2px}
.nav-cta{padding:8px 20px;border-radius:50px;background:var(--amber);color:var(--ink)!important;font-size:13px;font-weight:600;transition:all .3s var(--ease);flex-shrink:0;cursor:pointer;border:none;font-family:var(--font-sans)}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 6px 24px var(--amber-glow)}
/* ===== MOBILE NAVIGATION CONTROLS ===== */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  position: relative;
  width: 40px;
  height: 40px;
  z-index: 101;
  border-radius: var(--radius-sm);
  transition: background-color 0.3s;
}
.nav-toggle:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
.nav-toggle .bar {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px auto;
  background-color: var(--text-light);
  transition: all 0.3s var(--ease);
  border-radius: 2px;
}
/* Morphing to X */
.nav-toggle.open .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  background-color: var(--amber);
}
.nav-toggle.open .bar:nth-child(2) {
  opacity: 0;
  transform: translateX(-10px);
}
.nav-toggle.open .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  background-color: var(--amber);
}

.menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
  z-index: 98;
}
.menu-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

body.menu-active {
  overflow: hidden;
}

@media(max-width:820px){
  .navlinks {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100vh;
    background: rgba(11, 13, 16, 0.94);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 80px 32px 32px 32px;
    gap: 12px;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
    z-index: 99;
    box-shadow: -10px 0 35px rgba(0,0,0,0.6);
  }
  .navlinks.open {
    transform: translateX(0);
    opacity: 1;
  }
  .nav-tab {
    width: 100%;
    text-align: left;
    font-size: 15px;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
  }
  .nav-tab:hover {
    background: rgba(255, 255, 255, 0.04);
  }
  .nav-tab.active {
    background: rgba(232, 184, 75, 0.1);
    color: var(--amber);
  }
  .nav-tab.active::after {
    display: none;
  }
  .nav-toggle {
    display: block;
  }
  .nav-cta {
    display: none;
  }
  .theme-toggle {
    margin-left: auto;
    margin-right: 4px;
  }
  .theme-toggle::after {
    display: none;
  }
}

/* ===== BACKDROP INTERACTIVE CANVAS ===== */
#hero-network-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.7;
  pointer-events: none;
}

/* ===== TAB SYSTEM ===== */
.tab-page {
  display: none;
  min-height: 100vh;
  padding-top: var(--nav-h);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s cubic-bezier(.25,1,.5,1), transform 0.5s cubic-bezier(.25,1,.5,1);
}
.tab-page.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.tab-page.tab-entering {
  animation: tabEnter 0.5s cubic-bezier(.25, 1, .3, 1) both;
}
.tab-page.tab-exiting {
  display: block !important;
  position: absolute;
  top: var(--nav-h);
  left: 0;
  width: 100%;
  pointer-events: none;
  animation: tabExit 0.4s cubic-bezier(.25, 1, .3, 1) both;
  z-index: 1;
}
@keyframes tabEnter {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes tabExit {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-30px); }
}

/* ===== PARALLAX LAYERS ===== */
.parallax-bg{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:0}
.parallax-layer{position:absolute}
.parallax-orbe{position:absolute;border-radius:50%;filter:blur(80px);opacity:.15;animation:orbeFloat 14s ease-in-out infinite alternate}
.parallax-orbe:nth-of-type(2){animation-duration:18s;animation-delay:-3s}
.parallax-orbe:nth-of-type(3){animation-duration:12s;animation-delay:-6s}
@keyframes orbeFloat {
  0%{transform:translate(0,0)}
  33%{transform:translate(25px,-18px)}
  66%{transform:translate(-12px,12px)}
  100%{transform:translate(18px,-25px)}
}
.parallax-grid{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(46,53,67,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(46,53,67,.15) 1px,transparent 1px);background-size:60px 60px;animation:gridPan 20s linear infinite}
@keyframes gridPan {
  0%{transform:translateY(0)}
  100%{transform:translateY(60px)}
}

/* ===== HERO ===== */
.hero{min-height:calc(100vh - var(--nav-h));display:flex;align-items:center;position:relative;overflow:hidden;padding:80px 0}
.hero-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:center}
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:2.5px;color:var(--amber);margin-bottom:16px;text-transform:uppercase}
.hero h1{font-family:var(--font-display);font-size:clamp(30px,4.6vw,56px);font-weight:700;line-height:1.1;letter-spacing:-1px}
.hero h1 span{color:var(--amber);position:relative;display:inline-block}
.hero h1 span::after{content:'';position:absolute;bottom:2px;left:0;right:0;height:4px;background:var(--amber);border-radius:2px;opacity:.4}
.hero .lead{color:var(--text-mute);font-size:16px;margin-top:18px;max-width:520px;line-height:1.7}
.hero-actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:50px;font-size:14px;font-weight:600;transition:all .35s var(--ease);cursor:pointer;border:none;font-family:var(--font-sans)}
.btn-primary{background:var(--amber);color:var(--ink)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 32px var(--amber-glow)}
.btn-ghost{background:transparent;color:var(--text-light);border:1px solid var(--steel)}
.btn-ghost:hover{background:rgba(255,255,255,.04);border-color:var(--steel-dim)}

/* ===== HERO VISUAL & BADGES ===== */
.hero-visual {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero-img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) - 4px);
  object-fit: cover;
  aspect-ratio: 16/10;
}
.visual-badge {
  position: absolute;
  padding: 10px 16px;
  background: rgba(11, 13, 16, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  z-index: 5;
  animation: badgeFloat 6s ease-in-out infinite;
}
.b-infra { top: 4%; left: -4%; animation-delay: 0s; }
.b-segint { top: 4%; right: -4%; animation-delay: .4s; }
.b-contop { top: 38%; left: -10%; animation-delay: .8s; }
.b-transdig { top: 38%; right: -10%; animation-delay: 1.2s; }
.b-ingsoft { bottom: 16%; left: -4%; animation-delay: 1.6s; }
.b-segcrit { bottom: 4%; right: -4%; animation-delay: 2s; }
.b-postventa { bottom: 4%; left: 20%; animation-delay: 2.4s; }
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px #4ade80;
  animation: pulseGlow 1.8s infinite;
}
.pulse-dot-amber {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 10px var(--amber);
  animation: pulseGlow 1.8s infinite;
}
@keyframes pulseGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

@media(max-width:820px){
  .hero-grid{grid-template-columns:1fr;gap:40px;text-align:center}
  .hero .lead{max-width:100%}
  .hero-actions{justify-content:center}
  .hero-visual{max-width:500px;margin:0 auto;padding:0 10px}
  .b-infra{left: 0; top: 4%;}
  .b-segint{right: 0; top: 4%;}
  .b-contop{left: 0; top: 38%;}
  .b-transdig{right: 0; top: 38%;}
  .b-ingsoft{left: 0; bottom: 16%;}
  .b-segcrit{right: 0; bottom: 4%;}
  .b-postventa{left: 10%; bottom: 4%;}
}

/* ===== SUBHERO ===== */
.subhero{padding:80px 0 50px;text-align:center;position:relative}
.subhero-num{font-family:var(--font-mono);font-size:11px;letter-spacing:3px;color:var(--amber);margin-bottom:14px}
.subhero h1{font-family:var(--font-display);font-size:clamp(28px,3.4vw,48px);font-weight:700;max-width:720px;margin:0 auto;letter-spacing:-.5px}
.subhero .lead{color:var(--text-mute);font-size:16px;margin-top:14px;max-width:580px;margin-left:auto;margin-right:auto}

/* ===== SECTION SHARED ===== */
section{padding:64px 0;position:relative}
.section-head{text-align:center;margin-bottom:40px}
.section-eyebrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:2.5px;color:var(--amber);text-transform:uppercase;margin-bottom:12px}
.section-head h2{font-family:var(--font-display);font-size:clamp(24px,2.8vw,38px);font-weight:700;letter-spacing:-.5px}
.section-head p{color:var(--text-mute);margin-top:10px;max-width:540px;margin-left:auto;margin-right:auto;font-size:15px}

/* ===== GLASSMORPHISM CARD & SCREEN ===== */
.glass-card {
  background: rgba(19, 22, 28, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
  
  /* 3D perspective variables and transitions for tilt */
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateY(0);
  transition: transform 0.15s ease-out, border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 60%);
  pointer-events: none;
  z-index: 2;
}
.glass-card:hover {
  border-color: rgba(232, 184, 75, 0.25);
  box-shadow: 0 16px 40px rgba(232, 184, 75, 0.1), 0 10px 30px rgba(0, 0, 0, 0.5);
  /* Transform rotation is handled dynamically via javascript tilt script */
}
.glass-screen {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(19, 22, 28, 0.5);
  padding: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.glass-screen:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 50px rgba(232, 184, 75, 0.12), 0 10px 25px rgba(0, 0, 0, 0.6);
  border-color: rgba(232, 184, 75, 0.25);
}
.glass-screen img {
  border-radius: calc(var(--radius) - 6px);
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.8s var(--ease);
}
.glass-screen:hover img {
  transform: scale(1.025);
}

/* ===== ABOUT ===== */
.about-row{display:grid;grid-template-columns:1.2fr 1fr;gap:50px;align-items:center}
.about-visual{width:100%}
.about-img{width:100%;height:auto;max-height:380px;object-fit:cover;border-radius:calc(var(--radius) - 6px)}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat{background:rgba(19,22,28,.65);border:1px solid rgba(255,255,255,0.05);border-radius:var(--radius);padding:24px;text-align:center;backdrop-filter:blur(8px);box-shadow:0 8px 25px rgba(0,0,0,0.3)}
.stat .n{font-family:var(--font-display);font-size:32px;font-weight:700;color:var(--amber);margin-bottom:4px}
.stat .l{font-size:12px;color:var(--text-light-mute);font-weight:600;letter-spacing:0.2px}
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.mv-card{background:rgba(19,22,28,.65);border:1px solid rgba(255,255,255,0.05);border-radius:var(--radius);padding:24px;backdrop-filter:blur(8px)}
.mv-card h4{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--amber);margin-bottom:8px}
.mv-card p{font-size:13.5px;color:var(--text-mute);line-height:1.6}
@media(max-width:820px){
  .about-row{grid-template-columns:1fr}
  .about-stats{grid-template-columns:1fr 1fr}
  .mv-grid{grid-template-columns:1fr}
}

/* ===== DIVISION LIST ===== */
.div-card{background:rgba(19,22,28,.45);border:1px solid rgba(255,255,255,0.05);border-radius:var(--radius);padding:26px 24px;transition:all 0.4s var(--ease);position:relative;cursor:pointer;backdrop-filter:blur(6px);margin-bottom:14px}
.div-card:hover{transform:translateY(-3px);border-color:var(--amber-dim);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.div-arrow{position:absolute;top:20px;right:24px;font-size:18px;color:var(--steel-dim);transition:color .3s, transform .3s}
.div-card:hover .div-arrow{color:var(--amber);transform:translateX(2px) translateY(-2px)}
.div-num{font-family:var(--font-mono);font-size:11px;color:var(--amber);margin-bottom:6px;letter-spacing:1px}
.div-card h3{font-family:var(--font-display);font-size:18px;font-weight:600;margin-bottom:6px}
.div-card p{font-size:13.5px;color:var(--text-light-mute)}

/* ===== DIV EXPAND ===== */
.div-expand{max-height:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .4s var(--ease);opacity:0}
.div-expand.open{max-height:3000px;opacity:1}
.div-expand-inner{padding:14px 24px 32px 24px;border:1px solid rgba(255,255,255,0.03);border-top:none;background:rgba(19, 22, 28, 0.2);border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);margin-bottom:24px;margin-top:-20px}

/* ===== DIVISION EXPAND DETAILS (SIDE BY SIDE) ===== */
.div-detail-row {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  gap: 36px;
  align-items: flex-start;
  margin-bottom: 32px;
  padding-top: 12px;
}
.div-detail-img {
  width: 100%;
}
.div-detail-img .glass-screen {
  padding: 8px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}
.div-detail-img img {
  border-radius: calc(var(--radius) - 6px);
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
}
.div-detail-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.detail-section-title {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--amber);
  margin-bottom: 12px;
  border-left: 2px solid var(--amber);
  padding-left: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
@media(max-width:820px){
  .div-detail-row {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ===== SOLUTIONS ===== */
.sol-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.sol-card{background:rgba(19,22,28,.45);border:1px solid rgba(255,255,255,0.05);border-radius:var(--radius);padding:24px 22px;transition:all .4s var(--ease);backdrop-filter:blur(6px)}
.sol-card:hover{transform:translateY(-4px);border-color:var(--amber-dim);box-shadow:0 8px 28px rgba(232, 184, 75, 0.05)}
.sol-card .ic{font-family:var(--font-mono);font-size:12px;color:var(--amber);margin-bottom:10px;font-weight:600}
.sol-card h3{font-family:var(--font-display);font-size:15px;font-weight:600;margin-bottom:6px}
.sol-card p{font-size:13px;color:var(--text-mute);line-height:1.5}

/* ===== BENEFITS ===== */
.benefits{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.benefit{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(19,22,28,.4);border:1px solid rgba(255,255,255,0.04);border-radius:var(--radius-sm);backdrop-filter:blur(6px)}
.benefit .chk{font-family:var(--font-mono);color:var(--amber);font-size:14px;font-weight:700;flex-shrink:0}
.benefit p{font-size:12.5px;color:var(--text-light-mute)}

/* ===== PROCESS ===== */
.process{display:flex;flex-wrap:wrap;gap:12px}
.process-step{background:rgba(19,22,28,.4);border:1px solid rgba(255,255,255,0.04);border-radius:var(--radius);padding:14px 18px;display:flex;align-items:center;gap:12px;flex:1;min-width:130px;max-width:180px;transition:all .4s var(--ease);backdrop-filter:blur(6px)}
.process-step:hover{transform:translateY(-3px);border-color:rgba(232,184,75,0.2)}
.process-num{font-family:var(--font-mono);font-size:18px;font-weight:700;color:var(--amber);flex-shrink:0}
.process-step h3{font-family:var(--font-display);font-size:13px;font-weight:600}

/* ===== VALUES ===== */
.valor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.valor-item{background:rgba(19,22,28,.45);border:1px solid rgba(255,255,255,0.05);border-radius:var(--radius);padding:28px 24px;text-align:center;transition:all .4s var(--ease);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center}
.valor-item .ic{margin-bottom:12px;display:flex;align-items:center;justify-content:center}
.val-icon{width:30px;height:30px;transition:transform 0.4s var(--ease);filter:drop-shadow(0 0 4px var(--amber-glow))}
.valor-item:hover .val-icon{transform:scale(1.15) rotate(5deg)}
.valor-item h3{font-family:var(--font-display);font-size:16px;font-weight:600;margin-bottom:8px}
.valor-item p{font-size:13px;color:var(--text-mute);line-height:1.5}
@media(max-width:820px){.valor-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.valor-grid{grid-template-columns:1fr}}

/* ===== CTA ===== */
.cta{text-align:center;padding:48px 36px;border-radius:var(--radius);z-index:2}
.cta h2{font-family:var(--font-display);font-size:clamp(20px,2.2vw,30px);font-weight:700;max-width:500px;margin:0 auto}
.cta p{color:var(--text-mute);margin-top:10px;font-size:14.5px}
.cta .btn{margin-top:22px}

/* ===== POST VENTA SIDE-BY-SIDE ===== */
.postventa-row {
  display: grid;
  grid-template-columns: 1.1fr 1.5fr;
  gap: 36px;
  align-items: center;
}
.postventa-visual {
  width: 100%;
}
.after-sales-img {
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: cover;
  border-radius: calc(var(--radius) - 6px);
}
@media(max-width:820px) {
  .postventa-row {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* ===== CONTACT ===== */
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;max-width:960px;margin:0 auto;align-items:stretch}
#contactForm {
  padding: 32px;
  border-radius: var(--radius);
}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:12.5px;font-weight:600;color:var(--text-light-mute);letter-spacing:.3px}
.field input,.field textarea{background:rgba(19,22,28,.65);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-sm);padding:12px 14px;font-size:14px;color:var(--text-light);font-family:var(--font-sans);transition:border-color .3s,box-shadow .3s;outline:none}
.field input:focus,.field textarea:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(232,184,75,.15)}
.field textarea{height:110px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-status{font-family:var(--font-mono);font-size:12px;color:var(--amber-dim);transition:opacity .4s}
.contact-info{border-radius:var(--radius);padding:28px}
.contact-info h3{font-family:var(--font-display);font-size:18px;font-weight:600;margin-bottom:20px;color:var(--text-light)}
.cinfo-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.05)}
.cinfo-item:last-child{border-bottom:none}
.cinfo-item .lbl{font-size:12px;font-weight:600;color:var(--text-mute);min-width:80px;flex-shrink:0}
.cinfo-item .val{font-size:14px;color:var(--text-light-mute);line-height:1.5}
@media(max-width:820px){
  .contact-grid{grid-template-columns:1fr;gap:30px}
  .field-row{grid-template-columns:1fr}
}

/* ===== FOOTER ===== */
footer{border-top:1px solid rgba(255,255,255,0.05);padding:48px 0 32px;position:relative;z-index:2;background:rgba(11,13,16,0.5)}
.foot-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:32px}
.foot-row .col{display:flex;flex-direction:column;gap:10px}
.foot-row .col h4{font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--text-light);margin-bottom:4px}
.foot-row .col a{font-size:13px;color:var(--text-mute);transition:color .25s;cursor:pointer}
.foot-row .col a:hover{color:var(--amber)}
.foot-row .col p{font-size:13px;color:var(--text-mute);line-height:1.6}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:20px;border-top:1px solid rgba(255,255,255,0.05);font-size:12px;color:var(--text-mute)}
.foot-bottom .mono{font-family:var(--font-mono);font-size:11px;color:var(--steel-dim)}
@media(max-width:820px){.foot-row{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:520px){.foot-row{grid-template-columns:1fr}}

/* ===== REVEAL ===== */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-30px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(30px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal-right.visible{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(.95);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal-scale.visible{opacity:1;transform:scale(1)}

/* ===== MISC ===== */
.mono{font-family:var(--font-mono)}
/* ===== WHATSAPP WIDGET ===== */
.wa-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.wa-float {
  width: 56px;
  height: 56px;
  background: #25D366;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.wa-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.55);
}
.wa-popup {
  width: 320px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateY(20px) scale(.95);
  pointer-events: none;
  transition: all 0.35s cubic-bezier(.22,1,.36,1);
  transform-origin: bottom right;
}
.wa-popup.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.wa-header {
  background: #075E54;
  color: #fff;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-sans);
}
.wa-header span {
  flex: 1;
}
.wa-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s;
  padding: 0;
}
.wa-close:hover {
  opacity: 1;
}
.wa-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wa-msg {
  background: #f0f5fb;
  padding: 14px 16px;
  border-radius: 4px 14px 14px 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #1a1a2e;
  font-family: var(--font-sans);
}
.wa-msg strong {
  color: #075E54;
}
.wa-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #25D366;
  color: #fff;
  padding: 12px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  text-decoration: none;
  transition: all 0.3s var(--ease);
  align-self: flex-start;
}
.wa-start:hover {
  background: #1da951;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}
@media(max-width:520px){
  .wa-widget {
    bottom: 16px;
    right: 16px;
  }
  .wa-float {
    width: 48px;
    height: 48px;
  }
  .wa-popup {
    width: calc(100vw - 32px);
    max-width: 320px;
  }
}

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--steel);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--steel-dim)}

/* ===== THEME TOGGLE ===== */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light-mute);
  transition: all 0.3s var(--ease);
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
}
.theme-toggle:hover {
  color: var(--amber);
  background: rgba(77, 137, 228, 0.08);
}
.theme-toggle svg {
  display: block;
}
.theme-toggle .sun-icon { display: block; }
.theme-toggle .moon-icon { display: none; }
[data-theme="light"] .theme-toggle .sun-icon { display: none; }
[data-theme="light"] .theme-toggle .moon-icon { display: block; }


/* ===== LIGHT THEME ===== */
[data-theme="light"] {
  --ink: #F5F3EF;
  --ink-soft: #EDE8E0;
  --ink-mid: #D6D0C8;
  --steel: #3A66A8;
  --steel-dim: #4D89E4;
  --amber: #3D7AD4;
  --amber-dim: #3A66A8;
  --amber-glow: rgba(61, 122, 212, 0.2);
  --text-light: #1A1A2E;
  --text-light-mute: #4A5A7A;
  --text-mute: #6A7A9A;
}
[data-theme="light"] body {
  background: var(--ink);
}
[data-theme="light"] ::selection {
  color: #fff;
}
[data-theme="light"] header {
  background: rgba(245, 243, 239, 0.7);
  border-bottom-color: rgba(58, 102, 168, 0.15);
}
[data-theme="light"] header.scrolled {
  background: rgba(245, 243, 239, 0.92);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .nav-tab:hover {
  background: rgba(61, 122, 212, 0.06);
}
[data-theme="light"] .logo img,
[data-theme="light"] img[src*="vexora-logo"] { filter: brightness(0); }

[data-theme="light"] .glass-card,
[data-theme="light"] .glass-screen {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .glass-card::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), transparent 60%);
}
[data-theme="light"] .glass-card:hover {
  border-color: rgba(61, 122, 212, 0.3);
  box-shadow: 0 16px 40px rgba(61, 122, 212, 0.1), 0 10px 30px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .glass-screen:hover {
  border-color: rgba(61, 122, 212, 0.3);
  box-shadow: 0 25px 50px rgba(61, 122, 212, 0.08), 0 10px 25px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .visual-badge {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .div-card,
[data-theme="light"] .sol-card,
[data-theme="light"] .stat,
[data-theme="light"] .mv-card,
[data-theme="light"] .valor-item,
[data-theme="light"] .benefit,
[data-theme="light"] .process-step,
[data-theme="light"] .div-expand-inner {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .div-card:hover {
  border-color: var(--amber-dim);
}
[data-theme="light"] .sol-card:hover {
  border-color: var(--amber-dim);
}
[data-theme="light"] .process-step:hover {
  border-color: rgba(61, 122, 212, 0.2);
}
[data-theme="light"] #contactForm,
[data-theme="light"] .contact-info {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .field input,
[data-theme="light"] .field textarea {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-light);
}
[data-theme="light"] .cinfo-item {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] footer {
  background: rgba(240, 238, 234, 0.8);
  border-top-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .foot-bottom {
  border-top-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .parallax-grid {
  background-image: linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
}
[data-theme="light"] .nav-toggle .bar {
  background-color: var(--text-light);
}
[data-theme="light"] ::-webkit-scrollbar-track {
  background: var(--ink);
}

/* Light theme media query — auto when no explicit data-theme */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --ink: #F5F3EF;
    --ink-soft: #EDE8E0;
    --ink-mid: #D6D0C8;
    --steel: #3A66A8;
    --steel-dim: #4D89E4;
    --amber: #3D7AD4;
    --amber-dim: #3A66A8;
    --amber-glow: rgba(61, 122, 212, 0.2);
    --text-light: #1A1A2E;
    --text-light-mute: #4A5A7A;
    --text-mute: #6A7A9A;
  }
  :root:not([data-theme]) body {
    background: #F5F3EF;
  }
  :root:not([data-theme]) ::selection {
    color: #fff;
  }
  :root:not([data-theme]) header {
    background: rgba(245, 243, 239, 0.7);
    border-bottom-color: rgba(58, 102, 168, 0.15);
  }
  :root:not([data-theme]) header.scrolled {
    background: rgba(245, 243, 239, 0.92);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
  }
  :root:not([data-theme]) .nav-tab:hover {
    background: rgba(61, 122, 212, 0.06);
  }
  :root:not([data-theme]) .logo img,
  :root:not([data-theme]) img[src*="vexora-logo"] { filter: brightness(0); }
  :root:not([data-theme]) .nav-toggle .bar {
    background-color: #1A1A2E;
  }
  :root:not([data-theme]) .glass-card,
  :root:not([data-theme]) .glass-screen {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  }
  :root:not([data-theme]) .glass-card::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), transparent 60%);
  }
  :root:not([data-theme]) .glass-card:hover {
    border-color: rgba(61, 122, 212, 0.3);
    box-shadow: 0 16px 40px rgba(61, 122, 212, 0.1), 0 10px 30px rgba(0, 0, 0, 0.08);
  }
  :root:not([data-theme]) .glass-screen:hover {
    border-color: rgba(61, 122, 212, 0.3);
    box-shadow: 0 25px 50px rgba(61, 122, 212, 0.08), 0 10px 25px rgba(0, 0, 0, 0.06);
  }
  :root:not([data-theme]) .visual-badge {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }
  :root:not([data-theme]) .div-card,
  :root:not([data-theme]) .sol-card,
  :root:not([data-theme]) .stat,
  :root:not([data-theme]) .mv-card,
  :root:not([data-theme]) .valor-item,
  :root:not([data-theme]) .benefit,
  :root:not([data-theme]) .process-step,
  :root:not([data-theme]) .div-expand-inner {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(0, 0, 0, 0.06);
  }
  :root:not([data-theme]) .div-card:hover {
    border-color: var(--amber-dim);
  }
  :root:not([data-theme]) .sol-card:hover {
    border-color: var(--amber-dim);
  }
  :root:not([data-theme]) .process-step:hover {
    border-color: rgba(61, 122, 212, 0.2);
  }
  :root:not([data-theme]) #contactForm,
  :root:not([data-theme]) .contact-info {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(0, 0, 0, 0.06);
  }
  :root:not([data-theme]) .field input,
  :root:not([data-theme]) .field textarea {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-light);
  }
  :root:not([data-theme]) .cinfo-item {
    border-bottom-color: rgba(0, 0, 0, 0.06);
  }
  :root:not([data-theme]) footer {
    background: rgba(240, 238, 234, 0.8);
    border-top-color: rgba(0, 0, 0, 0.06);
  }
  :root:not([data-theme]) .foot-bottom {
    border-top-color: rgba(0, 0, 0, 0.06);
  }
  :root:not([data-theme]) .parallax-grid {
    background-image: linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
  }
  :root:not([data-theme]) ::-webkit-scrollbar-track {
    background: #F5F3EF;
  }
}