/* ============================================================
   HERO · GOCONNECT
   ============================================================ */

.hero-gc {
position: relative;
  width: 100%;
  min-height: 100vh;
  /* Nuevo degradado de negro a #eeeeee */
  background: linear-gradient(180deg, #222222 0%, #eeeeee 10%, #eeeeee 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

/* Capa de partículas */
.hero-gc_canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none; /* Permite hacer clic en los elementos de arriba */
}

/* Contenedor principal */
.hero-gc_inner {
  position: relative;
  z-index: 2;
  width: 85%;
  max-width: var(--container-xl); /* 1400px */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* --- COLUMNA IZQUIERDA (Texto) --- */
.hero-gc_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-gc_logo_wrapper {
  margin-bottom: 24px;
  /* Animación de entrada */
  opacity: 0;
  transform: translateY(20px);
  animation: gc_fade_up 0.8s var(--ease-smooth) 0.2s forwards;
}

.hero-gc_logo {
  height: 60px; /* Ajusta según tu logo */
  width: auto;
  display: block;
}

.hero-gc_title {
  font-family: var(--font-display);
  font-size: var(--fs-hero-h1); /* clamp(42px, 5.4vw, 72px) */
  font-weight: var(--fw-hero-h1); /* 500 */
  line-height: var(--lh-hero-h1);
  letter-spacing: var(--tracking-hero-h1);
  color: var(--grad-h2);
  margin: 0 0 24px 0;
  /* Animación */
  opacity: 0;
  transform: translateY(20px);
  animation: gc_fade_up 0.8s var(--ease-smooth) 0.4s forwards;
}

.hero-gc_accent {
  /* Usando el gradiente de tus tokens para resaltar */
  background: var(--grad-hero-h1);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero-gc_text {
  font-family: var(--font-primary);
  font-size: var(--fs-body); /* 17px */
  line-height: var(--lh-body);
  color:var(--go-bg-dark);
  max-width: 480px;
  margin: 0 0 40px 0;
  /* Animación */
  opacity: 0;
  transform: translateY(20px);
  animation: gc_fade_up 0.8s var(--ease-smooth) 0.6s forwards;
}

/* --- BOTÓN --- */
.hero-gc_btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 36px;
  border-radius: 100px;
  text-decoration: none;
  border: 1px solid #111111; /* Borde negro sutil */
  background: transparent;
  overflow: hidden;
  transition: all 0.4s var(--ease-smooth);
  /* Animación de entrada */
  opacity: 0;
  transform: translateY(20px);
  animation: gc_fade_up 0.8s var(--ease-smooth) 0.8s forwards;
}

/* Gradiente animado oculto por defecto */
.hero-gc_btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, #e6e6e6 0%, #000000 50%, #e6e6e6 100%);
  background-size: 200% 100%;
  animation: gc_gradient_move 3s linear infinite;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hero-gc_btn:hover {
  border-color: transparent;
  backdrop-filter: blur(8px); /* Efecto Glass */
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.hero-gc_btn:hover::before {
  opacity: 1; /* Aparece el gradiente */
}

/* Texto del botón */
.hero-gc_btn_text {
  position: relative;
  z-index: 2;
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #111111;
  transition: color 0.3s ease, transform 0.4s var(--ease-smooth);
}

.hero-gc_btn:hover .hero-gc_btn_text {
  color: #ffffff; /* Texto blanco cuando pasa el gradiente oscuro */
  transform: translateX(-12px);
}

/* Flecha (oculta inicialmente) */
.hero-gc_btn_icon {
  position: absolute;
  right: 24px;
  width: 20px;
  height: 20px;
  color: #ffffff;
  opacity: 0;
  transform: translateX(-15px);
  transition: all 0.4s var(--ease-smooth);
  z-index: 2;
}

.hero-gc_btn:hover .hero-gc_btn_icon {
  opacity: 1;
  transform: translateX(0);
}


/* --- COLUMNA DERECHA (Imagen) --- */
.hero-gc_image_wrapper {
  position: absolute;
  width: 70vw; /* Tamaño grande */
  right: -25vw; /* Se sale de la pantalla */
  top: 50%;
  
  /* 1. Estado inicial (para que la animación funcione) */
  opacity: 0;
  transform: translateY(-50%) translateX(150px); 
  
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  
  /* 2. Llamada a la animación */
  animation: gc_slide_in_right_abs 1.2s var(--ease-out) 0.5s forwards;
}

/* Ajustes a la imagen para que no se deforme */
.hero-gc_image {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(-20px 30px 50px rgba(0, 0, 0, 0.15));
  /* Si tu imagen es un PNG/WebP con fondo transparente, quita el border-radius */
  border-radius: 0; 
  border: none;
}

/* --- SCROLL INDICATOR --- */
.hero-gc_scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10; /* Por encima de las partículas y la imagen */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #888888; /* Gris medio para que se lea en el fondo claro */
  transition: color 0.3s ease;
}

.hero-gc_scroll:hover { 
  color: var(--go-ink); /* Se oscurece al pasar el mouse */
}

.hero-gc_scroll_text {
  font-family: var(--font-primary);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  padding-left: 0.35em;
}

.hero-gc_scroll_line {
  position: relative;
  display: block;
  width: 1px;
  height: 60px;
  background: rgba(0, 0, 0, 0.15); /* Línea oscura semitransparente */
  overflow: hidden;
}

.hero-gc_scroll_dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--go-teal); /* El punto sigue siendo turquesa para resaltar */
  box-shadow: 0 0 10px var(--go-teal);
  transform: translateX(-50%);
  animation: gc_scroll_dot 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* Asegúrate de tener esta animación en tu archivo */
@keyframes gc_scroll_dot {
  0%   { top: -6px; opacity: 0; }
  15%  { opacity: 1; }
  75%  { top: 54px; opacity: 1; }
  100% { top: 60px; opacity: 0; }
}
/* ============================================================
   ANIMACIONES
   ============================================================ */
@keyframes gc_fade_up {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gc_slide_in_right {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes gc_gradient_move {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@keyframes gc_scroll_dot {
  0%   { top: -6px; opacity: 0; }
  15%  { opacity: 1; }
  75%  { top: 54px; opacity: 1; }
  100% { top: 60px; opacity: 0; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .hero-gc_inner {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
    padding-top: 80px; /* Espacio para el header */
  }

  .hero-gc_content {
    align-items: center;
  }

  .hero-gc_text {
    margin: 0 auto 32px auto;
  }

  .hero-gc_image_wrapper {
    transform: translateY(40px); /* En móvil entra desde abajo */
    animation: gc_fade_up 1s var(--ease-out) 0.5s forwards;
  }

  .hero-gc_image {
    max-height: 350px;
  }
}
@keyframes gc_slide_in_right_abs {
  from { 
    opacity: 0; 
    transform: translateY(-50%) translateX(150px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(-50%) translateX(0); 
  }
}

/* ============================================================
   STATEMENT · GOconnect
   ============================================================ */

.gc-statement {
  position: relative;
  width: 100%;
  height: auto;
  padding: 50px 0;
  background-color: #eeeeee; /* Mismo tono con el que termina tu Hero */
  display: flex;
  justify-content: center;
  align-items: center;
}

.gc-statement_inner {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.gc-statement_text {
  font-family: var(--font-primary);
  /* Usamos un tamaño fluido: crece en pantallas grandes, se achica en móvil */
  font-size: 2.5em; 
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-h2);
  
  /* Usamos un tono oscuro para que contraste con el fondo gris */
  color:var(--grad-h2); 
  
  margin: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .gc-statement {
    padding: 80px 0;
  }
  
  .gc-statement_text {
    font-size: 22px; /* Un poco más pequeño en móviles */
  }
  
  /* Opcional: quitar los <br> forzados en móvil para que el texto fluya mejor */
  .gc-statement_text br {
    display: none;
  }
}



/* ======================================================================================================================== */

/* ============================================================
   SECCIÓN UNIFICADA (Ensamblaje + Características)
   ============================================================ */

.gc-unified {
  position: relative;
  width: 100%;
  background-color: #eeeeee;
  overflow: hidden;
}

/* Línea vertical que recorre ambas secciones */
.gc-global-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, 0.06);
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}

/* ==================== PARTE 1: ENSAMBLAJE ==================== */

.gc-assemble {
  position: relative;
  width: 100%;
  height: 180vh; /* Altura del scroll de la animación */
  z-index: 2;
}

.gc-assemble_sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 180vh; /* Se pega a la pantalla */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.gc-assemble_container {
  position: relative;
  width: 90%;
  max-width: 1200px;
  height: 100%;
}

.gc-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1000px;
  height: auto;
  object-fit: contain;
  will-change: transform, opacity;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
}

/* Z-index individual para que se apilen en orden */
.gc-layer_case { z-index: 1; }
.gc-layer_cables { z-index: 2; }
.gc-layer_switch { z-index: 3; }
.gc-layer_switch2 { z-index: 4; }
.gc-layer_placa { z-index: 5; }
.gc-layer_discos { z-index: 6; }

/* ==================== PARTE 2: CARACTERÍSTICAS ==================== */

.gc-features {
  position: relative;
  width: 100%;
  height: 40vw;
  padding: 0;
  margin-top: -500PX;
  background-color: #eeeeee;
  z-index: 10; /* Por encima del sticky al hacer scroll */
}

.gc-features_inner {
  width: 90%;
  max-width: var(--container-xl);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 60px;
  align-items: start;
}

/* Columna Izquierda */
.gc-features_left {
  max-width: 420px;
}

.gc-features_eyebrow {
  font-family: var(--font-primary);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--tracking-small);
  text-transform: uppercase;
  color: #888888;
  margin: 0 0 16px 0;
}

.gc-features_title {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  margin: 0 0 24px 0;
}

.gc-features_desc {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: #555555;
  margin: 0;
}

/* Columna Derecha (Grid de 3) */
.gc-features_right {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.gc-feature {
  display: flex;
  flex-direction: column;
}

.gc-feature_icon {
  width: 90px;
  height: 90px;
  margin-bottom: 24px;
}

.gc-feature_icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gc-feature_title {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: #1a1a1a;
  margin: 0 0 12px 0;
}

.gc-feature_text {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.5;
  color: #555555;
  margin: 0;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1024px) {
  .gc-features_inner {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .gc-features_left {
    max-width: 100%;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .gc-features {
    padding: 80px 0;
  }

  .gc-features_right {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .gc-feature {
    align-items: center;
    text-align: center;
  }
}


/* ============================================================
   GRID DE CONECTIVIDAD · Iconos + Border Animado + Popup
   ============================================================ */

/* Variable para animar el ángulo del gradiente */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.gc-services {
  --color-dark-blue:#BCCF00;
  --color-teal: #00A29E;
  
  position: relative;
  width: 100%;
  padding: 100px 0;
  
  /* AQUÍ ESTÁ EL CAMBIO DEL FONDO ESPACIAL */
  background: 
    radial-gradient(ellipse at 20% 30%, rgba(0, 113, 227, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(0, 198, 178, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, #020610 0%, #0a1c2e 100%);
    
  overflow: hidden;
}

.gc-services_inner {
  width: 90%;
  max-width: var(--container-xl);
  margin: 0 auto;
}

/* Encabezado */
.gc-services_head {
  max-width: 800px;
  margin-bottom: 60px;
}

.gc-services_eyebrow {
  font-family: var(--font-primary);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--tracking-small);
  text-transform: uppercase;
  color: #e7e4e4;
  margin: 0 0 12px 0;
}

.gc-services_title {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.5vw, 46px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #f1f1f1;
  margin: 0;
}

/* Grid */
.gc-services_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Tarjeta Base */
.gc-service_card {
  position: relative;
  border: 1px solid rgba(220, 220, 220, 0.5);
  border-radius: 20px;
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.4s var(--ease-smooth);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  z-index: 1;
}

/* --- BORDE ANIMADO (Efecto de luz recorriendo) --- */
.gc-service_card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 2px; /* Grosor del borde */
  /* Gradiente cónico transparente con un destello blanco */
  background: conic-gradient(from var(--angle), transparent 60%, #ffffff 80%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

/* Iconos */
.gc-service_icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  transition: all 0.4s ease;
  background-color: rgba(233, 233, 233, 0.9); /* Fondo sutil inactivo */
}

.gc-service_icon svg {
  width: 45px;
  height: 45px;
}

/* Textos de la tarjeta */
.gc-service_name {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 700;
  color: #d3d1d1;
  margin: 0 0 8px 0;
  transition: color 0.4s ease;
}

.gc-service_desc {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.4;
  color: #666666;
  margin: 0;
  transition: color 0.4s ease;
}

/* --- ESTADOS HOVER --- */
.gc-service_card:hover {
  background-color: var(--color-dark-blue); /* Fondo azul oscuro */
  transform: translateY(-5px);
  border-color: transparent; /* El borde animado toma el control */
}

/* Activar borde animado */
.gc-service_card:hover::before {
  opacity: 1;
  animation: rotate-border 2.5s linear infinite;
}

@keyframes rotate-border {
  to { --angle: 360deg; }
}

/* El circulo del icono cambia a blanco */
.gc-service_card:hover .gc-service_icon {
  background-color: #ffffff;
  transform: scale(1.1);
}

/* Textos cambian a blanco */
.gc-service_card:hover .gc-service_name,
.gc-service_card:hover .gc-service_desc {
  color: #ffffff;
}

/* ============================================================
   POPUP ESTILO APPLE
   ============================================================ */
.gc-popup {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.gc-popup.is-open {
  opacity: 1;
  visibility: visible;
}

.gc-popup_overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}

.gc-popup_box {
  position: relative;
  background: #ffffff;
  width: 100%;
  max-width: 950px; /* Ancho tipo Apple */
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.2);
  transform: translateY(40px) scale(0.98);
  transition: transform 0.5s var(--ease-smooth);
}

.gc-popup.is-open .gc-popup_box {
  transform: translateY(0) scale(1);
}

/* Botón de cerrar */
.gc-popup_close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #f0f0f0;
  color: #666666;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s ease, color 0.3s ease;
}

.gc-popup_close:hover {
  background: #e0e0e0;
  color: #000000;
}

.gc-popup_close svg {
  width: 20px;
  height: 20px;
}

/* Texto (Izquierda) */
.gc-popup_content {
  flex: 1;
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gc-popup_eyebrow {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  color: #888888;
  margin-bottom: 12px;
}

.gc-popup_title {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #000000;
  margin: 0 0 20px 0;
}

.gc-popup_text {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.5;
  color: #333333;
  margin: 0 0 40px 0;
  max-width: 90%;
}

/* Botón Link estilo Apple */
.gc-popup_link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 500;
  color: #0071e3; /* Azul Apple */
  text-decoration: none;
  align-self: flex-start;
  transition: text-decoration 0.2s;
}

.gc-popup_link:hover {
  text-decoration: underline;
}

.gc-popup_link svg {
  width: 16px;
  height: 16px;
}

/* Imagen (Derecha) */
.gc-popup_media {
  flex: 0 0 40%;
  background: #000;
  position: relative;
}

.gc-popup_media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .gc-services_grid { grid-template-columns: repeat(2, 1fr); }
  .gc-popup_box { flex-direction: column-reverse; max-height: 90vh; }
  .gc-popup_media { flex: 0 0 300px; }
  .gc-popup_content { padding: 40px; }
  .gc-popup_title { font-size: 32px; }
}

@media (max-width: 768px) {
  .gc-services_grid { grid-template-columns: 1fr; }
  .gc-popup_content { padding: 30px 20px; }
}