:root{
  --navy-deep:#0a1f44;
  --navy:#123069;
  --ocean:#1e4fa8;
  --sky:#57a6ff;
  --steel:#5b6b85;
  --mist:#f2f5fa;
  --border:#e4e9f2;
  --text:#0f1a30;
  --muted:#5b6b85;
}
*{box-sizing:border-box}
html,body{font-family:'Inter',system-ui,sans-serif !important;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.brand-text{font-family:'Manrope','Inter',sans-serif !important;letter-spacing:-.01em}
a{color:var(--ocean);text-decoration:none}
a:hover{color:var(--navy-deep)}
.text-navy{color:var(--navy-deep)!important}
.text-sky{color:var(--sky)!important}
.text-muted{color:var(--muted)!important}
.bg-mist{background:var(--mist)}
.gradient-navy{background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 55%,var(--ocean) 100%)}
.gradient-hero{background:radial-gradient(1200px 700px at 15% 10%,rgba(87,166,255,.22),transparent 60%),linear-gradient(160deg,var(--navy-deep) 0%,var(--navy) 60%,#0d2350 100%)}

.btn-navy{background:linear-gradient(135deg,var(--navy-deep),var(--ocean));color:#fff;border:none;padding:.7rem 1.3rem;font-weight:600;border-radius:8px;transition:.25s}
.btn-navy:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(20,50,120,.55)}
.btn-white{background:#fff;color:var(--navy-deep);border-radius:8px;padding:.7rem 1.3rem;font-weight:600}
.btn-outline-light-b{border:1px solid rgba(255,255,255,.3);color:#fff;background:rgba(255,255,255,.05);border-radius:8px;padding:.7rem 1.3rem;font-weight:600;backdrop-filter:blur(6px)}
.btn-outline-light-b:hover{background:rgba(255,255,255,.12);color:#fff}

/* Header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:1030;transition:.3s;background:transparent}
.site-header.scrolled{background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.site-header .nav-link{color:rgba(15,26,48,.8);font-weight:500;font-size:.95rem}
.site-header .nav-link:hover,.site-header .nav-link.active{color:var(--navy-deep)}
.brand{color:var(--navy-deep)}
.brand-mark{display:inline-flex;width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--navy-deep),var(--ocean));color:#fff;align-items:center;justify-content:center;font-weight:800;font-family:'Manrope',sans-serif}
.brand-text{font-weight:800;color:var(--navy-deep);font-size:1.15rem}

/* Hero */
.hero{position:relative;color:#fff;padding:8.5rem 0 4rem;overflow:hidden}
.hero .eyebrow{color:var(--sky);font-size:.75rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.75rem}
.hero .eyebrow::before{content:"";display:inline-block;width:2rem;height:1px;background:rgba(87,166,255,.6)}
.hero h1{font-size:clamp(1.8rem,4.2vw,3.4rem);line-height:1.25;font-weight:700;margin-top:1rem;letter-spacing:-0.01rem;}
.hero h1 .accent{color:var(--sky)}
.hero p.lead{color:rgba(255,255,255,.75);font-size:1.1rem;margin-top:1.5rem;max-width:36rem}
.hero-card{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.hero-card img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.hero-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,31,68,.7),transparent 60%)}
.hero-badge{position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:2;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:.7rem 1rem;color:#fff;font-size:.85rem;display:flex;justify-content:space-between;align-items:center}
.pulse-dot{width:8px;height:8px;background:#10b981;border-radius:50%;display:inline-block;box-shadow:0 0 0 0 rgba(16,185,129,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.6)}70%{box-shadow:0 0 0 10px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}

.hero .container {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

/* Ajuste de Botones para que no se rompa el texto en móvil */
.hero .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem !important; /* Un toque más pequeña la letra para que entre en una línea */
  font-weight: 600;
  padding: 0.7rem 0.5rem !important; /* Menos padding horizontal en móvil */
  border-radius: 8px;
  height: 46px; 
  white-space: nowrap; /* Evita que el texto salte de línea */
}

.trust-bar{background:rgba(0,0,0,.2);border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.85);font-size:.85rem}
.trust-bar i{color:var(--sky)}

/* Sections */
section.section{padding:5rem 0}
.eyebrow{color:var(--ocean);font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.section-title{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:800;color:var(--navy-deep);margin-top:.8rem}
.section .subtitle{color:var(--muted);margin-top:.8rem}
.section.dark{background:linear-gradient(135deg,var(--navy-deep),var(--navy) 70%,var(--ocean));color:#fff}
.section.dark .section-title{color:#fff}
.section.dark .eyebrow{color:var(--sky)}
.section.dark .subtitle{color:rgba(255,255,255,.75)}

.card-tile{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.5rem;height:100%;transition:.3s}
.card-tile:hover{transform:translateY(-4px);border-color:rgba(30,79,168,.4);box-shadow:0 20px 40px -20px rgba(20,50,120,.35)}
.card-tile .ic{width:44px;height:44px;border-radius:10px;background:var(--mist);color:var(--ocean);display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem;transition:.3s}
.card-tile:hover .ic{background:var(--ocean);color:#fff}
.card-tile h3{font-size:1.05rem;font-weight:700;color:var(--navy-deep);margin:1rem 0 .5rem}
.card-tile p{color:var(--muted);font-size:.9rem;margin:0}

.step-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:1.3rem;height:100%;backdrop-filter:blur(6px);transition:.25s}
.step-card:hover{border-color:rgba(87,166,255,.5);background:rgba(255,255,255,.08)}
.step-card .ic{width:44px;height:44px;border-radius:10px;background:rgba(87,166,255,.15);color:var(--sky);display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem}
.step-card .step-num{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.step-card h3{color:#fff;font-size:1rem;font-weight:600;margin-top:1rem}
.step-card p{color:rgba(255,255,255,.65);font-size:.9rem;margin-top:.4rem}

.sector-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.25rem;text-align:left;height:100%;transition:.3s}
.sector-card:hover{transform:translateY(-4px);border-color:rgba(30,79,168,.4);box-shadow:0 12px 25px -15px rgba(20,50,120,.35)}
.sector-card .emoji{font-size:2rem}

.stat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:1.4rem}
.stat .num{font-size:2.5rem;font-weight:800;color:#fff}
.stat .num .suf{color:var(--sky)}
.stat .lab{color:rgba(255,255,255,.7);font-size:.9rem;margin-top:.3rem}

.diff{display:flex;gap:.9rem;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:12px;padding:1rem 1.1rem;height:100%}
.diff .ic{width:36px;height:36px;flex:0 0 36px;border-radius:9px;background:rgba(30,79,168,.1);color:var(--ocean);display:inline-flex;align-items:center;justify-content:center}
.diff p{margin:0;font-size:.9rem;color:var(--text)}

.testimonial{background:var(--mist);border:1px solid var(--border);border-radius:16px;padding:2.5rem;max-width:720px;margin:0 auto;position:relative}
.testimonial i.bi-quote{position:absolute;top:-18px;left:28px;background:#fff;color:var(--ocean);width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.06)}
.testimonial blockquote p{font-size:1.15rem;color:var(--navy-deep);line-height:1.5}
.testimonial footer{margin-top:1.2rem;font-size:.9rem}
.testimonial .author{font-weight:600;color:var(--navy-deep)}
.testimonial .company{color:var(--muted)}

.accordion-item{border:1px solid var(--border)!important;border-radius:12px!important;margin-bottom:.6rem;overflow:hidden}
.accordion-button{font-weight:600;color:var(--navy-deep)}
.accordion-button:not(.collapsed){background:var(--mist);color:var(--navy-deep);box-shadow:none}
.accordion-button:focus{box-shadow:none;border-color:var(--border)}

/* --- FOOTER TOTALMENTE CORREGIDO (REEMPLAZA TU BLOQUE ANTERIOR) --- */

.site-footer {
  /* Usando tus variables oficiales para una transición suave */
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%) !important;
  padding: 3rem 0 2rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05);

}


/* Estilo para los títulos (Empresa, Legal, Contacto) */
.footer-heading {
  color: #ffffff !important;
  letter-spacing: 0.12em;
  font-size: 0.75rem !important;
  margin-bottom: 1rem;
}

/* Control del texto descriptivo */
.footer-desc {
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.6;
  max-width: 320px;
}

/* Enlaces del menú del footer */
.site-footer a, .footer-link {
  color: rgba(255, 255, 255, 0.55) !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
  display: inline-block;
}

.site-footer a:hover, .footer-link:hover {
  color: #57a6ff !important; /* El color celeste/azul cielo de realce */
  transform: translateX(2px); /* Sutil animación al pasar el cursor */
}

.text-sky {
  color: #57a6ff !important;
}

/* Cajas sutiles para los botones de Redes Sociales */
.footer-socials .social-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6) !important;
  text-decoration: none;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.01);
}

.footer-socials .social-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff !important;
}

/* Ajuste de los créditos del fondo */
.footer-bottom {
  font-size: 0.8rem !important;
}

/* --- RESETEO FORZADO DE ESPACIOS EN EL FOOTER --- */

/* Identifica el contenedor del logo en tu footer y fuerza su espacio a cero */
.site-footer [class*="col-"], 
.site-footer .row > div:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Fuerza el logo a no tener márgenes externos que empujen hacia abajo */
.site-footer img, 
.site-footer .brand-mark {
  margin-bottom: 0.5rem !important; /* Ajusta este valor a tu gusto */
  display: block !important;
}

/* Elimina márgenes extra de cualquier párrafo o texto inmediatamente después del logo */
.site-footer p {
  margin-top: 0 !important;
}


.whatsapp-fab{position:fixed;right:1.2rem;bottom:1.2rem;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.7rem;box-shadow:0 12px 25px -8px rgba(37,211,102,.55);z-index:1040;transition:.25s}
.whatsapp-fab:hover{color:#fff;transform:translateY(-3px);box-shadow:0 18px 32px -8px rgba(37,211,102,.65)}

.breadcrumb-nav{color:rgba(255,255,255,.7);font-size:.85rem}
.breadcrumb-nav a{color:rgba(255,255,255,.85)}
.page-hero{padding:8rem 0 4rem}

/* Animations */
.fade-up{opacity:0;transform:translateY(20px);transition:.7s cubic-bezier(.22,.7,.3,1)}
.fade-up.in{opacity:1;transform:none}

/* --- Control de Logos dinámicos en el Header --- */

/* Por defecto (al inicio), se muestra el blanco y se oculta el de color */
.site-header .logo-dark {
  display: none !important;
}
.site-header .logo-light {
  display: inline-block !important;
}

/* Cuando se hace scroll (la barra se vuelve blanca), invertimos los logos */
.site-header.scrolled .logo-light {
  display: none !important;
}
.site-header.scrolled .logo-dark {
  display: inline-block !important;
}

/* 2. Botones en paralelo idénticos al diseño premium */
.hero .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 500; /* No tan gruesa, más elegante */
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  height: 48px; /* Forzamos a que ambos midan exactamente lo mismo de alto */
  transition: all 0.2s ease;
}

/* Botón Principal Blanco */
.hero .btn-white {
  background: #fff !important;
  color: var(--navy-deep) !important;
  border: 1px solid #fff !important;
}
.hero .btn-white:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  transform: translateY(-1px);
}

/* Botón Secundario de WhatsApp (Transparente con borde sutil) */
.hero .btn-outline-whatsapp {
  background: rgba(255, 255, 255, 0.03) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(4px);
}
.hero .btn-outline-whatsapp:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-1px);
}
/* ==========================================
   ESTILOS DE TABS TIPO PILL CORPORATIVO
=========================================== */
.tabs-corporativas {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    white-space: nowrap;
    -ms-overflow-style: none;  
    scrollbar-width: none;  
    border-bottom: none; /* Sin línea inferior, ahora usamos bloques */
    padding-bottom: 0;
}

.tabs-corporativas::-webkit-scrollbar {
    display: none;
}

/* Pestaña inactiva: Texto legible y sin fondo */
.tabs-corporativas .nav-link {
    color: #4b5563 !important;
    background-color: transparent !important;
    border: none;
    border-radius: 50rem; /* Forma de pastilla redondeada */
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

/* Pestaña Activa: Bloque sólido oscuro con texto blanco para máxima visibilidad */
.tabs-corporativas .nav-link.active {
    background-color: #111827 !important; /* Fondo oscuro sólido */
    color: #ffffff !important; /* Texto blanco puro */
    font-weight: 700 !important;
}

/* Hover sutil para las inactivas */
.tabs-corporativas .nav-link:hover:not(.active):not(:disabled) {
    background-color: #f3f4f6;
    color: #111827;
}