/* ==========================================================================
   1. VARIABLES GLOBALES Y CONFIGURACIÓN BASE (RESET)
   ========================================================================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --aqua:     #2DD4BF;
  --aqua-dk:  #1aaa98;
  --aqua-lt:  #e8faf8;
  --aqua-05:  rgba(45,212,191,0.05);
  --aqua-08:  rgba(45,212,191,0.08);
  --aqua-10:  rgba(45,212,191,0.10);
  --aqua-15:  rgba(45,212,191,0.15);
  --aqua-20:  rgba(45,212,191,0.22);
  --navy:     #0D1520;
  --navy2:    #111E2E;
  --text:     #E8F0F7;
  --text-dk:  #0D1520;
  --muted:    #5A7A90;
  --border:   rgba(255,255,255,0.07);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--navy);
  color: var(--text);
  font-family: 'Lato', sans-serif;
  line-height: 1.7;
  overflow-x: hidden;
}

/* Canvas interactivo global de fondo */
#nodes-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ==========================================================================
   BARRA SUPERIOR (TOPBAR) - EFECTO GLASSMORPHISM PREMIUM
   ========================================================================== */

/* 1. Estado Inicial (Arriba de todo, 100% transparente) */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 36px;
  background: transparent; 
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0 5%;
  transition: all 0.4s ease; 
}

.topbar-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topbar-text {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.85) !important; /* Siempre clarito */
  transition: opacity 0.3s ease;
}

.topbar-link {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--aqua) !important; /* Siempre Aqua para no perder tu identidad */
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.topbar-link:hover {
  opacity: 0.7;
}

/* 2. Estado Scrolled (El truco del Vidrio Esmerilado) */
.topbar.scrolled {
  /* Fondo oscuro semitransparente (deja ver los colores del fondo) */
  background: rgba(13, 21, 32, 0.75); 
  
  /* El desenfoque crea el efecto cristal premium */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  /* Una línea inferior súper fina color Aqua para separar sutilmente */
  border-bottom: 1px solid rgba(45, 212, 191, 0.15); 
}

/* ==========================================================================
   TOPBAR - AJUSTE RESPONSIVO PARA MÓVILES
   ========================================================================== */
@media (max-width: 768px) {
  /* Ocultamos el enlace de Instagram */
  .topbar-link {
    display: none !important;
  }
  
  /* Centramos la descripción principal */
  .topbar-container {
    justify-content: center !important;
  }
  
  /* Achicamos un poquito la letra para que entre perfecto en una sola línea */
  .topbar-text {
    font-size: 0.55rem;
    text-align: center;
    letter-spacing: 0.08em;
  }
}

nav {
  position: fixed; 
  top: 36px; 
  left: 0; right: 0; 
  z-index: 50;
  height: 85px; /* Aumentado ligeramente para dar aire al logo más grande */
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  padding: 0 5%; 
  background: rgba(13, 21, 32, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.logo-wrap {
  display: flex; 
  align-items: center;
  height: 100%; 
}

/* MODIFICADO: Logo de cabecera con mayor presencia y tamaño */
.logo-full {
  height: 68px; /* Incrementado para que no se vea pequeño */
  width: auto;  
  display: block;
  object-fit: contain; 
  transition: transform 0.2s ease;
}
.logo-full:hover { transform: scale(1.03); }

.nav-links {
  display: flex; 
  gap: 2.5rem; 
  list-style: none;
  align-items: center;
}
.nav-links a {
  color: var(--muted); 
  text-decoration: none;
  font-size: 0.9rem; 
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--text); }

.btn-nav {
  background: transparent;
  color: var(--aqua);
  border: 1px solid var(--aqua);
  border-radius: 4px;
  padding: 0.55rem 1.4rem;
  font-size: 0.85rem; 
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer; 
  transition: all 0.25s ease;
  text-decoration: none;
}
.btn-nav:hover {
  background: var(--aqua);
  color: #000000;
}

.nav-toggle, .nav-cta-mobile { display: none; }

/* ==========================================================================
   3. SECCIÓN HERO (PORTADA PRINCIPAL CON BOTONES ORIGINALES)
   ========================================================================== */
.hero {
  position: relative; 
  z-index: 2; 
  min-height: 100vh;
  display: flex; 
  align-items: center;      
  justify-content: center;   
  padding: 140px 5% 2rem 5%; 
  text-align: center;        
}

.hero-inner {
  max-width: 900px; 
  display: flex;
  flex-direction: column;
  align-items: center;       
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--aqua-10);
  border: 1px solid var(--aqua-20);
  padding: 0.4rem 1rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--aqua);
  margin-bottom: 2rem;
}

.badge-dot {
  width: 6px; height: 6px;
  background: var(--aqua);
  border-radius: 50%;
}

.hero-title-premium {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2.2rem, 4.8vw, 3.8rem);
  font-weight: 700;             
  text-transform: uppercase;    
  line-height: 1.15;
  letter-spacing: 0.04em;       
  color: var(--text);
  margin-bottom: 1.8rem;
}
.hero-title-premium .highlight { color: var(--aqua); }

.hero-sub {
  font-size: clamp(1.1rem, 2.5vw, 1.25rem); /* Un poco más grande */
  color: #e8faf8; /* Mucho más claro y legible */
  font-weight: 300; /* Letra con más cuerpo */
  max-width: 720px;
  line-height: 1.8;
  margin-bottom: 3rem;
  /* Sombra oscura para que resalte sin importar qué pase en el fondo */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); 
}

.hero-sub strong { 
  color: #FFFFFF; 
  font-weight: 800; 
  letter-spacing: 0.05em;
}

.hero-actions {
  position: relative;
  z-index: 10;
  display: flex; 
  gap: 1.2rem; 
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 2rem;
  pointer-events: auto; 
}

.btn-primary {
  background: var(--aqua);
  color: #000000; 
  border: none; 
  border-radius: 5px;
  padding: 1rem 2.2rem;
  font-size: 0.95rem; 
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer; 
  transition: all 0.25s ease;
  text-decoration: none; 
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-primary:hover {
  background: var(--aqua-dk);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(45, 212, 191, 0.35);
}

.btn-outline {
  background: transparent;
  color: var(--text); 
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 5px;
  padding: 1rem 2.2rem;
  font-size: 0.95rem; 
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer; 
  transition: all 0.25s ease;
  text-decoration: none; 
  display: inline-block;
}
.btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-2px);
}

/* ==========================================================================
   RESPONSIVE PARA MÓVILES (Optimización de botones para Chrome Accessibility)
   ========================================================================== */
@media (max-width: 600px) {
  .hero-actions {
    flex-direction: column; /* Apila los botones uno arriba del otro */
    width: 100%; 
    padding: 0 1rem; /* Le da un poquito de aire a los costados */
  }
  
  .btn-primary, .btn-outline {
    width: 100%; /* Estira los botones de borde a borde */
    justify-content: center; /* Centra el texto y la flechita */
  }
}


/* ==========================================================================
   INDICADOR DE SCROLL FIJO (VERTICAL) Y DINÁMICO
   ========================================================================== */
.scroll-hint {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  z-index: 100;
}

.scroll-line-container {
  width: 2px;
  height: 60px;
  background: rgba(122, 155, 181, 0.2);
  position: relative;
  border-radius: 2px;
  overflow: hidden;
}

.scroll-line {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 0%;
  background: var(--aqua);
  transition: background-color 0.4s ease, height 0.1s ease-out;
}

@media (max-width: 768px) {
  .scroll-hint { right: 1rem; bottom: 1.5rem; }
}
/* ==========================================================================
   4. SECCIÓN SERVICIOS & SOLUCIONES (TEMA CLARO - FONDO BLANCO)
   ========================================================================== */
.audiovisual-section {
  padding: 4rem 5% 7rem 5%; 
  background-color: #FFFFFF; 
  border-top: 1px solid #DDE8EF;
  position: relative;
  z-index: 1;
}

.audiovisual-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}

/* Encabezados y Textos Generales */
.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  color: #0D5C53; 
  background: rgba(45, 212, 191, 0.15); 
  padding: 0.5rem 1.2rem;
  border-radius: 50px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.audiovisual-section .section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: #0D1520; /* Texto muy oscuro para contrastar con el fondo blanco */
  line-height: 1.15;
  margin-bottom: 1rem;
}

.audiovisual-section .section-title .aq { 
  color: #2DD4BF; 
}

.audiovisual-section .section-sub {
  color: #334155; 
  font-size: 1.05rem;
  font-weight: 400;
  max-width: 700px;
  line-height: 1.7;
  margin-bottom: 4.5rem;
}

/* ==========================================================================
   MASTER CARD: DESARROLLO WEB (TEMA CLARO)
   ========================================================================== */
.web-master-card {
  background: #F4F8FB; /* Fondo gris/azulado súper claro */
  border: 1px solid rgba(45, 212, 191, 0.15); 
  border-radius: 16px;
  padding: 3rem;
  margin-bottom: 2rem;
  box-shadow: 0 10px 30px rgba(13, 21, 32, 0.03);
  text-align: left;
}

.wmc-header {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(13, 21, 32, 0.08); /* Línea divisoria sutil y oscura */
}

.wmc-title-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.wmc-icon {
  font-size: 2rem;
  background: rgba(45, 212, 191, 0.1);
  padding: 10px;
  border-radius: 12px;
}

.wmc-title {
  color: #0D1520; /* Título oscuro */
  font-size: 1.8rem;
  font-weight: 800;
  margin: 0;
}

.wmc-desc {
  color: #334155;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 800px;
  margin: 0;
}

.wmc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 2.5rem;
}

.wmc-item {
  position: relative;
  padding-left: 1.5rem;
  border-left: 3px solid var(--aqua);
}

.wmc-item-title {
  color: #0D1520;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.wmc-item-desc {
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

.wmc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 1.2rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #0D5C53; /* Aqua oscurecido para que se lea perfecto en fondo claro */
  text-decoration: none;
  transition: all 0.3s ease;
}

.wmc-btn:hover {
  opacity: 0.8;
  gap: 10px; 
}

.wmc-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1; /* Esto estira un "manto invisible" sobre toda la tarjeta */
}

/* ==========================================================================
   SERVICIOS COMPLEMENTARIOS (Las 3 cards) - COHERENCIA TEMA CLARO
   ========================================================================== */
.audiovisual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.audiovisual-card {
  text-decoration: none;
  color: inherit;
  background: #F4F8FB; /* El mismo fondo de la Master Card */
  border: 1px solid rgba(45, 212, 191, 0.15); 
  border-radius: 14px;
  padding: 2.2rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.audiovisual-card:hover {
  transform: translateY(-5px);
  border-color: rgba(45, 212, 191, 0.4);
  background: #FFFFFF; 
  box-shadow: 0 10px 30px rgba(13, 21, 32, 0.05);
}

.audiovisual-icon {
  font-size: 1.6rem;
  background: rgba(45, 212, 191, 0.08);
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; margin-bottom: 1.5rem;
  border: 1px solid rgba(45, 212, 191, 0.15);
}

.card-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0D1520; 
  margin-bottom: 0.8rem;
}

.card-desc {
  font-size: 0.88rem;
  color: #475569; 
  line-height: 1.65;
  margin-bottom: 1.8rem;
  flex-grow: 1;
}

.card-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #0D5C53; 
  background: rgba(45, 212, 191, 0.1);
  padding: 0.3rem 0.8rem;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid rgba(45, 212, 191, 0.2);
}

/* Responsive para la Master Card */
@media (max-width: 768px) {
  .web-master-card {
    padding: 2rem 1.5rem;
  }
  .wmc-grid {
    grid-template-columns: 1fr; 
    gap: 2rem;
  }
  .wmc-title {
    font-size: 1.4rem;
  }
}

/* ==========================================================================
   5. SECCIÓN PORTAFOLIO (REVERTIDO A TEMA OSCURO - PROYECTOS RECIENTES EN BLANCO)
   ========================================================================== */
.portfolio-section {
  padding: 6rem 5%;
  background-color: var(--navy2); /* Restaurado a fondo oscuro original */
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
}

.portfolio-container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-badge {
  color: #2DD4BF;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 1rem;
}

/* MODIFICADO: La palabra PROYECTOS RECIENTES queda en blanco puro */
.portfolio-section .section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: #FFFFFF; /* Forzado a blanco puro */
  font-weight: 800;
  margin-bottom: 1rem;
}

.portfolio-section .section-sub {
  color: #7A9BB5; /* Restaurado gris azulado legible para fondo oscuro */
  font-weight: 400;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2.2rem;
}

.project-card {
  background: var(--navy); /* Restaurado fondo oscuro de tarjeta */
  border: 1px solid var(--border); 
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover {
  transform: translateY(-6px);
  border-color: rgba(45, 212, 191, 0.3);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); 
}

.project-img-wrapper {
  width: 100%; height: 280px;
  background: #1C2B3A; 
  overflow: hidden;
  position: relative;
}

.project-img-wrapper img {
  width: 100%; height: auto;
  position: absolute; top: 0; left: 0;
  transition: transform 5s ease-in-out;
}
.project-card:hover .project-img-wrapper img {
  transform: translateY(calc(-100% + 280px)); 
}

.project-info { padding: 1.8rem; }

.project-tags {
  display: flex; gap: 0.6rem;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.project-tags span {
  background: rgba(45, 212, 191, 0.08); 
  color: var(--aqua); 
  font-size: 0.7rem; font-weight: 700;
  padding: 0.3rem 0.8rem; border-radius: 50px;
  text-transform: uppercase;
}

.project-name {
  color: var(--text); /* Restaurado a color claro */
  font-size: 1.3rem; font-weight: 700;
  margin-bottom: 0.6rem;
}

.project-desc {
  color: #7A9BB5; /* Restaurado a gris azulado */
  font-size: 0.9rem; line-height: 1.6;
  font-weight: 400; margin-bottom: 1.5rem;
}

.project-link {
  color: var(--aqua); text-decoration: none;
  font-weight: 700; font-size: 0.9rem;
  transition: color 0.2s ease;
}
.project-link:hover { color: #FFFFFF; }

.node-box {
  position: relative;
  background: #0D1520; 
  height: 280px;
  overflow: hidden;
}

.project-link.disabled {
  color: #5A7A90;
  cursor: not-allowed;
  font-style: italic;
  text-decoration: none;
}

/* ==========================================================================
   6. SECCIÓN SOBRE NOSOTROS (TEMA CLARO - FONDO BLANCO - ULTRA ALINEADO)
   ========================================================================== */
.sobre {
  background-color: #FFFFFF;
  padding: 4rem 5% 7rem 5%; /* Cambiado de 7rem a 4rem arriba */
  color: var(--text-dk);
  position: relative;
  z-index: 1;
}

.sobre-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Quitamos el margen superior porque ahora tenemos el encabezado centrado */
.sobre-layout {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Ahora las columnas miden igual (50/50) */
  gap: 5rem;
  align-items: start;
  margin-top: 0; 
}

.historia-tag {
  display: inline-block;
  font-size: 0.7rem; font-weight: 700;
  color: #2DD4BF; letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--aqua-08);
  border: 1px solid var(--aqua-15);
  border-radius: 4px;
  padding: 0.3rem 0.8rem; margin-bottom: 1.2rem;
}

.historia-titulo {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.6rem; font-weight: 800;
  color: var(--text-dk); margin-bottom: 1.5rem;
}

.historia-parrafo {
  font-size: 0.98rem; color: var(--muted);
  font-weight: 400; line-height: 1.8;
  margin-bottom: 1.2rem;
}
.historia-parrafo strong { color: var(--text-dk); font-weight: 700; }

.col-valores {
  padding-top: 0;
}

.valores-intro {
  font-size: 0.98rem; color: var(--muted);
  line-height: 1.8; margin-bottom: 2.2rem;
}
.valores-intro strong { color: var(--text-dk); font-weight: 700; }

.valores-list {
  display: flex; flex-direction: column; gap: 1.2rem;
}

.valor-item {
  background: #F4F8FB;
  border: 1px solid rgba(45,212,191,0.12);
  border-radius: 10px; padding: 1.4rem;
  display: flex; gap: 1.2rem; align-items: flex-start;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.valor-item:hover {
  transform: translateY(-2px);
  border-color: rgba(45,212,191,0.3);
}

.valor-icono {
  font-size: 1.4rem;
  background: rgba(45,212,191,0.1);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; flex-shrink: 0;
}

.valor-nombre {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem; font-weight: 800;
  color: var(--text-dk); margin-bottom: 0.4rem;
}

.valor-desc {
  font-size: 0.86rem; color: var(--muted);
  line-height: 1.6;
}

.cofundadores-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem; margin-top: 2.5rem; margin-bottom: 2rem;
}

.fundador-card {
  background: #F4F8FB;
  border: 1px solid rgba(45,212,191,0.15);
  border-radius: 12px; padding: 1.6rem;
  border-left: 4px solid #2DD4BF;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fundador-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(13,21,32,0.04);
}

.fundador-nombre {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem; font-weight: 800;
  color: var(--text-dk); margin-bottom: 0.2rem;
}

.fundador-rol {
  color: var(--aqua-dk);
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 0.8rem;
}

.fundador-bio {
  font-size: 0.86rem; color: var(--muted);
  line-height: 1.6;
}

.lema-profesional {
  font-size: 0.95rem; font-style: italic;
  font-weight: 700; color: var(--text-dk);
  border-top: 1px solid rgba(45,212,191,0.15);
  padding-top: 1.5rem; margin-top: 2rem;
}


/* 1. Reparación de los nodos (evita que se estiren) */
.coming-soon-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  overflow: hidden; /* Importante para que el canvas no se desborde */
}

.coming-soon-content canvas {
  display: block; /* Elimina márgenes extra del canvas */
  width: 100% !important;
  height: 100% !important;
}

/* 2. Ajuste fino de alineación para la sección Nosotros */
/* Aumentamos el padding para que el texto de la derecha baje exactamente al nivel de la línea amarilla */
.col-valores {
  padding-top: 7.8rem !important; 
}


/* ==========================================================================
   RESPONSIVE MÓVIL: SECCIÓN NOSOTROS (Solución al amontonamiento)
   ========================================================================== */
@media (max-width: 992px) {
  /* 1. Pasamos la historia y los valores a 1 sola columna vertical */
  .sobre-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* 2. MUY IMPORTANTE: Quitamos el padding que usamos para alinear en la PC, 
        sino en el celular te va a quedar un hueco gigante en blanco */
  .col-valores {
    padding-top: 0 !important; 
  }

  /* 3. Apilamos las tarjetas de los fundadores para que no se amontonen */
  .cofundadores-container {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .cofundadores-container {
    display: grid !important;
    grid-template-columns: 1fr !important; /* Fuerza 1 sola columna vertical */
    gap: 2rem !important; /* Da un buen espacio de separación entre vos y Omar */
  }
}



/* ==========================================================================
   7. SECCIÓN CONTACTO (TEXTO IZQUIERDA - FORM DERECHA - RESPONSIVO)
   ========================================================================== */
.contacto {
  position: relative;
  padding: 7rem 5%;
  background-color: var(--navy2); 
  border-top: 1px solid var(--border);
  color: var(--text);
  overflow: hidden; /* Evita que el fondo rompa el scroll horizontal */
}

.contacto-bg {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 95% 10%, rgba(45,212,191,0.04) 0%, transparent 65%);
}

.contacto-inner {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto;
}

/* ==========================================
   GRID LAYOUT (Computadora vs Celular)
   ========================================== */
.contacto-layout {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columnas en PC */
  gap: 4rem;
  align-items: start;
}

/* ==========================================
   COLUMNA IZQUIERDA (Info)
   ========================================== */
.col-info {
  display: flex; 
  flex-direction: column;
  align-items: flex-start; /* Alinea los bloques a la izquierda */
  text-align: left;        /* Alinea los textos a la izquierda */
  width: 100%;
}

.contacto .section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800; color: var(--text);
  line-height: 1.15; margin-bottom: 1rem;
}

.contacto .section-title .aq { color: var(--aqua); }

.contacto .section-sub {
  font-size: 1rem; color: var(--muted);
  font-weight: 400; max-width: 600px;
  margin-bottom: 4rem; line-height: 1.7;
}

.info-intro {
  font-size: 0.95rem; color: var(--muted);
  line-height: 1.75; margin-bottom: 2.5rem;
  max-width: 480px; 
}
.info-intro strong { color: var(--text); font-weight: 600; }

.contact-items {
  display: flex; flex-direction: column; gap: 1.1rem;
  margin-bottom: 2.5rem; 
  width: 100%; 
  max-width: 480px; 
}

.contact-item {
  display: flex; align-items: center; gap: 1.2rem;
  background: var(--navy); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.1rem 1.4rem;
  text-decoration: none; text-align: left;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.contact-item:hover {
  border-color: rgba(45,212,191,0.3);
  transform: translateY(-2px);
}

.ci-icon {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 8px; background: rgba(45,212,191,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; border: 1px solid rgba(45,212,191,0.15);
}

.ci-label {
  font-size: 0.68rem; font-weight: 700;
  color: var(--aqua); letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 2px;
}
.ci-val { font-size: 0.95rem; font-weight: 600; color: var(--text); }

.redes-titulo {
  font-size: 0.75rem; font-weight: 700;
  color: var(--muted); letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 1rem;
  text-align: left; /* Alineado a la izquierda */
}

.redes-list {
  display: flex; gap: 0.7rem; margin-bottom: 2.5rem;
  justify-content: flex-start; /* Alineado a la izquierda */
}

.red-btn {
  width: 44px; height: 44px; border-radius: 8px;
  background: var(--navy); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s;
}
.red-btn:hover {
  border-color: var(--aqua);
  background: rgba(45,212,191,0.08);
  transform: translateY(-2px);
}

.promesa-card {
  background: rgba(45,212,191,0.02);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 1.4rem; display: flex; gap: 1.2rem; align-items: flex-start;
  width: 100%; max-width: 480px; text-align: left; 
}
.promesa-icon { font-size: 1.4rem; flex-shrink: 0; }
.promesa-titulo {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem; font-weight: 800;
  color: var(--aqua); margin-bottom: 0.4rem;
}
.promesa-texto { font-size: 0.85rem; color: var(--muted); line-height: 1.6; }

/* ==========================================
   COLUMNA DERECHA (Formulario)
   ========================================== */
.col-form {
  display: flex;
  justify-content: flex-end; /* Lo empuja a la derecha en PC */
  width: 100%;
}

.form-card {
  background: var(--navy); border: 1px solid var(--border);
  border-radius: 16px; padding: 3rem 2.5rem; position: relative;
  width: 100%; max-width: 500px;
}
.form-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--aqua); border-radius: 16px 16px 0 0;
}

.form-titulo {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.4rem; font-weight: 800; color: var(--text);
  margin-bottom: 0.4rem;
}
.form-sub { font-size: 0.88rem; color: var(--muted); margin-bottom: 2.5rem; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-group.full { grid-column: 1 / -1; }

label {
  font-size: 0.75rem; font-weight: 700; color: var(--muted);
  letter-spacing: 0.05em; text-transform: uppercase;
}
label span { color: var(--aqua); }

input, select, textarea {
  font-family: 'Lato', sans-serif; font-size: 0.95rem;
  color: var(--text); background: var(--navy2);
  border: 1.5px solid var(--border); border-radius: 8px;
  padding: 0.85rem 1rem; outline: none; width: 100%;
  transition: all 0.2s ease;
}
input::placeholder, textarea::placeholder { color: rgba(232,240,247,0.25); }
input:focus, select:focus, textarea:focus {
  border-color: var(--aqua);
  box-shadow: 0 0 0 3px rgba(45,212,191,0.1);
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232DD4BF' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.2rem center;
  cursor: pointer; appearance: none; -webkit-appearance: none;
}
select option { background: var(--navy); color: var(--text); }
textarea { resize: vertical; min-height: 140px; }

.btn-submit {
  width: 100%; margin-top: 1.5rem;
  background: var(--aqua); color: #000000;
  border: none; border-radius: 8px; padding: 1.1rem;
  font-family: 'Lato', sans-serif; font-size: 1rem; font-weight: 700;
  letter-spacing: 0.05em; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: all 0.25s ease;
}
.btn-submit:hover {
  background: var(--aqua-dk);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(45,212,191,0.35);
}
.btn-submit svg { width: 18px; height: 18px; transition: transform 0.2s; }
.btn-submit:hover svg { transform: translateX(5px); }

.form-privacidad { text-align: center; font-size: 0.78rem; color: var(--muted); margin-top: 1.2rem; }

/* ==========================================
   MEDIA QUERIES (TABLETS Y CELULARES)
   ========================================== */
@media (max-width: 992px) {
  .contacto-layout {
    grid-template-columns: 1fr; /* Pasa a 1 columna */
    gap: 3rem;
  }
  
  .col-form {
    justify-content: center; /* Centra el formulario en móviles */
  }

  /* Si querés que en el celu el formulario no sea tan ancho, mantenemos el max-width */
  .form-card {
    max-width: 100%; /* Permite que ocupe el ancho disponible con márgenes */
  }
  
  /* En celulares muy chicos, el grid interno del form pasa a 1 columna */
  @media (max-width: 600px) {
    .form-grid {
      grid-template-columns: 1fr;
    }
  }
}




/* ==========================================================================
   8. INTERMEDIO: CTA BANNER CON CANVAS DINÁMICO (EFECTO HERO INTEGRADO)
   ========================================================================== */
.cta-banner {
  background: var(--navy);
  padding: 5rem 5%;
  position: relative; 
  overflow: hidden;
  border-top: 1px solid var(--border);
}

/* MODIFICADO: Canvas con posicionamiento e index exacto al del Hero */
#cta-nodes-canvas {
  position: absolute; 
  inset: 0;
  width: 100%; 
  height: 100%;
  z-index: 0; 
  pointer-events: none; 
}

.cta-inner {
  position: relative; 
  z-index: 1; /* El contenido flota sobre la red de hilos interactivos */
  max-width: 1200px; 
  margin: 0 auto;
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  gap: 3rem; 
  flex-wrap: wrap;
}

.cta-tag { font-size: 0.7rem; font-weight: 700; color: var(--aqua); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.8rem; }
.cta-titulo { font-family: 'Montserrat', sans-serif; font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 900; letter-spacing: -0.025em; color: var(--text); line-height: 1.1; margin-bottom: 0.6rem; }
.cta-titulo span { color: var(--aqua); }
.cta-sub { font-size: 0.95rem; color: var(--muted); font-weight: 300; max-width: 460px; line-height: 1.75; }
.cta-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

.btn-ghost {
  font-family: 'Lato', sans-serif;
  background: transparent; color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 7px;
  padding: 1rem 2rem; font-size: 0.95rem; font-weight: 700;
  cursor: pointer; display: inline-block; white-space: nowrap;
  transition: all 0.25s ease;
}
.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.04);
}

/* ==========================================================================
   9. FOOTER PRINCIPAL (MINIMALISTA CON LOGO PREMIUM AGRANDADO)
   ========================================================================== */
footer {
  background: var(--navy2);
  padding: 5rem 5% 0;
  position: relative; overflow: hidden;
}

footer::before {
  content: '';
  position: absolute; top: 0; left: 5%; right: 5%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--aqua), transparent);
  opacity: 0.2;
}

.footer-inner { max-width: 1200px; margin: 0 auto; }

.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 3rem; padding-bottom: 4rem;
}

/* MODIFICADO: Logo del Footer con tamaño premium e imponente escalado */
.logo-footer {
  display: block;
  height: 80px !important; /* Incrementado a 80px para una visibilidad excelente */
  width: auto;
  object-fit: contain;
  transition: transform 0.2s ease;
}
.logo-footer:hover { transform: scale(1.03); }

.logo-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.15rem; font-weight: 900;
  letter-spacing: 0.06em; color: var(--text);
}
.logo-name span { color: var(--aqua); }

.footer-desc {
  font-size: 0.88rem; color: #7A9BB5;
  font-weight: 300; line-height: 1.8;
  max-width: 290px; margin-top: 1.5rem; margin-bottom: 1.8rem;
}

.footer-redes { display: flex; gap: 0.7rem; }

.footer-col-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem; font-weight: 800; color: var(--text);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 1.4rem; padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border);
}

.footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.footer-links li a {
  font-size: 0.88rem; color: #7A9BB5; text-decoration: none;
  font-weight: 400; display: flex; align-items: center; gap: 6px;
  transition: color 0.2s ease;
}
.footer-links li a::before {
  content: ''; width: 0; height: 1px; background: var(--aqua);
  display: inline-block; flex-shrink: 0; transition: width 0.2s ease;
}
.footer-links li a:hover { color: var(--text); }
.footer-links li a:hover::before { width: 12px; }

.link-new {
  font-size: 0.58rem; font-weight: 800; color: var(--aqua); 
  background: rgba(45, 212, 191, 0.08); border: 1px solid rgba(45, 212, 191, 0.2);
  border-radius: 3px; padding: 1px 5px; text-transform: uppercase; margin-left: 4px;
}

.footer-bottom {
  padding: 2rem 0; display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 1.5rem;
}

.footer-copy { font-size: 0.82rem; color: #7A9BB5; font-weight: 400; }
.footer-copy a { color: var(--aqua); text-decoration: none; font-weight: 700; }

.footer-legal { display: flex; gap: 2rem; list-style: none; }
.footer-legal a { font-size: 0.8rem; color: #7A9BB5; text-decoration: none; transition: color 0.2s ease; }
.footer-legal a:hover { color: var(--text); }

.footer-pais { font-size: 0.8rem; color: #7A9BB5; display: flex; align-items: center; gap: 6px; }
.flag { font-size: 1rem; }

/* ==========================================================================
   10. CONTROL DE RESPONSIVE (MEDIA QUERIES INTEGRADOS)
   ========================================================================== */
@media (max-width: 960px) {
  .sobre-layout, .contacto-layout { 
    grid-template-columns: 1fr; 
    gap: 3.5rem; 
  }
  .col-valores { padding-top: 0; }
  .col-info { align-items: center; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .cta-inner  { flex-direction: column; text-align: center; gap: 2rem; }
  .cta-actions { justify-content: center; }
  .cta-sub { margin: 0 auto; }
}

/* Correcciones para el Footer en móvil */
@media (max-width: 768px) {
  footer {
    padding: 3rem 5% 2rem; /* Reducimos el espacio superior de 5rem a 3rem */
  }

  .footer-top {
    grid-template-columns: 1fr; /* Una sola columna vertical */
    gap: 2rem;
    text-align: center;
  }

  .footer-brand {
    align-items: center; /* Centra el logo y la descripción */
    text-align: center;
  }

  .footer-desc {
    margin: 1rem auto; /* Centra la descripción */
    max-width: 100%;
  }

  .footer-redes {
    justify-content: center; /* Centra el icono de Instagram */
  }

  .footer-links {
    align-items: center; /* Centra los links de servicios/empresa/contacto */
  }

  .logo-footer {
    height: 60px !important; /* Ajuste sutil para que no sea tan grande en móvil */
  }
}

@media (max-width: 560px) {
  .cofundadores-container, .form-grid, .portfolio-grid, .audiovisual-grid { 
    grid-template-columns: 1fr; 
    gap: 1.2rem; 
  }
  .form-card { padding: 2.2rem 1.5rem; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 1.2rem; }
  .footer-legal, .footer-pais { justify-content: center; }
  .cta-banner { padding: 4rem 5%; }
}



/* ==========================================================================
   REPARACIÓN: TARJETAS "PRÓXIMAMENTE" Y NODOS
   ========================================================================== */
.project-card.coming-soon .node-box {
  position: relative;
  background: #0D1520;
  height: 280px;
  overflow: hidden;
}

.coming-soon-content {
  position: absolute;
  inset: 0; /* Asegura que cubra todo el alto y ancho (top, left, right, bottom: 0) */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.coming-soon-text {
  position: relative;
  z-index: 5; /* Fuerza el texto por encima del canvas interactivo */
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-shadow: 0 4px 15px rgba(0,0,0,0.5); /* Sombra para que se lea perfecto sobre los nodos */
}

/* Asegurar que el canvas respete el fondo absoluto */
.coming-soon-content canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* El canvas queda debajo del texto */
  display: block;
}

/* ==========================================================================
   AJUSTES DEL MENÚ PARA MÓVILES (APPLE / IOS OPTIMIZADO)
   ========================================================================== */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--aqua);
  font-size: 1.8rem;
  cursor: pointer;
  padding: 5px 10px;
  z-index: 60;
}

/* Evita el scroll horizontal fantasma en dispositivos Apple */
body, html {
  overflow-x: hidden;
  width: 100%;
}

@media (max-width: 960px) {
  /* Ocultar botones de escritorio y mostrar hamburguesa */
  .nav-cta-desktop { display: none !important; }
  .nav-toggle { display: block; }
  
  /* Comportamiento del menú lateral en celulares */
  .nav-links {
    position: fixed;
    top: 85px; /* Altura de la barra de navegación */
    right: -100%; /* Oculto fuera de la pantalla a la derecha */
    width: 100%;
    height: calc(100vh - 85px);
    background: rgba(13, 21, 32, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px); /* Soporte nativo Apple */
    flex-direction: column;
    justify-content: center;
    transition: right 0.4s ease-in-out;
    padding: 2rem 5%;
  }

  /* Clase que el JS activa al hacer clic en la hamburguesa */
  .nav-links.active {
    right: 0;
  }

  .nav-links li {
    width: 100%;
    text-align: center;
    margin-bottom: 1.5rem;
  }

  .nav-links a {
    font-size: 1.2rem;
    display: block;
    padding: 10px;
  }

  /* Botones móviles */
  .nav-cta-mobile {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
}


/* ==========================================================================
   CSS FINAL: MODO MÓVIL (Menú, Instagram y Limpieza)
   ========================================================================== */
@media (max-width: 768px) {
  /* 1. Eliminar scroll-hint por completo */
  #scroll-indicator, .scroll-hint {
    display: none !important;
  }

  /* 2. Botón Instagram Móvil con color verde */
  .btn-insta-mobile {
    display: block;
    text-align: center;
    background: transparent;
    border: 2px solid var(--aqua);
    color: var(--aqua);
    padding: 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    margin-top: 1.5rem;
    transition: all 0.3s ease;
  }

  .btn-insta-mobile:hover {
    background: var(--aqua);
    color: #000;
  }

  /* 3. Asegurar que nav-links no se superponga */
  .nav-links {
    display: none; 
    flex-direction: column;
    padding: 20px;
    background: #0D1520; /* Aseguramos fondo oscuro */
    position: absolute;
    top: 80px; 
    left: 0;
    width: 100%;
    z-index: 1000;
  }
  
  .nav-links.active {
    display: flex;
  }
}