:root{--white:#ffffff;--gray-50:#f8f9fb;--gray-100:#f1f3f6;--gray-200:#e4e7ed;--gray-300:#cdd2db;--gray-400:#9aa3b0;--gray-500:#6b7585;--gray-600:#4a5360;--gray-700:#333c47;--gray-800:#1e2530;--gray-900:#111720;--blue:#1f3a8a;--blue-mid:#2d52b8;--blue-pale:#e8eeff;--blue-pale2:#f0f4ff;--text:#111720;--text-sec:#4a5360;--text-muted:#9aa3b0;--border:#e4e7ed;--shadow-md:0 4px 12px rgba(17,23,32,.08);--shadow-lg:0 12px 32px rgba(17,23,32,.10);--font:'Inter',-apple-system,sans-serif;--section-py:96px;--container:1120px;--radius:10px;--radius-sm:6px;--radius-lg:16px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--text);background:var(--white);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
h1{font-size:clamp(36px,4.5vw,58px);font-weight:800;line-height:1.12;letter-spacing:-1.5px;color:var(--gray-900)}
h2{font-size:clamp(26px,3vw,40px);font-weight:800;line-height:1.18;letter-spacing:-1px;color:var(--gray-900)}
h3{font-size:20px;font-weight:700;color:var(--gray-900);letter-spacing:-.3px}
p{color:var(--text-sec);line-height:1.75}
.container{max-width:var(--container);margin:0 auto;padding:0 32px}
section{padding:var(--section-py) 0}
.section-label{display:inline-block;font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--blue-mid);margin-bottom:14px}
.text-center{text-align:center}
.section-alt{background:var(--gray-50)}
.section-border-top{border-top:1px solid var(--border)}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-size:15px;font-weight:600;padding:13px 24px;border-radius:var(--radius-sm);border:none;cursor:pointer;transition:all .18s ease;text-decoration:none;line-height:1;white-space:nowrap}
.btn-primary{background:var(--blue);color:var(--white)}.btn-primary:hover{background:var(--blue-mid);transform:translateY(-1px);box-shadow:0 4px 14px rgba(31,58,138,.25)}
.btn-secondary{background:var(--white);color:var(--blue);border:1.5px solid var(--blue)}.btn-secondary:hover{background:var(--blue-pale2)}
.btn-ghost{background:transparent;color:var(--text-sec);border:1.5px solid var(--border)}.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-sm{font-size:13.5px;padding:9px 18px}.btn-lg{font-size:16px;padding:16px 32px}
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,0.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);height:68px}
.nav-inner{max-width:var(--container);margin:0 auto;padding:0 32px;height:100%;display:flex;align-items:center;justify-content:space-between}
.nav-logo{font-size:19px;font-weight:800;color:var(--gray-900);letter-spacing:-.5px}.nav-logo span{color:var(--blue)}
.nav-menu{display:flex;align-items:center;gap:2px}.nav-menu>li{position:relative}
.nav-menu>li>a{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:500;color:var(--text-sec);padding:8px 12px;border-radius:var(--radius-sm);transition:color .15s,background .15s}
.nav-menu>li>a:hover{color:var(--blue);background:var(--blue-pale2)}
.nav-dropdown{position:absolute;top:calc(100% + 8px);left:0;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);min-width:220px;padding:8px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:all .15s ease;z-index:100}
.nav-menu>li:hover .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown a{display:block;padding:9px 12px;font-size:13.5px;color:var(--text-sec);border-radius:var(--radius-sm);transition:background .12s,color .12s}
.nav-dropdown a:hover{background:var(--gray-50);color:var(--blue)}
.nav-actions{display:flex;align-items:center;gap:10px}
.nav-lang{font-size:13px;font-weight:500;color:var(--text-muted);padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);transition:all .15s}
.nav-lang:hover{border-color:var(--blue);color:var(--blue)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:4px;flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--gray-700);border-radius:2px}
.hero{padding:148px 0 88px;background:var(--white);border-bottom:1px solid var(--border)}
.hero-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:100px;padding:5px 14px 5px 8px;font-size:12.5px;font-weight:500;color:var(--text-sec);margin-bottom:28px}
.hero-badge-dot{width:8px;height:8px;border-radius:50%;background:var(--blue)}
.hero h1{max-width:820px;margin-bottom:22px}
.hero-sub{font-size:19px;max-width:600px;color:var(--text-sec);margin-bottom:40px;line-height:1.65}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{display:flex;gap:48px;margin-top:64px;padding-top:40px;border-top:1px solid var(--border);flex-wrap:wrap}
.hero-stat-num{font-size:34px;font-weight:800;color:var(--gray-900);letter-spacing:-1px}
.hero-stat-label{font-size:13px;color:var(--text-muted);margin-top:3px}
.problem-list{display:flex;flex-direction:column;gap:12px}
.problem-item{display:flex;align-items:flex-start;gap:16px;padding:22px 24px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);transition:border-color .2s}
.problem-item:hover{border-color:var(--blue)}
.problem-item-icon{width:40px;height:40px;flex-shrink:0;background:var(--blue-pale2);border:1px solid var(--blue-pale);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:18px}
.problem-item-text strong{display:block;font-size:15px;font-weight:700;color:var(--gray-900);margin-bottom:4px}
.problem-item-text p{font-size:13.5px}
.problem-item-arrow{margin-left:auto;color:var(--text-muted);flex-shrink:0;align-self:center}
.cards-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.cards-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;transition:box-shadow .2s,border-color .2s,transform .2s;display:block}
.card:hover{box-shadow:var(--shadow-md);border-color:var(--gray-300);transform:translateY(-2px)}
.card-icon{width:44px;height:44px;border-radius:var(--radius);background:var(--blue-pale2);border:1px solid var(--blue-pale);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:18px}
.card h3{font-size:18px;margin-bottom:10px}.card p{font-size:14.5px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.step{padding:32px 28px;background:var(--white);border-right:1px solid var(--border)}.step:last-child{border-right:none}
.step-num{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--blue);margin-bottom:16px}
.step h3{font-size:16px;margin-bottom:8px}.step p{font-size:14px}
.industry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.industry-card{padding:24px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);transition:all .2s;display:block}
.industry-card:hover{border-color:var(--blue);background:var(--blue-pale2);transform:translateY(-2px)}
.industry-icon{font-size:26px;margin-bottom:12px}
.industry-card h3{font-size:15px;margin-bottom:6px}.industry-card p{font-size:13px}
.industry-link{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--blue);margin-top:12px}
.platform-mock{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.mock-topbar{background:var(--gray-50);border-bottom:1px solid var(--border);padding:12px 16px;display:flex;align-items:center;gap:8px}
.mock-dot{width:10px;height:10px;border-radius:50%}
.mock-url{flex:1;text-align:center;font-size:11px;color:var(--text-muted);font-family:monospace}
.mock-body{padding:24px}
.mock-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.mock-kpi{background:var(--gray-50);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px}
.mock-kpi-val{font-size:24px;font-weight:800;color:var(--gray-900);letter-spacing:-.5px}
.mock-kpi-val.green{color:#16a34a}.mock-kpi-val.amber{color:#d97706}.mock-kpi-val.blue{color:var(--blue)}
.mock-section-title{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px}
.mock-bar-list{display:flex;flex-direction:column;gap:10px}
.mock-bar-row{display:flex;align-items:center;gap:10px}
.mock-bar-name{font-size:12px;color:var(--text-sec);width:88px;flex-shrink:0}
.mock-bar-track{flex:1;height:7px;background:var(--gray-200);border-radius:4px;overflow:hidden}
.mock-bar-fill{height:100%;border-radius:4px;background:var(--blue)}
.mock-bar-fill.green{background:#16a34a}.mock-bar-fill.amber{background:#d97706}.mock-bar-fill.red{background:#dc2626}
.mock-bar-pct{font-size:12px;font-weight:600;color:var(--text-sec);width:34px;text-align:right}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.blog-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow .2s,transform .2s;display:block}
.blog-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.blog-card-body{padding:28px}
.blog-cat{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.blog-card h3{font-size:17px;margin-bottom:10px;line-height:1.38;color:var(--gray-900)}.blog-card p{font-size:14px;margin-bottom:18px}
.blog-date{font-size:12px;color:var(--text-muted)}
.blog-read{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:600;color:var(--blue)}
.cta-section{background:var(--blue);padding:var(--section-py) 0}
.cta-section h2{color:var(--white)}
footer{background:var(--gray-900);color:var(--gray-400);padding:72px 0 32px}
.footer-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:28px}
.footer-logo{font-size:18px;font-weight:800;color:var(--white);letter-spacing:-.5px;margin-bottom:12px}.footer-logo span{color:#6e99ff}
.footer-brand p{font-size:14px;line-height:1.7;max-width:280px}
.footer-col h5{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gray-300);margin-bottom:16px}
.footer-col ul{display:flex;flex-direction:column;gap:10px}
.footer-col ul li a{font-size:14px;color:var(--gray-500);transition:color .15s}.footer-col ul li a:hover{color:var(--white)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--gray-600);flex-wrap:wrap;gap:10px}
.form-group{margin-bottom:20px}
.form-label{display:block;font-size:13.5px;font-weight:600;color:var(--gray-700);margin-bottom:6px}
.form-control{width:100%;padding:11px 14px;font-family:var(--font);font-size:15px;color:var(--text);background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-sm);transition:border-color .15s,box-shadow .15s;outline:none}
.form-control:focus{border-color:var(--blue-mid);box-shadow:0 0 0 3px rgba(45,82,184,.1)}
textarea.form-control{resize:vertical;min-height:120px}
@media(max-width:1024px){.industry-grid{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(2,1fr)}.step{border-right:none;border-bottom:1px solid var(--border)}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){:root{--section-py:64px}.container{padding:0 20px}.nav-menu,.nav-actions{display:none}.nav-toggle{display:flex}.nav-menu.open{display:flex;flex-direction:column;position:fixed;top:68px;left:0;right:0;bottom:0;background:var(--white);padding:24px 20px;overflow-y:auto;border-top:1px solid var(--border);gap:4px;z-index:999}.nav-menu.open>li>a{font-size:16px;padding:12px 16px}.nav-dropdown{position:static;box-shadow:none;border:none;padding:4px 0 4px 16px;opacity:1;visibility:visible;transform:none}.cards-grid-2,.cards-grid-3{grid-template-columns:1fr}.blog-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.hero-stats{gap:24px}}
@media(max-width:480px){.industry-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}}

/* ── VIDEO HERO ─────────────────────────────────────────── */
.hero-video {
  position:relative;
  width:100%;
  height:100vh;
  min-height:600px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-video video {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
.hero-video-overlay {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background:linear-gradient(135deg, rgba(10,18,40,0.82) 0%, rgba(10,18,40,0.65) 100%);
  z-index:1;
}
.hero-video-content {
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--container);
  padding:0 32px;
  margin:0 auto;
}
.hero-video .hero-badge {
  border-color:rgba(255,255,255,.2);
  color:rgba(255,255,255,.8);
}
.hero-video .hero-badge-dot {
  background:#6e99ff;
}
.hero-video h1 {
  color:#ffffff;
  max-width:860px;
  margin-bottom:24px;
}
.hero-video h1 em {
  font-style:normal;
  color:#6e99ff;
}
.hero-video .hero-sub {
  color:rgba(255,255,255,.75);
  font-size:19px;
  max-width:620px;
  margin-bottom:40px;
}
.hero-video .btn-primary {
  background:#ffffff;
  color:var(--blue);
}
.hero-video .btn-primary:hover {
  background:var(--gray-100);
}
.hero-video .btn-ghost {
  border-color:rgba(255,255,255,.35);
  color:#ffffff;
}
.hero-video .btn-ghost:hover {
  border-color:#ffffff;
  background:rgba(255,255,255,.08);
}
.hero-video .hero-stats {
  border-top-color:rgba(255,255,255,.15);
}
.hero-video .hero-stat-num {
  color:#ffffff;
}
.hero-video .hero-stat-label {
  color:rgba(255,255,255,.6);
}

/* Scroll indicator */
.scroll-indicator {
  position:absolute;
  bottom:36px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.5);
  font-size:11px;
  font-weight:500;
  letter-spacing:2px;
  text-transform:uppercase;
  cursor:pointer;
  transition:opacity .2s;
}
.scroll-indicator:hover { opacity:.8; }
.scroll-mouse {
  width:22px;
  height:36px;
  border:2px solid rgba(255,255,255,.35);
  border-radius:12px;
  position:relative;
  display:flex;
  justify-content:center;
}
.scroll-wheel {
  width:3px;
  height:7px;
  background:rgba(255,255,255,.6);
  border-radius:2px;
  margin-top:5px;
  animation:scrollWheel 1.8s ease-in-out infinite;
}
@keyframes scrollWheel {
  0%   { transform:translateY(0); opacity:1; }
  100% { transform:translateY(12px); opacity:0; }
}

/* Proceso vertical */
.process-vertical {
  display:flex;
  flex-direction:column;
  gap:0;
  max-width:480px;
}
.process-step {
  display:flex;
  gap:20px;
  align-items:flex-start;
  position:relative;
}
.process-step-left {
  display:flex;
  flex-direction:column;
  align-items:center;
  flex-shrink:0;
  width:40px;
}
.process-num {
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  font-size:13px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.process-line {
  width:2px;
  flex:1;
  background:var(--border);
  margin:4px 0;
  min-height:32px;
}
.process-step:last-child .process-line { display:none; }
.process-content {
  padding-bottom:28px;
}
.process-content h3 { font-size:17px; margin-bottom:6px; }
.process-content p  { font-size:14px; }

@media(max-width:768px){
  .hero-video-content { padding:0 20px; }
  .hero-video h1 { font-size:32px; }
}

/* ── NAV TRANSPARENTE ───────────────────────────────────────── */
.nav {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.nav.scrolled {
  background: rgba(255,255,255,0.97);
  border-bottom-color: var(--border);
  box-shadow: 0 2px 16px rgba(17,23,32,.06);
}
/* Cuando nav es transparente, logo y links en blanco */
.nav:not(.scrolled) .nav-logo { color: #ffffff; }
.nav:not(.scrolled) .nav-logo span { color: #a8c4ff; }
.nav:not(.scrolled) .nav-menu > li > a { color: rgba(255,255,255,.82); }
.nav:not(.scrolled) .nav-menu > li > a:hover { color: #ffffff; background: rgba(255,255,255,.12); }
.nav:not(.scrolled) .nav-actions .nav-lang {
  border-color: rgba(255,255,255,.4);
  color: rgba(255,255,255,.9);
}
.nav:not(.scrolled) .nav-actions .nav-lang:hover {
  border-color: #ffffff;
  color: #ffffff;
  background: rgba(255,255,255,.1);
}
.nav:not(.scrolled) .btn-primary {
  background: rgba(255,255,255,.15);
  color: #ffffff;
  border: 1.5px solid rgba(255,255,255,.5);
}
.nav:not(.scrolled) .btn-primary:hover {
  background: rgba(255,255,255,.25);
}
.nav:not(.scrolled) .nav-toggle span { background: #ffffff; }

/* ── BOTÓN IDIOMA MÁS VISIBLE ───────────────────────────────── */
.nav.scrolled .nav-lang {
  background: var(--blue-pale2);
  border-color: var(--blue);
  color: var(--blue);
  font-weight: 600;
}
.nav.scrolled .nav-lang:hover {
  background: var(--blue);
  color: #ffffff;
  border-color: var(--blue);
}

/* ── HERO VIDEO CENTRADO ────────────────────────────────────── */
.hero-video {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
}
.hero-video-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 80px;
  padding-bottom: 80px;
}

@media(max-width:768px) {
  .hero-video-content {
    padding-top: 100px;
    padding-bottom: 60px;
  }
}

/* ── NAV TRANSPARENTE ───────────────────────────────────────── */
.nav {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.nav.scrolled {
  background: rgba(255,255,255,0.97);
  border-bottom-color: var(--border);
  box-shadow: 0 2px 16px rgba(17,23,32,.06);
}
/* Cuando nav es transparente, logo y links en blanco */
.nav:not(.scrolled) .nav-logo { color: #ffffff; }
.nav:not(.scrolled) .nav-logo span { color: #a8c4ff; }
.nav:not(.scrolled) .nav-menu > li > a { color: rgba(255,255,255,.82); }
.nav:not(.scrolled) .nav-menu > li > a:hover { color: #ffffff; background: rgba(255,255,255,.12); }
.nav:not(.scrolled) .nav-actions .nav-lang {
  border-color: rgba(255,255,255,.4);
  color: rgba(255,255,255,.9);
}
.nav:not(.scrolled) .nav-actions .nav-lang:hover {
  border-color: #ffffff;
  color: #ffffff;
  background: rgba(255,255,255,.1);
}
.nav:not(.scrolled) .btn-primary {
  background: rgba(255,255,255,.15);
  color: #ffffff;
  border: 1.5px solid rgba(255,255,255,.5);
}
.nav:not(.scrolled) .btn-primary:hover {
  background: rgba(255,255,255,.25);
}
.nav:not(.scrolled) .nav-toggle span { background: #ffffff; }

/* ── BOTÓN IDIOMA MÁS VISIBLE ───────────────────────────────── */
.nav.scrolled .nav-lang {
  background: var(--blue-pale2);
  border-color: var(--blue);
  color: var(--blue);
  font-weight: 600;
}
.nav.scrolled .nav-lang:hover {
  background: var(--blue);
  color: #ffffff;
  border-color: var(--blue);
}

/* ── HERO VIDEO CENTRADO ────────────────────────────────────── */
.hero-video {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
}
.hero-video-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 80px;
  padding-bottom: 80px;
}

@media(max-width:768px) {
  .hero-video-content {
    padding-top: 100px;
    padding-bottom: 60px;
  }
}

/* ── NAV TRANSPARENTE ───────────────────────────────────────── */
.nav {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.nav.scrolled {
  background: rgba(255,255,255,0.97);
  border-bottom-color: var(--border);
  box-shadow: 0 2px 16px rgba(17,23,32,.06);
}
/* Cuando nav es transparente, logo y links en blanco */
.nav:not(.scrolled) .nav-logo { color: #ffffff; }
.nav:not(.scrolled) .nav-logo span { color: #a8c4ff; }
.nav:not(.scrolled) .nav-menu > li > a { color: rgba(255,255,255,.82); }
.nav:not(.scrolled) .nav-menu > li > a:hover { color: #ffffff; background: rgba(255,255,255,.12); }
.nav:not(.scrolled) .nav-actions .nav-lang {
  border-color: rgba(255,255,255,.4);
  color: rgba(255,255,255,.9);
}
.nav:not(.scrolled) .nav-actions .nav-lang:hover {
  border-color: #ffffff;
  color: #ffffff;
  background: rgba(255,255,255,.1);
}
.nav:not(.scrolled) .btn-primary {
  background: rgba(255,255,255,.15);
  color: #ffffff;
  border: 1.5px solid rgba(255,255,255,.5);
}
.nav:not(.scrolled) .btn-primary:hover {
  background: rgba(255,255,255,.25);
}
.nav:not(.scrolled) .nav-toggle span { background: #ffffff; }

/* ── BOTÓN IDIOMA MÁS VISIBLE ───────────────────────────────── */
.nav.scrolled .nav-lang {
  background: var(--blue-pale2);
  border-color: var(--blue);
  color: var(--blue);
  font-weight: 600;
}
.nav.scrolled .nav-lang:hover {
  background: var(--blue);
  color: #ffffff;
  border-color: var(--blue);
}

/* ── HERO VIDEO CENTRADO ────────────────────────────────────── */
.hero-video {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
}
.hero-video-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 80px;
  padding-bottom: 80px;
}

@media(max-width:768px) {
  .hero-video-content {
    padding-top: 100px;
    padding-bottom: 60px;
  }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE — GestorCX
   ══════════════════════════════════════════════════════════════ */

/* Prevenir scroll horizontal global */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ── TABLET (≤ 1024px) ────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --section-py: 72px; }

  .container { padding: 0 24px; }

  /* Grids de 4 → 2 */
  .industry-grid { grid-template-columns: repeat(2,1fr) !important; }
  .steps         { grid-template-columns: repeat(2,1fr) !important; }
  .cards-grid-3  { grid-template-columns: repeat(2,1fr) !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}

/* ── MOBILE (≤ 768px) ─────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --section-py: 56px; }

  .container { padding: 0 16px; }

  /* Tipografía */
  h1 { font-size: clamp(28px, 7vw, 40px) !important; letter-spacing: -0.5px !important; }
  h2 { font-size: clamp(22px, 5.5vw, 32px) !important; }
  h3 { font-size: 17px !important; }

  /* ── NAV MOBILE ────────────────────────────────────────── */
  .nav-menu,
  .nav-actions { display: none !important; }

  .nav-toggle { display: flex !important; }

  .nav-menu.open {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 68px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 68px) !important;
    background: var(--white) !important;
    padding: 20px 16px 40px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-top: 1px solid var(--border) !important;
    gap: 2px !important;
    z-index: 9998 !important;
  }

  .nav-menu.open > li > a {
    display: flex !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    padding: 14px 16px !important;
    color: var(--text) !important;
    border-radius: 8px !important;
  }

  .nav-menu.open > li > a:hover {
    background: var(--blue-pale2) !important;
    color: var(--blue) !important;
  }

  /* Dropdown dentro del nav mobile */
  .nav-dropdown {
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 4px 0 4px 20px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    min-width: unset !important;
    display: none;
  }

  /* Mostrar dropdown al hover en mobile via JS — por ahora mostrar siempre */
  .nav-menu.open li:hover .nav-dropdown,
  .nav-menu.open li .nav-dropdown { display: block !important; }

  .nav-dropdown a {
    font-size: 15px !important;
    padding: 10px 12px !important;
    color: var(--text-sec) !important;
  }

  /* Botón idioma dentro del nav mobile abierto */
  .nav-menu.open::after {
    content: '';
    display: block;
    height: 20px;
  }

  /* ── HERO VIDEO ────────────────────────────────────────── */
  .hero-video { min-height: 100svh; }
  .hero-video h1 { font-size: clamp(26px, 7vw, 38px) !important; }
  .hero-video .hero-sub { font-size: 16px !important; }
  .hero-actions { flex-direction: column !important; gap: 10px !important; }
  .hero-actions .btn { width: 100% !important; justify-content: center !important; }
  .scroll-indicator { bottom: 20px !important; }

  /* ── GRIDS → 1 COLUMNA ────────────────────────────────── */
  .cards-grid-2,
  .cards-grid-3,
  .industry-grid,
  .steps,
  .blog-grid { grid-template-columns: 1fr !important; }

  /* ── GRIDS INLINE → 1 COLUMNA ────────────────────────── */
  /* Cualquier div con grid-template-columns inline */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  /* ── SECCIONES CON DOS COLUMNAS INLINE ───────────────── */
  /* Estos son los divs con style="display:grid;grid-template-columns:1fr 1fr;..." */
  div[style*="display:grid"],
  div[style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* ── HERO STATS ────────────────────────────────────────── */
  .hero-stats { flex-direction: column !important; gap: 16px !important; }

  /* ── PROCESO VERTICAL ──────────────────────────────────── */
  .process-vertical { max-width: 100% !important; }
  .process-content  { padding-bottom: 20px !important; }

  /* ── PLATFORM MOCK ─────────────────────────────────────── */
  .platform-mock { margin-top: 8px; }
  .mock-kpis { grid-template-columns: 1fr !important; }
  .mock-body { padding: 16px !important; }

  /* ── CARDS ─────────────────────────────────────────────── */
  .card { padding: 20px !important; }

  /* ── FOOTER ────────────────────────────────────────────── */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
  }
  .footer-bottom div {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: center !important;
  }

  /* ── BLOG ──────────────────────────────────────────────── */
  .blog-grid { grid-template-columns: 1fr !important; }

  /* ── BUTTONS ───────────────────────────────────────────── */
  .hero-actions .btn-lg {
    font-size: 15px !important;
    padding: 14px 24px !important;
  }

  /* ── PÁGINAS INTERNAS (landings) ──────────────────────── */
  /* Sección hero de páginas internas */
  section[style*="padding:148px"] {
    padding-top: 120px !important;
    padding-bottom: 48px !important;
  }

  /* Grid de qué evaluamos, soluciones, etc */
  .cards-grid-2 > .card,
  .cards-grid-3 > .card { padding: 18px !important; }

  /* Comparativa dos columnas en Cómo Funciona */
  div[style*="grid-template-columns:1fr 1fr"] > div,
  div[style*="grid-template-columns: 1fr 1fr"] > div {
    min-width: 0 !important;
  }

  /* Ciclo proceso (steps numerados) */
  div[style*="display:flex;flex-direction:column"] { max-width: 100% !important; }

  /* ── CONTACT TABS ──────────────────────────────────────── */
  div[style*="display:flex;gap:4px;margin-bottom:24px"] {
    flex-wrap: wrap !important;
  }
  div[style*="display:flex;gap:4px;margin-bottom:24px"] button {
    flex: 1 1 calc(50% - 4px) !important;
    font-size: 12.5px !important;
    padding: 8px 6px !important;
  }

  /* ── FORMULARIOS ───────────────────────────────────────── */
  div[style*="grid-template-columns:1fr 1fr;gap:14px"],
  div[style*="grid-template-columns: 1fr 1fr;gap:14px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── INDUSTRIAS INDEX ──────────────────────────────────── */
  .industry-card { padding: 18px !important; }

  /* ── STATS HOME ────────────────────────────────────────── */
  .mock-kpi-val { font-size: 20px !important; }

  /* Padding extra para secciones que usan padding inline */
  section { overflow-x: hidden !important; }
}

/* ── MOBILE PEQUEÑO (≤ 480px) ─────────────────────────────── */
@media (max-width: 480px) {
  .container { padding: 0 14px; }

  h1 { font-size: clamp(24px, 8vw, 32px) !important; }

  .nav-inner { padding: 0 14px !important; }

  /* Tabs de contacto en 1 columna en pantallas muy pequeñas */
  div[style*="display:flex;gap:4px;margin-bottom:24px"] button {
    flex: 1 1 100% !important;
  }

  /* Sectores en mobile pequeño */
  .industry-grid { grid-template-columns: 1fr !important; }

  /* Pills de sectores/soluciones */
  div[style*="display:flex;flex-wrap:wrap;gap:10px"] a,
  div[style*="display:flex;flex-wrap:wrap;gap:10px"] span {
    font-size: 12.5px !important;
    padding: 6px 12px !important;
  }

  .btn-lg {
    font-size: 14px !important;
    padding: 13px 20px !important;
  }
}

/* Mobile nav footer con botones */
@media (max-width: 768px) {
  .nav-menu.open {
    display: flex !important;
    flex-direction: column !important;
  }
  .mobile-nav-footer {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--border) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE — GestorCX
   ══════════════════════════════════════════════════════════════ */

/* Prevenir scroll horizontal global */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ── TABLET (≤ 1024px) ────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --section-py: 72px; }

  .container { padding: 0 24px; }

  /* Grids de 4 → 2 */
  .industry-grid { grid-template-columns: repeat(2,1fr) !important; }
  .steps         { grid-template-columns: repeat(2,1fr) !important; }
  .cards-grid-3  { grid-template-columns: repeat(2,1fr) !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}

/* ── MOBILE (≤ 768px) ─────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --section-py: 56px; }

  .container { padding: 0 16px; }

  /* Tipografía */
  h1 { font-size: clamp(28px, 7vw, 40px) !important; letter-spacing: -0.5px !important; }
  h2 { font-size: clamp(22px, 5.5vw, 32px) !important; }
  h3 { font-size: 17px !important; }

  /* ── NAV MOBILE ────────────────────────────────────────── */
  .nav-menu,
  .nav-actions { display: none !important; }

  .nav-toggle { display: flex !important; }

  .nav-menu.open {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 68px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 68px) !important;
    background: var(--white) !important;
    padding: 20px 16px 40px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-top: 1px solid var(--border) !important;
    gap: 2px !important;
    z-index: 9998 !important;
  }

  .nav-menu.open > li > a {
    display: flex !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    padding: 14px 16px !important;
    color: var(--text) !important;
    border-radius: 8px !important;
  }

  .nav-menu.open > li > a:hover {
    background: var(--blue-pale2) !important;
    color: var(--blue) !important;
  }

  /* Dropdown dentro del nav mobile */
  .nav-dropdown {
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 4px 0 4px 20px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    min-width: unset !important;
    display: none;
  }

  /* Mostrar dropdown al hover en mobile via JS — por ahora mostrar siempre */
  .nav-menu.open li:hover .nav-dropdown,
  .nav-menu.open li .nav-dropdown { display: block !important; }

  .nav-dropdown a {
    font-size: 15px !important;
    padding: 10px 12px !important;
    color: var(--text-sec) !important;
  }

  /* Botón idioma dentro del nav mobile abierto */
  .nav-menu.open::after {
    content: '';
    display: block;
    height: 20px;
  }

  /* ── HERO VIDEO ────────────────────────────────────────── */
  .hero-video { min-height: 100svh; }
  .hero-video h1 { font-size: clamp(26px, 7vw, 38px) !important; }
  .hero-video .hero-sub { font-size: 16px !important; }
  .hero-actions { flex-direction: column !important; gap: 10px !important; }
  .hero-actions .btn { width: 100% !important; justify-content: center !important; }
  .scroll-indicator { bottom: 20px !important; }

  /* ── GRIDS → 1 COLUMNA ────────────────────────────────── */
  .cards-grid-2,
  .cards-grid-3,
  .industry-grid,
  .steps,
  .blog-grid { grid-template-columns: 1fr !important; }

  /* ── GRIDS INLINE → 1 COLUMNA ────────────────────────── */
  /* Cualquier div con grid-template-columns inline */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  /* ── SECCIONES CON DOS COLUMNAS INLINE ───────────────── */
  /* Estos son los divs con style="display:grid;grid-template-columns:1fr 1fr;..." */
  div[style*="display:grid"],
  div[style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* ── HERO STATS ────────────────────────────────────────── */
  .hero-stats { flex-direction: column !important; gap: 16px !important; }

  /* ── PROCESO VERTICAL ──────────────────────────────────── */
  .process-vertical { max-width: 100% !important; }
  .process-content  { padding-bottom: 20px !important; }

  /* ── PLATFORM MOCK ─────────────────────────────────────── */
  .platform-mock { margin-top: 8px; }
  .mock-kpis { grid-template-columns: 1fr !important; }
  .mock-body { padding: 16px !important; }

  /* ── CARDS ─────────────────────────────────────────────── */
  .card { padding: 20px !important; }

  /* ── FOOTER ────────────────────────────────────────────── */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
  }
  .footer-bottom div {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: center !important;
  }

  /* ── BLOG ──────────────────────────────────────────────── */
  .blog-grid { grid-template-columns: 1fr !important; }

  /* ── BUTTONS ───────────────────────────────────────────── */
  .hero-actions .btn-lg {
    font-size: 15px !important;
    padding: 14px 24px !important;
  }

  /* ── PÁGINAS INTERNAS (landings) ──────────────────────── */
  /* Sección hero de páginas internas */
  section[style*="padding:148px"] {
    padding-top: 120px !important;
    padding-bottom: 48px !important;
  }

  /* Grid de qué evaluamos, soluciones, etc */
  .cards-grid-2 > .card,
  .cards-grid-3 > .card { padding: 18px !important; }

  /* Comparativa dos columnas en Cómo Funciona */
  div[style*="grid-template-columns:1fr 1fr"] > div,
  div[style*="grid-template-columns: 1fr 1fr"] > div {
    min-width: 0 !important;
  }

  /* Ciclo proceso (steps numerados) */
  div[style*="display:flex;flex-direction:column"] { max-width: 100% !important; }

  /* ── CONTACT TABS ──────────────────────────────────────── */
  div[style*="display:flex;gap:4px;margin-bottom:24px"] {
    flex-wrap: wrap !important;
  }
  div[style*="display:flex;gap:4px;margin-bottom:24px"] button {
    flex: 1 1 calc(50% - 4px) !important;
    font-size: 12.5px !important;
    padding: 8px 6px !important;
  }

  /* ── FORMULARIOS ───────────────────────────────────────── */
  div[style*="grid-template-columns:1fr 1fr;gap:14px"],
  div[style*="grid-template-columns: 1fr 1fr;gap:14px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── INDUSTRIAS INDEX ──────────────────────────────────── */
  .industry-card { padding: 18px !important; }

  /* ── STATS HOME ────────────────────────────────────────── */
  .mock-kpi-val { font-size: 20px !important; }

  /* Padding extra para secciones que usan padding inline */
  section { overflow-x: hidden !important; }
}

/* ── MOBILE PEQUEÑO (≤ 480px) ─────────────────────────────── */
@media (max-width: 480px) {
  .container { padding: 0 14px; }

  h1 { font-size: clamp(24px, 8vw, 32px) !important; }

  .nav-inner { padding: 0 14px !important; }

  /* Tabs de contacto en 1 columna en pantallas muy pequeñas */
  div[style*="display:flex;gap:4px;margin-bottom:24px"] button {
    flex: 1 1 100% !important;
  }

  /* Sectores en mobile pequeño */
  .industry-grid { grid-template-columns: 1fr !important; }

  /* Pills de sectores/soluciones */
  div[style*="display:flex;flex-wrap:wrap;gap:10px"] a,
  div[style*="display:flex;flex-wrap:wrap;gap:10px"] span {
    font-size: 12.5px !important;
    padding: 6px 12px !important;
  }

  .btn-lg {
    font-size: 14px !important;
    padding: 13px 20px !important;
  }
}

/* Mobile nav footer con botones */
@media (max-width: 768px) {
  .nav-menu.open {
    display: flex !important;
    flex-direction: column !important;
  }
  .mobile-nav-footer {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--border) !important;
  }
}

/* ── FOOTER: mejorar legibilidad texto ───────────────────── */
.footer-brand p { color: #9aa3b0; }
.footer-col ul li a { color: #8a95a3; }
.footer-col h5 { color: #cbd2db; }
.footer-bottom { color: #6b7585; }
footer { color: #9aa3b0; }

/* Nav lang activo */
.nav-lang-active {
  background: var(--blue) !important;
  color: #fff !important;
  border-color: var(--blue) !important;
}

/* Nav lang activo - alta especificidad */
.nav-actions .nav-lang.nav-lang-active,
.nav.scrolled .nav-actions .nav-lang.nav-lang-active,
.nav:not(.scrolled) .nav-actions .nav-lang.nav-lang-active {
  background: var(--blue) !important;
  color: #fff !important;
  border-color: var(--blue) !important;
}

/* Lang dropdown */
#lang-menu.open { display:block !important; }

/* Lang dropdown - forzar colores independiente del nav */
#lang-menu a {
  color: var(--text) !important;
  background: #fff !important;
}
#lang-menu a:hover {
  background: var(--gray-50) !important;
  color: var(--blue) !important;
}
.nav:not(.scrolled) #lang-dropdown-wrap .nav-lang {
  color: rgba(255,255,255,.9) !important;
  border-color: rgba(255,255,255,.4) !important;
}
.nav:not(.scrolled) #lang-dropdown-wrap .nav-lang:hover {
  color: #fff !important;
  border-color: #fff !important;
}

/* Fix dropdown idioma - texto visible siempre */
#lang-dropdown-wrap .nav-lang {
  color: var(--text) !important;
  border-color: var(--border) !important;
  background: var(--white) !important;
}
.nav:not(.scrolled) #lang-dropdown-wrap .nav-lang {
  color: rgba(255,255,255,.9) !important;
  border-color: rgba(255,255,255,.4) !important;
  background: transparent !important;
}
.nav:not(.scrolled) #lang-dropdown-wrap .nav-lang:hover {
  color: #fff !important;
  border-color: #fff !important;
  background: rgba(255,255,255,.1) !important;
}
.nav.scrolled #lang-dropdown-wrap .nav-lang {
  color: var(--text) !important;
  border-color: var(--border) !important;
  background: var(--white) !important;
}
.nav.scrolled #lang-dropdown-wrap .nav-lang:hover {
  color: var(--blue) !important;
  border-color: var(--blue) !important;
}

/* Lang dropdown open state */
#lang-menu.open { display:block !important; }