/* ── Hero animations ── */
 @keyframes heroFadeUp {
   from {
     opacity: 0;
     transform: translateY(32px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 @keyframes heroPulse {

   0%,
   100% {
     opacity: .18;
     transform: scale(1);
   }

   50% {
     opacity: .28;
     transform: scale(1.06);
   }
 }

 .hero-title {
   animation: heroFadeUp .85s cubic-bezier(.22, 1, .36, 1) both;
   animation-delay: .15s;
 }

 /* Animated gradient orb behind hero */
 .hero-orb {
   position: absolute;
   border-radius: 50%;
   filter: blur(72px);
   pointer-events: none;
   animation: heroPulse 6s ease-in-out infinite;
 }

 /* ── Scroll reveal ── */
 .reveal {
   opacity: 0;
   transform: translateY(28px);
   transition: opacity .65s cubic-bezier(.22, 1, .36, 1), transform .65s cubic-bezier(.22, 1, .36, 1);
 }

 .reveal.visible {
   opacity: 1;
   transform: translateY(0);
 }

 .reveal-left {
   opacity: 0;
   transform: translateX(-32px);
   transition: opacity .65s cubic-bezier(.22, 1, .36, 1), transform .65s cubic-bezier(.22, 1, .36, 1);
 }

 .reveal-left.visible {
   opacity: 1;
   transform: translateX(0);
 }

 /* stagger children */
 .stagger>* {
   opacity: 0;
   transform: translateY(24px);
   transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1);
 }

 .stagger.visible>*:nth-child(1) {
   opacity: 1;
   transform: none;
   transition-delay: .05s;
 }

 .stagger.visible>*:nth-child(2) {
   opacity: 1;
   transform: none;
   transition-delay: .15s;
 }

 .stagger.visible>*:nth-child(3) {
   opacity: 1;
   transform: none;
   transition-delay: .25s;
 }

 .stagger.visible>*:nth-child(4) {
   opacity: 1;
   transform: none;
   transition-delay: .35s;
 }

 .stagger.visible>*:nth-child(5) {
   opacity: 1;
   transform: none;
   transition-delay: .45s;
 }

 .stagger.visible>*:nth-child(6) {
   opacity: 1;
   transform: none;
   transition-delay: .55s;
 }

 .stagger.visible>*:nth-child(7) {
   opacity: 1;
   transform: none;
   transition-delay: .65s;
 }

 .stagger.visible>*:nth-child(8) {
   opacity: 1;
   transform: none;
   transition-delay: .75s;
 }

 /* ── Header slide-down ── */
 header {
   animation: heroFadeUp .5s cubic-bezier(.22, 1, .36, 1) both;
 }

 /* ── Contact icon pulse ── */
 @keyframes iconFloat {

   0%,
   100% {
     transform: translateY(0);
   }

   50% {
     transform: translateY(-6px);
   }
 }

 .contact-icon {
   animation: iconFloat 3.2s ease-in-out infinite;
 }

 /* ── Service tab hover ── */
 .service-tab {
   transition: transform .2s ease, box-shadow .2s ease;
 }

 .service-tab:hover {
   transform: translateY(-3px);
   box-shadow: 0 6px 20px rgba(0, 119, 182, .18);
 }

 /* ── Dark Mode & Global Overrides ── */
 body {
   /* Light mode: flat steel-blue, no gradient */
   background-color: slate-50;
 }

 html.dark body {
   background-image: radial-gradient(circle at 45% 25%, #596b7d 0%, #1b2430 100%);
   background-attachment: fixed;
 }

 ::-webkit-scrollbar {
   width: 10px;
 }

 ::-webkit-scrollbar-track {
   background: #f1f5f9;
 }

 html.dark ::-webkit-scrollbar-track {
   background: #151e29;
 }

 ::-webkit-scrollbar-thumb {
   background: #cbd5e1;
   border-radius: 5px;
 }

 html.dark ::-webkit-scrollbar-thumb {
   background: #465a6e;
 }

 ::-webkit-scrollbar-thumb:hover {
   background: #94a3b8;
 }

 html.dark ::-webkit-scrollbar-thumb:hover {
   background: #596b7d;
 }

/* ── Unification Layout Styles (Wide vs Boxed) ── */
body.wboxed {
  background-color: #0f1923;
  background-image: radial-gradient(ellipse at 20% 50%, rgba(0,119,182,0.08) 0%, transparent 60%), radial-gradient(ellipse at 80% 10%, rgba(0,168,198,0.06) 0%, transparent 50%), repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.015) 39px, rgba(255,255,255,0.015) 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.015) 39px, rgba(255,255,255,0.015) 40px);
}

body.wboxed .main-container {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  width: min(1200px, 96%);
  border-radius: 1rem;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.05);
  background-color: #dce8f2;
  overflow: clip; /* Fixes sticky header issue with rounded corners */
}

html.dark body.wboxed .main-container {
  background-color: #1b2430;
}

/* Default Wide state: full width, no box styles */
.main-container {
  width: 100%;
}

/* Optional Outer Footer only visible in Boxed mode */
#outer-footer {
  display: none;
}
body.wboxed #outer-footer {
  display: block;
}

/* ── Our Alliances Section ── */

/* Resplandor sutil detrás de cada logo al hacer hover */
.alliance-card .alliance-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 60%, rgba(0, 119, 182, 0.12), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.alliance-card:hover .alliance-glow {
  opacity: 1;
}

html.dark .alliance-card:hover .alliance-glow {
  background: radial-gradient(circle at 50% 60%, rgba(0, 168, 198, 0.18), transparent 70%);
}

/* Tamaño mínimo de cada tarjeta para consistencia visual */
.alliance-card {
  min-width: 180px;
}