/* ==========================================================================
   NEMCOR S.A.C. - Estilos Premium y Animaciones
   Inspirado en la estética limpia, corporativa y tecnológica de Sapia.
   ========================================================================== */

/* Importación de Fuentes Premium de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

:root {
  /* Variables de Color (Sapia-Inspired Dark Palette) */
  --bg-primary: #030712;             /* Gris azulado profundo (azul noche) */
  --bg-secondary: #0b0f19;           /* Gris azulado para contenedores/tarjetas */
  --bg-surface-elevated: #111827;    /* Contenedores elevados/foco */
  
  --accent-green: #10B981;           /* Verde original de acento de marca NEMCOR (Emerald) */
  --accent-green-hover: #059669;     /* Verde original más oscuro para hover */
  --accent-green-glow: rgba(16, 185, 129, 0.15); /* Resplandor neón verde */
  
  --text-primary: #f8fafc;           /* Ghost White (Alta lectura) */
  --text-muted: #94a3b8;              /* Slate (Secundario) */
  
  /* Fuentes */
  --font-display: 'Hanken Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* Tipografía y Estilos Base */
body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

.font-mono-tech {
  font-family: var(--font-mono);
}

/* ==========================================================================
   Efectos Premium (Glow, Glassmorphism y Bordes)
   ========================================================================== */

/* Efecto Glassmorphism */
.glass-effect {
  background: rgba(11, 15, 25, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Efecto Hover Glow de Tarjetas */
.premium-card {
  background-color: var(--bg-secondary);
  border: 1px solid rgba(255, 255, 255, 0.03);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-card:hover {
  transform: translateY(-4px);
  border-color: rgba(16, 185, 129, 0.3);
  box-shadow: 0 10px 30px -10px rgba(3, 7, 18, 0.7),
              0 0 20px 0px rgba(16, 185, 129, 0.08);
}

/* Brillo Neón en Foco/Botones */
.btn-accent {
  background-color: var(--accent-green);
  color: #030712;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
}

.btn-accent:hover {
  background-color: var(--accent-green-hover);
  box-shadow: 0 0 20px 3px rgba(16, 185, 129, 0.4);
  transform: translateY(-1px);
}

.btn-outline-premium {
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-outline-premium:hover {
  border-color: var(--accent-green);
  background-color: rgba(16, 185, 129, 0.05);
  color: var(--accent-green);
  box-shadow: 0 0 15px 0px rgba(16, 185, 129, 0.15);
}

/* ==========================================================================
   Carrusel Infinito de Logos (Marquee)
   ========================================================================== */

.marquee-container {
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* Máscara de desvanecimiento en los extremos */
.marquee-container::before,
.marquee-container::after {
  content: "";
  position: absolute;
  top: 0;
  width: 15%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.marquee-container::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-primary) 0%, rgba(3, 7, 18, 0) 100%);
}

.marquee-container::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-primary) 0%, rgba(3, 7, 18, 0) 100%);
}

.marquee-content {
  display: flex;
  gap: 4rem;
  width: max-content;
  animation: marquee-scroll 35s linear infinite;
}

.marquee-content-partners {
  display: flex;
  gap: 4rem;
  width: max-content;
  animation: marquee-scroll-reverse 35s linear infinite;
}

.marquee-content:hover,
.marquee-content-partners:hover {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - 2rem)); /* Compensa la duplicidad */
  }
}

@keyframes marquee-scroll-reverse {
  0% {
    transform: translateX(calc(-50% - 2rem));
  }
  100% {
    transform: translateX(0);
  }
}

.client-logo-img {
  filter: grayscale(100%) opacity(40%) brightness(1.2);
  transition: all 0.3s ease;
}

.client-logo-img:hover {
  filter: grayscale(0%) opacity(100%) brightness(1);
}

/* ==========================================================================
   Carrusel de Dolores de Negocio (Interactive Slider)
   ========================================================================== */

.slide-card {
  opacity: 0.3;
  transform: scale(0.95);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.slide-card.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  border-color: rgba(16, 185, 129, 0.3);
  box-shadow: 0 10px 40px -10px rgba(3, 7, 18, 0.8),
              0 0 25px 2px rgba(16, 185, 129, 0.06);
}

/* ==========================================================================
   Formulario de Captura Inteligente y Checkbox
   ========================================================================== */

/* Estilos de Formulario Corporativo Premium */
.form-input-premium {
  background-color: rgba(11, 15, 25, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-input-premium:focus {
  outline: none;
  border-color: var(--accent-green);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
  background-color: rgba(11, 15, 25, 0.8);
}

/* Checkbox Interactivo de Segmentación */
.checkbox-tag {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.checkbox-tag input:checked + .checkbox-inner {
  background-color: rgba(16, 185, 129, 0.1);
  border-color: var(--accent-green);
  color: var(--accent-green);
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.1);
}

/* ==========================================================================
   Scrollbar Personalizado
   ========================================================================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-green);
}

/* ==========================================================================
   Micro-animaciones y Utilidades
   ========================================================================== */

.pulse-dot {
  position: relative;
  display: inline-block;
}

.pulse-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--accent-green);
  animation: pulse-ring 2s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
  z-index: -1;
}

@keyframes pulse-ring {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.8;
  }
  80%, 100% {
    transform: translate(-50%, -50%) scale(2.2);
    opacity: 0;
  }
}