/* ===== FOR Human Capital — Sistema de diseño Dinámico 2026 ===== */
:root{
  --black:#000000;--bg:#060911;--bg-2:#091220;--surface:#0f172a;--surface-2:#1e293b;
  --neon:#00FF6D;--neon-deep:#00d65c;--white:#F2F6F0;--muted:#94a3b8;--muted-2:#64748b;
  --line:rgba(255,255,255,.08);--line-neon:rgba(0,255,109,.25);
  --r:16px;--maxw:1180px;--ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:'Archivo',system-ui,sans-serif;
  background-color: var(--bg);
  color: var(--white);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  background-image: 
    radial-gradient(circle at 10% 15%, rgba(28, 90, 210, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 90% 85%, rgba(0, 150, 90, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(6, 9, 17, 1) 100%);
  background-attachment: fixed;
}

h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;font-weight:600;line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.wrap-sm{max-width:920px;margin:0 auto;padding:0 28px}
.mono{font-family:'Space Mono',monospace}
.eyebrow{font-family:'Space Mono',monospace;font-weight:400;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--neon);display:inline-flex;align-items:center;gap:.7em}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--neon);display:inline-block;box-shadow:0 0 8px var(--neon)}
.eyebrow.center::before{display:none}
.neon-txt{color:var(--neon)}
::selection{background:var(--neon);color:#000}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:'Space Grotesk';font-weight:600;font-size:.95rem;padding:.9em 1.5em;border-radius:100px;cursor:pointer;border:1px solid transparent;transition:transform .35s var(--ease),background .3s,box-shadow .35s,border-color .3s,color .3s;letter-spacing:.005em;line-height:1;min-height:48px;position:relative}
.btn svg{width:17px;height:17px;transition:transform .35s var(--ease)}
.btn-primary{background:var(--neon);color:#000}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 28px rgba(0,255,109,.7)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-ghost{background:transparent;color:var(--white);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--neon);color:var(--neon);transform:translateY(-2px)}

/* ==========================================================================
   HEADER MODERNO 2026 (CÁPSULA FLOTANTE)
   ========================================================================== */
header{
  position:fixed;top:16px;left:0;right:0;z-index:100;transition:all .4s var(--ease);padding:0 24px;
}
header .wrap.nav{
  max-width:1240px;margin:0 auto;background:rgba(6, 9, 17, 0.85);backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255, 255, 255, 0.1);
  border-radius:100px;padding:10px 24px 10px 28px;box-shadow:0 20px 40px rgba(0, 0, 0, 0.5);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;transition:all .4s ease;
}
header.scrolled .wrap.nav{
  background:rgba(4, 7, 13, 0.95);border-color:rgba(0, 255, 109, 0.3);box-shadow:0 25px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 255, 109, 0.1);
}
.logo{display:flex;align-items:center;gap:.7rem;font-family:'Space Grotesk';font-weight:700;font-size:1.3rem;color:var(--white)}
.logo img{max-height:38px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:1rem;list-style:none}
.nav-links a{
  font-family:'Archivo';font-weight:500;font-size:.88rem;color:rgba(242, 246, 240, 0.75);
  position:relative;padding:7px 14px;border-radius:100px;transition:color .25s, background .25s, border-color .25s;
}
.nav-links a::after{display:none!important}
.nav-links a:hover{color:var(--white);background:rgba(255, 255, 255, 0.08)}
.nav-links a.active{color:var(--neon);background:rgba(0, 255, 109, 0.1);border:1px solid rgba(0, 255, 109, 0.25)}
.nav-cta{display:flex;align-items:center;gap:1rem}
.nav-cta .btn-primary{
  background:linear-gradient(135deg, rgba(0, 255, 109, 0.2) 0%, rgba(0, 200, 80, 0.08) 100%) !important;
  color:var(--neon) !important;border:1px solid rgba(0, 255, 109, 0.45) !important;font-size:0.88rem !important;
  padding:0.6em 1.3em !important;min-height:40px !important;box-shadow:0 0 20px rgba(0, 255, 109, 0.15);
}
.nav-cta .btn-primary:hover{background:var(--neon) !important;color:#000 !important}
.menu-btn{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.menu-btn span{width:24px;height:2px;background:var(--white);border-radius:2px;transition:.3s}

/* Section base */
section{position:relative}
.sec{padding:100px 0}
.sec-head{max-width:50rem;margin-bottom:56px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(2rem,4vw,3rem);margin:18px 0;font-weight:600;letter-spacing:-.025em}
.sec-head h2 em{font-style:normal;color:var(--neon)}
.sec-head p{font-size:1.1rem;color:var(--muted);max-width:42em}
.sec-head.center p{margin-inline:auto}
.band{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ==========================================================================
   FONDOS DE COLORES DINÁMICOS & HERO PROPORCIONADO
   ========================================================================== */


.counters {
  position: sticky !important;
  top: 80px; /* Se fija justo debajo de tu header flotante cápsula */
  z-index: 5; /* Capacidad de capa baja para que las siguientes secciones pasen por encima */
  overflow: hidden;
  background: linear-gradient(135deg, #0a192f 0%, #030712 100%);
  padding: 80px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Fondo Blanco / Perla (Quiénes somos) */
.light-section{
  background: #F4F7F5 !important;
  color: #0c121c !important;
  position: relative;
  z-index: 20;
  padding: 90px 0;
  box-shadow: 0 -20px 40px rgba(0,0,0,0.2);
  border-radius: 24px 24px 0 0;
  margin-top: -20px;
}
.light-section .sec-head h2{color: #0c121c !important}
.light-section .sec-head h2 em{color: #059669 !important; -webkit-text-fill-color: #059669 !important;}
.light-section .sec-head p{color: #475569 !important}
.light-section .eyebrow{color: #059669 !important}
.light-section .eyebrow::before{background: #059669 !important;box-shadow: 0 0 8px #059669 !important}
.light-section .vcard{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 15px 35px rgba(0,0,0,0.05) !important;
}
.light-section .vcard h3{color: #0c121c !important}
.light-section .vcard p{color: #475569 !important}
.light-section .vcard .vico{background: rgba(5, 150, 105, 0.08) !important;color: #059669 !important;border-color: rgba(5, 150, 105, 0.2) !important}
.light-section .vcard .vk{color: #059669 !important}

/* Fondo Esmeralda Profundo (Servicios / 4 Ejes) */
.emerald-section {
  background: radial-gradient(circle at 50% 0%, #065f46 0%, #022c22 60%, #011a14 100%) !important;
  position: relative;
  z-index: 25;
  padding: 100px 0;
  box-shadow: inset 0 20px 40px rgba(0, 255, 109, 0.08);
}

#tercerizacion { background: #060b14; padding: 90px 0; }
#industrias { background: #04070e; padding: 90px 0; }
#equipo { background: #070d18; padding: 90px 0; }
.cta { background: #03070f; padding: 80px 0 100px 0; position: relative; z-index: 30; }
footer { background: #020408; border-top: 1px solid var(--line); padding: 74px 0 30px; position: relative; z-index: 30; }

.light-section {
  position: relative !important;
  z-index: 10 !important; /* Pasa por encima de counters */
}

.emerald-section {
  position: relative !important;
  z-index: 15 !important; /* Pasa por encima */
}

#tercerizacion, #industrias, #equipo, .cta, footer {
  position: relative !important;
  z-index: 20 !important; /* El footer y el contacto cierran por encima de todo */
}

/* ==========================================================================
   HERO — Estilo de fondo fluido tipo "Andrómeda" (Luminoso, Azul y Naranja)
   ========================================================================== */
/* ==========================================================================
   HERO — Estilo Azul a Verde Eléctrico (Compacto y sin tonos naranjas)
   ========================================================================== */
.hero{
  position: relative;
  min-height: 78vh; /* Altura compacta para que quepa completo sin scroll forzado */
  display: flex;
  align-items: center;
  padding: 110px 0 50px 0; /* Padding vertical más ajustado */
  overflow: hidden;
  /* Degradado fluido de azul marino profundo a destellos de verde eléctrico */
  background: 
    radial-gradient(circle at 85% 25%, rgba(0, 255, 109, 0.20) 0%, transparent 50%),
    radial-gradient(circle at 15% 75%, rgba(14, 116, 226, 0.32) 0%, transparent 55%),
    linear-gradient(135deg, #050b18 0%, #030712 100%);
}

.hero-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 40px;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  z-index: 2;
}

.hero-tag{margin-bottom: 14px}

.hero h1{
  font-size: clamp(2.1rem, 3.6vw, 3.2rem); /* Tipografía optimizada para menor altura */
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: 16px;
}

.hero h1 em{
  font-style: normal;
  color: var(--neon);
  text-shadow: 0 0 30px rgba(0,255,109,.35);
}

.hero .lead{
  font-size: 1rem; /* Texto de apoyo más compacto */
  color: var(--muted);
  max-width: 31em;
  margin-bottom: 24px; /* Espaciado interno reducido */
  line-height: 1.45;
}

.hero-actions{display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px}
.hero-meta{display: flex; gap: 18px; flex-wrap: wrap; align-items: center}
.hero-meta .hm{display: flex; align-items: center; gap: .4em; font-size: .8rem; color: var(--muted); font-weight: 500}
.hero-meta .hm svg{width: 15px; height: 15px; color: var(--neon); flex: none}

/* Círculo 3D con efecto de Zoom In imponente y easing fluido */
.hero-visual{
  position: relative;
  width: 100%;
  max-width: 440px; /* Ligeramente más grande para que luzca impresionante */
  aspect-ratio: 1/1;
  margin: 0 auto;
  display: grid;
  place-items: center;
  perspective: 1200px;
  cursor: pointer;
}

.hero-3d-sphere{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  /* Transición con easing personalizado para que se sienta suave, elástica y de alta gama */
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.7));
}

/* Al poner el mouse encima, hacemos un zoom in pronunciado (1.18x) y elevamos las tarjetas flotantes */
.hero-visual:hover .hero-3d-sphere {
  transform: scale(1.18) translateZ(30px);
}

.hero-visual:hover .ring-card {
  box-shadow: 0 20px 50px rgba(0, 255, 109, 0.25);
  border-color: rgba(0, 255, 109, 0.6);
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-3d-sphere svg{width: 100%; height: 100%; overflow: visible}

.hero-visual .glow-core{
  position: absolute; width: 65%; height: 65%; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,255,109,.28), transparent 70%);
  filter: blur(35px); z-index: -1;
}

.hero-visual .ring-card{
  position: absolute; background: rgba(11, 18, 32, 0.88); border: 1px solid rgba(0,255,109,.3);
  border-radius: 12px; box-shadow: 0 12px 40px -12px rgba(0,0,0,0.7); padding: 10px 14px;
  display: flex; align-items: center; gap: 10px; backdrop-filter: blur(8px); z-index: 3;
}

.hero-visual .ring-card .ic{width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: none; background: rgba(0,255,109,.12); color: var(--neon); border: 1px solid var(--line-neon)}
.hero-visual .ring-card .ic svg{width: 16px; height: 16px}
.hero-visual .ring-card b{font-family:'Space Grotesk'; font-size: 1.15rem; font-weight: 600; line-height: 1; display: block; color: var(--white)}
.hero-visual .ring-card span{font-size: .62rem; color: var(--muted); font-weight: 500; font-family:'Space Mono',monospace}

.rc-1{top: -2%; left: -8%; animation: float 6s ease-in-out infinite}
.rc-2{top: 38%; right: -8%; animation: float 6s ease-in-out infinite .8s}
.rc-3{bottom: 2%; left: 0%; animation: float 6s ease-in-out infinite 1.6s}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ==========================================================================
   ESTILOS PRO — Hero & Pain Points (Reclutamiento)
   ========================================================================== */

/* --- Hero Rediseñado de Alto Impacto --- */
.page-hero {
  position: relative;
  background: radial-gradient(circle at 80% 20%, rgba(5, 150, 105, 0.08) 0%, transparent 50%),
              radial-gradient(circle at 10% 80%, rgba(14, 116, 226, 0.05) 0%, transparent 50%),
              #0c121c !important; /* Fondo oscuro elegante idéntico al concepto principal */
  color: #ffffff !important;
  padding: 160px 0 120px 0;
  overflow: hidden;
}

.page-hero .breadcrumb {
  font-family: 'Space Mono', monospace;
  font-size: 0.82rem;
  color: #059669;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}

.page-hero .breadcrumb a {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.2s ease;
}

.page-hero .breadcrumb a:hover {
  color: #ffffff;
}

.page-hero .eyebrow {
  display: inline-block;
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  color: #059669;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 700;
}

.page-hero h1 {
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #ffffff;
  margin-bottom: 24px;
  max-width: 900px;
}

.page-hero h1 em {
  color: #059669;
  font-style: normal;
}

.page-hero .lead {
  font-size: 1.15rem;
  color: #94a3b8;
  line-height: 1.7;
  max-width: 760px;
  margin-bottom: 40px;
}

/* ==========================================================================
   EFECTO STICKY PARALLAX — Pain Points (Quedan al fondo y las de abajo pasan encima)
   ========================================================================== */

/* 1. La sección se vuelve anclada (sticky) pero con un z-index bajo para quedar "al fondo" */
.pain-sticky-section {
  position: sticky !important;
  top: 0px; /* Se ancla justo debajo del header al hacer scroll */
  background: linear-gradient(135deg, #022c22 0%, #064e3b 100%) !important;
  color: #ffffff !important;
  padding: 140px 0;
  z-index: 1; /* Z-index bajo para que las demás secciones pasen POR ENCIMA */
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

/* 2. Aseguramos que las secciones que van DESPUÉS tengan fondo sólido y un z-index mayor
      para que literalmente "tapen" o pasen sobre la sección esmeralda */
/* ==========================================================================
   SELECTOR GLOBAL CORREGIDO (Excluyendo secciones especiales con fondo personalizado)
   ========================================================================== */
/* ==========================================================================
   SELECTOR GLOBAL CORREGIDO (Solo para secciones estándar que SÍ deben ser blancas)
   ========================================================================== */
/* .sec:not(.pain-sticky-section):not(.accordion-section):not(#tercerizacion):not(#resultados) {
  position: relative;
  background: #ffffff !important;
  z-index: 2;
} */

/* Títulos y textos en blanco para la sección esmeralda */
.pain-sticky-section .sec-head h2 {
  color: #ffffff;
}
.pain-sticky-section .sec-head h2 em {
  color: #34d399;
}
.pain-sticky-section .sec-head p {
  color: #94a3b8;
}

/* Grid de tarjetas dinámicas */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 50px;
}

/* Tarjetas individuales de cristal oscuro/esmerilado */
.pain-card-pro {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(52, 211, 153, 0.2);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  animation: floatCard 6s ease-in-out infinite alternate;
}

.pain-card-pro:nth-child(2) { animation-delay: 1s; }
.pain-card-pro:nth-child(3) { animation-delay: 2s; }
.pain-card-pro:nth-child(4) { animation-delay: 1.5s; }
.pain-card-pro:nth-child(5) { animation-delay: 2.5s; }

@keyframes floatCard {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-6px); }
}

.pain-card-pro:hover {
  transform: translateY(-12px) scale(1.02);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(52, 211, 153, 0.6);
  box-shadow: 0 20px 40px rgba(2, 44, 34, 0.6);
}

.pain-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid rgba(52, 211, 153, 0.3);
  transition: all 0.3s ease;
}

.pain-card-pro:hover .pain-icon {
  background: #34d399;
  color: #022c22;
  transform: scale(1.1) rotate(5deg);
}

.pain-icon svg {
  width: 26px;
  height: 26px;
}

.pain-card-pro p {
  font-size: 1.05rem;
  font-weight: 500;
  color: #f1f5f9;
  line-height: 1.5;
  margin: 0;
}

/* Marquee */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2);overflow:hidden;padding:18px 0}
.strip-track{display:flex;gap:54px;white-space:nowrap;animation:scroll 26s linear infinite;width:max-content}
.strip-track span{font-family:'Space Mono',monospace;font-size:.86rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;display:inline-flex;align-items:center;gap:.7em}
.strip-track span::before{content:"";width:6px;height:6px;background:var(--neon);border-radius:50%;box-shadow:0 0 8px var(--neon)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Contadores */
.counters .wrap{position:relative}
.counter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.counter{text-align:center;padding:14px 26px;position:relative}
.counter:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:64%;background:var(--line)}
.counter .num{font-family:'Space Grotesk';font-size:clamp(2.8rem,6.4vw,4.2rem);font-weight:600;line-height:1;color:var(--white)}
.counter .num .pre{color:var(--neon)}
.counter .lbl{font-family:'Space Mono',monospace;font-size:.86rem;margin-top:14px;color:var(--white);text-transform:uppercase}
.counter .sub{font-size:.84rem;color:var(--muted);margin-top:6px}

/* Tarjetas y Grids */
.vision-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.vcard{border:1px solid var(--line);border-radius:16px;padding:42px 38px;background:var(--surface);position:relative;overflow:hidden;transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.vcard:hover{transform:translateY(-4px);border-color:var(--line-neon);box-shadow:0 18px 50px -20px rgba(0,255,109,.3)}
.vcard .vico{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;margin-bottom:22px;background:rgba(0,255,109,.08);color:var(--neon);border:1px solid var(--line-neon)}
.vcard .vk{font-family:'Space Mono',monospace;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--neon);margin-bottom:12px}
.vcard h3{font-size:1.5rem;margin-bottom:14px;font-weight:600;color:var(--white)}
.vcard p{color:var(--muted);font-size:1rem}

/* ==========================================================================
   SERVICIOS / 4 EJES (Cuadrícula original limpia de 4 columnas)
   ========================================================================== */
.serv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.serv-grid.four{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.scard{
  background: rgba(11, 18, 32, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 36px 28px 30px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  /* Transición fluida para el movimiento en el hover */
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  backdrop-filter: blur(10px);
}

/* Efecto de movimiento y elevación al pasar el mouse por encima de la tarjeta */
.scard:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(0, 255, 109, 0.5);
  box-shadow: 0 20px 40px -10px rgba(0, 255, 109, 0.2);
}

/* Icono superior de cada eje */
.scard .sico{
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  background: rgba(0, 255, 109, 0.1);
  color: var(--neon);
  border: 1px solid rgba(0, 255, 109, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 109, 0.15);
}
.scard .sico svg { width: 24px; height: 24px; }

.scard h3{font-size: 1.25rem; margin-bottom: 12px; font-weight: 600; color: var(--white); letter-spacing: -0.01em;}
.scard p{color: var(--muted); font-size: 0.92rem; flex: 1; margin-bottom: 28px; line-height: 1.55;}

/* ==========================================================================
   CORRECCIÓN DEL ENLACE Y FLECHA "SABER MÁS" (Tamaño elegante y sutil)
   ========================================================================== */
.scard .more {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--neon);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  transition: gap 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Restringimos el tamaño de la flecha para que no domine toda la tarjeta */
.scard .more svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2.5;
  transition: transform 0.3s ease;
}

/* Animación sutil de la flecha al hacer hover en la tarjeta */
.scard:hover .more {
  gap: 12px;
}
.scard:hover .more svg {
  transform: translateX(4px);
}

.scard .idx{
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  color: var(--muted-2);
}

.ind-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
.sectors{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:30px}
.sectors .chip{border:1px solid var(--line);border-radius:8px;padding:.55em 1.05em;font-size:.9rem;font-weight:500;display:flex;align-items:center;gap:.5em;background:var(--surface)}
.sectors .chip:hover{border-color:var(--neon);color:var(--neon)}
.sectors .chip svg{width:16px;height:16px;color:var(--neon)}
.coverage{border-top:1px solid var(--line);padding-top:24px}
.coverage .ct{font-family:'Space Mono',monospace;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--neon);margin-bottom:14px}
.states{display:flex;flex-wrap:wrap;gap:8px 18px}
.states span{font-size:.9rem;color:var(--white);position:relative;padding-left:15px}
.states span::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--neon)}
.intl{margin-top:18px;font-size:.92rem;color:var(--muted)}
.intl b{color:var(--white)}
.map-panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:34px;position:relative;aspect-ratio:1/.9;display:grid;place-items:center;overflow:hidden}
.map-panel .glow{position:absolute;width:55%;height:55%;border-radius:50%;background:radial-gradient(circle,rgba(0,255,109,.18),transparent 70%);filter:blur(20px)}

.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tcard{border:1px solid var(--line);border-radius:16px;padding:30px 26px;background:var(--surface);transition:transform .4s var(--ease),border-color .4s;display:flex;flex-direction:column}
.tcard:hover{transform:translateY(-5px);border-color:var(--line-neon)}
.mono-ava.ava-img{width:100%;height:auto;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#0b0e0b;padding:0;margin-bottom:20px;border:1px solid var(--line-neon)}
.mono-ava.ava-img img{width:100%;height:100%;object-fit:cover;display:block}
.tcard h3{font-size:1.16rem;margin-bottom:4px;font-weight:600;color:var(--white)}
.tcard .role{font-family:'Space Mono',monospace;font-size:.72rem;text-transform:uppercase;color:var(--neon);margin-bottom:14px}
.tcard p{font-size:.89rem;color:var(--muted);line-height:1.55}

.cta-card{background:var(--surface);border:1px solid var(--line-neon);border-radius:24px;overflow:hidden;position:relative;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 0 60px -20px rgba(0,255,109,.35)}
.cta-left{padding:60px 50px;position:relative}
.cta-left h2{font-size:clamp(1.9rem,3.2vw,2.6rem);color:var(--white);margin:18px 0;font-weight:600}
.cta-left h2 em{font-style:normal;color:var(--neon)}
.cta-left .ctxt{color:var(--muted);font-size:1.05rem;margin-bottom:30px}
.cta-points{list-style:none;display:flex;flex-direction:column;gap:14px}
.cta-points li{display:flex;align-items:flex-start;gap:.7em;font-size:.96rem;color:var(--white)}
.cta-points svg{width:20px;height:20px;color:var(--neon);flex:none}
.cta-form{background:var(--bg);padding:46px 44px;position:relative;border-left:1px solid var(--line)}
.cta-form h3{font-size:1.4rem;margin-bottom:6px;font-weight:600;color:var(--white)}
.cta-form .fsub{font-size:.92rem;color:var(--muted);margin-bottom:26px}
.field{margin-bottom:16px}
.field label{display:block;font-family:'Space Mono',monospace;font-size:.72rem;color:var(--muted);margin-bottom:7px;text-transform:uppercase}
.field input,.field select,.field textarea{width:100%;font-family:'Archivo';font-size:.95rem;color:var(--white);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:.78em .9em}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--neon)}
.field textarea{resize:vertical;min-height:86px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cta-form .btn{width:100%;justify-content:center;margin-top:8px}
.form-note{font-size:.76rem;color:var(--muted-2);text-align:center;margin-top:14px;font-family:'Space Mono',monospace}

.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:46px;border-bottom:1px solid var(--line)}
.foot-brand p{font-size:.92rem;max-width:26em;color:var(--muted)}
.foot-col h4{font-family:'Space Mono',monospace;font-size:.74rem;text-transform:uppercase;color:var(--muted-2);margin-bottom:18px}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot-col a{font-size:.93rem;color:var(--muted);transition:color .25s}
.foot-col a:hover{color:var(--neon)}
.foot-contact .ci{display:flex;align-items:flex-start;gap:.6em;font-size:.92rem;margin-bottom:14px;color:var(--muted)}
.foot-contact .ci svg{width:17px;height:17px;color:var(--neon);flex:none;margin-top:3px}
.socials{display:flex;gap:10px;margin-top:6px}
.socials a{width:38px;height:38px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;transition:.3s}
.socials a:hover{background:var(--neon);border-color:var(--neon)}
.socials a:hover svg{color:#000}
.socials svg{width:18px;height:18px;color:var(--white)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:26px;font-size:.83rem;color:var(--muted-2);font-family:'Space Mono',monospace}

/* KPIs grid */
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.kpi{border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.03);padding:24px 20px;text-align:center;backdrop-filter:blur(10px)}
.kpi .kv{font-family:'Space Grotesk';font-weight:600;font-size:clamp(1.7rem,3.4vw,2.3rem);color:var(--neon)}
.kpi .kl{margin-top:10px;font-size:.9rem;color:var(--white);font-weight:500}
.kpi .ks{margin-top:4px;font-size:.78rem;color:var(--muted)}

/* ===== WhatsApp + Fory floating (Original Estable) ===== */
.fab-stack{position:fixed;right:22px;bottom:22px;z-index:150;display:flex;flex-direction:column;gap:16px;align-items:flex-end}
.fab{position:relative;border:none;cursor:pointer;display:flex;align-items:center;gap:0;transition:transform .35s var(--ease),box-shadow .35s,gap .35s var(--ease),padding .35s var(--ease)}
.fab-round{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;flex:none}
.fab svg{width:30px;height:30px}
.fab-wa{background:#25D366}
.fab-wa svg{color:#fff}
.fab-wa:hover{transform:scale(1.09) translateY(-2px);box-shadow:0 12px 30px -8px rgba(37,211,102,.7)}
.fab-wa .ring{position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:pulsering 2.2s ease-out infinite;pointer-events:none}
@keyframes pulsering{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}
.fab-fory{background:var(--neon);color:#000;box-shadow:0 10px 30px -8px rgba(0,255,109,.6)}
.fab-fory:hover{transform:scale(1.06) translateY(-2px);box-shadow:0 14px 36px -8px rgba(0,255,109,.8)}
.fab-fory .mk{width:34px;height:34px}
.fab-fory .dot{position:absolute;top:4px;right:4px;width:13px;height:13px;border-radius:50%;background:#25D366;border:2px solid #0b0e0b;animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.45}}

/* attention bubble */
.fory-tip{position:fixed;right:92px;bottom:30px;z-index:150;background:var(--surface);border:1px solid var(--line-neon);color:var(--white);font-size:.86rem;padding:11px 15px;border-radius:14px 14px 4px 14px;box-shadow:0 14px 40px -12px #000;max-width:220px;opacity:0;transform:translateY(8px) scale(.9);transform-origin:bottom right;transition:.4s var(--ease);pointer-events:none}
.fory-tip.show{opacity:1;transform:none;animation:tipbob 2.6s ease-in-out 1s infinite}
.fory-tip b{color:var(--neon)}
.fory-tip .x{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);display:grid;place-items:center;font-size:.7rem;cursor:pointer;pointer-events:auto}
@keyframes tipbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* Fory chat panel */
.fory-panel{position:fixed;right:22px;bottom:22px;width:384px;max-width:calc(100vw - 28px);height:584px;max-height:calc(100vh - 110px);background:var(--surface);border:1px solid var(--line-neon);border-radius:22px;display:flex;flex-direction:column;overflow:hidden;z-index:160;box-shadow:0 40px 90px -24px #000,0 0 70px -26px rgba(0,255,109,.5);transform:translateY(24px) scale(.94);opacity:0;pointer-events:none;transform-origin:bottom right;transition:transform .4s var(--ease),opacity .35s}
.fory-panel.open{transform:none;opacity:1;pointer-events:auto}
.fory-head{display:flex;align-items:center;gap:13px;padding:16px 18px;background:linear-gradient(120deg,rgba(0,255,109,.16),rgba(0,255,109,.04));border-bottom:1px solid var(--line-neon);position:relative}
.fory-head .av{width:44px;height:44px;border-radius:50%;background:var(--neon);display:grid;place-items:center;flex:none;box-shadow:0 0 18px -2px rgba(0,255,109,.7)}
.fory-head .av svg{width:26px;height:26px}
.fory-head .ttl{flex:1;min-width:0}
.fory-head .ttl b{font-family:'Space Grotesk';font-weight:700;font-size:1.05rem;color:var(--white);display:block;line-height:1.1}
.fory-head .ttl span{font-family:'Space Mono',monospace;font-size:.7rem;color:var(--muted);display:flex;align-items:center;gap:.4em}
.fory-head .ttl span::before{content:"";width:7px;height:7px;border-radius:50%;background:#25D366;box-shadow:0 0 8px #25D366;animation:blink 2s ease-in-out infinite}
.fory-x{background:none;border:none;color:var(--muted);cursor:pointer;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;transition:.25s;flex:none}
.fory-x:hover{background:rgba(255,255,255,.08);color:var(--white)}
.fory-x svg{width:18px;height:18px}
.fory-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:11px;background:var(--bg);scroll-behavior:smooth}
.fory-body::-webkit-scrollbar{width:6px}
.fory-body::-webkit-scrollbar-thumb{background:rgba(0,255,109,.25);border-radius:3px}
.msg{max-width:82%;padding:11px 15px;font-size:.92rem;line-height:1.5;animation:msgin .35s var(--ease) both}
.msg.bot{background:var(--surface-2);border:1px solid var(--line);color:var(--white);align-self:flex-start;border-radius:4px 15px 15px 15px}
.msg.user{background:var(--neon);color:#000;align-self:flex-end;border-radius:15px 4px 15px 15px;font-weight:500}
.msg.bot a.inline-cta{display:inline-flex;align-items:center;gap:.4em;margin-top:9px;background:var(--neon);color:#000;font-family:'Space Grotesk';font-weight:600;font-size:.84rem;padding:.5em .95em;border-radius:7px;transition:transform .25s,box-shadow .25s}
.msg.bot a.inline-cta:hover{transform:translateY(-1px);box-shadow:0 6px 16px -4px rgba(0,255,109,.6)}
.msg.bot a.inline-cta svg{width:14px;height:14px}
@keyframes msgin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.quick{display:flex;flex-wrap:wrap;gap:8px;padding:2px 2px 6px;animation:msgin .35s var(--ease) both}
.quick button{font-family:'Archivo';font-size:.82rem;font-weight:500;color:var(--neon);background:rgba(0,255,109,.06);border:1px solid var(--line-neon);border-radius:100px;padding:.5em 1em;cursor:pointer;transition:.25s}
.quick button:hover{background:var(--neon);color:#000;transform:translateY(-1px)}
.typing{align-self:flex-start;background:var(--surface-2);border:1px solid var(--line);border-radius:4px 15px 15px 15px;padding:13px 16px;display:flex;gap:5px}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--neon);opacity:.5;animation:typedot 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes typedot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.fory-foot{display:flex;gap:9px;padding:13px;border-top:1px solid var(--line);background:var(--surface)}
.fory-foot input{flex:1;font-family:'Archivo';font-size:.92rem;color:var(--white);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.7em .9em;transition:border-color .25s}
.fory-foot input:focus{outline:none;border-color:var(--neon)}
.fory-foot button{flex:none;width:44px;height:44px;border-radius:10px;background:var(--neon);color:#000;border:none;cursor:pointer;display:grid;place-items:center;transition:transform .25s,box-shadow .25s}
.fory-foot button:hover{transform:translateY(-1px);box-shadow:0 6px 16px -4px rgba(0,255,109,.6)}
.fory-foot button svg{width:20px;height:20px}
.fory-note{font-size:.68rem;color:var(--muted);text-align:center;padding:4px 14px 8px;opacity:.8}
@media (max-width:480px){
  .fory-panel{right:10px;left:10px;bottom:10px;width:auto;height:auto;top:62px;max-height:none}
  .fab-stack{right:16px;bottom:16px}
  .fory-tip{display:none}
}

/* ==========================================================================
   PROPUESTA PRO CONDENSADA — 90 Días de Garantía
   ========================================================================== */
.pro-scroll-section {
  background: #ffffff !important;
  color: #0c121c !important;
  padding: 140px 0;
  position: relative;
  overflow: hidden;
  z-index: 50 !important;
  margin-top: -2px !important;
  box-shadow: 0 -15px 30px rgba(0, 0, 0, 0.2);
}

.pro-bg-wrapper {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  pointer-events: none;
  opacity: 0.14; 
  overflow: hidden;
}

.pro-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  will-change: transform;
  padding-left: 5vw; /* Da un respiro inicial para que el "90" nazca visible en pantalla */
}
.pro-word {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17rem; 
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #059669;
  line-height: 0.85;
  margin-right: 120px;
}

/* Capa de contenido superpuesta (Tarjeta de garantía) */
.pro-content-overlay {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ==========================================================================
   TARJETA FLOTANTE CON TRANSPARENCIA (Efecto de cristal sobre el texto gigante)
   ========================================================================== */
.pro-badge-card {
  /* Fondo semitransparente oscuro/claro que deja traslucir el texto gigante de fondo */
  background: rgba(255, 255, 255, 0.18) !important; 
  border: 1px solid rgba(5, 150, 105, 0.3) !important;
  border-radius: 24px;
  padding: 32px 44px;
  display: flex;
  align-items: center;
  gap: 24px;
  /* Efecto de cristal esmerilado (Blur) para que el texto de fondo se difumine elegantemente por detrás */
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  max-width: 740px;
  width: 100%;
  position: relative;
  z-index: 5;
}
.pro-badge-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(5, 150, 105, 0.1);
  color: #059669;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid rgba(5, 150, 105, 0.25);
  box-shadow: 0 0 20px rgba(5, 150, 105, 0.15);
}

.pro-badge-icon svg { width: 30px; height: 30px; }
.pro-badge-text { flex: 1; min-width: 0; }
.pro-sub { font-family: 'Space Mono', monospace; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: #059669; display: block; margin-bottom: 4px; font-weight: 700; }
.pro-badge-text h4 { font-size: 1.4rem; color: #0c121c; font-weight: 700; letter-spacing: -0.02em; }
.pro-badge-cta { display: inline-flex; align-items: center; gap: 8px; background: #059669; color: #ffffff; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.92rem; padding: 12px 24px; border-radius: 100px; transition: all 0.3s ease; flex: none; box-shadow: 0 4px 15px rgba(5, 150, 105, 0.3); }
.pro-badge-cta:hover { background: #047857; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(5, 150, 105, 0.4); }
.pro-badge-cta svg { width: 16px; height: 16px; }

@media (max-width: 768px) {
  .pro-word { font-size: 9rem; }
  .pro-badge-card { flex-direction: column; text-align: center; padding: 24px 20px; }
  .pro-badge-cta { width: 100%; justify-content: center; }
}

/* Reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* Responsive */
@media (max-width:960px){
  .hero-grid,.vision-grid,.ind-grid,.cta-card{grid-template-columns:1fr;gap:48px}
  .serv-grid.four,.team-grid,.kpi-grid{grid-template-columns:1fr}
  .counter-grid{grid-template-columns:1fr}
  .counter:not(:last-child)::after{display:none}
}

/* ==========================================================================
   SECCIÓN INDUSTRIAS — Fondo Fijo Blanco/Gris & Esmerilado de Alta Gama
   ========================================================================== */
.industries-vanta-sec {
  position: relative;
  padding: 180px 0 130px 0 !important; /* Padding superior holgado para que no choque con lo anterior */
  overflow: visible;
  z-index: 20;
}

/* El fondo animado se queda fijo (Sticky) en la pantalla cubriendo la sección */
.vanta-container {
  position: sticky !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  margin-top: -180px; /* Compensamos exactamente el nuevo padding superior */
  margin-bottom: -100vh;
}

.industries-content-wrap {
  position: relative;
  z-index: 2;
}

.ind-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 60px auto;
}

.ind-head .eyebrow {
  display: inline-block;
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  color: #059669;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 700;
}

.ind-head h2 {
  font-size: clamp(2rem, 3.5vw, 3.0rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0c121c;
  margin-bottom: 20px;
}

.ind-head h2 em {
  color: #059669;
  font-style: normal;
}

.ind-head .ind-lead {
  font-size: 1.1rem;
  color: #4b5563;
  line-height: 1.6;
}

/* --- Cuadrícula de Tarjetas con Esmerilado Profundo --- */
.ind-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 70px;
}

.spotlight-card {
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 18px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.spotlight-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(5, 150, 105, 0.4) !important;
  box-shadow: 0 20px 40px rgba(5, 150, 105, 0.12);
}

.spotlight-card .ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(5, 150, 105, 0.1);
  color: #059669;
  display: grid;
  place-items: center;
  flex: none;
  transition: all 0.3s ease;
}

.spotlight-card:hover .ic {
  background: #059669;
  color: #ffffff;
}

.spotlight-card .ic svg { width: 22px; height: 22px; }
.spotlight-card h4 { font-size: 1rem; font-weight: 600; color: #1f2937; margin: 0; }

/* --- Caja de Cobertura Nacional Esmerilada --- */
.coverage-box {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  padding: 40px;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.03);
}

.ct-header {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: #059669;
  margin-bottom: 24px;
}

.ct-header svg { width: 24px; height: 24px; }

.states-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 30px;
}

.states-pills span {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.95);
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #374151;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(6px);
  transition: all 0.3s ease;
}

.states-pills span:hover {
  background: #059669;
  color: #ffffff;
  border-color: #059669;
  transform: translateY(-2px);
}

.intl-text { font-size: 1.05rem; color: #4b5563; margin: 0; }
.intl-text b { color: #0c121c; font-weight: 700; }

/* Animaciones de aparición al scroll */
.reveal-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   SECCIÓN ACORDEÓN — Degradado de Azul a Verde Eléctrico
   ========================================================================== */
.accordion-section {
  position: relative;
  /* Fondo degradado moderno de azul corporativo a verde eléctrico brillante */
  background: linear-gradient(135deg, #0284c7 0%, #059669 50%, #10b981 100%) !important;
  color: #ffffff !important;
  padding: 140px 0 120px 0;
  z-index: 2;
  box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.2);
}

/* Títulos y textos adaptados para resaltar sobre el fondo degradado */
.accordion-section .sec-head .eyebrow {
  color: #a7f3d0;
}

.accordion-section .sec-head h2 {
  color: #ffffff;
}

.accordion-section .sec-head h2 em {
  color: #fde047; /* Acento amarillo/limón brillante para contraste */
  font-style: normal;
}

.accordion-section .sec-head p {
  color: #e2e8f0;
}

/* Tarjetas individuales del acordeón en modo cristal oscuro/translúcido */
.acc {
  max-width: 900px;
  margin: 50px auto 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.acc-item {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s ease;
}

.acc-item:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.acc-head {
  width: 100%;
  background: transparent;
  border: none;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
  gap: 20px;
}

.acc-head .anum {
  font-family: 'Space Mono', monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: #a7f3d0;
  flex: none;
}

.acc-head .atitle {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  flex: 1;
}

/* Icono de apertura del acordeón */
.acc-head .aplus {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  display: grid;
  place-items: center;
  position: relative;
  flex: none;
  transition: transform 0.3s ease, background 0.3s ease;
}

.acc-head .aplus::before,
.acc-head .aplus::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform 0.3s ease;
}

.acc-head .aplus::before { width: 10px; height: 2px; }
.acc-head .aplus::after { width: 2px; height: 10px; }

.acc-item.open .acc-head .aplus {
  background: #ffffff;
  color: #059669;
  transform: rotate(45deg);
}

.acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s ease;
  padding: 0 28px;
}

.acc-item.open .acc-body {
  max-height: 200px;
  padding: 0 28px 28px 28px;
}

.acc-body .inner {
  font-size: 1.02rem;
  color: #f1f5f9;
  line-height: 1.6;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 16px;
}

/* ==========================================================================
   SECCIÓN TERCERIZACIÓN — Estilo Tarjeta Immersive Dark
   ========================================================================== */
#tercerizacion {
  position: relative;
  background: radial-gradient(circle at 10% 20%, rgba(5, 150, 105, 0.15) 0%, transparent 60%),
              #0c121c !important; /* Fondo oscuro tecnológico y sofisticado */
  color: #ffffff !important;
  padding: 140px 0;
  z-index: 2;
  box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.25);
}

#tercerizacion .sec-head {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(52, 211, 153, 0.2);
  border-radius: 24px;
  padding: 50px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

#tercerizacion .sec-head .eyebrow {
  color: #34d399;
  font-family: 'Space Mono', monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 16px;
  font-weight: 700;
}

#tercerizacion .sec-head h2 {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  line-height: 1.2;
}

#tercerizacion .sec-head h2 em {
  color: #34d399;
  font-style: normal;
}

#tercerizacion .sec-head p {
  font-size: 1.1rem;
  color: #94a3b8;
  line-height: 1.7;
  margin: 0;
}

#tercerizacion .sec-head p b {
  color: #ffffff;
  font-weight: 600;
  background: rgba(52, 211, 153, 0.15);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(52, 211, 153, 0.3);
}

@media (max-width: 768px) {
  #tercerizacion .sec-head {
    padding: 30px 20px;
  }
}

/* ==========================================================================
   SECCIÓN RESULTADOS Y MÉTRICAS — Diseño Pro de Alto Impacto
   ========================================================================== */
#resultados {
  position: relative;
  background: #ffffff !important; /* Fondo blanco limpio de alta gama */
  padding: 140px 0;
  z-index: 2;
  box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.05);
}

#resultados .sec-head {
  max-width: 800px;
  margin: 0 auto 60px auto;
  text-align: center;
}

#resultados .sec-head .eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  color: #059669;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 700;
  display: inline-block;
}

#resultados .sec-head h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  color: #0c121c;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

#resultados .sec-head h2 em {
  color: #059669;
  font-style: normal;
}

#resultados .sec-head p {
  font-size: 1.1rem;
  color: #4b5563;
  line-height: 1.6;
}

/* Contenedor de las métricas */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.metric {
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  padding: 40px 30px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.metric:hover {
  transform: translateY(-8px);
  background: #ffffff;
  border-color: rgba(5, 150, 105, 0.3);
  box-shadow: 0 20px 40px rgba(5, 150, 105, 0.08);
}

.metric .mv {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  letter-spacing: -0.03em;
}

.metric .mv svg {
  width: 32px;
  height: 32px;
  stroke-width: 2.5;
}

.metric p {
  font-size: 1.05rem;
  font-weight: 600;
  color: #374151;
  line-height: 1.5;
  margin: 0;
}

/* ==========================================================================
   BLINDAJE TOTAL DE SVG Y ANIMACIÓN DEL BOTÓN DE WHATSAPP
   ========================================================================== */

/* Blindaje universal para que NINGÚN icono SVG pierda su proporción en todo el sitio */
svg {
  width: 100%;
  height: 100%;
  max-width: 24px;
  max-height: 24px;
  flex: none;
}

/* Excepciones donde el SVG debe ser más grande (como los logos o gráficos decorativos 3D) */
header .logo svg,
footer .logo svg,
.hero-3d-sphere svg,
.vanta-container svg {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
}

/* Control estricto y seguro para el ícono de WhatsApp dentro de la tarjeta de contacto */
.wa-icon-badge {
  width: 68px;
  height: 68px;
  background: rgba(37, 211, 102, 0.15);
  border: 1px solid rgba(37, 211, 102, 0.4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #25d366;
  margin: 0 auto 20px auto;
  box-shadow: 0 10px 20px rgba(37, 211, 102, 0.2);
  position: relative;
  overflow: hidden; /* Evita cualquier desbordamiento visual */
}

.wa-icon-badge svg {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  display: block;
}

/* ==========================================================================
   BOTÓN DE WHATSAPP — Animación fluida y cambio de color en el Hover
   ========================================================================== */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #25D366 !important; /* Verde oficial de WhatsApp */
  color: #ffffff !important;
  width: 100%;
  padding: 16px 24px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
  /* Transición suave para movimiento y cambio de color */
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
  overflow: hidden;
}

/* Animación y cambio de color imponente en el Hover */
.btn-whatsapp:hover {
  background: #0f172a !important; /* Cambia a un tono oscuro corporativo elegante de fondo */
  color: #25D366 !important;     /* El texto e ícono se pintan del verde vibrante de WhatsApp */
  border-color: #25D366 !important;
  transform: translateY(-4px) scale(1.02); /* Se eleva con efecto de escala fluido */
  box-shadow: 0 20px 40px rgba(37, 211, 102, 0.4); /* Sombra difuminada verde brillante */
}

/* Asegurar que el SVG dentro del botón de WhatsApp también cambie de color y se mueva suavemente */
.btn-whatsapp svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  transition: transform 0.3s ease;
}

.btn-whatsapp:hover svg {
  transform: translateX(5px); /* La flechita da un pequeño salto a la derecha al hacer hover */
}

/* ==========================================================================
   CORRECCIÓN DE ALINEACIÓN — Centrar contenido de WhatsApp en la Tarjeta CTA
   ========================================================================== */
.cta-whatsapp-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(52, 211, 153, 0.25);
  border-radius: 20px;
  padding: 50px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;       /* Centra horizontalmente todos los elementos hijos */
  justify-content: center;   /* Centra verticalmente dentro de la tarjeta */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;          /* Evita que cualquier elemento sobresalga de la tarjeta */
}

/* Contenedor interno para asegurar flujo ordenado */
.wa-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.wa-icon-badge {
  width: 68px;
  height: 68px;
  min-width: 68px;
  min-height: 68px;
  background: rgba(37, 211, 102, 0.15);
  border: 1px solid rgba(37, 211, 102, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #25d366;
  margin: 0 auto 20px auto; /* Centrado automático */
  box-shadow: 0 10px 20px rgba(37, 211, 102, 0.2);
  flex: none;
}

.wa-icon-badge svg {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  display: block;
}

/* ==========================================================================
   ESTILOS Y CENTRADO DE LA CAJA DE WHATSAPP EN EL CTA
   ========================================================================== */
.cta-whatsapp-box {
  background: rgba(255, 255, 255, 0.03);
  border-left: 1px solid var(--line);
  padding: 50px 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.wa-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 360px;
}

.wa-icon-badge {
  width: 68px;
  height: 68px;
  min-width: 68px;
  min-height: 68px;
  background: rgba(37, 211, 102, 0.15);
  border: 1px solid rgba(37, 211, 102, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #25d366;
  margin-bottom: 20px;
  box-shadow: 0 10px 20px rgba(37, 211, 102, 0.2);
}

.wa-icon-badge svg {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  display: block;
}

.cta-whatsapp-box h3 {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 8px;
}

.cta-whatsapp-box .fsub {
  font-size: 0.92rem;
  color: var(--muted);
  margin-bottom: 26px;
  line-height: 1.5;
}

/* Botón de WhatsApp con animación y hover avanzado */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #25D366 !important;
  color: #ffffff !important;
  width: 100%;
  padding: 16px 24px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-whatsapp:hover {
  background: #0f172a !important;
  color: #25D366 !important;
  border-color: #25D366 !important;
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 40px rgba(37, 211, 102, 0.4);
}

.btn-whatsapp svg {
  width: 20px !important;
  height: 20px !important;
  transition: transform 0.3s ease;
}

.btn-whatsapp:hover svg {
  transform: translateX(5px);
}

/* ==========================================================================
   ESTILOS DE LÍNEA DE TIEMPO (Timeline Horizontal Pro)
   ========================================================================== */
.timeline-pro {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 60px;
}

/* Línea horizontal conectora de fondo */
.timeline-pro .tl-line {
  position: absolute;
  top: 35px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: rgba(0, 255, 109, 0.2);
  z-index: 1;
}

.tl-item {
  position: relative;
  z-index: 2;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px 24px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.tl-item:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 255, 109, 0.5);
  box-shadow: 0 20px 40px rgba(0, 255, 109, 0.15);
  background: rgba(15, 23, 42, 0.95);
}

/* Círculo indicador del número (Nodo) */
.tl-node {
  width: 70px;
  height: 70px;
  margin: 0 auto 24px auto;
  border-radius: 50%;
  background: rgba(0, 255, 109, 0.08);
  border: 2px solid rgba(0, 255, 109, 0.3);
  color: var(--neon);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 0 20px rgba(0, 255, 109, 0.1);
  transition: all 0.3s ease;
}

.tl-item:hover .tl-node {
  background: var(--neon);
  color: #000000;
  box-shadow: 0 0 30px rgba(0, 255, 109, 0.5);
  transform: scale(1.05);
}

.tl-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 10px;
}

.tl-content p {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

/* Adaptación responsiva para celulares */
@media (max-width: 968px) {
  .timeline-pro {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .timeline-pro .tl-line {
    display: none; /* Oculta la línea horizontal en pantallas chicas */
  }
}

.counter .cv, .counter .num, .metric .mv {
  color: var(--neon) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Corrección para los textos y subtítulos debajo de los contadores */
.counter .lbl, 
.counter .sub, 
.counters p, 
.counters span {
  color: var(--muted) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Si el título principal o secundario de la sección también necesita contraste */
.counters h2, 
.counters .eyebrow {
  opacity: 1 !important;
  visibility: visible !important;
}