/* =======================================================
   ATLAS V5.0 | MASTER STYLESHEET (FINAL v7.0)
   PARTE 1: ESTRUCTURA GLOBAL, HEADER Y COMPONENTES
   Estilo: Neo-Brutalismo Dark (Modo Oscuro)
   ======================================================= */

/* 1. CONFIGURACIÓN BASE
   ======================================================= */
:root {
  --bg-color: #203363; /* ACTUALIZADO: Azul Corporativo */
  --text-color: #ffffff; /* Texto Blanco Puro */
  --border-color: #ffffff; /* Bordes Blancos */

  /* SISTEMA DE SOMBRAS (HARD SHADOWS) */
  --shadow-card: 8px 8px 0px #bab8b5; /* Sombra gris para tarjetas */
  --shadow-btn: 4px 4px 0px #ffffff; /* Sombra sólida blanca para botones */
  --shadow-btn-hover: 2px 2px 0px #ffffff; /* Sombra reducida al click */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--bg-color);
  font-family: "Inter", sans-serif;
  color: var(--text-color);
  overflow-x: hidden;
  line-height: 1.6;
  font-size: 16px;
}

/* Importante: Lenis necesita que el scroll sea manejado por el html */
html {
  height: auto;
  scroll-behavior: auto !important; /* Desactiva el scroll instantáneo de CSS */
}

body {
  min-height: 100vh;
  width: 100%;
}

/* Evita que cualquier contenedor corte el scroll suave */
main {
  overflow: visible !important;
}

/* 2. HEADER GLOBAL
   ======================================================= */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  padding: 0 50px;
  background: #203363; /* SINCRONIZADO CON FONDO */
  border-bottom: 3px solid #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(8px);
}

.brand-logo {
  font-weight: 900;
  font-size: 1rem;
  color: #c9c3b9;
  text-decoration: none;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.header-right {
  display: flex;
  gap: 40px;
  align-items: center;
}

.nav-main a {
  color: #aaa;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  margin-right: 25px;
  transition: 0.3s;
}

.sep {
  width: 2px;
  height: 30px;
  background: #fff;
}

.btn-collab {
  border: 2px solid #fff;
  border-radius: 50px;
  padding: 10px 25px;
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  transition: 0.2s;
}

/* 3. HEROES & LAYOUT GENERAL
   ======================================================= */
main {
  padding-top: 90px;
  min-height: 100vh;
}

.hero-section,
.portfolio-hero,
.services-hero,
.contact-hero {
  min-height: 530px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  background-color: var(
    --bg-color
  ) !important; /* CORRECCIÓN: Fuerza el azul corporativo */

  background-image: radial-gradient(#333 1px, transparent 1px);
  background-size: 40px 40px;
  border-bottom: 3px solid #c9c3b9;
  position: relative;
  overflow: hidden;
  padding: 0 20px;
}

.logo-hero-container {
  position: absolute;
  top: 45%; /* Lo baja a la mitad del Hero */
  left: 50%; /* Lo mueve a la mitad horizontal */

  /* El primer -50% corrige el ancho, el segundo el alto */
  transform: translate(-50%, -54%);

  width: 1100px; /* El tamaño que definiste */
  height: 1100px;
  z-index: 1;
  perspective: 2000px;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
  pointer-events: none;
}

.logo-3d-rotator {
  width: 100%;
  height: auto;
  transform-style: preserve-3d;
  animation: rotateLogoY 12s linear infinite;
  opacity: 1; /* CAMBIO: 1 es visibilidad total (no más opaco) */
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.4)); /* Brillo neón */
}

@keyframes rotateLogoY {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

.marquee {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 20px 0; /* Ajusta el grosor de la banda */
  background: #c9c3b9;
  color: #203363;
  border-top: 3px solid #fff;
  overflow: hidden; /* Oculta lo que sale de la pantalla */
  white-space: nowrap;
  display: flex;
}

.marquee-content {
  display: inline-flex;
  animation: scrollMarquee 20s linear infinite; /* Velocidad del carrusel */
}

.marquee-content span {
  font-family: "Cocogoose", sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  padding-right: 50px; /* Espacio entre frases */
}

.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
}

.marquee::before {
  left: 0;
  background: linear-gradient(to right, #c9c3b9, transparent);
}

.marquee::after {
  right: 0;
  background: linear-gradient(to left, #c9c3b9, transparent);
}

/* ANIMACIÓN: Mueve el contenido hacia la izquierda */
@keyframes scrollMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(
      -33.33%
    ); /* Ajusta según cuántas veces repetiste el texto */
  }
}

/* 4. COMPONENTES UI (BOTONES CORREGIDOS)
   ======================================================= */

.btn-main,
.btn-outline,
.btn-sec,
.btn-white,
.btn-gold {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 3px solid #fff !important;
  border-radius: 50px !important;
  background-color: #203363;
  color: #fff;
  padding: 16px 45px;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-btn);
  text-decoration: none;
  margin: 10px;
  line-height: 1;
  clip-path: none !important;
}

.link-arrow {
  color: #fff;
  text-decoration: none;
  border-bottom: 3px solid #fff;
  padding-bottom: 3px;
  font-weight: 800;
  font-size: 1rem;
  transition: 0.3s;
}
.link-arrow:hover {
  background: #fff;
  color: #000;
  padding: 3px 10px;
}

.sec-title {
  text-align: center;
  margin-bottom: 80px;
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -2px;
  color: #fff;
}

.icon-ph,
.tech-icon,
.step-icon {
  color: #fff;
  font-size: 2.5rem;
  margin-bottom: 20px;
}

/* =======================================================
   5. HOME: ORBITAL (THE TECH ABYSS)
   ======================================================= */
.orbital-section {
  padding: 150px 0;
  border-bottom: 3px solid #fff;
  background-color: #203363; /* SINCRONIZADO */
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.orbital-section::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    transparent 40%,
    #ffffff08 41%,
    transparent 70%
  );
  pointer-events: none;
}

.orbital-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(white 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px);
  background-size:
    100px 100px,
    60px 60px;
  opacity: 0.1;
  pointer-events: none;
}

.system-wrapper {
  position: relative;
  z-index: 10;
  width: 700px;
  height: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.core-node-3d {
  position: absolute;
  z-index: 20;
  width: 150px;
  height: 150px;
  display: flex;
  color: #bab8b5;
  justify-content: center;
  align-items: center;
  animation: levitate 2s ease-in-out infinite;
}

@keyframes levitate {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-25px);
  }
}

.core-node-3d .layer {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: #203363;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
  transition: 0.5s;
}

.core-node-3d .l3 {
  width: 100%;
  height: 100%;
  border: 3px solid #bab8b5;
  box-shadow:
    0 0 30px rgba(255, 255, 255, 0.2),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.core-text {
  z-index: 30; /* Esto asegura que el texto esté al frente */
  text-align: center;
  position: relative; /* Importante para que respete el z-index */
}

.core-text .brand {
  font-weight: 900;
  font-size: 1.4rem;
  color: #bab8b5;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Efecto de brillo */
}

/* SATÉLITES */
.satellite-link {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: rotate(var(--angle));
  cursor: pointer;
  z-index: 15;
}

.connector {
  position: absolute;
  left: 0;
  top: 0;
  width: 250px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6));
  transform-origin: left center;
}

/* 2. Ajuste de Nodos: Forma Circular y Sin Animación Individual */
.node {
  /* ... tus estilos de color y posición ... */
  position: absolute;
  left: 250px;
  top: -40px;
  width: 80px;
  height: 80px;
  background: #203363;

  /* 👇 AQUÍ CAMBIAS LA FORMA A CIRCULAR 👇 */
  border-radius: 50% !important;
  clip-path: none !important; /* Elimina cualquier forma geométrica rara */

  /* 👇 IMPORTANTE: ELIMINAR LA ANIMACIÓN AQUÍ 👇 */
  animation: none;

  /* Resto de estilos necesarios */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #bab8b5;
  font-weight: 700;
  font-size: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  z-index: 20;
  transform: rotate(calc(var(--angle) * -1));
  transition: 0.3s;
}

/* VENTANA MODAL HUD */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000d9;
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-overlay.active {
  display: flex;
  opacity: 1;
}

.modal-content {
  background: #203363;
  border: 2px solid #bab8b5;
  padding: 60px 40px;
  width: 90%;
  max-width: 600px;
  text-align: center;
  position: relative;
  box-shadow: 0 0 50px rgba(255, 255, 255, 0.15);
  clip-path: polygon(
    20px 0,
    100% 0,
    100% calc(100% - 20px),
    calc(100% - 20px) 100%,
    0 100%,
    0 20px
  );
  transform: translateY(30px) scale(0.95);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.active .modal-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal-close {
  position: absolute;
  top: -40px; /* Lo sacamos hacia arriba */
  right: -250px; /* Alineado a la derecha */

  /* Resto igual... */
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  z-index: 10;
  transition: 0.3s;
}
.modal-close:hover {
  color: #c9c3b9; /* Color beige al pasar el mouse */
  transform: rotate(90deg); /* Pequeño giro al tocarlo */
}

#modal-title {
  font-size: 3rem;
  color: #bab8b5;
  font-weight: 900;
  margin-bottom: 10px;
  letter-spacing: -2px;
  text-transform: uppercase;
}

/* 6. PÁGINA: NOSOTROS
   ======================================================= */
.nosotros-split {
  display: flex;
  min-height: 90vh;
  border-bottom: 3px solid #fff;
}
.col-manifesto {
  flex: 4;
  padding: 80px;
  border-right: 3px solid #fff;
  display: flex;
  align-items: center;
  background: #000;
  font-family: "Cocogoose", sans-serif !important;
  /* Eliminado el text-transform: uppercase; general */
  letter-spacing: -1px; /* Para que se vea más compacto y moderno */
}
.manifesto-content {
  border-left: 5px solid #fff;
  padding-left: 40px;
  font-family: "Cocogoose", sans-serif !important;
  /* Eliminado el text-transform: uppercase; general */
  letter-spacing: -1px; /* Para que se vea más compacto y moderno */
}
.sub-label {
  color: #fff;
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 1.1rem;
  display: block;
  margin-bottom: 20px;
  text-decoration: underline;
  text-transform: uppercase; /* Mantenemos solo el antetítulo en mayúsculas por elegancia */
}

/* 👇 NUEVO: El título principal con jerarquía y presencia 👇 */
.manifesto-content h1,
.manifesto-content h2 {
  font-family: "Merriweather", serif;
  font-size: 2.4rem; /* Presencia sin exagerar */
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin-top: 10px;
  margin-bottom: 30px;
  letter-spacing: -1px; /* Compacto y moderno */
  text-transform: none; /* Respeta las minúsculas del HTML */
}

.manifesto-content p {
  font-family: "Merriweather", serif; /* El nombre oficial de la familia */
  font-weight: 700; /* Esto es lo que la hace Bold (Negrita) */
  font-size: 1.1rem;
  line-height: 1.5; /* Aumentamos el interlineado para que sea más fácil de leer */
  margin-bottom: 20px;
  letter-spacing: normal; /* Corregido el espaciado ruidoso (1cqmin) */
  color: #fff;
  text-transform: none; /* Asegura que respete las minúsculas del HTML */
}
.impact-phrases p {
  /* 👇 CAMBIO DE TIPOGRAFÍA 👇 */
  font-family: "Berlin Sans FB", sans-serif !important;
  font-size: 1.1rem; /* Un pelín más grande para esta fuente */
  color: #ccc;
  margin-bottom: 20px;
  font-weight: normal; /* Berlin Sans FB Bold ya es gruesa por sí misma */
  letter-spacing: 0.5px;
  text-transform: none;
}

/* Registro de la fuente Berlin Sans FB Bold */
@font-face {
  font-family: "Berlin Sans FB";
  src: url("/static/fonts/BRLNSB.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
.col-data {
  flex: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  padding: 50px;
}
.bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  width: 100%;
  max-width: 700px;
}

/* Data Card: Vertical y Centrado */
.data-card {
  background: #000;
  border: 3px solid #fff;
  padding: 30px;
  text-align: center;
  border-radius: 50px 0px 50px 0px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}
.data-value {
  font-size: 2.8rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: 15px;
  word-break: break-word;
}
.data-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  color: #aaa;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.2;
}
/* =======================================================
   RESETEO TOTAL: NUESTRA HISTORIA ZIG-ZAG DINÁMICO
   ======================================================= */
.timeline-section {
  padding: 120px 20px;
  background: var(--blue-deep) !important; /* Sincronizado con tu paleta */
  border-bottom: 1px solid rgba(201, 195, 185, 0.2);
}

.timeline-container {
  position: relative;
  max-width: 1100px;
  margin: 60px auto 0;
  padding: 40px 0;
}

/* La línea central ahora es un gradiente elegante */
.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  transform: translateX(-50%);
  z-index: 1;
}

.milestone {
  position: relative;
  width: 100%;
  display: flex; /* Crucial para el posicionamiento */
  margin-bottom: 100px;
  z-index: 2;
}

/* --- CONTENIDO: ESTADO INICIAL (OCULTO) --- */
.milestone-content {
  width: 45%; /* Espacio para que no choquen al centro */
  background: rgba(32, 51, 99, 0.8) !important;
  backdrop-filter: blur(12px);
  padding: 35px;
  border: 1px solid rgba(201, 195, 185, 0.15);
  border-radius: 0 !important; /* Estilo tech con esquinas cortadas */

  clip-path: polygon(
    0 0,
    calc(100% - 20px) 0,
    100% 20px,
    100% 100%,
    20px 100%,
    0 calc(100% - 20px)
  );
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
  overflow: visible !important;
}

/* EFECTO DE ONDAS AL PASAR EL CURSOR */
.milestone.reveal.active .milestone-content:hover {
  border-color: var(--accent) !important;
  /* Activamos la animación de pulso */
  animation: milestonePulse 1.5s infinite;

  /* Un pequeño resplandor extra para que se vea más tech */
  background: rgba(42, 68, 128, 0.8) !important;
  transition: all 0.3s ease;
}

/* Efecto opcional: Que el año (badge) también brille al pasar el cursor */
.milestone.reveal.active .milestone-content:hover .year-badge {
  box-shadow: 0 0 15px var(--accent);
  transform: scale(1.1);
  transition: 0.3s;
}

/* Estilos de texto internos */
.milestone h3 {
  color: #fff;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.milestone p {
  color: rgba(201, 195, 185, 0.75);
  font-size: 1rem;
  line-height: 1.5;
}

.year-badge {
  display: inline-block;
  background: var(--accent) !important;
  color: var(--blue-deep) !important;
  padding: 6px 18px;
  font-weight: 900;
  margin-bottom: 20px;
  font-size: 0.85rem;
  letter-spacing: 1px;
}
.pillars-section {
  padding: 120px 50px;
  border-bottom: 3px solid #fff;
  background: #000;
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}
.pillar-card {
  position: relative;
  height: 450px;
  background: #111;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
  border: 3px solid #fff;
  border-radius: 200px 200px 0px 0px;
  overflow: hidden;
  transition: 0.3s;
}

.pillar-card h3 {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 900;
  margin-bottom: 10px;
}
.pillar-card p {
  position: relative;
  z-index: 2;
  color: #ccc;
  font-size: 1rem;
}

/* 7. PÁGINA: EMPRESAS (CORRECCIÓN TECH GRID)
   ======================================================= */
.quick-links {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px;
}
.quick-links a {
  color: #fff;
  border: 2px solid #fff;
  padding: 10px 25px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  text-decoration: none;
}
.quick-links a:hover {
  background: #fff;
  color: #000;
}

.node-section {
  padding: 100px 50px;
  border-bottom: 3px solid #fff;
  background: #000;
}

.finance-card-full {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
  border: 3px solid #fff;
  padding: 80px;
  background: #000;
  border-radius: 60px 0px 60px 0px;
  box-shadow: 15px 15px 0px rgba(255, 255, 255, 0.1);
}
.fin-logo {
  font-size: 3.5rem;
  font-weight: 900;
  border-right: 4px solid #fff;
  padding-right: 50px;
  color: #fff;
  letter-spacing: -2px;
}
.fin-info h2 {
  color: #fff;
  font-size: 2rem;
  margin-bottom: 20px;
  font-weight: 800;
}
.fin-info p {
  color: #ccc;
  font-size: 1.1rem;
}

/* =======================================================
   CORRECCIÓN HERO EMPRESAS (TIPOGRAFÍA Y POSICIÓN)
   ======================================================= */

.port-content {
  position: relative;
  z-index: 10;
  max-width: 1000px;
  margin: 0 auto; /* Centrado perfecto */
  text-align: center;
  padding-top: 100px; /* Espacio para que no choque con el header */
}

/* 1. ARREGLAR EL TÍTULO (H1) */
.port-content h1 {
  font-family: "Inter", sans-serif !important; /* Fuente de marca */
  font-size: 4.5rem; /* Tamaño grande e impactante */
  line-height: 1;
  color: #fff;
  margin-bottom: 25px;
  text-transform: uppercase;
  letter-spacing: -2px;

  /* Efecto sutil de entrada */
  opacity: 0;
  animation: fadeUpTitle 1s ease-out forwards;
}

/* Animaciones de entrada simples */
@keyframes fadeUpTitle {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeUpText {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Estilo para el párrafo principal */
.hero-description {
  font-family: "Inter", sans-serif !important;
  font-size: 1.1rem;
  color: #ccc;
  max-width: 800px;
  margin: 0 auto 40px auto;
  line-height: 1.8;
}

/* TECH GRID: RESPIRACIÓN Y ESPACIO */
.tech-section {
  padding-top: 150px;
  padding-bottom: 150px; /* Aire abajo también */
  padding-left: 50px; /* CORRECCIÓN: Aire a los lados */
  padding-right: 50px; /* CORRECCIÓN: Aire a los lados */
}
.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  max-width: 1400px;
  margin: 0 auto;
}
.tech-card {
  background: #000;
  padding: 60px 40px;
  text-align: center;
  border: 3px solid #fff;
  border-radius: 50px 0px 50px 0px;
  box-shadow: var(--shadow-card);
  transition: 0.3s;
}

.tech-card h3 {
  font-size: 1.8rem;
  margin: 25px 0;
  color: #fff;
  font-weight: 900;
}
.tech-card p {
  font-size: 1.1rem;
  color: #ccc;
  margin-bottom: 30px;
}

/* Zig Zag */
.lifestyle-section {
  padding: 100px 50px;
  border-bottom: 3px solid #fff;
  background: #000;
}
.zigzag-row {
  display: flex;
  align-items: center;
  gap: 100px;
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 180px;
}
.zigzag-row.reverse {
  flex-direction: row-reverse;
}
.zz-img {
  flex: 1;
  height: 450px;
  background: #222;
  border: 3px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  font-weight: bold;
  border-radius: 200px 200px 0px 0px;
}
.zz-text {
  flex: 1;
}
.zz-text h3 {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 30px;
  color: #fff;
  font-weight: 900;
}
.zz-text p {
  font-size: 1.2rem;
  color: #ccc;
  margin-bottom: 30px;
}

/* Infra Split (Desarrollo / Century) */
.infra-split {
  background-color: #000;
  border-top: 3px solid #fff;
  border-bottom: 3px solid #fff;
  display: flex;
  min-height: 600px;
}
.infra-col {
  padding: 60px 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  background: #000;
  border-right: 3px solid #fff;
  position: relative;
}
.infra-overlay h3 {
  font-size: 3rem;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.infra-overlay p {
  font-size: 1.1rem;
  color: #ccc;
  margin-bottom: 30px;
  max-width: 450px;
}

/* 8. PÁGINA: SERVICIOS
   ======================================================= */
.catalog-section {
  padding: 100px 50px;
  border-bottom: 3px solid #fff;
  background: #000;
}
.service-row {
  display: flex;
  align-items: center;
  gap: 80px;
  margin-bottom: 120px;
  border-bottom: 1px dashed #555;
  padding-bottom: 80px;
  max-width: 1200px;
  margin: 0 auto;
}
.service-row.reverse {
  flex-direction: row-reverse;
}
.srv-visual {
  flex: 1;
  height: 400px;
  background: #111;
  border: 3px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 40px 0px 40px 0px;
  box-shadow: 15px 15px 0px rgba(255, 255, 255, 0.1);
}
.srv-number {
  font-size: 10rem;
  font-weight: 900;
  color: #333;
  position: absolute;
  z-index: 1;
}
.srv-text {
  flex: 1;
  position: relative;
  z-index: 2;
}
.srv-text h3 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 900;
}
.srv-list {
  list-style: none;
  margin-top: 30px;
}
.srv-list li {
  margin-bottom: 15px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 15px;
  background: #000;
  padding: 15px;
  border: 2px solid #fff;
  border-radius: 50px;
  font-weight: 600;
}

.process-section {
  padding: 100px 50px;
  background: #0a0a0a;
  border-bottom: 3px solid #fff;
  text-align: center;
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}
.step-card {
  background: #000;
  padding: 40px 20px;
  text-align: center;
  margin-bottom: 20px;
  border: 3px solid #fff;
  border-radius: 40px 0px 40px 0px;
  box-shadow: var(--shadow-card);
}
.step-card h4 {
  margin: 15px 0 10px;
  font-size: 1.1rem;
  color: #fff;
  font-weight: 800;
}
.step-card p {
  color: #ccc;
}

.stats-banner {
  padding: 100px 20px;
  border-bottom: 3px solid #fff;
  display: flex;
  justify-content: center;
  gap: 100px;
  flex-wrap: wrap;
  background: #fff;
}
.stats-banner .stat-item {
  text-align: center;
  color: #000;
}
.stat-num {
  font-size: 4rem;
  font-weight: 900;
  display: block;
  line-height: 1;
  margin-bottom: 10px;
}
.stat-desc {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.9rem;
}

.faq-section {
  padding: 100px 50px;
  max-width: 900px;
  margin: 0 auto;
  border-bottom: 3px solid #fff;
  background: #000;
}
.faq-container {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.faq-item {
  background: #000;
  border: 3px solid #fff;
  border-radius: 20px;
  overflow: hidden;
}
.faq-item summary {
  padding: 25px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 1.1rem;
}
.faq-item p {
  padding: 0 25px 25px;
  color: #ccc;
  line-height: 1.6;
  border-top: 1px solid #555;
}

.mini-faq {
  padding: 120px 50px;
  background: #111;
  text-align: center;
  border-bottom: 3px solid #fff;
}
.faq-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 60px auto 0;
}
.faq-card {
  background: #000;
  padding: 40px;
  border: 3px solid #fff;
  text-align: left;
  border-radius: 40px 0px 40px 0px;
  box-shadow: var(--shadow-card);
  transition: 0.3s;
}
.faq-card:hover {
  transform: translateY(-5px);
  box-shadow: 10px 10px 0px #fff;
}
.faq-card h4 {
  color: #fff;
  margin-bottom: 15px;
  font-size: 1.3rem;
  text-transform: uppercase;
  font-weight: 900;
}
.faq-card p {
  color: #ccc;
  font-size: 1rem;
  margin-bottom: 25px;
  line-height: 1.5;
}
.faq-card a {
  color: #fff;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.business-cta {
  padding: 150px 20px;
  text-align: center;
  background: #000;
  border-bottom: 3px solid #fff;
}
.cta-content h2 {
  font-size: 3.5rem;
  margin-bottom: 50px;
  color: #fff;
  font-weight: 900;
}
.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 50px;
  flex-wrap: wrap;
}
/* Botones CTA específicos */
.cta-buttons a {
  padding: 12px 35px !important;
  font-size: 0.9rem !important;
  margin: 10px;
  min-width: 200px;
  max-width: 300px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/* 9. PÁGINA: CONTACTO
   ======================================================= */
.contact-split {
  padding: 80px 50px;
  background: #000;
  border-bottom: 3px solid #fff;
}
.contact-container {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  gap: 80px;
}
.info-col {
  flex: 1;
  padding-top: 20px;
}
.info-block {
  margin-bottom: 60px;
  padding-left: 30px;
  border-left: 4px solid #fff;
}
.info-block h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 800;
}
.info-block p {
  color: #ccc;
  font-size: 1rem;
  line-height: 1.6;
}
.form-col {
  flex: 1.2;
}
.smart-form {
  background: #000;
  padding: 50px;
  border: 3px solid #fff;
  border-radius: 60px 0px 60px 0px;
  box-shadow: 15px 15px 0px rgba(255, 255, 255, 0.1);
}
.form-row {
  display: flex;
  gap: 30px;
}
.input-group {
  margin-bottom: 30px;
  width: 100%;
}
/* =======================================================
   CORRECCIÓN DEL MENÚ DESPLEGABLE (SELECT OPTIONS)
   ======================================================= */
.input-group select option {
  /* Forzamos el fondo al azul corporativo oscuro */
  background-color: var(--blue-deep) !important;

  /* Ponemos el texto en blanco por defecto para que las opciones que "desaparecieron" se vuelvan visibles */
  color: #ffffff;

  font-weight: 600;
  padding: 10px;
}

.input-group input,
.input-group textarea,
.input-group select {
  width: 100%;
  padding: 15px 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 1.1rem;
  outline: none;
  border: none;
  border-bottom: 3px solid #fff;
  border-radius: 0;
  transition: 0.3s;
}
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
  border-bottom-color: #aaa;
}
.checkbox-group {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 40px;
}
.checkbox-group label {
  font-size: 0.9rem;
  color: #fff;
  font-weight: 500;
}
.full-width {
  width: 100%;
}

/* 10. FOOTER GLOBAL
   ======================================================= */
footer {
  padding: 80px 50px;
  background: #203363;
  border-top: 3px solid #fff;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}
.f-col h4 {
  margin-bottom: 25px;
  font-size: 1.2rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 900;
}
.f-col a,
.f-col p {
  color: #aaa;
  text-decoration: none;
  font-size: 1rem;
  display: block;
  margin-bottom: 12px;
}
.f-col a:hover {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
}
.copyright {
  text-align: center;
  margin-top: 60px;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 500;
}

/* --- IDIOMA --- */
.lang-switch {
  font-weight: 700;
  margin-left: 20px;
  cursor: pointer; /* Manito */
}

.lang-switch span {
  opacity: 0.5; /* Apagado por defecto */
  transition: 0.3s;
}

.lang-switch span:hover {
  color: #fff;
  opacity: 1;
}

/* El idioma seleccionado se ve blanco puro */
.lang-switch span.active-lang {
  opacity: 1;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* AJUSTES PARA LENIS SMOOTH SCROLL */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

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

/* =======================================================
   ORIVANT ENHANCED LAYER V2.0
   Mejoras visuales: Profundidad, microinteracciones, 
   texturas tech sin saturar. Paleta: #203363 + #c9c3b9 + #fff
   ======================================================= */

/* -------------------------------------------------------
   VARIABLES AMPLIADAS
   ------------------------------------------------------- */
:root {
  --accent: #c9c3b9; /* Beige metálico — el "oro" del sistema */
  --accent-glow: rgba(201, 195, 185, 0.15);
  --blue-deep: #152444; /* Azul más oscuro para capas inferiores */
  --blue-mid: #203363; /* Azul base */
  --blue-lite: #2a4480; /* Azul iluminado para hover */
  --grid-line: rgba(255, 255, 255, 0.06);
  --scanline: rgba(0, 0, 0, 0.25);
}

/* -------------------------------------------------------
   TEXTURA GLOBAL: MICRO-GRID SOBRE EL BODY
   Sutil, no interfiere con contenido
   ------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}
/* -------------------------------------------------------
   HEADER: GLASSMORPHISM TECH + LÍNEA DE ACENTO
   ------------------------------------------------------- */
header {
  background: rgba(32, 51, 99, 0.85) !important;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(201, 195, 185, 0.3) !important;
  box-shadow:
    0 1px 0 rgba(201, 195, 185, 0.1),
    0 4px 30px rgba(0, 0, 0, 0.4);
}

header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.6;
}

.brand-logo {
  background: linear-gradient(135deg, #fff 40%, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 3px;
  transition: letter-spacing 0.4s ease;
}
.brand-logo:hover {
  letter-spacing: 5px;
}

.nav-main a {
  position: relative;
  letter-spacing: 0.5px;
}
.nav-main a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.3s ease;
}
.nav-main a:hover::after,
.nav-main a.active::after {
  width: 100%;
}
.nav-main a:hover,
.nav-main a.active {
  color: #fff;
  text-decoration: none !important;
}

.btn-collab {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease !important;
}
.btn-collab::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: -1;
}
.btn-collab:hover::before {
  transform: translateX(0);
}
.btn-collab:hover {
  color: var(--blue-deep) !important;
  background: transparent !important;
}

/* -------------------------------------------------------
   BARRA DE PROGRESO — DEGRADADO CON ACENTO
   ------------------------------------------------------- */
#scroll-progress {
  background: linear-gradient(
    90deg,
    var(--accent),
    #fff,
    var(--blue-lite)
  ) !important;
  height: 2px !important;
  box-shadow: 0 0 8px var(--accent-glow);
}

/* -------------------------------------------------------
   HEROES — INTEGRACIÓN CON PALETA AZUL
   ------------------------------------------------------- */
.hero-section,
.services-hero,
.contact-hero,
.nosotros-split > .col-manifesto {
  border-bottom-color: rgba(201, 195, 185, 0.25) !important;
}

/* Gradiente de profundidad en todos los heroes */
.services-hero {
  background:
    radial-gradient(
      ellipse 80% 60% at 50% 0%,
      rgba(42, 68, 128, 0.5) 0%,
      transparent 70%
    ),
    linear-gradient(180deg, var(--blue-deep) 0%, #000 100%) !important;
}

.contact-hero {
  background-color: var(--blue-deep) !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    radial-gradient(
      ellipse 60% 50% at 50% 100%,
      rgba(201, 195, 185, 0.08) 0%,
      transparent 70%
    ) !important;
  background-size:
    50px 50px,
    50px 50px,
    100% 100% !important;
}

/* Texto del hero con glow sutil */
.hero-content h1,
.port-content h1 {
  text-shadow:
    0 0 60px rgba(201, 195, 185, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.5);
}

/* -------------------------------------------------------
   MARQUEE — ACENTO EN LUGAR DE BEIGE PLANO
   ------------------------------------------------------- */
.marquee {
  background: var(--blue-deep) !important;
  border-top: 1px solid rgba(201, 195, 185, 0.4) !important;
  border-bottom: 1px solid rgba(201, 195, 185, 0.4) !important;
}
.marquee-content span {
  color: var(--accent) !important;
  font-size: 1.1rem !important;
  letter-spacing: 3px !important;
}
.marquee::before {
  background: linear-gradient(
    to right,
    var(--blue-deep),
    transparent
  ) !important;
}
.marquee::after {
  background: linear-gradient(
    to left,
    var(--blue-deep),
    transparent
  ) !important;
}

/* -------------------------------------------------------
   SECCIÓN ORBITAL — MEJORAS DE PROFUNDIDAD
   ------------------------------------------------------- */
.orbital-section {
  background: radial-gradient(
    ellipse 100% 100% at 50% 50%,
    var(--blue-mid) 0%,
    var(--blue-deep) 60%,
    #000 100%
  ) !important;
}

.orbit-guide {
  border: 1px solid rgba(201, 195, 185, 0.15) !important;
  box-shadow:
    0 0 0 1px rgba(201, 195, 185, 0.06),
    inset 0 0 60px rgba(201, 195, 185, 0.03);
}
.orbit-guide-inner {
  position: absolute;
  width: 320px;
  height: 320px;
  border: 1px dashed rgba(201, 195, 185, 0.08);
  border-radius: 50%;
}

.core-node-3d .l3 {
  border-color: var(--accent) !important;
  box-shadow:
    0 0 40px rgba(201, 195, 185, 0.25),
    inset 0 0 30px rgba(201, 195, 185, 0.08) !important;
}
.core-text .brand {
  color: var(--accent) !important;
  text-shadow: 0 0 20px rgba(201, 195, 185, 0.5) !important;
  letter-spacing: 4px !important;
}

.connector {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 195, 185, 0.4)
  ) !important;
}
.node {
  background: rgba(32, 51, 99, 0.9) !important;
  border-color: rgba(201, 195, 185, 0.3) !important;
  outline-color: rgba(201, 195, 185, 0.1) !important;
  color: var(--accent) !important;
  backdrop-filter: blur(4px);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.node:hover {
  background: var(--accent) !important;
  color: var(--blue-deep) !important;
  border-color: var(--accent) !important;
  box-shadow:
    0 0 30px rgba(201, 195, 185, 0.5),
    0 0 60px rgba(201, 195, 185, 0.2) !important;
}

/* Modal HUD */
.modal-content {
  background: rgba(21, 36, 68, 0.97) !important;
  border-color: var(--accent) !important;
  box-shadow:
    0 0 60px rgba(201, 195, 185, 0.2),
    inset 0 0 40px rgba(201, 195, 185, 0.03) !important;
}
#modal-title {
  color: var(--accent) !important;
}
.modal-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  margin: 15px 0 25px;
}

/* -------------------------------------------------------
   NOSOTROS — PROFUNDIDAD EN BENTO Y TIMELINE
   ------------------------------------------------------- */
.nosotros-split {
  border-bottom-color: rgba(201, 195, 185, 0.2) !important;
}
.col-manifesto {
  background: var(--blue-deep) !important;
  border-right-color: rgba(201, 195, 185, 0.2) !important;
}
.manifesto-content {
  border-left-color: var(--accent) !important;
  border-left-width: 3px !important;
}
.sub-label {
  color: var(--accent) !important;
  text-decoration: none !important;
  letter-spacing: 4px !important;
}
.manifesto-content h1 {
  background: linear-gradient(135deg, #fff 50%, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.col-data {
  background: var(--blue-mid) !important;
}
.data-card {
  background: var(--blue-deep) !important;
  border: 1px solid rgba(201, 195, 185, 0.2) !important;
  box-shadow: none !important;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}
.data-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(201, 195, 185, 0.06) 0%,
    transparent 60%
  );
  pointer-events: none;
}
.data-card:hover {
  border-color: rgba(201, 195, 185, 0.5) !important;
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}
.data-value {
  background: linear-gradient(135deg, #fff, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.data-label {
  color: rgba(201, 195, 185, 0.6) !important;
}

/* Pilares */
.pillars-section {
  background: var(--blue-mid) !important;
}
.pillar-card {
  background: var(--blue-deep) !important;
  border-color: rgba(201, 195, 185, 0.2) !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1) !important;
}
.pillar-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}
.pillar-card:hover::before {
  opacity: 1;
}
.pillar-card:hover {
  background: rgba(201, 195, 185, 0.08) !important;
  border-color: rgba(201, 195, 185, 0.5) !important;
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
}
.pillar-card:hover h3,
.pillar-card:hover p {
  color: inherit !important;
}
.pillar-card h3 {
  color: var(--accent) !important;
}
.pillar-card p {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* -------------------------------------------------------
   EMPRESAS — FINANCE, TECH, INFRA, LIFESTYLE
   ------------------------------------------------------- */
.node-section,
.finance-bg,
.lifestyle-section {
  background: var(--blue-deep) !important;
}
.tech-section {
  background: var(--blue-mid) !important;
}
.infra-split {
  background: var(--blue-deep) !important;
}
.infra-col {
  background: transparent !important;
  border-right-color: rgba(201, 195, 185, 0.15) !important;
  transition: background 0.4s;
}
.infra-col:hover {
  background: rgba(42, 68, 128, 0.3) !important;
}

.finance-card-full {
  background: rgba(21, 36, 68, 0.9) !important;
  border-color: rgba(201, 195, 185, 0.25) !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    inset 0 0 40px rgba(201, 195, 185, 0.03) !important;
  backdrop-filter: blur(10px);
}
.fin-logo {
  border-right-color: rgba(201, 195, 185, 0.3) !important;
}

.tech-card {
  background: rgba(21, 36, 68, 0.8) !important;
  border: 1px solid rgba(201, 195, 185, 0.15) !important;
  box-shadow: none !important;
  transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1) !important;
  position: relative;
  overflow: hidden;
}
.tech-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.4s ease;
}
.tech-card:hover::after {
  width: 100%;
}
.tech-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(201, 195, 185, 0.4) !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(201, 195, 185, 0.1) !important;
  background: rgba(32, 51, 99, 0.9) !important;
}
.tech-card h3 {
  color: #fff !important;
}
.tech-card p {
  color: rgba(255, 255, 255, 0.6) !important;
}

.zz-img {
  background-color: rgba(21, 36, 68, 0.6) !important;
  border-color: rgba(201, 195, 185, 0.2) !important;
  transition: border-color 0.4s;
}
.zz-img:hover {
  border-color: rgba(201, 195, 185, 0.5) !important;
}

/* -------------------------------------------------------
   SERVICIOS — CATALOG, PROCESS, STATS
   ------------------------------------------------------- */
.catalog-section {
  background: var(--blue-deep) !important;
}
.service-row {
  border-bottom-color: rgba(201, 195, 185, 0.1) !important;
  padding-bottom: 100px !important;
  margin-bottom: 100px !important;
}
.srv-visual {
  background: rgba(32, 51, 99, 0.5) !important;
  border-color: rgba(201, 195, 185, 0.2) !important;
  box-shadow: none !important;
  transition: all 0.4s ease;
}
.srv-visual:hover {
  border-color: rgba(201, 195, 185, 0.4) !important;
  box-shadow: 0 0 40px rgba(201, 195, 185, 0.08) !important;
}
.srv-number {
  color: rgba(201, 195, 185, 0.1) !important;
}
.srv-text h3 {
  background: linear-gradient(135deg, #fff 40%, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.srv-list li {
  background: rgba(21, 36, 68, 0.8) !important;
  border-color: rgba(201, 195, 185, 0.15) !important;
  transition: all 0.3s ease;
}
.srv-list li:hover {
  border-color: rgba(201, 195, 185, 0.4) !important;
  transform: translateX(6px);
}
.srv-list li i {
  color: var(--accent) !important;
}

.process-section {
  background: var(--blue-mid) !important;
}
.step-card {
  background: var(--blue-deep) !important;
  border: 1px solid rgba(201, 195, 185, 0.15) !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease !important;
}
.step-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(201, 195, 185, 0.06) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s;
}
.step-card:hover::before {
  opacity: 1;
}
.step-card:hover {
  border-color: rgba(201, 195, 185, 0.4) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
}
.step-card .step-icon {
  color: var(--accent) !important;
}
.step-card h4 {
  color: #fff !important;
}
.step-card p {
  color: rgba(201, 195, 185, 0.6) !important;
}

/* Stats banner en paleta */
.stats-banner {
  background: linear-gradient(
    135deg,
    var(--blue-deep),
    var(--blue-mid)
  ) !important;
  border-color: rgba(201, 195, 185, 0.2) !important;
  position: relative;
  overflow: hidden;
}
.stats-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.stats-banner .stat-item {
  color: #fff !important;
}
.stat-num {
  background: linear-gradient(135deg, #fff, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-desc {
  color: rgba(201, 195, 185, 0.6) !important;
}

/* FAQ */
.faq-section {
  background: var(--blue-deep) !important;
}
.faq-item {
  background: rgba(32, 51, 99, 0.5) !important;
  border-color: rgba(201, 195, 185, 0.15) !important;
  transition: border-color 0.3s;
}
.faq-item:hover {
  border-color: rgba(201, 195, 185, 0.35) !important;
}
.faq-item summary {
  color: #fff !important;
}
.faq-item summary::after {
  content: "+";
  font-size: 1.5rem;
  color: var(--accent);
  transition: transform 0.3s;
}
details[open] .faq-item summary::after,
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-item p {
  color: rgba(201, 195, 185, 0.7) !important;
  border-top-color: rgba(201, 195, 185, 0.1) !important;
}

/* -------------------------------------------------------
   CONTACTO — FORM Y MAPA
   ------------------------------------------------------- */
.contact-split {
  background: var(--blue-deep) !important;
}
.info-block {
  border-left-color: var(--accent) !important;
}
.info-block h3 {
  color: var(--accent) !important;
  letter-spacing: 2px !important;
}
.info-block p {
  color: rgba(255, 255, 255, 0.65) !important;
}
.link-gold {
  color: var(--accent) !important;
  text-decoration: underline !important;
}

.smart-form {
  background: rgba(21, 36, 68, 0.8) !important;
  border: 1px solid rgba(201, 195, 185, 0.2) !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    inset 0 0 40px rgba(201, 195, 185, 0.02) !important;
  backdrop-filter: blur(10px);
}
.input-group label {
  color: rgba(201, 195, 185, 0.8) !important;
  letter-spacing: 2px !important;
}
.input-group input,
.input-group textarea,
.input-group select {
  border-bottom-color: rgba(201, 195, 185, 0.2) !important;
  color: #fff !important;
  font-size: 1rem !important;
  transition:
    border-bottom-color 0.3s,
    transform 0.3s !important;
}
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
  border-bottom-color: var(--accent) !important;
  outline: none !important;
}
.input-group select {
  background: rgba(21, 36, 68, 0.9) !important;
}
.checkbox-group label {
  color: rgba(201, 195, 185, 0.7) !important;
}

/* -------------------------------------------------------
   MINI FAQ (CONTACTO)
   ------------------------------------------------------- */
.mini-faq {
  background: var(--blue-mid) !important;
}
.faq-card {
  background: rgba(21, 36, 68, 0.8) !important;
  border: 1px solid rgba(201, 195, 185, 0.15) !important;
  box-shadow: none !important;
  transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1) !important;
}
.faq-card:hover {
  border-color: rgba(201, 195, 185, 0.4) !important;
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}
.faq-card h4 {
  color: var(--accent) !important;
}
.faq-card p {
  color: rgba(255, 255, 255, 0.6) !important;
}
.faq-card a {
  color: var(--accent) !important;
}

/* -------------------------------------------------------
   CTA SECTION — TOQUE DE PROFUNDIDAD
   ------------------------------------------------------- */
.business-cta {
  background: linear-gradient(
    180deg,
    var(--blue-deep) 0%,
    #000 100%
  ) !important;
  border-bottom-color: rgba(201, 195, 185, 0.15) !important;
  position: relative;
  overflow: hidden;
}
.business-cta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(32, 51, 99, 0.8) 0%, transparent 0%);
  pointer-events: none;
}
.cta-content h2 {
  background: linear-gradient(135deg, #fff 40%, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* -------------------------------------------------------
   BOTONES — COHERENCIA CON PALETA
   ------------------------------------------------------- */
.btn-main,
.btn-outline,
.btn-sec,
.btn-white,
.btn-gold {
  background-color: var(--blue-mid) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  box-shadow: 3px 3px 0 rgba(201, 195, 185, 0.3) !important;
  letter-spacing: 1px;
  transition: all 0.25s ease !important;
}
.btn-main:hover,
.btn-outline:hover,
.btn-sec:hover {
  background-color: var(--accent) !important;
  color: var(--blue-deep) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 rgba(201, 195, 185, 0.4) !important;
}
.btn-sec {
  background-color: transparent !important;
  border-color: rgba(201, 195, 185, 0.4) !important;
  color: rgba(201, 195, 185, 0.8) !important;
}

.link-arrow {
  color: var(--accent) !important;
  border-bottom-color: rgba(201, 195, 185, 0.4) !important;
}
.link-arrow:hover {
  background: var(--accent) !important;
  color: var(--blue-deep) !important;
}

/* -------------------------------------------------------
   FOOTER
   ------------------------------------------------------- */
footer {
  background: var(--blue-deep) !important;
  border-top: 1px solid rgba(201, 195, 185, 0.2) !important;
  position: relative;
  overflow: hidden;
}
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.f-col h4 {
  color: var(--accent) !important;
  letter-spacing: 3px !important;
}
.f-col a,
.f-col p {
  color: rgba(255, 255, 255, 0.45) !important;
}
.f-col a:hover {
  color: var(--accent) !important;
}
.copyright {
  color: rgb(255, 255, 255) !important;
}

/* -------------------------------------------------------
   QUICK LINKS (EMPRESAS)
   ------------------------------------------------------- */
.quick-links a {
  border-color: rgba(201, 195, 185, 0.3) !important;
  color: rgba(201, 195, 185, 0.7) !important;
  transition: all 0.3s ease !important;
}
.quick-links a:hover {
  background: rgba(201, 195, 185, 0.1) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* -------------------------------------------------------
   SEC-TITLE — DETALLE DE ACENTO
   ------------------------------------------------------- */
.sec-title {
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #fff 40%, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -1px !important;
}
.sec-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: var(--accent);
  margin: 16px auto 0;
}

/* -------------------------------------------------------
   ANIMACIONES DE REVEAL MEJORADAS
   ------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.9s cubic-bezier(0.2, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.2, 1, 0.3, 1);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Delays escalonados para grids */
.tech-grid .tech-card:nth-child(1),
.process-grid .step-card:nth-child(1),
.pillars-grid .pillar-card:nth-child(1),
.faq-grid-3 .faq-card:nth-child(1) {
  transition-delay: 0s;
}

.tech-grid .tech-card:nth-child(2),
.process-grid .step-card:nth-child(2),
.pillars-grid .pillar-card:nth-child(2),
.faq-grid-3 .faq-card:nth-child(2) {
  transition-delay: 0.1s;
}

.tech-grid .tech-card:nth-child(3),
.process-grid .step-card:nth-child(3),
.pillars-grid .pillar-card:nth-child(3),
.faq-grid-3 .faq-card:nth-child(3) {
  transition-delay: 0.2s;
}

.process-grid .step-card:nth-child(4) {
  transition-delay: 0.3s;
}

/* -------------------------------------------------------
   EFECTOS HOVER GLOBALES — CURSOR INTERACTION
   ------------------------------------------------------- */
a,
button {
  cursor: pointer;
}

/* Subrayado con acento en links de nav internos */
.f-col a::after,
.nav-main a::after {
  background: var(--accent) !important;
}

/* =======================================================
   ORIVANT | PAGE-SPECIFIC LAYER V3.0
   Adaptación por página + INDEX TECH INJECTION
   ======================================================= */

/* ╔═══════════════════════════════════════════════════════╗
   ║  INDEX — TECH INJECTION                              ║
   ╚═══════════════════════════════════════════════════════╝ */

/* Hero: fondo vivo con grid animado en azul corporativo */
.hero-section {
  background-color: var(--blue-deep) !important;
  background-image:
    linear-gradient(rgba(201, 195, 185, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 195, 185, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) !important;
  background-size:
    20px 20px,
    20px 20px,
    100px 100px,
    100px 100px !important;
  animation: gridMove 25s linear infinite !important;
}

/* Vignette suave sobre el hero para que el logo respire */
.hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 70% at 50% 50%,
    transparent 40%,
    rgba(21, 36, 68, 0.7) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Logo rotador: glow en azul en lugar de blanco puro */
.logo-3d-rotator {
  filter: drop-shadow(0 0 18px rgba(201, 195, 185, 0.25))
    drop-shadow(0 0 50px rgba(32, 51, 99, 0.8)) !important;
}

/* Partículas canvas — color acento */
#particles-canvas {
  z-index: 3 !important;
}

/* ── ORBITAL: PROFUNDIDAD TOTAL ── */
.orbital-section {
  background: radial-gradient(
    ellipse 80% 80% at 50% 50%,
    var(--blue-mid) 0%,
    var(--blue-deep) 55%,
    #020812 100%
  ) !important;
  position: relative;
}

/* Segundo anillo orbital decorativo */
.satellites-container::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(201, 195, 185, 0.04);
  border-radius: 50%;
  pointer-events: none;
}

/* Pulso en el core */
.core-node-3d::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(201, 195, 185, 0.15);
  animation: coreRing 3s ease-in-out infinite;
}
@keyframes coreRing {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* Conectores con animación de flujo */
.connector {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 195, 185, 0.08) 30%,
    rgba(201, 195, 185, 0.5) 60%,
    rgba(201, 195, 185, 0.15) 100%
  ) !important;
  animation: dataFlow 2s linear infinite;
}
@keyframes dataFlow {
  0% {
    background-position: -250px 0;
  }
  100% {
    background-position: 0px 0;
  }
}

/* Modal HUD: esquinas cortadas + scanlines */
.modal-content::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255, 255, 255, 0.01) 2px,
    rgba(255, 255, 255, 0.01) 4px
  );
  pointer-events: none;
  z-index: 0;
}
.modal-content > * {
  position: relative;
  z-index: 1;
}

/* Boot screen: texto estilo terminal */
.boot-text {
  font-family: "Courier New", monospace !important;
  font-size: 0.75rem !important;
  letter-spacing: 5px !important;
}

/* ╔═══════════════════════════════════════════════════════╗
   ║  NOSOTROS — ADAPTACIÓN COMPLETA                      ║
   ╚═══════════════════════════════════════════════════════╝ */

/* Split hero: lado izquierdo azul deep con textura */
.col-manifesto {
  background:
    linear-gradient(rgba(201, 195, 185, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 195, 185, 0.03) 1px, transparent 1px),
    var(--blue-deep) !important;
  background-size:
    40px 40px,
    40px 40px,
    100% !important;
}

/* Lado derecho: bento en azul mid */
.col-data {
  background: var(--blue-mid) !important;
  position: relative;
}
.col-data::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 80% at 80% 50%,
    rgba(42, 68, 128, 0.5) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* Data cards: hex clip para cada una */
.data-card {
  border-radius: 0 !important;
  clip-path: polygon(
    0 0,
    calc(100% - 20px) 0,
    100% 20px,
    100% 100%,
    20px 100%,
    0 calc(100% - 20px)
  ) !important;
  border: 1px solid rgba(201, 195, 185, 0.15) !important;
  transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1) !important;
}
.data-card:hover {
  clip-path: polygon(
    0 0,
    calc(100% - 20px) 0,
    100% 20px,
    100% 100%,
    20px 100%,
    0 calc(100% - 20px)
  ) !important;
  border-color: rgba(201, 195, 185, 0.5) !important;
  background: rgba(42, 68, 128, 0.6) !important;
  transform: translateY(-6px) !important;
}

/* Timeline: fondo azul deep con grid */
.timeline-section {
  background:
    linear-gradient(rgba(201, 195, 185, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 195, 185, 0.025) 1px, transparent 1px),
    var(--blue-deep) !important;
  background-size:
    60px 60px,
    60px 60px,
    100% !important;
}

/* Milestone content: glassmorphism */
.milestone-content {
  background: rgba(32, 51, 99, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(201, 195, 185, 0.15) !important;
  clip-path: polygon(
    0 0,
    calc(100% - 15px) 0,
    100% 15px,
    100% 100%,
    15px 100%,
    0 calc(100% - 15px)
  ) !important;
  border-radius: 0 !important;
}

/* Pilares: fondo azul mid con spotlight */
.pillars-section {
  background:
    radial-gradient(
      ellipse 80% 50% at 50% 0%,
      rgba(42, 68, 128, 0.3) 0%,
      transparent 70%
    ),
    var(--blue-mid) !important;
}
.pillar-card {
  background: rgba(21, 36, 68, 0.7) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(201, 195, 185, 0.12) !important;
  border-radius: 0 !important;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 30px),
    calc(100% - 30px) 100%,
    0 100%
  ) !important;
}
.pillar-card:hover {
  background: rgba(42, 68, 128, 0.5) !important;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 30px),
    calc(100% - 30px) 100%,
    0 100%
  ) !important;
}

/* ╔═══════════════════════════════════════════════════════╗
   ║  EMPRESAS — ADAPTACIÓN COMPLETA                      ║
   ╚═══════════════════════════════════════════════════════╝ */

/* Finance card: acento dorado con paleta azul */
.finance-card-full {
  clip-path: polygon(
    0 0,
    calc(100% - 30px) 0,
    100% 30px,
    100% 100%,
    30px 100%,
    0 calc(100% - 30px)
  ) !important;
  border-radius: 0 !important;
  background: rgba(21, 36, 68, 0.95) !important;
}

/* Infra: gradient oscuro sobre las imágenes */
.infra-col {
  position: relative;
  overflow: hidden;
}
.infra-col::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(21, 36, 68, 0.85) 0%,
    transparent 50%
  );
  pointer-events: none;
}
.infra-overlay {
  position: relative;
  z-index: 2;
}

.tech-card {
  position: relative;
  overflow: hidden; /* Corta el video sobrante */
  transition: all 0.5s ease;
}

.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* Oculto por defecto */
  transition: opacity 0.5s ease;
  z-index: 1;
}

.card-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El contenido debe ir por encima del video */
.card-content {
  position: relative;
  z-index: 2;
  background: rgba(
    0,
    0,
    0,
    0.4
  ); /* Capa oscura para que el texto resalte sobre el video */
  height: 100%;
  padding: 20px;
  transition: background 0.5s ease;
}

.tech-card:hover .card-content {
  background: rgba(
    0,
    0,
    0,
    0.7
  ); /* Se oscurece un poco más al activar el video */
}

/* Zig-zag: imagen con clip tech */
.zz-img {
  clip-path: polygon(
    0 0,
    calc(100% - 30px) 0,
    100% 30px,
    100% 100%,
    30px 100%,
    0 calc(100% - 30px)
  ) !important;
  border-radius: 0 !important;
}

/* ╔═══════════════════════════════════════════════════════╗
   ║  SERVICIOS — ADAPTACIÓN COMPLETA                     ║
   ╚═══════════════════════════════════════════════════════╝ */

/* Catalog: fondo con textura de puntos */
.catalog-section {
  background:
    radial-gradient(rgba(201, 195, 185, 0.04) 1px, transparent 1px),
    var(--blue-deep) !important;
  background-size:
    30px 30px,
    100% !important;
}

/* Service visual: clip tech */
.srv-visual {
  clip-path: polygon(
    0 0,
    calc(100% - 25px) 0,
    100% 25px,
    100% 100%,
    25px 100%,
    0 calc(100% - 25px)
  ) !important;
  border-radius: 0 !important;
  background: rgba(32, 51, 99, 0.4) !important;
  border: 1px solid rgba(201, 195, 185, 0.15) !important;
}

/* Lista de servicios: indicador izquierdo acento */
.srv-list li {
  border-radius: 0 !important;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    0 100%
  ) !important;
  background: rgba(21, 36, 68, 0.6) !important;
  border: 1px solid rgba(201, 195, 185, 0.12) !important;
  padding-left: 20px !important;
  border-left: 3px solid var(--accent) !important;
}

/* Process section: fondo con grid y spotlight */
.process-section {
  background:
    radial-gradient(
      ellipse 60% 60% at 50% 50%,
      rgba(42, 68, 128, 0.3) 0%,
      transparent 70%
    ),
    linear-gradient(rgba(201, 195, 185, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 195, 185, 0.02) 1px, transparent 1px),
    var(--blue-mid) !important;
  background-size:
    100%,
    50px 50px,
    50px 50px,
    100% !important;
}

/* Step cards: numeración */
.step-card {
  clip-path: polygon(
    0 0,
    calc(100% - 18px) 0,
    100% 18px,
    100% 100%,
    18px 100%,
    0 calc(100% - 18px)
  ) !important;
  border-radius: 0 !important;
  counter-increment: step-counter;
}
.step-card::after {
  content: counter(step-counter, decimal-leading-zero);
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 0.65rem;
  color: rgba(201, 195, 185, 0.2);
  font-weight: 900;
  letter-spacing: 1px;
}
.process-grid {
  counter-reset: step-counter;
}

/* Stats banner: estilo HUD */
.stats-banner {
  background: var(--blue-deep) !important;
  border-top: 1px solid rgba(201, 195, 185, 0.15) !important;
  border-bottom: 1px solid rgba(201, 195, 185, 0.15) !important;
  position: relative;
}
.stat-item {
  position: relative;
  padding: 20px 40px;
}
.stat-item::after {
  content: "";
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: rgba(201, 195, 185, 0.15);
}
.stat-item:last-child::after {
  display: none;
}

/* FAQ acordeón: clip lateral */
.faq-item {
  clip-path: polygon(
    0 0,
    calc(100% - 12px) 0,
    100% 12px,
    100% 100%,
    12px 100%,
    0 calc(100% - 12px)
  ) !important;
  border-radius: 0 !important;
  border: 1px solid rgba(201, 195, 185, 0.12) !important;
}

/* ╔═══════════════════════════════════════════════════════╗
   ║  CONTACTO — ADAPTACIÓN COMPLETA                      ║
   ╚═══════════════════════════════════════════════════════╝ */

/* Sección split: fondo con grid fino */
.contact-split {
  background:
    linear-gradient(rgba(201, 195, 185, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 195, 185, 0.025) 1px, transparent 1px),
    var(--blue-deep) !important;
  background-size:
    50px 50px,
    50px 50px,
    100% !important;
}

/* Info blocks: icono acento */
.info-block i {
  color: var(--accent) !important;
  font-size: 1.2rem !important;
  display: block;
  margin-bottom: 12px;
}

/* Form: clip tech + glassmorphism */
.smart-form {
  clip-path: polygon(
    0 0,
    calc(100% - 30px) 0,
    100% 30px,
    100% 100%,
    30px 100%,
    0 calc(100% - 30px)
  ) !important;
  border-radius: 0 !important;
  background: rgba(21, 36, 68, 0.75) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(201, 195, 185, 0.18) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(201, 195, 185, 0.06) !important;
}

/* Label: estilo HUD */
.input-group label {
  font-size: 0.7rem !important;
  letter-spacing: 3px !important;
  color: rgba(201, 195, 185, 0.5) !important;
}
/* Input: línea con transición color acento */
.input-group input,
.input-group textarea,
.input-group select {
  background: transparent !important;
  border-bottom: 1px solid rgba(201, 195, 185, 0.15) !important;
  color: #fff !important;
  padding-left: 0 !important;
  font-size: 0.95rem !important;
  transition: border-bottom-color 0.3s ease !important;
}
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
  border-bottom: 1px solid var(--accent) !important;
  box-shadow: 0 2px 0 rgba(201, 195, 185, 0.1) !important;
}

/* FAQ cards (mini-faq): clip tech */
.faq-card {
  clip-path: polygon(
    0 0,
    calc(100% - 20px) 0,
    100% 20px,
    100% 100%,
    20px 100%,
    0 calc(100% - 20px)
  ) !important;
  border-radius: 0 !important;
  background: rgba(21, 36, 68, 0.7) !important;
  border: 1px solid rgba(201, 195, 185, 0.12) !important;
}

/* ╔═══════════════════════════════════════════════════════╗
   ║  CTA GLOBAL — REFINADO                               ║
   ╚═══════════════════════════════════════════════════════╝ */
.business-cta {
  background:
    radial-gradient(
      ellipse 60% 60% at 50% 50%,
      rgba(32, 51, 99, 0.6) 0%,
      transparent 70%
    ),
    linear-gradient(rgba(201, 195, 185, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 195, 185, 0.02) 1px, transparent 1px),
    var(--blue-deep) !important;
  background-size:
    100%,
    80px 80px,
    80px 80px,
    100% !important;
}

/* ╔═══════════════════════════════════════════════════════╗
   ║  MICRO-DETALLES GLOBALES                             ║
   ╚═══════════════════════════════════════════════════════╝ */

/* Separadores de sección: siempre acento translúcido */
.nosotros-split,
.timeline-section,
.pillars-section,
.node-section,
.infra-split,
.tech-section,
.lifestyle-section,
.catalog-section,
.process-section,
.stats-banner,
.faq-section,
.contact-split,
.mini-faq,
.business-cta {
  border-bottom: 1px solid rgba(201, 195, 185, 0.1) !important;
  border-top: none !important;
}

/* Scrollbar personalizado */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: var(--blue-deep);
}
::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: #fff;
}

/* Selección de texto */
::selection {
  background: rgba(201, 195, 185, 0.25);
  color: #fff;
}

/* =======================================================
   MODIFICACIÓN: OCULTAR ORBITALES (LIMPIEZA VISUAL)
   ======================================================= */
.orbit-guide,
.orbit-guide-inner,
.satellites-container::before {
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}

/* --- PEGAR AL FINAL DE STYLE.CSS --- */

/* 1. Definimos el movimiento de flotación */
@keyframes floatNode {
  0%,
  100% {
    margin-top: 0px;
  }
  50% {
    margin-top: -10px;
  } /* Sube 15px suavemente */
}

/* 2. Hacemos invisibles los anillos (guías) */
.orbit-guide,
.orbit-guide-inner {
  border: none !important;
  box-shadow: none !important;
}

/* 3. Truco para que no se muevan todos igual (los pares esperan) */
.satellite-link:nth-child(even) .node {
  animation-delay: 3s;
}

/* 1. Mover todo el sistema de satélites junto (Líneas + Nodos) */
.satellites-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Usamos 'levitate' (la misma del centro) para que vayan idénticos */
  animation: levitate 2s ease-in-out infinite;
  pointer-events: none; /* Para que no bloquee clicks */
}

/* Reactivamos los clicks en los enlaces */
.satellite-link {
  pointer-events: auto;
}

/* =======================================================
   RESETEO DE HISTORIA: EFECTO ZIG-ZAG + REVEAL
   ======================================================= */

/* Forzamos que el contenedor ocupe todo el ancho */
.milestone {
  display: flex !important;
  width: 100% !important;
  justify-content: center;
  position: relative;
  margin-bottom: 120px;
}

/* ⬅️ IZQUIERDA: Lo empujamos hacia la izquierda */
.milestone.left .milestone-content {
  margin-right: auto !important;
  margin-left: 0 !important;
  transform: translateX(-100px); /* Posición inicial para la animación */
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

/* ➡️ DERECHA: Lo empujamos hacia la derecha */
.milestone.right .milestone-content {
  margin-left: auto !important;
  margin-right: 0 !important;
  transform: translateX(100px); /* Posición inicial para la animación */
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

/* 🟦 CENTRO: El de 2026 */
.milestone.center .milestone-content {
  margin: 0 auto !important;
  transform: translateY(50px);
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

/* ✅ ESTADO ACTIVO: Cuando el JS detecta el scroll (subiendo o bajando) */
.milestone.reveal.active .milestone-content {
  opacity: 1 !important;
  transform: translateX(0) translateY(0) !important;
}

@keyframes milestonePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(201, 195, 185, 0.4);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(201, 195, 185, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(201, 195, 185, 0);
  }
}

/* =======================================================
   ANIMACIÓN DE VIDEO UNIFICADA (FINANCE + INFRA + TECH)
   ======================================================= */

/* Aseguramos que los contenedores puedan tener elementos absolutos dentro */
.finance-card-full,
.infra-col {
  position: relative !important;
  overflow: hidden !important;
  background: #000; /* Fondo negro por si el video tarda en cargar */
}

/* El contenedor del video ocupa todo el espacio */
.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Detrás del texto */
  opacity: 0; /* Oculto por defecto (se muestra al hover) */
  transition: opacity 0.5s ease;
}

/* El video mismo */
.card-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cubre todo el área sin deformarse */
}

/* AL PASAR EL MOUSE: Mostrar el video */
.video-card:hover .video-container,
.tech-card:hover .video-container {
  opacity: 0.6; /* Video semi-transparente para que se lea el texto */
}

/* Ajuste específico para que Finance no pierda su layout flex */
.finance-card-full {
  display: flex; /* Mantiene el logo a la izquierda y texto derecha */
  align-items: center;
}

/* =======================================================
   VIDEO CYCLER MEJORADO (TRANSICIÓN SUAVE JS)
   ======================================================= */
/* VIDEO CYCLER */
.video-cycler {
  position: relative;
  overflow: hidden;
  background: #000;
  padding: 0 !important;
}

.life-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 1;
  /* La transición visual dura 1.5 segundos */
  transition: opacity 2s ease-in-out;
}

/* El video activo se ve y está encima */
.life-video.active {
  opacity: 1;
  z-index: 2;
}
.video-overlay {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  pointer-events: none;
}

/* =======================================================
   HERO TEXT: POSICIÓN ABAJO (500px) + ANIMACIÓN DINÁMICA
   ======================================================= */

.hero-content {
  /* 1. POSICIONAMIENTO Y CENTRADO (Tu código base) */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;

  /* 2. TU AJUSTE DE ALTURA (500px) */
  /* Nota: Si en móviles se sale de la pantalla, reduce este número en el @media de abajo */
  padding-top: 380px !important;
  padding-bottom: 60px !important;

  z-index: 5 !important;
  pointer-events: none;
}

.hero-content h2 {
  /* 1. ESTILOS DE TEXTO */
  font-size: clamp(1.2rem, 5vw, 2rem) !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  text-align: center !important;
  line-height: 1.2 !important;

  max-width: 90% !important;
  width: auto !important;
  white-space: normal !important;
}

/* =======================================================
   NUEVO HERO SERVICIOS: Y2K BLUEPRINT STYLE
   ======================================================= */

/* 1. LIMPIEZA Y FONDO BLUEPRINT */
.services-hero {
  position: relative !important;
  overflow: hidden !important;
  background-color: #152444 !important; /* Azul profundo */
  background-image: none !important; /* Eliminamos el patrón de rayas anterior */
  min-height: 550px !important; /* Ajuste de altura para dinamismo */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cuadrícula Blueprint Estática */
.services-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(0, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.08) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  background-position: center !important;
  animation: none !important; /* Paramos el flujo diagonal anterior */
  z-index: 1;
}

/* Piso 3D Y2K en movimiento */
.services-hero::after {
  content: "";
  position: absolute;
  bottom: -50%;
  left: -50%;
  width: 200%;
  height: 150%;
  background-image:
    linear-gradient(rgba(201, 195, 185, 0.2) 2px, transparent 2px),
    linear-gradient(90deg, rgba(201, 195, 185, 0.2) 2px, transparent 2px);
  background-size: 50px 50px;
  transform: perspective(500px) rotateX(60deg) translateY(0);
  animation: y2kGridMove 3s linear infinite;
  z-index: 2;
  mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0) 65%
  );
  -webkit-mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0) 65%
  );
}

/* 2. CONTENEDOR DE TEXTOS CON TRANSICIÓN Y2K */
.services-hero .hero-content {
  position: relative !important;
  z-index: 10 !important;
  padding-top: 0 !important;
}

/* Título Gigante: Entrada con ajuste de letras */
.services-hero .hero-content h2 {
  font-family: "Inter", sans-serif !important;
  font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
  font-weight: 900 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  margin-bottom: 20px !important;

  opacity: 0;
  animation: y2kTitleEntry 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s !important;
}

/* Subtítulo: Deslizamiento técnico */
.services-hero .hero-content h1 {
  font-family: "Inter", sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  color: var(--accent) !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;

  opacity: 0;
  animation: y2kSubEntry 1s cubic-bezier(0.2, 1, 0.3, 1) forwards 0.8s !important;
}

/* 3. KEYFRAMES UNIFICADOS (REUTILIZADOS) */
@keyframes y2kGridMove {
  0% {
    transform: perspective(500px) rotateX(60deg) translateY(0);
  }
  100% {
    transform: perspective(500px) rotateX(60deg) translateY(50px);
  }
}

@keyframes y2kTitleEntry {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    filter: blur(15px);
    letter-spacing: 10px;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    letter-spacing: -2px;
  }
}

@keyframes y2kSubEntry {
  0% {
    opacity: 0;
    transform: translateY(15px);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
/* =======================================================
   ANIMACIONES PREMIUM: HERO CONTACTO
   ======================================================= */

/* 1. ANIMAR EL FONDO (Grid en movimiento) */
.contact-hero {
  /* Animamos el fondo que ya tiene tu clase contact-hero */
  animation: contactGridPan 30s linear infinite !important;
}

/* Movemos la cuadrícula pero dejamos el resplandor quieto */
@keyframes contactGridPan {
  0% {
    background-position:
      0 0,
      0 0,
      50% 100%;
  }
  100% {
    background-position:
      100px 100px,
      100px 100px,
      50% 100%;
  }
}

/* 2. ASEGURAR POSICIÓN DEL CONTENEDOR */
.contact-hero .hero-content {
  position: relative !important;
  z-index: 5 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding-top: 0 !important;
  margin-top: -190px; /* Usa valores negativos si necesitas "empujarlo" más hacia el header */
}

/* 3. TÍTULO GIGANTE (H1) - "CONECTEMOS" */
.contact-hero .hero-content h1 {
  font-family: "Inter", sans-serif !important;
  font-size: clamp(3rem, 8vw, 4rem) !important;
  font-weight: 900 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  text-align: center !important;
  line-height: 1 !important;
  margin: 0 auto 15px auto !important;

  /* ANIMACIÓN Y2K STYLE: Entrada con desenfoque y ajuste de letras */
  opacity: 0;
  animation: y2kTitleEntry 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s !important;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
}

/* 4. SUBTÍTULO (H2) */
.contact-hero .hero-content h2 {
  font-family: "Inter", sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  color: var(--accent) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  letter-spacing: 2px !important;
  margin: 0 auto !important;
  max-width: 700px !important;

  /* ANIMACIÓN Y2K STYLE: Aparece después del título */
  opacity: 0;
  animation: y2kSubEntry 1s cubic-bezier(0.2, 1, 0.3, 1) forwards 0.8s !important;
}

/* KEYFRAMES Y2K PARA TÍTULOS */
@keyframes y2kTitleEntry {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    filter: blur(15px);
    letter-spacing: 10px; /* Letras muy separadas al inicio */
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    letter-spacing: -1px; /* Posición final firme */
  }
}

@keyframes y2kSubEntry {
  0% {
    opacity: 0;
    transform: translateY(15px);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
/* =======================================================
   PRELOADER PREMIUM (ANIMACIONES Y DISEÑO)
   ======================================================= */
.loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--blue-deep); /* Tu azul corporativo */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  /* La transición para cuando desaparezca */
  transition:
    opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1),
    visibility 0.5s;
}

/* Clase que se agrega con JS para ocultarlo */
.loader-container.loader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* El bloque central */
.loader-content {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}

/* Logo "OV" pulsando */
.loader-logo {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-size: 1.8rem;
  color: var(--accent); /* Tu color de acento (blanco/beige) */
  z-index: 10;
  animation: pulseLogo 2s infinite ease-in-out;
}

/* Contenedor de los anillos */
.loader-rings {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Estilo base de los anillos */
.ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid transparent;
}

/* Anillo 1: Rápido y externo */
.ring-1 {
  border-top-color: var(--accent);
  border-bottom-color: rgba(201, 195, 185, 0.2);
  animation: spinRing 1.5s linear infinite;
}

/* Anillo 2: Mediano y gira al revés */
.ring-2 {
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  border-left-color: var(--accent);
  animation: spinRingReverse 2s linear infinite;
}

/* Anillo 3: Pequeño y punteado */
.ring-3 {
  top: 20px;
  left: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  border: 1px dashed var(--accent);
  opacity: 0.5;
  animation: spinRing 4s linear infinite;
}

/* Texto de carga */
.loader-text {
  font-family: "Courier New", Courier, monospace;
  color: var(--accent);
  font-size: 0.8rem;
  letter-spacing: 3px;
  margin-bottom: 15px;
  opacity: 0.8;
  animation: blinkText 1.5s infinite;
}

/* Barra de progreso base */
.loader-progress {
  width: 200px;
  height: 2px;
  background: rgba(201, 195, 185, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

/* La barra que se llena */
.progress-bar {
  width: 0%;
  height: 100%;
  background: var(--accent);
  /* Simulamos una carga rápida */
  animation: fillProgress 1.5s ease-out forwards;
}

/* --- KEYFRAMES (ANIMACIONES) --- */
@keyframes spinRing {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spinRingReverse {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes pulseLogo {
  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}
@keyframes blinkText {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}
@keyframes fillProgress {
  0% {
    width: 0%;
  }
  80% {
    width: 90%;
  }
  100% {
    width: 100%;
  }
}

/* =======================================================
   ANIMACIÓN Y2K BLUEPRINT (CAD RENDER - ESTABILIZADO)
   ======================================================= */
/* AJUSTE DE ALTURA PARA EL HERO DEL INDEX */
.hero-section {
  /* Ocupará el 95% de la altura de la pantalla del usuario */
  min-height: 90vh !important;

  /* Asegura que el contenido esté bien distribuido */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  overflow: hidden !important;
}

/* 1. ESTADO DE SALIDA: Oculto y a la izquierda */
.hero-content h2.reveal {
  color: transparent !important;
  -webkit-text-stroke: 1px rgba(201, 195, 185, 0.6);
  opacity: 0;

  /* Posición inicial fuera de foco y a la izquierda */
  transform: translateX(-120px) rotateY(-25deg) scale(0.9);
  filter: blur(15px);

  /* Subir posición permanentemente */
  margin-top: -8px !important;

  /* Transición de 1.2s que solo se activará al añadir .active */
  transition:
    color 0.8s ease 0.4s,
    -webkit-text-stroke 0.8s ease 0.4s,
    transform 7s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.8s ease,
    filter 0.8s ease !important;

  will-change: transform, opacity, filter;
}

/* 2. ESTADO DE ENTRADA: Activado por JS */
.hero-content h2.reveal.active {
  color: #ffffff !important;
  -webkit-text-stroke: 0px transparent;
  opacity: 1;
  filter: blur(0);
  /* Posición final centrada y elevada */
  transform: translateX(0) rotateY(0) translateY(-50px) scale(1);
}

/* Esquinas del plano */
.hero-content h2.reveal::before,
.hero-content h2.reveal::after {
  content: "";
  position: absolute;
  width: 1.7em; /* Más largas para estilo Blueprint */
  height: 1.7em;
  border: 1px solid rgba(201, 195, 185, 0);
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}

.hero-content h2.reveal::before {
  top: -0.1em;
  left: -0.1rem;
  border-right: none;
  border-bottom: none;
}

.hero-content h2.reveal::after {
  bottom: -0.1em;
  right: -0.1em;
  border-left: none;
  border-top: none;
}

/* Las marcas se iluminan y encuadran el texto */
.hero-content h2.reveal.active::before,
.hero-content h2.reveal.active::after {
  border-color: rgba(201, 195, 185, 0.8);
  width: 0.8em;
  height: 0.8em;
}

/* =======================================================
   OCULTAR INTERFAZ NATIVA DE GOOGLE TRANSLATE
   ======================================================= */
iframe.skiptranslate,
.goog-te-banner-frame.skiptranslate {
  display: none !important;
  visibility: hidden !important;
}

body {
  top: 0px !important; /* Evita que la barra blanca empuje tu header hacia abajo */
}

#google_translate_element {
  display: none !important;
}

#goog-gt-tt,
.goog-te-balloon-frame {
  display: none !important; /* Oculta el cuadro amarillo al pasar el mouse */
}

.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

/* =======================================================
   BLINDAJE DEL HEADER Y BOTÓN DE IDIOMAS (NEO-BRUTALISMO)
   ======================================================= */

/* 1. EVITAR QUE LAS PALABRAS SE PARTAN O SE MUEVAN */
.header-right {
  display: flex !important;
  gap: 25px !important; /* Espaciado fijo y seguro */
  align-items: center !important;
  flex-wrap: nowrap !important; /* Prohíbe terminantemente que se parta en dos líneas */
}

.nav-main {
  display: flex !important;
  align-items: center !important;
  gap: 25px !important; /* Usamos gap en lugar de margin */
}

.nav-main a {
  margin-right: 0 !important; /* Limpiamos márgenes viejos */
  white-space: nowrap !important; /* MAGIA: Obliga a las palabras a mantenerse en 1 sola línea */
  font-size: clamp(
    0.85rem,
    1vw,
    1rem
  ) !important; /* Se achica un poquito si la pantalla es estrecha */
}

.btn-collab {
  white-space: nowrap !important; /* El botón tampoco se partirá jamás */
}

/* 2. DISEÑO PREMIUM PARA EL BOTÓN DE IDIOMAS */
.custom-lang-wrap {
  display: flex;
  align-items: center;
  gap: 30px;
  background-color: var(--blue-mid); /* Fondo azul corporativo */
  border: 2px solid #fff; /* Borde sólido */
  border-radius: 50px; /* Forma de píldora */
  padding: 6px 30px 6px 16px; /* Espacio extra a la derecha para la flecha */
  box-shadow: 3px 3px 0 rgba(201, 195, 185, 0.3); /* Sombra Neo-brutalista */
  transition: all 0.3s ease;
  position: relative;
  cursor: pointer;
}

/* Efecto al pasar el mouse (Se levanta como los otros botones) */
.custom-lang-wrap:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 rgba(201, 195, 185, 0.5);
  border-color: var(--accent);
}

.custom-lang-wrap i {
  color: var(--accent);
  font-size: 1rem;
  pointer-events: none; /* Para que no estorbe al hacer clic */
}

#lang-selector {
  background: transparent;
  color: #fff;
  border: none;
  outline: none;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;

  /* Destruimos la flecha fea por defecto de Windows/Mac */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Creamos nuestra propia flecha elegante */
.custom-lang-wrap::after {
  content: "▼";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.6rem;
  color: var(--accent);
  pointer-events: none;
}

/* El menú cuando se despliega */
#lang-selector option {
  background-color: var(--blue-deep);
  color: #fff;
  font-weight: 700;
  padding: 15px;
}

/* =======================================================
   FONDO Y2K + BLUEPRINT (CORREGIDO: SIN CUADRÍCULAS DUPLICADAS)
   ======================================================= */
/* 1. Preparamos el contenedor y MATAMOS el fondo viejo */
.contact-hero {
  position: relative !important;
  overflow: hidden !important;
  background-color: #152444 !important;
  background-image: none !important; /* 👈 ESTO ELIMINA EL CUADRICULADO DOBLE */
}

/* Protegemos tus textos */
.contact-hero .hero-content {
  position: relative !important;
  z-index: 10 !important;
}

/* 2. EL BLUEPRINT ESTÁTICO (Un solo papel milimetrado limpio) */
.contact-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(rgba(0, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 40px 40px; /* Un poco más grande para que respire mejor */
  z-index: 1;
  pointer-events: none;
}

/* 3. LA CUADRÍCULA Y2K (Piso 3D en movimiento) */
.contact-hero::after {
  content: "";
  position: absolute;
  bottom: -40%;
  left: -50%;
  width: 200%;
  height: 120%;
  background-image:
    linear-gradient(rgba(201, 195, 185, 0.25) 2px, transparent 2px),
    linear-gradient(90deg, rgba(201, 195, 185, 0.25) 2px, transparent 2px);
  background-size: 50px 50px;

  transform: perspective(400px) rotateX(60deg) translateY(0);
  animation: y2kGridMove 3s linear infinite;
  z-index: 2;
  pointer-events: none;

  -webkit-mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0) 65%
  );
  mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0) 65%
  );
}

/* 4. SCANLINES RETRO (Opcional, sobre los textos) */
.contact-hero .hero-content::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%);
  background-size: 100% 4px;
  z-index: -1;
  pointer-events: none;
}

/* EL MOTOR DEL CIBERESPACIO 3D */
@keyframes y2kGridMove {
  0% {
    transform: perspective(500px) rotateX(60deg) translateY(0);
  }
  100% {
    transform: perspective(500px) rotateX(60deg) translateY(50px);
  }
}

/* =======================================================
   ICONO DE CORREO 3D FLOTANTE (Y2K STYLE)
   ======================================================= */
/* El contenedor que centra todo en el espacio 3D */
.holo-mail-container {
  position: absolute;
  top: 60%; /* Un poco más abajo del centro */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10; /* Flota POR ENCIMA del piso 3D (z-index 2) pero DEBAJO del texto (z-index 10) */
  pointer-events: none; /* Que no moleste al mouse */
}

/* El icono en sí (transformado en objeto 3D) */
.holo-mail-container i {
  font-size: 16rem; /* Tamaño gigante */
  color: #fff; /* Blanco puro */

  /* MAGIA 3D: Lo inclinamos para que coincida con la perspectiva del piso */
  transform: perspective(600px) rotateX(35deg) rotateY(-15deg);

  /* Efecto de brillo "holográfico" blanco y sombra 3D realista */
  text-shadow:
    0 0 15px rgba(255, 255, 255, 0.8),
    /* Brillo exterior */ 2px 10px 10px rgba(0, 0, 0, 0.4); /* Sombra dura debajo del sobre para volumen */

  /* Animación de flotación suave */
  animation: mailFloatY2K 4s ease-in-out infinite alternate;
}

/* La sombra digital en el "piso" debajo del icono */
.holo-shadow {
  position: absolute;
  bottom: -40px; /* Debajo del icono */
  left: 50%;
  width: 120px;
  height: 30px;
  background: rgba(0, 0, 0, 0.3); /* Sombra oscura */
  border-radius: 50%; /* Forma ovalada */
  filter: blur(15px); /* Sombra difusa */
  /* Inclinamos la sombra para que se pegue al piso 3D */
  transform: translate(-50%, 0) perspective(600px) rotateX(60deg);
  /* La sombra se achica y agranda coordinada con el icono */
  animation: shadowScaleY2K 4s ease-in-out infinite alternate;
}

/* ICONO DE CORREO 3D: TRANSICIÓN DE ENTRADA */
.holo-mail-container {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  /* Aparece con un rebote elástico técnico */
  animation: holoAppearY2K 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 1.2s !important;
}

@keyframes holoAppearY2K {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0) rotateY(90deg);
    filter: brightness(5); /* Destello inicial */
  }
  50% {
    opacity: 0.5;
    filter: brightness(2);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotateY(0deg);
    filter: brightness(1);
  }
}

/* EFECTO INTERACTIVO SUTIL (GLITCH) AL PASAR EL MOUSE */
.holo-mail-container i:hover {
  transition: all 0.2s ease;
  text-shadow:
    2px 0 #00ffff,
    -2px 0 #ff00ff,
    0 0 20px rgba(255, 255, 255, 1); /* Brillo intenso */
  transform: perspective(600px) rotateX(35deg) rotateY(-15deg) scale(1.1);
}

/* --- ANIMACIONES REFORMADAS --- */

/* Pulso más sutil y mecánico */
@keyframes pulseStatic {
  0% {
    opacity: 0.2;
    transform: scaleX(0.9);
  }
  100% {
    opacity: 0.5;
    transform: scaleX(1);
  }
}

/* Rotación de engranajes (mantenemos la lógica pero más lenta) */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes spinReverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

/* Efecto Hover: El escudo reacciona físicamente */
.orivant-shield-icon:hover .shield-frame {
  transform: rotateY(0deg) rotateX(0deg) scale(1.05);
}

/* =======================================================
   BLUEPRINT EMPRESAS: ICONOGRAFÍA WIREFRAME RESALTANTE
   ======================================================= */
.portfolio-hero {
  position: relative !important;
  overflow: hidden !important;
  background-color: #152444 !important;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes blueprintDataFloat {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.2;
    filter: drop-shadow(0 0 10px rgba(0, 242, 255, 0.3));
  }
  100% {
    transform: translateY(-30px) scale(1.05);
    opacity: 0.4; /* Se vuelve más brillante al subir */
    filter: drop-shadow(0 0 25px rgba(0, 242, 255, 0.6));
  }
}

/* Ajuste del contenido para que el texto sea legible sobre los iconos */
.port-content {
  position: relative;
  z-index: 10;
}

.port-content h1 {
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
}

/* Cuadrícula de fondo un poco más visible */
.portfolio-hero .geo-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 255, 255, 0.08) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.08) 1.5px, transparent 1.5px) !important;
  background-size: 60px 60px;
  z-index: 1;
}

/* =======================================================
   CONTROL DE NOMBRES DE MARCA POR IDIOMA (ORBITAL)
   ======================================================= */
/* 1. Por defecto (en Español), ocultamos los nombres en Inglés */
.brand-en {
  display: none;
}

/* 2. Cuando Google Translate pasa la página a Inglés (o Chino) */
html[lang="en"] .brand-es,
html[lang="zh-CN"] .brand-es {
  display: none !important; /* Ocultamos el español */
}

html[lang="en"] .brand-en,
html[lang="zh-CN"] .brand-en {
  display: inline !important; /* Mostramos el inglés/marca */
}

/* =======================================================
   CORRECCIÓN: TEXTOS CENTRADOS Y BENTO GRID (NOSOTROS)
   ======================================================= */

/* 1. Centrar el texto en negrita y blanco (Lado Izquierdo) */
.manifesto-content {
  border-left: none !important; /* Quitamos la línea vertical para un centrado perfecto */
  padding-left: 0 !important;
  text-align: center;
  margin: 0 auto;
}

.sub-label {
  text-align: center !important;
  display: block;
}

.manifesto-content p {
  text-align: center !important;
}

.impact-phrases p {
  text-align: justify !important; /* Cambiamos el texto justificado a centrado */
}

/* 2. Evitar que se corten las palabras GLOBAL y TEAM (Lado Derecho) */
.data-value {
  word-break: normal !important; /* Prohíbe que las palabras se partan a la mitad */
  white-space: nowrap !important; /* Obliga a la palabra a mantenerse en una sola línea */
  font-size: clamp(
    1.8rem,
    3.5vw,
    2.8rem
  ) !important; /* Ajusta el tamaño de la letra inteligentemente al ancho de la caja */
}

.data-card {
  padding: 20px 15px !important; /* Reducimos el relleno interno para darle más espacio a las palabras grandes */
}

/* =======================================================
   INGENIERÍA CORPORATIVA: ENGRANAJES METALICOS FLOTANTES
   SIN FONDO, SIN CÍRCULOS GRISES + ANIMACIÓN DE ENSAMBLAJE
   ======================================================= */

.gears-assembly-visual {
  position: relative;
  width: 200px; /* Tamaño total de la "máquina" */
  height: 200px;
  margin: 0 auto 30px auto;
  /* IMPORTANTE: Transparencia total del contenedor */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible; /* Permitimos que salgan los engranajes en la intro */
}

/* Contenedor individual para posicionar y animar la intro */
.g-wrap {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0; /* Ocultos antes de la animación */
}

/* Estilo de los iconos FontAwesome (Realismo Metálico) */
.g-wrap i {
  font-size: 1rem; /* Base, lo ajustamos por engranaje */
  line-height: 1;
  /* Sombra proyectada para dar volumen y realismo metálico */
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.6));
}

/* TEXTURAS METÁLICAS AVANZADAS DIRECTAMENTE SOBRE EL ICONO */

/* Oro Orivant (Gradiente complejo) */
.gear-gold {
  /* Truco para aplicar gradiente al icono (texto) */
  background: linear-gradient(
    135deg,
    #c9c3b9 0%,
    #ffffff 40%,
    #a8a296 60%,
    #c9c3b9 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important; /* El color desaparece, queda el gradiente */
  filter: drop-shadow(
    0 0 15px rgba(201, 195, 185, 0.4)
  ); /* Brillo dorado sutil */
}

/* Acero (Gradiente plateado frío) */
.gear-steel {
  background: linear-gradient(
    135deg,
    #a0a0a0 0%,
    #ffffff 40%,
    #6d6d6d 60%,
    #a0a0a0 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

/* =======================================================
   TAMAÑOS, POSICIONES FINALES Y ANIMACIONES DIVIDIDAS
   (Contenedor = Ensamblaje | Icono = Rotación Infinita)
   ======================================================= */

/* 1. Engranaje Central */
.g-main {
  width: 100px;
  height: 100px;
  top: 50px;
  left: 50px;
  z-index: 5;
  animation: assemblyCenter 1.5s ease-out forwards; /* Vuela al centro */
}
.g-main i {
  font-size: 6.5rem;
  animation: spinRight 15s linear infinite; /* Gira infinitamente */
}

/* 2. Top Left (Arriba Izquierda) */
.g-sat-1 {
  width: 60px;
  height: 60px;
  top: 10px;
  left: 10px;
  animation: assemblyTopLeft 1.5s ease-out forwards;
}
.g-sat-1 i {
  font-size: 4rem;
  animation: spinLeft 10s linear infinite;
}

/* 3. Top Right (Arriba Derecha) */
.g-sat-2 {
  width: 65px;
  height: 65px;
  top: 5px;
  right: 10px;
  animation: assemblyTopRight 1.5s ease-out forwards;
}
.g-sat-2 i {
  font-size: 4.3rem;
  animation: spinLeft 11s linear infinite;
}

/* 4. Bottom Left (Abajo Izquierda) */
.g-sat-3 {
  width: 70px;
  height: 70px;
  bottom: 10px;
  left: 10px;
  animation: assemblyBottomLeft 1.5s ease-out forwards;
}
.g-sat-3 i {
  font-size: 4.6rem;
  animation: spinLeft 12s linear infinite;
}

/* 5. Bottom Right (Abajo Derecha) */
.g-sat-4 {
  width: 55px;
  height: 55px;
  bottom: 15px;
  right: 15px;
  animation: assemblyBottomRight 1.5s ease-out forwards;
}
.g-sat-4 i {
  font-size: 3.7rem;
  animation: spinLeft 9s linear infinite;
}

/* --- KEYFRAMES DE ENSAMBLAJE DlNÁMICO (Las cajas invisibles se mueven) --- */

@keyframes assemblyCenter {
  0% {
    opacity: 0;
    transform: translateY(-100px) scale(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes assemblyTopLeft {
  0% {
    opacity: 0;
    transform: translate(-80px, -80px) scale(0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes assemblyTopRight {
  0% {
    opacity: 0;
    transform: translate(100px, -50px) scale(0.2);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes assemblyBottomLeft {
  0% {
    opacity: 0;
    transform: translate(-100px, 80px) scale(0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes assemblyBottomRight {
  0% {
    opacity: 0;
    transform: translate(80px, 100px) scale(0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

/* --- KEYFRAMES DE ROTACIÓN CONSTANTE (Los iconos giran) --- */
@keyframes spinRight {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spinLeft {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

/* =======================================================
   SISTEMA DE MINI-ORBITALES (SUB-NODOS DE EMPRESAS)
   ======================================================= */
.mini-satellite {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: rotate(var(--sub-angle));
  z-index: -1;
}

.mini-connector {
  position: absolute;
  /* 1. SOLUCIÓN A LA RAYA: Nace en el borde del nodo grande, no en el centro */
  left: 40px; /* <-- Asumiendo que el radio de tu nodo principal es aprox 40px */
  top: 0;
  width: 40px; /* Longitud visible de la rayita exterior */
  height: 1px;
  background: rgba(201, 195, 185, 0.4);
  transform-origin: left center;
}

.mini-node {
  position: absolute;
  /* Debe ser la suma del left (40) + width (40) del conector */
  left: 80px;
  top: -18px;

  /* 2. SOLUCIÓN AL TEXTO LARGO: Cápsula dinámica (Pill shape) */
  min-width: 36px;
  height: 36px;
  padding: 0 14px; /* Le da el "respiro" necesario a los lados del texto */
  border-radius: 50px; /* Bordes totalmente redondeados */
  white-space: nowrap; /* Evita que el inglés o nombres compuestos se partan en 2 líneas */

  background: var(--blue-deep);
  border: 1px solid var(--accent);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--accent);
  font-size: 0.5rem; /* Un poquito más grande para mejor lectura */
  font-weight: 800;
  letter-spacing: 0.5px;

  /* Contrarresta la rotación */
  transform: rotate(calc(var(--sub-angle) * -1));
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  cursor: pointer;
}

.mini-node:hover {
  background: var(--accent);
  color: var(--blue-deep);
  /* Escala suave de 1.1 en vez de 1.2 porque la cápsula es más grande */
  transform: rotate(calc(var(--sub-angle) * -1)) scale(1.1);
  box-shadow: 0 0 20px rgba(201, 195, 185, 0.5);
}
.mini-modal-content {
  max-width: 400px;
  padding: 30px;
  background: rgba(10, 16, 29, 0.95);
  border: 1px solid rgba(201, 195, 185, 0.4);
  box-shadow:
    0 0 40px rgba(0, 0, 0, 0.8),
    inset 0 0 20px rgba(201, 195, 185, 0.05);
}
.mini-modal-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}
#mini-modal-icon {
  font-size: 2rem;
  color: var(--accent);
}
#mini-modal-title {
  font-size: 1.2rem;
  color: #fff;
  letter-spacing: 2px;
  margin: 0;
}
#mini-modal-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 25px;
}
.mini-modal-actions {
  display: flex;
  justify-content: flex-end;
}

/* =======================================================
   NOTIFICACIONES (MENSAJE ENVIADO)
   ======================================================= */
.toast-notification {
  position: fixed;
  bottom: 40px;
  right: 40px;
  background: rgba(46, 204, 113, 0.95); /* Verde éxito estilo Tech */
  color: #fff;
  padding: 18px 25px;
  border: 2px solid #fff;
  border-radius: 50px;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.5),
    inset 0 0 10px rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;

  /* Animación de entrada */
  transform: translateX(150%);
  animation: slideInToast 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.toast-notification i {
  font-size: 1.5rem;
  color: #fff;
}

.toast-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  margin-left: 10px;
  opacity: 0.7;
  transition: 0.3s;
}

.toast-close:hover {
  opacity: 1;
  transform: scale(1.2);
}

.toast-notification.fade-out {
  animation: fadeOutToast 0.5s ease forwards;
}

@keyframes slideInToast {
  to {
    transform: translateX(0);
  }
}

@keyframes fadeOutToast {
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* En celulares, la notificación aparece arriba o centrada abajo */
@media (max-width: 768px) {
  .toast-notification {
    bottom: 20px;
    right: 50%;
    transform: translateX(50%) translateY(150%);
    width: 90%;
    justify-content: space-between;
    font-size: 0.9rem;
    padding: 15px 20px;
  }
  @keyframes slideInToast {
    to {
      transform: translateX(50%) translateY(0);
    } /* Ajuste de centrado en móvil */
  }
}

/* =========================================
   NÚCLEO ORBITAL (LINK NOSOTROS)
   ========================================= */

.orivant-core-link {
  text-decoration: none; /* Elimina el subrayado azul automático */
  color: inherit; /* Hereda el color exacto que ya le habías puesto al h1 */
  display: inline-block;
  cursor: pointer; /* Cambia la flecha por la manito al pasar el mouse */
  transition: all 0.4s ease;
}

/* Efecto Hover: Cuando pasan el mouse por encima de ORIVANT */
.orivant-core-link:hover {
  transform: scale(1.08); /* Hace un ligero zoom in */
}

/* Le damos un brillo extra (Glow) a la letra al pasar el mouse */
.orivant-core-link:hover h1 {
  text-shadow:
    0 0 20px rgba(0, 229, 255, 0.8),
    0 0 40px rgba(0, 229, 255, 0.4),
    0 0 60px rgba(201, 195, 185, 0.2);
}
/* =======================================================
   📱 ADAPTACIÓN MÓVIL: HEADER Y NAVEGACIÓN
   ======================================================= */
@media (max-width: 768px) {
  /* 1. Ajustar el contenedor principal */
  header {
    padding: 0 20px !important;
    height: 80px !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important; /* Prohíbe que los elementos salten de línea */
  }

  /* 2. Ajustar el tamaño del Logo */
  .brand-logo {
    font-size: 1.2rem !important;
    margin-right: auto !important; /* Empuja el resto a la derecha */
  }

  /* 3. Ocultar elementos que ocupan mucho espacio */
  .sep,
  .btn-collab {
    display: none !important;
  }

  /* 4. Compactar el selector de idioma */
  .header-right {
    gap: 15px !important; /* Espacio entre idioma y menú */
  }
  .custom-lang-wrap {
    padding: 5px 15px 5px 10px !important;
    gap: 5px !important;
  }
  .custom-lang-wrap i {
    font-size: 0.9rem !important;
  }
  #lang-selector {
    font-size: 0.8rem !important;
    width: 65px !important; /* Evita que crezca demasiado */
  }

  /* 5. Mostrar y alinear el botón de Hamburguesa */
  .menu-toggle {
    display: flex !important;
    align-items: center !important;
    z-index: 1001 !important; /* Por encima de todo */
  }

  /* 6. Diseño del Menú Desplegable (Oculto por defecto) */
  .nav-main {
    position: fixed !important;
    top: 80px !important; /* Se pega justo debajo de la barra */
    left: 0 !important;
    width: 100% !important;
    height: calc(100vh - 80px) !important;
    background-color: #152444 !important; /* Tu azul corporativo */
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 40px !important;

    /* Efecto de aparición */
    transform: translateX(100%); /* Lo escondemos a la derecha */
    transition: transform 0.3s ease-in-out !important;
    display: flex !important;
  }

  /* Clase que el JavaScript añade al tocar las 3 rayitas */
  .nav-main.active {
    transform: translateX(0); /* Lo trae de vuelta a la pantalla */
  }

  /* Enlaces dentro del menú móvil */
  .nav-main a {
    font-size: 1.5rem !important;
    margin: 0 !important;
  }
}

/* =======================================================
   BOTÓN COLABORADORES MÓVIL
   ======================================================= */
/* 1. Ocultamos este enlace en la computadora (PC) */
.mobile-collab {
  display: none;
}

/* 2. Lo mostramos y le damos estilo SOLO en celulares */
@media (max-width: 768px) {
  .mobile-collab {
    display: block !important;
    margin-top: 20px !important; /* Lo separa del resto de enlaces */
    padding-top: 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Una línea sutil de separación */
    color: #c9c3b9 !important; /* Tu color de acento (Beige) */
    font-size: 1.2rem !important; /* Un poco más pequeño que los links principales */
    text-align: center !important;
    width: 80% !important; /* No ocupa todo el ancho, se ve más como un botón */
  }
}

/* =======================================================
   📱 ADAPTACIÓN MÓVIL: SISTEMA ORBITAL
   ======================================================= */
@media (max-width: 768px) {
  /* 1. Reducimos el contenedor principal para que no empuje la pantalla */
  .system-wrapper {
    width: 320px !important;
    height: 320px !important;
  }

  /* 2. Achicamos ligeramente el nodo central (ORIVANT) */
  .core-node-3d {
    width: 110px !important;
    height: 110px !important;
  }

  .core-text .brand {
    font-size: 1rem !important; /* Texto central un poco más pequeño */
  }

  /* 3. ACORTAMOS LAS LÍNEAS (De 250px a 120px) */
  .connector {
    width: 120px !important;
  }

  /* 4. ACERCAMOS LOS SATÉLITES Y LOS AJUSTAMOS */
  .node {
    left: 120px !important; /* Este valor DEBE ser igual al width del conector */
    width: 65px !important; /* Un poco más pequeños (antes 80px) */
    height: 65px !important;
    font-size: 0.55rem !important; /* Texto interno ajustado */
  }
}
/* =======================================================
     ARREGLO DEL BOTÓN "X" EN EL MODAL ORBITAL
     ======================================================= */
.modal-close {
  top: -40px !important; /* Lo bajamos para que quede dentro del cuadro */
  right: -150px !important; /* Lo pegamos al borde derecho interno */
  font-size: 3.5rem !important; /* Hacemos la X un poco más grande y fácil de tocar */
  color: var(
    --accent
  ) !important; /* Le damos tu color beige para que resalte */
  z-index: 100 !important;
}

/* Le damos un poco más de espacio arriba al contenido para que el texto no choque con la X */
.modal-content {
  padding-top: 60px !important;
  width: 90% !important; /* Asegura que la tarjeta no choque con los bordes del celular */
}
/* =======================================================
   📱 ADAPTACIÓN MÓVIL: PÁGINA NOSOTROS
   ======================================================= */
@media (max-width: 768px) {
  /* 1. HERO "NOSOTROS" (Texto + Datos) */
  .nosotros-split {
    flex-direction: column !important; /* Pasa de estar lado a lado, a estar arriba y abajo */
  }

  .col-manifesto {
    padding: 60px 20px 40px !important;
    border-right: none !important; /* Quitamos la línea separadora vertical */
    border-bottom: 3px solid #fff !important; /* La ponemos horizontal */
  }

  .manifesto-content h1 {
    font-size: 2.2rem !important; /* Achicamos el texto gigante */
  }

  .col-data {
    padding: 40px 20px !important;
  }

  /* 2. TARJETAS DE DATOS (Bento Grid) */
  .bento-grid {
    grid-template-columns: 1fr 1fr !important; /* Mantenemos 2 columnas pero más pequeñas */
    gap: 15px !important;
  }

  .data-card {
    padding: 20px 10px !important;
    min-height: 120px !important;
  }

  .data-value {
    font-size: 1.8rem !important; /* Números más chicos para que no se salgan */
  }

  /* 3. LÍNEA DE TIEMPO (De Zig-Zag a Línea Recta) */
  .timeline-container {
    padding: 20px 15px !important;
  }

  /* Movemos la línea dorada a la izquierda */
  .timeline-line {
    left: 20px !important;
    transform: none !important;
  }

  /* Alineamos todos los hitos (cajas) hacia la derecha de la línea */
  .milestone {
    justify-content: flex-start !important;
    padding-left: 40px !important; /* Espacio para que no pise la línea */
    margin-bottom: 40px !important;
  }

  /* Anulamos los empujones izquierda/derecha de la PC */
  .milestone.left .milestone-content,
  .milestone.right .milestone-content,
  .milestone.center .milestone-content {
    width: 100% !important;
    margin: 0 !important;
    transform: translateY(
      30px
    ) !important; /* Todos entran desde abajo suavemente */
  }

  .milestone.reveal.active .milestone-content {
    transform: translateY(0) !important;
  }

  /* 4. PILARES (Apilados en 1 sola columna) */
  .pillars-section {
    padding: 80px 20px !important;
  }

  .pillars-grid {
    grid-template-columns: 1fr !important; /* 1 debajo del otro */
    gap: 30px !important;
  }

  .pillar-card {
    height: auto !important; /* Altura automática basada en el contenido */
    padding: 30px 20px !important;
    border-radius: 40px 40px 0 0 !important; /* Suavizamos los bordes cortados */
  }

  /* 5. SECCIÓN DE LLAMADA A LA ACCIÓN (CTA final) */
  .business-cta {
    padding: 80px 20px !important;
  }

  .cta-content h2 {
    font-size: 2rem !important;
    margin-bottom: 30px !important;
  }

  /* Botones apilados al 100% del ancho */
  .cta-buttons {
    flex-direction: column !important;
    gap: 15px !important;
  }

  .cta-buttons a {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* =======================================================
     🛠️ CORRECCIÓN: FLECHA DEL SELECTOR DE IDIOMA
     ======================================================= */
.custom-lang-wrap {
  /* Aumentamos el espacio a la derecha (de 15px a 25px) para la flecha */
  padding: 5px 25px 5px 10px !important;
}

.custom-lang-wrap::after {
  /* Pegamos la flechita más hacia el borde derecho */
  right: 8px !important;
}

#lang-selector {
  /* Le damos un par de píxeles extra para que la 'L' de ESPAÑOL respire */
  width: 70px !important;
}

/* =======================================================
     🛠️ CORRECCIÓN: BOTONES CTA CENTRADOS
     ======================================================= */
.cta-buttons {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* Obliga a los elementos a ir al centro */
  gap: 15px !important;
}

.cta-buttons a {
  width: 100% !important;
  max-width: 320px !important; /* Un límite para que no se vean estirados feos */
  margin: 0 auto !important; /* El margen automático garantiza el centro perfecto */
}

/* =======================================================
   📱 ADAPTACIÓN MÓVIL: PÁGINA EMPRESAS
   ======================================================= */
@media (max-width: 768px) {
  /* 1. HERO DE PORTAFOLIO */
  .portfolio-hero {
    min-height: auto !important;
    padding: 100px 20px 60px !important;
  }

  .port-content h1 {
    font-size: 2.2rem !important; /* Escalado para pantallas pequeñas */
  }

  /* Cuadrícula 2x2 para los enlaces rápidos */
  .quick-links {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* 2 botones por fila */
    gap: 10px !important;
  }

  .quick-links a {
    padding: 12px 5px !important;
    font-size: 0.75rem !important;
    text-align: center !important;
    margin: 0 !important;
  }

  /* 2. SECCIÓN FINANCE (Tarjeta Completa) */
  .finance-card-full {
    flex-direction: column !important; /* Imagen/Video arriba, texto abajo */
    padding: 30px 20px !important;
    gap: 20px !important;
    border-radius: 30px 0 30px 0 !important; /* Suavizamos las esquinas cortadas */
  }

  .fin-content-wrapper {
    flex-direction: column !important;
    gap: 20px !important;
    text-align: center !important; /* Centramos todo el texto */
  }

  .fin-logo {
    border-right: none !important; /* Quitamos la línea vertical */
    border-bottom: 2px solid currentColor !important; /* La pasamos abajo */
    padding-right: 0 !important;
    padding-bottom: 15px !important;
    font-size: 2.5rem !important;
  }

  /* 3. INFRAESTRUCTURA (Split) */
  .infra-split {
    flex-direction: column !important; /* Apilamos las áreas */
  }

  .infra-col {
    width: 100% !important;
    min-height: 350px !important;
    padding: 40px 20px !important;
  }

  /* 4. TECH GRID (Innovación) */
  .tech-section {
    padding: 80px 20px !important; /* Reducimos el espacio excesivo */
  }

  .tech-grid {
    grid-template-columns: 1fr !important; /* Una tarjeta por fila */
    gap: 25px !important;
  }

  .tech-card {
    padding: 40px 20px !important;
  }

  /* 5. LIFESTYLE (Anular el Zig-Zag) */
  .lifestyle-section {
    padding: 80px 20px !important;
  }

  .zigzag-row,
  .zigzag-row.reverse {
    flex-direction: column !important; /* Forzamos a que siempre apile verticalmente */
    gap: 30px !important;
    margin-bottom: 60px !important;
  }

  .zz-img {
    width: 100% !important;
    height: 250px !important; /* Altura ideal para videos en móvil */
    border-radius: 30px 30px 0 0 !important; /* Esquinas redondas solo arriba */
  }

  .zz-text {
    text-align: center !important;
    padding: 0 10px !important;
  }

  .zz-text h3 {
    font-size: 2rem !important;
  }

  /* Centrar los botones de la sección Lifestyle */
  .zz-text .btn-white {
    display: inline-flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }
}
/* =======================================================
   📱 ADAPTACIÓN MÓVIL: PÁGINA SERVICIOS
   ======================================================= */
@media (max-width: 768px) {
  /* 1. HERO DE SERVICIOS */
  .services-hero {
    min-height: auto !important;
    padding: 120px 20px 80px !important;
    text-align: center !important;
  }

  .services-hero .hero-content h2 {
    font-size: 2.2rem !important; /* Ajuste para el título gigante */
  }

  /* 2. CATÁLOGO DE SERVICIOS (Anular Zig-Zag) */
  .catalog-section {
    padding: 80px 20px !important;
  }

  .service-row,
  .service-row.reverse {
    flex-direction: column !important; /* Primero la caja visual, luego texto */
    gap: 30px !important;
    margin-bottom: 60px !important;
    padding-bottom: 40px !important;
  }

  .srv-visual {
    width: 100% !important;
    height: 250px !important;
  }

  .srv-number {
    font-size: 6rem !important; /* Achicamos el número gigante transparente */
  }

  .srv-text {
    text-align: center !important;
    width: 100% !important;
  }

  .srv-list {
    display: inline-block; /* Mantiene la lista centrada en la pantalla pero alineada a la izquierda */
    text-align: left;
    margin-top: 20px !important;
  }

  /* 3. METODOLOGÍA (1 sola columna) */
  .process-section {
    padding: 80px 20px !important;
  }

  .process-grid {
    grid-template-columns: 1fr !important; /* Pasos apilados */
    gap: 20px !important;
  }

  .step-card {
    padding: 30px 20px !important;
  }

  /* 4. BANNER DE ESTADÍSTICAS */
  .stats-banner {
    flex-direction: column !important; /* Apilados hacia abajo */
    gap: 40px !important;
    padding: 60px 20px !important;
  }

  .stat-item::after {
    display: none !important; /* Ocultamos las líneas separadoras en móvil */
  }

  /* 5. PREGUNTAS FRECUENTES (FAQ) */
  .faq-section {
    padding: 80px 20px !important;
  }

  .faq-item summary {
    font-size: 1rem !important;
    padding: 20px !important;
  }
}

/* =======================================================
   📱 ADAPTACIÓN MÓVIL: PÁGINA CONTACTO
   ======================================================= */
@media (max-width: 768px) {
  /* 1. HERO DE CONTACTO Y SOBRE 3D */
  .contact-hero {
    min-height: 80vh !important;
    padding-top: 120px !important;
  }

  .contact-hero .hero-content h1 {
    font-size: 2.8rem !important; /* Ajustamos el título principal */
  }

  .contact-hero .hero-content h2 {
    font-size: 1rem !important;
    padding: 0 20px !important;
  }

  .holo-mail-container {
    transform: translate(-50%, -40%) scale(0.6) !important; /* Achicamos el sobre para que no estorbe */
  }

  /* 2. CONTENEDOR DE INFO Y FORMULARIO */
  .contact-split {
    padding: 60px 20px !important;
  }

  .contact-container {
    flex-direction: column !important; /* Apila Info arriba, Formulario abajo */
    gap: 50px !important;
  }

  /* 3. EL FORMULARIO */
  .smart-form {
    padding: 40px 25px !important; /* Reducimos el relleno excesivo de los lados */
    border-radius: 40px 0px 40px 0px !important; /* Suavizamos las esquinas */
  }

  .form-row {
    flex-direction: column !important; /* Apilamos Nombre y Organización */
    gap: 0 !important;
  }

  /* 4. DUDAS RÁPIDAS (MINI-FAQ) */
  .mini-faq {
    padding: 80px 20px !important;
  }

  .faq-grid-3 {
    grid-template-columns: 1fr !important; /* De 3 tarjetas horizontales a 1 columna vertical */
    gap: 25px !important;
    margin-top: 40px !important;
  }

  .faq-card {
    padding: 30px 25px !important;
  }
}

/* =======================================================
   📱 ADAPTACIÓN MÓVIL: FOOTER (SOLO PARA CELULARES)
   ======================================================= */
@media (max-width: 768px) {
  footer {
    padding: 60px 20px 30px !important;
  }

  /* Cambiamos de 4 columnas a 1 sola columna centrada SOLO en móvil */
  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    text-align: center !important;
  }

  /* Aseguramos que los enlaces y textos se alineen al centro */
  .f-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Ajustamos el texto de copyright para que no se desborde */
  .footer-bottom {
    margin-top: 40px !important;
  }

  .copyright {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    padding: 0 10px !important;
    word-wrap: break-word !important;
  }
}

/* PARTE MOVIL DE PANEL ADMIND*/
/* ============================================================
         📱 ADAPTACIÓN MÓVIL: PÁGINA DE LOGIN
         ============================================================ */
@media (max-width: 768px) {
  body {
    height: auto;
    min-height: 100vh;
    overflow-y: auto; /* Permite hacer scroll cuando se abre el teclado */
    padding: 20px; /* Evita que la caja choque con los bordes del celular */
  }

  .login-box {
    padding: 40px 25px; /* Reducimos el relleno interno para darle espacio a los textos */
    width: 100%;
    margin: 40px auto; /* Centrado seguro */
  }

  .auth-logo {
    font-size: 2.5rem; /* Icono un poco más sutil */
  }

  .auth-header h1 {
    font-size: 1.3rem;
  }

  .input-wrapper input {
    padding: 15px 15px 15px 40px; /* Ajustamos la altura de los campos */
    font-size: 0.95rem; /* Letra un poco más legible en pantallas pequeñas */
  }

  .btn-login {
    padding: 15px; /* Botón ligeramente más compacto */
    font-size: 0.9rem;
  }
}
/* ============================================================
         📱 ADAPTACIÓN MÓVIL: PÁGINA DE REGISTRO
         ============================================================ */
@media (max-width: 768px) {
  body {
    align-items: flex-start; /* Evita que el contenido quede atrapado arriba al abrir el teclado */
    padding: 20px;
    overflow-y: auto;
  }

  .register-card {
    padding: 35px 20px; /* Reducimos el relleno para darle espacio a los textos */
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
  }

  .logo-box {
    margin-bottom: 30px;
  }

  .logo-box h1 {
    font-size: 1.8rem; /* Título ligeramente más pequeño */
  }

  .input-pro {
    padding: 14px 14px 14px 45px; /* Ajustamos la altura de los campos */
    font-size: 0.95rem;
  }

  .input-group i {
    top: 16px; /* Centramos los íconos de nuevo tras cambiar el padding */
  }

  .btn-submit {
    padding: 15px; /* Botón ligeramente más compacto */
    font-size: 0.9rem;
  }
}

/* ============================================================
     📱 ADAPTACIÓN MÓVIL: DASHBOARD OPERATIVO
     ============================================================ */
@media (max-width: 768px) {
  /* 1. Ajustes del Banner de Bienvenida */
  .welcome-container {
    padding: 25px;
    margin-bottom: 30px;
  }

  .welcome-text h1 {
    font-size: 2rem; /* Achicamos el título gigante */
  }

  /* Apilamos las etiquetas verdes y grises de estado */
  .welcome-container > div:last-child {
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* 2. Tarjetas de Métricas */
  .metrics-grid {
    grid-template-columns: 1fr; /* Una tarjeta por fila */
    gap: 15px;
    margin-bottom: 30px;
  }

  .metric-value {
    font-size: 2.8rem; /* Números un poco más compactos */
  }

  /* 3. Panel de Gráficas (El cambio más importante) */
  .data-section {
    display: grid;
    grid-template-columns: 1fr; /* Forzamos a que las gráficas se apilen una debajo de otra */
    gap: 25px;
  }

  .chart-panel {
    padding: 20px; /* Reducimos el relleno excesivo a los lados */
  }

  .canvas-holder {
    height: 300px; /* Altura ideal para que las donas y líneas se vean bien en móvil */
  }
}

/* =======================================================
         📱 ADAPTACIÓN MÓVIL: PÁGINA EN CONSTRUCCIÓN
         ======================================================= */
@media (max-width: 768px) {
  .construction-title {
    font-size: 2.2rem !important; /* Reducimos el texto para que la palabra "TRABAJANDO" no se corte */
    margin-bottom: 10px !important;
  }

  .construction-subtitle {
    font-size: 0.95rem !important; /* Subtítulo más equilibrado */
    letter-spacing: 2px !important;
    margin-bottom: 40px !important;
    padding: 0 10px !important;
  }

  .construction-icon {
    font-size: 3.5rem !important; /* Ícono proporcional al nuevo tamaño de texto */
    margin-bottom: 15px !important;
  }
}