@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@1&family=Inter:wght@300;400;500;600&family=Outfit:wght@400;600;700;800&display=swap');

/* ==========================================================================
   SISTEMA DE DISEÑO & VARIABLES (ESTILO ANTIGRAVITY / SPLINE)
   ========================================================================== */
:root {
  --bg-deep: hsl(224, 71%, 4%);
  --bg-dark: hsl(224, 60%, 6%);
  --bg-card: hsla(224, 60%, 10%, 0.35);
  
  --accent-cyan: rgb(0, 229, 255);
  --accent-cyan-glow: rgba(0, 229, 255, 0.15);
  --accent-purple: hsl(275, 100%, 60%);
  --accent-purple-glow: hsla(275, 100%, 60%, 0.15);
  --accent-pink: hsl(325, 100%, 50%);
  
  --text-primary: hsl(210, 40%, 98%);
  --text-secondary: hsl(215, 20%, 75%);
  --text-muted: hsl(215, 18%, 68%);  /* subido de 55% -> 68% para contraste AA (~5.2:1) en texto pequeño */
  
  --border-glass: rgba(255, 255, 255, 0.06);
  --border-glow: rgba(0, 229, 255, 0.15);
  
  --glass-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  --neon-gradient: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
  --btn-gradient: linear-gradient(90deg, var(--accent-purple), var(--accent-pink));
  
  --font-title: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-accent: 'Instrument Serif', serif;
  
  --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.25s ease;

  /* Escala de radios (sistema de diseño) */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 100px;
}

/* ==========================================================================
   RESET & ESTILOS GLOBALES
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem; /* compensa el header fijo al saltar a #anclas */
  font-size: 16px;
  background-color: var(--bg-deep);
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  overflow-x: hidden;  /* blindaje contra desbordamiento horizontal en móvil */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-image: 
    radial-gradient(circle at 10% 20%, hsla(275, 100%, 60%, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, hsla(180, 100%, 50%, 0.04) 0%, transparent 40%);
  background-attachment: fixed;
}

/* Scrollbar Personalizada */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-deep);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-cyan);
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.text-gradient {
  background: var(--neon-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* ==========================================================================
   COMPONENTES GLASSMORPHISM (ESTILO SPLINE / LUXURY)
   ========================================================================== */
.glass-card {
  position: relative;
  background: var(--glass-gradient);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: var(--transition-smooth);
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  transform: skewX(-25deg);
  transition: 0.75s ease;
  pointer-events: none;
  z-index: 2;
}

.glass-card:hover::before {
  left: 150%;
}

/* Spotlight Atmosférico de Sección (Estilo Antigravity Global) */
section {
  position: relative;
  z-index: 2;
}

section::before {
  content: '';
  position: absolute;
  top: var(--section-mouse-y, 50%);
  left: var(--section-mouse-x, 50%);
  transform: translate(-50%, -50%);
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, var(--accent-cyan-glow) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.8s ease, top 0.2s cubic-bezier(0.16, 1, 0.3, 1), left 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

section:hover::before {
  opacity: 0.6;
}

section:nth-of-type(even)::before {
  background: radial-gradient(circle, var(--accent-purple-glow) 0%, transparent 70%);
}


/* Estadísticas Editoriales en Hero (Estilo Antigravity Real - Idéntico al Mockup) */
.hero-stats-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin-top: 3.5rem;
  margin-bottom: 2.2rem;
}

.hero-stats-row {
  display: flex;
  justify-content: flex-start;
  gap: 2.5rem;
  align-items: center;
  flex-wrap: wrap;
  animation: fadeInUp 1.5s ease;
}

.hero-stat-item {
  position: relative;
  padding-right: 2.5rem;
}

.hero-stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 15%;
  right: 0;
  width: 1px;
  height: 70%;
  background: rgba(255, 255, 255, 0.08);
}

.stat-num {
  font-family: var(--font-title);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 0.4rem;
}

.stat-num.text-cyan {
  color: var(--accent-cyan);
}

.stat-num.text-purple {
  color: var(--accent-purple);
}

.stat-num.text-pink {
  color: var(--accent-pink);
}

.stat-label {
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-weight: 400;
}

/* ==========================================================================
   NAVEGACIÓN (HEADER COMPACTO FLOTANTE DE LUJO)
   ========================================================================== */
/* Skip link: enlace 'Saltar al contenido' visible solo al foco por teclado */
.skip-link {
  position: fixed;
  left: 1rem;
  top: -3.5rem;
  z-index: 2000;
  background: var(--accent-purple);
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 10px 10px;
  font-family: var(--font-title);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid #fff;
}

.header-nav {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1100px;
  z-index: 1000;
  padding: 0.6rem 2rem;
  background: rgba(11, 15, 25, 0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-glass);
  border-radius: 100px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  transition: var(--transition-smooth);
}

.header-nav.scrolled {
  top: 0.8rem;
  background: rgba(8, 11, 19, 0.85);
  border-color: rgba(0, 229, 255, 0.15);
  box-shadow: 0 20px 45px rgba(0, 229, 255, 0.05);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 1px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.logo span {
  font-weight: 300;
  color: var(--text-secondary);
}

.logo-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.logo:hover .logo-img {
  transform: scale(1.1);
  border-color: var(--accent-cyan);
  box-shadow: 0 0 18px var(--accent-cyan-glow);
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 1.5rem;
  align-items: center;
}

.nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: var(--transition-fast);
  position: relative;
  letter-spacing: 0.5px;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent-cyan);
  transition: var(--transition-fast);
}

.nav-links a:hover {
  color: var(--text-primary);
}

.nav-links a:hover::after {
  width: 100%;
}

/* Enlace de la sección activa (scrollspy) */
.nav-links a.active {
  color: var(--text-primary);
}

.nav-links a.active::after {
  width: 100%;
}

.btn-nav {
  background: var(--btn-gradient);
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  padding: 0.55rem 1.3rem;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(170, 51, 255, 0.3);
  transition: var(--transition-smooth) !important;
  position: relative;
  overflow: hidden;
}

.btn-nav::after {
  display: none !important;
}

.btn-nav:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(170, 51, 255, 0.5);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  background: transparent;
  border: none;
}

.menu-toggle span {
  width: 25px;
  height: 2px;
  background: var(--text-primary);
  transition: var(--transition-fast);
}

/* ==========================================================================
   SECCIÓN HERO (MAQUETACIÓN ASIMÉTRICA DE LUJO 1:1)
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  padding-top: 120px;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

#pulpo-hero {
  display: block;
  width: 100%;
  height: 100%;
}

#heroParticles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.hero-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: center top;
  mask-image: radial-gradient(circle at 20% 40%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at 20% 40%, black 20%, transparent 80%);
  z-index: 2;
  pointer-events: none;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse 55% 65% at var(--mouse-x, 60%) var(--mouse-y, 50%), hsla(180, 100%, 50%, 0.05) 0%, transparent 70%),
    radial-gradient(ellipse 45% 55% at var(--mouse-x, 65%) var(--mouse-y, 55%), hsla(275, 100%, 60%, 0.06) 0%, transparent 65%),
    radial-gradient(circle at center, transparent 20%, var(--bg-deep) 85%);
  z-index: 2;
  transition: background 0.1s ease;
}

.hero-content::before {
  content: '';
  position: absolute;
  top: var(--mouse-y, 50%);
  left: var(--mouse-x, 50%);
  transform: translate(-50%, -50%);
  width: 700px;
  height: 500px;
  background: radial-gradient(ellipse, hsla(180, 100%, 50%, 0.09) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
  transition: top 0.2s cubic-bezier(0.16, 1, 0.3, 1), left 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 4rem;
  position: relative;
  z-index: 3;
  width: 100%;
}

.hero-3d-showcase {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 640px;
  width: 100%;
  position: relative;
  overflow: hidden;
  animation: fadeInUp 1.6s ease;
}

/* Estructura Explosionada de Capas 3D */
.exploded-showcase {
  position: relative;
  width: 100%;
  max-width: 530px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}

.showcase-element {
  position: absolute;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
  pointer-events: none;
}

.showcase-element img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.45));
}

.element-plates {
  top: 5%;
  width: 72%;
  z-index: 5;
  animation: float-plates 6s ease-in-out infinite;
}

@keyframes float-plates {
  0%, 100% { transform: translateY(0) rotate(-0.5deg); }
  50% { transform: translateY(-16px) rotate(1deg); }
}

.element-cube {
  top: 26%;
  width: 82%;
  z-index: 4;
  animation: float-cube 6s ease-in-out infinite;
  animation-delay: 0.8s;
}

@keyframes float-cube {
  0%, 100% { transform: translateY(0) rotate(0.5deg); }
  50% { transform: translateY(-8px) rotate(-1deg); }
}

.element-gears {
  top: 36%;
  left: -8%;
  width: 32%;
  z-index: 3;
  animation: float-gears 7s ease-in-out infinite;
  animation-delay: 0.4s;
}

@keyframes float-gears {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(-6deg); }
}

.element-lamp {
  top: 15%;
  right: -8%;
  width: 35%;
  z-index: 3;
  animation: float-lamp 8s ease-in-out infinite;
  animation-delay: 1.2s;
}

@keyframes float-lamp {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(5deg); }
}

.element-base {
  bottom: 2%;
  width: 90%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 229, 255, 0.12) 0%, transparent 70%);
  border: 1px dashed rgba(0, 229, 255, 0.2);
  box-shadow: 0 0 40px rgba(0, 229, 255, 0.05);
  transform: rotateX(75deg);
  z-index: 1;
  animation: pulse-base 4s ease-in-out infinite;
}

@keyframes pulse-base {
  0%, 100% {
    opacity: 0.6;
    transform: rotateX(75deg) scale(0.96);
  }
  50% {
    opacity: 0.9;
    transform: rotateX(75deg) scale(1.04);
  }
}

.hero-content {
  position: relative;
  z-index: 3;
  text-align: left;
  max-width: 750px;
  padding: 0 2rem;
}

.hero-tagline {
  font-family: var(--font-title);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.65rem;
  color: var(--accent-cyan);
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: fadeInUp 0.8s ease;
}

.hero-tagline::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--accent-cyan);
  border-radius: 2px;
}

.hero-title {
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 4.5vw, 4.0rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1.5px;
  margin-bottom: 2rem;
  animation: fadeInUp 1s ease;
}

.hero-title .serif-line {
  display: block;
  margin-top: 0.28em;  /* aire entre el titular sans y el acento serif */
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  letter-spacing: -1px;
  background: var(--neon-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-description {
  font-size: clamp(0.85rem, 1.25vw, 0.95rem);
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 0 2.5rem;
  line-height: 1.75;
  animation: fadeInUp 1.2s ease;
}

.hero-buttons {
  display: flex;
  gap: 1.2rem;
  justify-content: flex-start;
  align-items: center;
  animation: fadeInUp 1.4s ease;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 2rem;
  border-radius: 50px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-primary {
  background: var(--neon-gradient);
  color: var(--bg-deep);
  box-shadow: 0 4px 20px rgba(0, 229, 255, 0.25);
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.25), transparent);
  opacity: 0;
  transition: var(--transition-fast);
}

.btn-primary:hover::after {
  opacity: 1;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 35px rgba(0, 229, 255, 0.45);
}

.btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.2);
  transition: var(--transition-smooth);
  flex-shrink: 0;
}

.btn-primary:hover .btn-arrow {
  background: rgba(0,0,0,0.35);
  transform: translateX(3px);
}

.btn-secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-3px);
}

/* ==========================================================================
   SECCIONES COMUNES
   ========================================================================== */
section {
  padding: 8rem 0;
  position: relative;
}

.section-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 5rem;
}

.section-tag {
  font-family: var(--font-title);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.85rem;
  color: var(--accent-cyan);
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.section-tag::before {
  content: '//';
  display: inline-block;
  font-weight: 700;
  color: var(--accent-cyan);
  text-shadow: 0 0 10px var(--accent-cyan-glow);
}

.section-title {
  font-family: var(--font-title);
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  letter-spacing: -0.5px;
}

.section-title em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  background: var(--neon-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-desc {
  color: var(--text-secondary);
  font-size: 1.05rem;
}

/* ==========================================================================
   SECCIÓN: ESPECIFICACIONES & MAQUINARIA (3D PARALLAX CARDS)
   ========================================================================== */
.specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  counter-reset: spec-counter;
  perspective: 1000px;
}

.spec-card {
  padding: 3.5rem 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  counter-increment: spec-counter;
  transform-style: preserve-3d;
  transition: transform 0.1s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.spec-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 229, 255, 0.03));
  opacity: 0;
  transition: var(--transition-smooth);
}

.spec-card::after {
  content: "0" counter(spec-counter);
  position: absolute;
  bottom: -1rem;
  right: -0.5rem;
  font-family: var(--font-title);
  font-size: 7.5rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.015);
  line-height: 1;
  pointer-events: none;
  transition: var(--transition-smooth);
  z-index: 0;
}

.spec-card:hover {
  border-color: var(--accent-cyan);
  box-shadow: 0 15px 35px var(--accent-cyan-glow);
}

.spec-card:hover::before {
  opacity: 1;
}

.spec-card:hover::after {
  color: rgba(0, 229, 255, 0.03);
  transform: scale(1.05) translateY(-5px) translateZ(10px);
}

.spec-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem;
  color: var(--accent-cyan);
  font-size: 1.8rem;
  transition: var(--transition-smooth);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
  transform: translateZ(20px);
}

.spec-card:hover .spec-icon {
  transform: translateZ(30px) scale(1.1) rotate(5deg);
  border-color: var(--accent-cyan);
  color: var(--bg-deep);
  background: var(--accent-cyan);
  box-shadow: 0 0 20px var(--accent-cyan-glow);
}

.spec-value {
  font-family: var(--font-title);
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  position: relative;
  z-index: 1;
  transform: translateZ(15px);
}

.spec-title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: var(--accent-purple);
  position: relative;
  z-index: 1;
  transform: translateZ(15px);
}

.spec-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  position: relative;
  z-index: 1;
  transform: translateZ(10px);
}

/* CTA de servicio dentro de las tarjetas de Capacidades (Gran Formato / Escaneo 3D) */
.spec-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.3rem;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-pill, 100px);
  font-family: var(--font-title);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none;
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 229, 255, 0.35);
  background: rgba(0, 229, 255, 0.06);
  transition: var(--transition-smooth);
  position: relative;
  z-index: 2;
}
.spec-cta i {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.spec-cta:hover {
  background: rgba(0, 229, 255, 0.14);
  border-color: var(--accent-cyan);
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.18);
  transform: translateY(-2px);
}
.spec-cta:hover i {
  transform: translateX(4px);
}
/* Variante sólida (CTA primario de conversión, p.ej. Escaneo) */
.spec-cta--solid {
  background: var(--neon-gradient);
  color: var(--bg-deep);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(0, 229, 255, 0.22);
}
.spec-cta--solid:hover {
  border-color: transparent;
  box-shadow: 0 8px 26px rgba(0, 229, 255, 0.32);
}

/* --- Nuevos Estilos del Visor 3D y Flujo de Scroll (Timeline) --- */
#capacidades {
  position: relative;
  overflow: visible;
}

.specs-3d-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Desktop: confinar la decoración WebGL (curva/fotón/partículas) a la franja
   superior (cabecera + fila de marcadores). El degradado de máscara desvanece
   el canvas antes de la fila de tarjetas, para que la spline y el fotón
   (AdditiveBlending) no se vean sobre las tarjetas. En móvil el filamento
   recorre toda la altura, por eso NO se enmascara ahí. */
@media (min-width: 769px) {
  .specs-3d-container {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 440px, transparent 520px);
    mask-image: linear-gradient(to bottom, #000 0, #000 440px, transparent 520px);
  }
}

#specsCanvas3d {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.specs-flow {
  position: relative;
  max-width: 1200px;
  margin: 5rem auto 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 2.5rem;
  padding-left: 0;
  z-index: 1; /* Estar sobre el canvas 3D */
}

.specs-flow-track {
  position: absolute;
  left: 45px;
  right: 45px;
  top: 33px; /* Centrado vertical respecto al dot de 54px + border */
  height: 4px;
  width: auto;
  bottom: auto;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  overflow: hidden;
  z-index: 0; /* Debajo de los marcadores/círculos (que van en steps con transform) */
}

.specs-flow-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, var(--accent-cyan), var(--accent-purple));
  transform-origin: left;
  transform: scaleX(var(--flow-progress, 0));
  transition: transform 0.1s cubic-bezier(0.25, 1, 0.5, 1);
}

.specs-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
  margin-bottom: 0;
  opacity: 0;                                  /* invisible hasta activarse (igual que el Proceso) */
  filter: blur(2px);
  transform: translateY(22px) scale(0.96) translateZ(-40px);
  transform-style: preserve-3d;
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
              filter 1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter, transform;
}

.specs-flow-step:last-child {
  margin-bottom: 0;
}

.specs-flow-step.is-active {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0) scale(1) translateZ(0);
}

.specs-flow-marker {
  position: relative;
  left: auto;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  z-index: 2;
}

.specs-flow-dot {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.specs-flow-step.is-active .specs-flow-dot {
  color: var(--bg-deep);
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  box-shadow: 0 0 25px var(--accent-cyan-glow);
  transform: scale(1.15) rotate(5deg);
}

.specs-flow-content {
  width: 100%;
  /* Estira la tarjeta a la altura del step (= step más alto de la fila) para
     igualar las 4 tarjetas; contenido alineado arriba para que los números
     grandes queden a la misma altura entre tarjetas */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  text-align: center !important;
  padding: 2.2rem 1.8rem !important;
  background: rgba(18, 15, 34, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.specs-flow-content.spec-card::after {
  display: none !important; /* Desactivar numeración vieja del contador CSS */
}

.specs-flow-number {
  position: absolute;
  top: 1.2rem;
  right: 1.5rem;
  font-family: var(--font-title);
  font-size: 2rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.03);
  line-height: 1;
  user-select: none;
  transition: color 0.6s ease;
}

.specs-flow-step.is-active .specs-flow-number {
  color: rgba(0, 229, 255, 0.08);
}

/* Responsividad del Flujo de Scroll (Fallback vertical en móvil) */
@media (max-width: 768px) {
  .specs-flow {
    flex-direction: column;
    padding-left: 65px;
    margin-top: 2.5rem;
    gap: 0;
  }
  .specs-flow-track {
    left: 23px;
    right: auto;
    top: 30px;
    bottom: 30px;
    width: 4px;
    height: auto;
  }
  .specs-flow-progress {
    transform-origin: top;
    transform: scaleY(var(--flow-progress, 0));
    background: linear-gradient(to bottom, var(--accent-cyan), var(--accent-purple));
  }
  .specs-flow-step {
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 2.5rem;
    transform: translateX(20px) scale(0.97);
  }
  .specs-flow-step.is-active {
    transform: translateX(0) scale(1);
  }
  .specs-flow-marker {
    position: absolute;
    left: -65px;
    margin-bottom: 0;
    width: 50px;
    height: 50px;
  }
  .specs-flow-dot {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
  }
  .specs-flow-content {
    /* En móvil el step es flex-row; la tarjeta mide su contenido (no se estira) */
    flex: 0 1 auto;
    display: block;
    text-align: left !important;
    padding: 1.8rem 1.8rem !important;
  }
  .specs-flow-number {
    font-size: 2.2rem;
    top: 1rem;
    right: 1.5rem;
  }
}

/* ==========================================================================
   SECCIÓN: CATÁLOGO INTERACTIVO (TABS & 3D CARDS DE LUJO)
   ========================================================================== */
.catalog-tabs {
  position: relative;
  display: inline-flex;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-glass);
  padding: 0.4rem;
  border-radius: var(--radius-pill);
  margin: 0 auto 4rem;
  justify-content: center;
  z-index: 1;
}

.tab-indicator {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  height: calc(100% - 0.8rem);
  background: var(--neon-gradient);
  border-radius: var(--radius-pill);
  transition: all 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: -1;
  box-shadow: 0 4px 15px rgba(0, 229, 255, 0.25);
  pointer-events: none;
}

.tab-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 0.8rem 1.8rem;
  border-radius: 50px;
  cursor: pointer;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.35s ease;
  z-index: 2;
  outline: none;
}

.tab-btn:hover {
  color: var(--text-primary);
}

.tab-btn.active {
  color: var(--bg-deep) !important;
  background: transparent !important;
  box-shadow: none !important;
}


.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
  perspective: 1000px;
}

/* Tarjeta interactiva 3D con Relief */
.product-card {
  perspective: 1000px;
  cursor: pointer;
  transform-style: preserve-3d;
}

.card-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.1s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
}

.card-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: transparent;
  z-index: 10;
  transition: var(--transition-smooth);
}

.product-card[data-category="iluminacion"]:hover .card-inner::before {
  background: var(--accent-cyan);
  box-shadow: 0 2px 12px var(--accent-cyan-glow);
}

.product-card[data-category="gamer"]:hover .card-inner::before {
  background: var(--accent-purple);
  box-shadow: 0 2px 12px var(--accent-purple-glow);
}

.product-card[data-category="hogar"]:hover .card-inner::before {
  background: hsl(140, 100%, 50%);
  box-shadow: 0 2px 12px hsla(140, 100%, 50%, 0.2);
}

.product-card[data-category="juegos"]:hover .card-inner::before {
  background: hsl(45, 100%, 50%);
  box-shadow: 0 2px 12px hsla(45, 100%, 50%, 0.2);
}

.product-image-container {
  position: relative;
  width: 100%;
  padding-top: 80%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(10px);
  transition: var(--transition-smooth);
}

.product-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.product-card:hover .product-img {
  transform: scale(1.08) translateZ(15px);
}

.product-info {
  padding: 2rem;
  transform: translateZ(25px);
  transition: var(--transition-smooth);
}

.product-category {
  font-family: var(--font-title);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: 0.5rem;
  letter-spacing: 1px;
  transform: translateZ(10px);
}

.product-name {
  font-family: var(--font-title);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  transform: translateZ(15px);
}

.product-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  transform: translateZ(10px);
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-glass);
  padding-top: 1.2rem;
  font-size: 0.9rem;
  transform: translateZ(15px);
}

.product-size {
  color: var(--text-muted);
}

.product-action {
  color: var(--accent-cyan);
  font-family: var(--font-title);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transition-fast);
}

.product-card:hover .product-action {
  color: var(--accent-cyan);
  transform: translateX(3px) translateZ(20px);
}

/* ==========================================================================
   SECCIÓN: PROCESO INTERACTIVO (TIMELINE ESTILO RIEL 3D)
   ========================================================================== */
.timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent-cyan), var(--accent-purple), transparent);
}

.timeline-item {
  display: flex;
  justify-content: flex-end;
  position: relative;
  margin-bottom: 5rem;
  width: 50%;
  padding-right: 3rem;
}

.timeline-item:nth-child(even) {
  align-self: flex-end;
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 3rem;
  margin-left: 50%;
}

.timeline-dot {
  position: absolute;
  top: 10px;
  right: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-deep);
  border: 4px solid var(--accent-cyan);
  z-index: 10;
  box-shadow: 0 0 10px var(--accent-cyan-glow);
  transition: var(--transition-smooth);
}

.timeline-item:nth-child(even) .timeline-dot {
  right: auto;
  left: -10px;
  border-color: var(--accent-purple);
  box-shadow: 0 0 10px var(--accent-purple-glow);
}

.timeline-item:hover .timeline-dot {
  transform: scale(1.3);
  background: var(--text-primary);
}

.timeline-content {
  padding: 2.5rem;
  width: 100%;
  transform: scale(0.95);
  opacity: 0.8;
  transition: var(--transition-smooth);
}

.timeline-item.active .timeline-content {
  transform: scale(1);
  opacity: 1;
}

.timeline-content:hover {
  transform: translateY(-5px) scale(1.02) !important;
  box-shadow: 0 15px 30px rgba(0, 229, 255, 0.15) !important;
  border-color: rgba(0, 229, 255, 0.3) !important;
}

.timeline-item:nth-child(even) .timeline-content:hover {
  box-shadow: 0 15px 30px rgba(170, 51, 255, 0.15) !important;
  border-color: rgba(170, 51, 255, 0.3) !important;
}

.timeline-num {
  font-family: var(--font-title);
  font-size: 2.5rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.05);
  position: absolute;
  top: 1rem;
  right: 2rem;
}

.timeline-item:nth-child(even) .timeline-num {
  right: auto;
  left: 2rem;
}

.timeline-title {
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  color: var(--accent-cyan);
}

.timeline-item:nth-child(even) .timeline-title {
  color: var(--accent-purple);
}

.timeline-text {
  color: var(--text-secondary);
}

/* ==========================================================================
   PROCESO — RECORRIDO HORIZONTAL CINEMATOGRÁFICO (pin + scroll, GSAP)
   ========================================================================== */
#proceso {
  position: relative;
  overflow: hidden;
  padding: 0;
}
.proceso-pin {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2rem, 5vh, 4rem);
  padding: 8rem 0 4rem; /* despeja el header fijo arriba */
  position: relative;
  z-index: 2;
}
.proceso-track {
  display: flex;
  align-items: flex-start;
  gap: clamp(2.5rem, 7vw, 7rem);
  padding: 0 14vw;
  width: max-content;
  position: relative;
  will-change: transform;
}
.proceso-rail {
  position: absolute;
  left: 14vw;
  right: 14vw;
  top: 9px;
  transform: translateY(-50%);
  height: 2px;
  background: rgba(255, 255, 255, 0.07);
  z-index: 0;
}
.proceso-rail-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
  box-shadow: 0 0 14px var(--accent-cyan-glow);
}
.proceso-step {
  position: relative;
  flex: 0 0 auto;
  width: clamp(300px, 32vw, 440px);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}
.proceso-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-deep);
  border: 4px solid var(--accent-cyan);
  box-shadow: 0 0 14px var(--accent-cyan-glow);
  margin-bottom: 2.4rem;
  transition: var(--transition-smooth);
}
.proceso-step.is-active .proceso-dot {
  transform: scale(1.4);
  background: var(--accent-cyan);
  box-shadow: 0 0 22px var(--accent-cyan);
}
.proceso-card {
  width: 100%;
  padding: 2.5rem;
  text-align: left;
  opacity: 0;                                  /* invisible hasta activarse */
  transform: scale(0.94) translateY(22px);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.proceso-step.is-active .proceso-card {
  opacity: 1;                                  /* aparece suavemente (fade + subida) */
  transform: scale(1) translateY(0);
}
.proceso-num {
  font-family: var(--font-title);
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(0, 229, 255, 0.14);
  display: block;
  margin-bottom: 0.6rem;
}
.proceso-title {
  font-family: var(--font-title);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  color: var(--accent-cyan);
}
.proceso-text {
  color: var(--text-secondary);
}
/* Móvil: recorrido vertical (sin pin ni scroll horizontal) */
@media (max-width: 768px) {
  #proceso { padding: 6rem 0; }
  .proceso-pin { min-height: 0; padding: 0; gap: 3rem; }
  .proceso-track {
    flex-direction: column;
    align-items: stretch;
    width: auto;
    padding: 0 1.5rem;
    gap: 2.5rem;
    transform: none !important;
  }
  .proceso-rail { display: none; }
  .proceso-step { width: 100%; align-items: stretch; }
  .proceso-dot { display: none; }
  .proceso-card { opacity: 1; transform: none; }
}

/* ==========================================================================
   SECCIÓN: CONTACTO & FORMULARIO WHATSAPP (LUXURY INTERFACES)
   ========================================================================== */
.contact-info-panel {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.contact-title {
  font-family: var(--font-title);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.contact-desc {
  color: var(--text-secondary);
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  text-decoration: none;
  color: var(--text-secondary);
  transition: var(--transition-fast);
}

.contact-item:hover {
  color: var(--accent-cyan);
  transform: translateX(4px);
}

.contact-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-cyan);
  font-size: 1.2rem;
  transition: var(--transition-fast);
}

.contact-item:hover .contact-icon {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 15px var(--accent-cyan-glow);
  background: var(--accent-cyan);
  color: var(--bg-deep);
}

.contact-form-panel {
  padding: 3.5rem;
}

.form-group {
  margin-bottom: 1.8rem;
}

.form-group label {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
  color: var(--text-secondary);
}

.form-control {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 0.95rem 1.3rem;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: var(--transition-smooth);
}

.form-control:focus {
  outline: none;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.15);
  background: rgba(0, 0, 0, 0.5);
}

textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

.btn-form {
  width: 100%;
  justify-content: center;
  border: none;
}

/* Señales de confianza bajo el formulario */
.form-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  justify-content: center;
  margin-top: 1.25rem;
}
.form-trust li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.form-trust i {
  color: var(--accent-cyan);
  font-size: 0.9rem;
}

/* Tarjeta de Visualización Técnica de Cotización (Blueprint Card - Estilo Spline/Antigravity) */
.blueprint-card {
  position: relative;
  background: radial-gradient(circle at 50% 50%, rgba(0, 229, 255, 0.05) 0%, rgba(11, 15, 25, 0.7) 100%);
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: 20px;
  padding: 2.2rem;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(0, 229, 255, 0.05);
  margin-top: 1.5rem;
  transition: var(--transition-smooth);
}

.blueprint-card:hover {
  border-color: var(--accent-purple);
  box-shadow: 0 20px 40px rgba(170, 51, 255, 0.15), inset 0 0 25px rgba(170, 51, 255, 0.05);
}

.blueprint-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(0, 229, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.04) 1px, transparent 1px);
  background-size: 20px 20px;
  z-index: 1;
}

.blueprint-laser {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
  box-shadow: 0 0 10px var(--accent-cyan);
  z-index: 2;
  animation: laser-scan 4s linear infinite;
}

@keyframes laser-scan {
  0% { top: 0%; }
  50% { top: 100%; }
  100% { top: 0%; }
}

.blueprint-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  height: 100%;
}

.blueprint-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed rgba(0, 229, 255, 0.2);
  padding-bottom: 0.8rem;
}

.blueprint-title {
  font-family: var(--font-title);
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--accent-cyan);
  letter-spacing: 2px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.blueprint-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 10px var(--accent-cyan);
  animation: pulse-glow 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

.blueprint-preview-info {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 0.5rem;
}

.blueprint-field {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}

.blueprint-label {
  color: var(--text-muted);
}

.blueprint-value {
  color: var(--text-primary);
  font-weight: 600;
  text-align: right;
  max-width: 60%;
}

/* Ilustración CSS Holograma de Impresión 3D */
.hologram-visualizer {
  position: relative;
  height: 110px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem 0;
  transform-style: preserve-3d;
  perspective: 400px;
}

.hologram-ring {
  position: absolute;
  width: 90px;
  height: 90px;
  border: 1.5px solid rgba(0, 229, 255, 0.2);
  border-radius: 50%;
  transform: rotateX(70deg) translateZ(-10px);
  animation: spin-hologram 10s linear infinite;
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.05);
}

.hologram-ring.ring-inner {
  width: 50px;
  height: 50px;
  border-color: rgba(170, 51, 255, 0.3);
  animation-duration: 6s;
  animation-direction: reverse;
}

.hologram-object {
  position: absolute;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.3), rgba(170, 51, 255, 0.3));
  border: 1px solid rgba(255, 255, 255, 0.3);
  transform: rotateX(30deg) rotateY(45deg);
  animation: float-hologram 4s ease-in-out infinite;
}

@keyframes spin-hologram {
  0% { transform: rotateX(70deg) rotate(0deg); }
  100% { transform: rotateX(70deg) rotate(360deg); }
}

@keyframes float-hologram {
  0%, 100% { transform: rotateX(35deg) rotateY(45deg) translateY(0px); }
  50% { transform: rotateX(35deg) rotateY(45deg) translateY(-8px); }
}

/* Estilo Bento Grid para Wrapper de Contacto */
.contact-wrapper {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  align-items: stretch;
}

.contact-info-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* PIE DE PÁGINA (FOOTER LUXURY)
   ========================================================================== */

footer {
  border-top: 1px solid var(--border-glass);
  padding: 4rem 0;
  background: var(--bg-dark);
}

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

.footer-text {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ==========================================================================
   ANIMACIONES
   ========================================================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

/* ==========================================================================
   RESPONSIVIDAD Y ADAPTABILIDAD MÓVIL
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-top: 2rem;
  }
  
  .hero-3d-showcase {
    height: 520px;
  }
  
  .contact-wrapper {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* Con 7 ítems el nav se amontona en desktop angosto: pasa a hamburguesa antes (≤1150px) */
@media (max-width: 1150px) {
  .nav-links {
    display: none;
  }
  /* Touch target ≥44px en el menú desplegable (WCAG 2.5.5) */
  .nav-links.active a { min-height: 44px; display: flex; align-items: center; }
  .nav-links.active {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    gap: 1.4rem;
    padding: 1.75rem 2rem;
    background: rgba(11, 15, 25, 0.97);
    border-bottom: 1px solid var(--border-glass);
    border-radius: 0 0 24px 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
  }
  .menu-toggle {
    display: flex;
  }
  .menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }
  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
}

@media (max-width: 768px) {
  html {
    font-size: 15px;
  }

  section {
    padding: 6rem 0;
  }

  .header-nav {
    width: 95%;
    padding: 0.6rem 1.5rem;
    border-radius: 30px;
  }

  .nav-links {
    display: none;
  }

  /* Menú desplegable móvil basado en CSS (funciona en todas las páginas sin JS inline) */
  .nav-links.active {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    gap: 1.4rem;
    padding: 1.75rem 2rem;
    background: rgba(11, 15, 25, 0.97);
    border-bottom: 1px solid var(--border-glass);
    border-radius: 0 0 24px 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
  }

  .menu-toggle {
    display: flex;
  }

  /* Animación del botón hamburguesa a "X" (las páginas con JS inline lo refuerzan) */
  .menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }
  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  .timeline::before {
    left: 2rem;
  }

  .timeline-item {
    width: 100%;
    padding-right: 0;
    padding-left: 4rem;
    margin-bottom: 4rem;
  }

  .timeline-item:nth-child(even) {
    margin-left: 0;
    padding-left: 4rem;
  }

  .timeline-dot {
    left: 1.4rem !important;
    right: auto !important;
  }

  .timeline-item:nth-child(even) .timeline-dot {
    border-color: var(--accent-cyan);
  }

  .timeline-num {
    top: 1rem;
    right: 2rem !important;
    left: auto !important;
  }
  
  .hero-3d-showcase {
    height: 440px;
    margin-top: 2rem;
  }

  /* Evitar el zoom automático de iOS al enfocar campos (fuente >= 16px) */
  .form-control {
    font-size: 16px;
  }

  /* Tabs del catálogo desplazables horizontalmente en móvil */
  .catalog-tabs {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Degradado lateral: afordancia de que hay más pestañas al desplazar */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 92%, transparent 100%);
  }
  .catalog-tabs::-webkit-scrollbar {
    display: none;
  }
  .tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* ==========================================================================
   9. GALERÍA 3D CURVA DE PRODUCTOS (Estilo Phantom.land)
   ========================================================================== */
.catalog-3d-viewport {
  perspective: 1200px;
  width: 100%;
  height: 650px;
  position: relative;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;  /* permite el scroll vertical de la página; el arrastre horizontal lo maneja el JS */
  background: radial-gradient(circle at center, rgba(30, 20, 60, 0.3) 0%, transparent 80%);
  border-radius: 24px;
  box-sizing: border-box;
  /* Degradado lateral: las tarjetas de los bordes se desvanecen como en un carrusel */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.catalog-3d-viewport.has-focused-card {
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

/* ---- Legibilidad de las tarjetas en la galería 3D ---- */
/* Imagen de altura fija para dejar espacio garantizado al texto y a la meta/CTA */
.catalog-grid.is-3d .product-image-container {
  padding-top: 0;
  height: 190px;
}
.catalog-grid.is-3d .product-info {
  padding: 1.5rem;
}
/* En tarjetas NO enfocadas, recortar limpio con elipsis (la enfocada muestra todo con scroll) */
.catalog-grid.is-3d .product-card:not(.focused-card) .product-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.catalog-grid.is-3d .product-card:not(.focused-card) .product-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 1rem;
}

/* Pista de arrastre (se desvanece al primer gesto) */
.catalog-drag-hint {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  background: rgba(11, 15, 25, 0.72);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  pointer-events: none;
  opacity: 0;
  animation: hint-fade-in 0.6s ease 1s forwards;
}
.catalog-drag-hint i {
  color: var(--accent-cyan);
}
.catalog-drag-hint.hidden {
  opacity: 0;
  animation: none;
  transition: opacity 0.4s ease;
}
@keyframes hint-fade-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 0.9; transform: translateX(-50%) translateY(0); }
}

.catalog-3d-viewport:active {
  cursor: grabbing;
}

.catalog-grid.is-3d {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  pointer-events: none;
  margin: 0;
  padding: 0;
}

.catalog-grid.is-3d .product-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 470px;
  margin-left: -160px;
  margin-top: -235px;
  transform-style: preserve-3d;
  pointer-events: auto;
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease, width 0.5s cubic-bezier(0.25, 1, 0.5, 1), height 0.5s cubic-bezier(0.25, 1, 0.5, 1), margin-left 0.5s cubic-bezier(0.25, 1, 0.5, 1), margin-top 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6);
  border-radius: 24px;
}

.catalog-grid.is-3d .product-card.hidden-card {
  opacity: 0 !important;
  pointer-events: none;
  transform: scale3d(0.01, 0.01, 0.01) !important;
}

/* Ajustes responsivos para la Galería 3D */
@media (max-width: 768px) {
  .catalog-3d-viewport {
    height: 540px;
  }
  .catalog-grid.is-3d .product-card {
    width: 280px;
    height: 420px;
    margin-left: -140px;
    margin-top: -210px;
  }
  .catalog-grid.is-3d .product-card.focused-card {
    width: 290px;
    height: 470px;
    margin-left: -145px;
    margin-top: -235px;
  }
  /* Optimización de espacio interno en la tarjeta enfocada en móvil */
  .catalog-grid.is-3d .product-card.focused-card .product-info {
    padding: 1.1rem;
  }
  .catalog-grid.is-3d .product-card.focused-card .product-desc {
    margin-bottom: 0.8rem;
  }
  .catalog-grid.is-3d .product-card.focused-card .product-meta {
    padding-top: 0.8rem;
  }
}

/* Tarjeta enfocada (Modo Detalle) */
.catalog-grid.is-3d .product-card.focused-card {
  z-index: 1000;
  pointer-events: auto;
  width: 320px;
  height: 530px;
  margin-left: -160px;
  margin-top: -265px;
}

.catalog-grid.is-3d .product-card.focused-card .product-info {
  padding: 1.5rem;
}
.catalog-grid.is-3d .product-card.focused-card .product-desc {
  margin-bottom: 1rem;
}
.catalog-grid.is-3d .product-card.focused-card .product-meta {
  padding-top: 1rem;
}

.catalog-grid.is-3d .product-card.focused-card .card-inner {
  border-color: var(--accent-cyan);
  box-shadow: 0 20px 60px rgba(0, 229, 255, 0.25);
  background: rgba(18, 15, 34, 0.95); /* Más oscuro para legibilidad */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 229, 255, 0.3) transparent;
}

/* Estilos de barra de desplazamiento WebKit para la tarjeta enfocada */
.catalog-grid.is-3d .product-card.focused-card .card-inner::-webkit-scrollbar {
  width: 6px;
}
.catalog-grid.is-3d .product-card.focused-card .card-inner::-webkit-scrollbar-track {
  background: transparent;
}
.catalog-grid.is-3d .product-card.focused-card .card-inner::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, 0.3);
  border-radius: 3px;
}
.catalog-grid.is-3d .product-card.focused-card .card-inner::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 229, 255, 0.6);
}

/* Botón de cerrar para la tarjeta enfocada */
.product-card .close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background 0.3s ease;
}

.product-card.focused-card .close-btn {
  opacity: 1;
  pointer-events: auto;
}

.product-card .close-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  color: var(--accent-cyan);
}

/* Botón Flotante de WhatsApp Sticky */
.whatsapp-sticky {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4), 0 0 0 0px rgba(37, 211, 102, 0.2);
  z-index: 999;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: pulse-whatsapp 2s infinite;
}

.whatsapp-sticky:hover {
  transform: scale(1.1) translateY(-3px);
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6);
  background: #20ba5a;
}

@keyframes pulse-whatsapp {
  0% {
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4), 0 0 0 0px rgba(37, 211, 102, 0.4);
  }
  70% {
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4), 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4), 0 0 0 0px rgba(37, 211, 102, 0);
  }
}

@media (max-width: 768px) {
  .whatsapp-sticky {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 50px;
    height: 50px;
    font-size: 1.8rem;
  }
}

/* Etiqueta del FAB: oculta por defecto (círculo); visible como píldora en desktop */
.whatsapp-sticky-label {
  display: none;
}
@media (min-width: 769px) {
  .whatsapp-sticky {
    width: auto;
    height: 56px;
    padding: 0 1.5rem;
    gap: 0.65rem;
    border-radius: 50px;
    font-size: 1.6rem;
  }
  .whatsapp-sticky-label {
    display: inline;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
  }
}

/* ==========================================================================
   MICRO-INTERACCIONES Y FEEDBACK TÁCTIL
   ========================================================================== */
/* Feedback al pulsar (clave en móvil, donde no existe :hover) */
.btn:active,
.btn-nav:active,
.whatsapp-sticky:active {
  transform: translateY(0) scale(0.97);
}
.tab-btn:active,
.contact-item:active {
  transform: scale(0.97);
}
button:disabled {
  opacity: 0.7;
  cursor: progress;
}

/* Validación del formulario: realce en rosa de marca solo tras interacción */
.form-control:user-invalid {
  border-color: var(--accent-pink);
  box-shadow: 0 0 14px rgba(255, 0, 128, 0.18);
}

/* Botón flotante "volver arriba" (glassmorphism) */
.back-to-top {
  position: fixed;
  bottom: 6.5rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--glass-gradient);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-primary);
  font-size: 1.05rem;
  cursor: pointer;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s, border-color 0.35s ease, box-shadow 0.35s ease;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 18px var(--accent-cyan-glow);
}
@media (max-width: 768px) {
  .back-to-top {
    bottom: 5.5rem;
    right: 1.5rem;
    width: 42px;
    height: 42px;
  }
}

/* ==========================================================================
   ACCESIBILIDAD: INDICADOR DE FOCO POR TECLADO
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Tarjetas de producto y botones de filtro enfocables por teclado */
.product-card:focus-visible,
.tab-btn:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 4px;
}

/* ==========================================================================
   ACCESIBILIDAD: RESPETAR PREFERENCIA DE MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   EXPERIENCIA HORIZONTAL (POC: Hero + Capacidades)
   Escritorio ANCHO (≥1151px): el track se desplaza en X conducido por GSAP (index.js, sección 11).
   Tablet/móvil (≤1150px): .hx-track => display:block, vuelve al flujo vertical normal (sin scroll-jacking).
   ========================================================================== */
@media (min-width: 1151px) {
  .hx-wrap {
    position: relative;
    overflow: hidden;
  }
  /* Backdrop continuo: al estar el wrap anclado (fixed durante el pin), este
     fondo permanece quieto mientras los paneles se deslizan encima. Llena los
     "vacíos" entre secciones con una atmósfera continua (glows + grilla sutil),
     para que el recorrido horizontal se vea ININTERRUMPIDO, sin cortes. */
  .hx-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--bg-deep);
    background-image:
      radial-gradient(ellipse 58% 72% at 26% 30%, hsla(275, 100%, 60%, 0.22) 0%, transparent 60%),
      radial-gradient(ellipse 58% 72% at 74% 70%, hsla(180, 100%, 50%, 0.18) 0%, transparent 60%),
      radial-gradient(ellipse 62% 72% at 50% 48%, hsla(258, 90%, 34%, 0.24) 0%, transparent 66%),
      radial-gradient(circle at center, rgba(255, 255, 255, 0.05) 1px, transparent 1.6px),
      linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 38px 38px, 76px 76px, 76px 76px;
    /* Fundir el backdrop a transparente arriba y abajo para que su borde no
       choque con el fondo del resto del sitio (p.ej. el Catálogo debajo). Así la
       transición wrap -> secciones siguientes se ve natural, sin costura. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 11%, #000 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 11%, #000 80%, transparent 100%);
  }
  .hx-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
    position: relative;
    z-index: 1;
  }
  /* Las secciones del track son transparentes para que el backdrop continuo se
     vea a través de sus zonas "vacías" durante el deslizamiento. */
  .hx-track > section {
    background: transparent;
  }
  /* La viñeta oscura del hero (.hero-overlay termina en --bg-deep, opaca)
     tapaba el backdrop continuo SOLO en el panel del hero, creando la costura
     de tono con Capacidades. En el momento horizontal la quitamos (dejamos solo
     los glows suaves) para que el fondo se vea unificado en todo el recorrido. */
  .hx-track .hero-overlay {
    background:
      radial-gradient(ellipse 55% 65% at var(--mouse-x, 60%) var(--mouse-y, 50%), hsla(180, 100%, 50%, 0.05) 0%, transparent 70%),
      radial-gradient(ellipse 45% 55% at var(--mouse-x, 65%) var(--mouse-y, 55%), hsla(275, 100%, 60%, 0.06) 0%, transparent 65%);
  }
  /* En el momento horizontal se quitó la viñeta oscura del overlay (evita la costura
     con Capacidades). Para garantizar contraste AA del texto sobre el 3D, le damos
     una sombra: contenida al texto, sin recrear la costura. */
  .hx-track .hero-tagline,
  .hx-track .hero-title,
  .hx-track .hero-description {
    text-shadow: 0 2px 18px rgba(3, 7, 17, 0.72);
  }
  .hx-track > section {
    flex: 0 0 100vw;
    width: 100vw;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
  }
  /* Capacidades como panel: compactar y centrar para que quepa en 100vh,
     dejando espacio para el nav fijo. */
  .hx-track > #capacidades {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 4.5rem;
    padding-bottom: 1.5rem;
  }
  .hx-track > #capacidades .section-header {
    margin-bottom: 1.5rem;
  }
  .hx-track > #capacidades .specs-flow {
    margin-top: 1.5rem;
  }
  /* En pantallas de poca altura, compactar un poco las tarjetas para que no se corten */
  @media (max-height: 860px) {
    .hx-track > #capacidades .spec-desc {
      font-size: 0.86rem;
      line-height: 1.45;
    }
  }
}

@media (max-width: 768px) {
  /* Móvil: sin track horizontal, flujo vertical clásico */
  .hx-wrap,
  .hx-track {
    display: block;
  }
}