:root {
  /* ── Colores de acento (se mantienen) ── */
  --cyan:   #0891b2;       /* cyan más oscuro para legibilidad en fondo claro */
  --cyan-glow: #00d4ff;    /* versión brillante para glows */
  --purple: #7c3aed;
  --violet: #9333ea;

  /* ── Paleta Apple/Samsung light ── */
  --bg:       #f5f5f7;     /* gris Apple */
  --bg-white: #ffffff;
  --bg-alt:   #f5f5f7;
  --text-h:   #1d1d1f;     /* casi negro Apple */
  --text-b:   #6e6e73;     /* gris medio Apple */
  --text-m:   #86868b;
  --border-l: rgba(0,0,0,0.08);

  /* mantener las vars dark para los paneles y footer que siguen oscuros */
  --dark:  #1d1d1f;
  --dark2: #2d2d2f;
  --dark3: #111113;
  --glass: rgba(0,0,0,0.03);
  --border: rgba(0,0,0,0.10);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text-h); font-family: 'Inter', sans-serif; overflow-x: hidden; }

/* canvas de partículas — visible en fondo claro */
#canvas { opacity: 1; }

/* ── PROGRESS BAR ── */
#progress-bar {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  z-index: 9999; transition: width 0.1s linear;
  box-shadow: 0 0 8px rgba(0,212,255,0.6);
}

#canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 4rem;
  background: rgba(255,255,255,0.82); backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-l);
  transition: padding 0.3s;
}
nav.scrolled { padding: 0.8rem 4rem; }
.nav-logo {
  font-family: 'Orbitron', monospace; font-size: 1.5rem; font-weight: 900;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 4px;
  text-decoration: none;
}
.nav-links { display: flex; gap: 2.5rem; list-style: none; }
.nav-links a {
  color: #374151; text-decoration: none; font-size: 0.85rem;
  letter-spacing: 1px; text-transform: uppercase; transition: color 0.3s;
  position: relative; padding-bottom: 4px;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px;
  background: var(--cyan); transition: width 0.3s;
}
.nav-links a:hover { color: var(--cyan); }
.nav-links a:hover::after { width: 100%; }
.nav-links a.active { color: var(--cyan); }
.nav-links a.active::after { width: 100%; }

.nav-cta {
  padding: 0.55rem 1.6rem; border: 1.5px solid rgba(0,0,0,0.2); color: var(--text-h);
  text-decoration: none; font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase;
  font-family: 'Orbitron', monospace; transition: all 0.3s; position: relative; overflow: hidden;
  border-radius: 50px; background: transparent;
}
.nav-cta::before { content: ''; position: absolute; inset: 0; border-radius: 50px; background: var(--text-h); transform: scaleX(0); transform-origin: left; transition: transform 0.3s; z-index: 0; }
.nav-cta span { position: relative; z-index: 1; }
.nav-cta:hover { color: #fff; border-color: var(--text-h); }
.nav-cta:hover::before { transform: scaleX(1); }

/* ── HAMBURGER ── */
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px; cursor: pointer;
  padding: 4px; background: none; border: none;
}
.nav-hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--text-h); transition: all 0.3s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE MENU ── */
.mobile-menu {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(6,6,16,0.97); backdrop-filter: blur(20px);
  z-index: 90; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.5rem; opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.mobile-menu.open { opacity: 1; pointer-events: all; }
.mobile-menu a {
  font-family: 'Orbitron', monospace; font-size: 1.8rem; font-weight: 700;
  color: #94a3b8; text-decoration: none; letter-spacing: 4px; text-transform: uppercase;
  transition: color 0.3s;
}
.mobile-menu a:hover { color: var(--cyan); }
.mobile-menu .mob-cta {
  padding: 1rem 3rem; border: 1px solid var(--cyan); color: var(--cyan);
  font-size: 0.9rem;
}

/* ── HERO ── */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; z-index: 1; background: var(--bg-white); }
.hero-inner { max-width: 900px; padding: 0 2rem; }
.logo-zz { width: 140px; height: 140px; margin: 0 auto 2.5rem; position: relative; }
.logo-zz svg { width: 100%; height: 100%; }
.hero-tag {
  display: inline-block; font-size: 0.75rem; letter-spacing: 4px; text-transform: uppercase;
  color: var(--cyan); border: 1px solid rgba(8,145,178,0.3); padding: 0.4rem 1.5rem;
  border-radius: 50px; margin-bottom: 2rem; animation: fadeUp 0.8s ease both;
}
.hero-title {
  font-family: 'Orbitron', monospace; font-size: clamp(3.5rem,8vw,7rem); font-weight: 900;
  line-height: 1; letter-spacing: 8px;
  background: linear-gradient(135deg, var(--text-h) 10%, var(--cyan) 55%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: fadeUp 0.9s 0.1s ease both; position: relative;
}
.hero-title .glitch { position: relative; display: inline-block; }
.hero-title .glitch::before,
.hero-title .glitch::after {
  content: attr(data-text); position: absolute; top: 0; left: 0;
  background: linear-gradient(135deg, #fff 20%, var(--cyan) 60%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-title .glitch::before { animation: glitch1 4s infinite; clip-path: polygon(0 0,100% 0,100% 35%,0 35%); transform: translate(-3px,0); }
.hero-title .glitch::after  { animation: glitch2 4s infinite; clip-path: polygon(0 65%,100% 65%,100% 100%,0 100%); transform: translate(3px,0); }
@keyframes glitch1 { 0%,90%,100%{transform:translate(-3px,0);opacity:0;} 92%{transform:translate(-3px,-2px);opacity:0.7;} 94%{transform:translate(3px,0);opacity:0.5;} 96%{transform:translate(0,2px);opacity:0.7;} }
@keyframes glitch2 { 0%,90%,100%{transform:translate(3px,0);opacity:0;} 93%{transform:translate(3px,2px);opacity:0.7;} 95%{transform:translate(-3px,0);opacity:0.5;} 97%{transform:translate(0,-2px);opacity:0.6;} }
.hero-sub {
  font-size: 1rem; letter-spacing: 6px; text-transform: uppercase; color: var(--text-m);
  margin: 1rem 0 0.5rem; animation: fadeUp 1s 0.2s ease both;
  min-height: 1.5em;
}
.hero-desc { font-size: 1.1rem; color: var(--text-b); max-width: 600px; margin: 1.5rem auto 3rem; line-height: 1.8; animation: fadeUp 1s 0.3s ease both; }
.hero-btns { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; animation: fadeUp 1s 0.4s ease both; }
/* ── BOTONES estilo pill ── */
.btn-primary,
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.85rem 2.4rem;
  border-radius: 50px;                 /* pill shape */
  font-family: 'Orbitron', monospace; font-size: 0.78rem;
  font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s, color 0.3s, border-color 0.3s;
  position: relative; overflow: hidden;
}
.btn-primary:hover,
.btn-secondary:hover { transform: translateY(-3px); }

/* Principal — relleno sólido oscuro, estilo Apple */
.btn-primary {
  background: var(--text-h);
  border: 1.5px solid var(--text-h);
  color: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.btn-primary::before {
  content: ''; position: absolute; inset: 0; border-radius: 50px;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  opacity: 0; transition: opacity 0.35s;
}
.btn-primary:hover {
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 24px rgba(8,145,178,0.35);
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary span { position: relative; z-index: 1; }

/* Secundario — borde gris suave sobre blanco */
.btn-secondary {
  background: transparent;
  border: 1.5px solid rgba(0,0,0,0.18);
  color: var(--text-h);
  box-shadow: none;
}
.btn-secondary:hover {
  background: rgba(147,51,234,0.06);
  border-color: var(--violet);
  color: var(--violet);
  box-shadow: 0 4px 16px rgba(147,51,234,0.15);
}
.hero-scroll {
  position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: var(--text-m); font-size: 0.7rem; letter-spacing: 3px; text-transform: uppercase;
}
.scroll-line { width: 1px; height: 60px; background: linear-gradient(to bottom,var(--cyan),transparent); animation: scrollPulse 2s infinite; }
@keyframes scrollPulse { 0%,100%{opacity:1;} 50%{opacity:0.2;} }

/* ── SECTION ── */
section { position: relative; z-index: 1; }
.section-inner { max-width: 1200px; margin: 0 auto; padding: 7rem 2rem; }
.section-tag { font-size: 0.7rem; letter-spacing: 4px; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.8rem; }
.section-title { font-family: 'Orbitron', monospace; font-size: clamp(2rem,4vw,3.5rem); font-weight: 700; line-height: 1.1; margin-bottom: 1.5rem; color: var(--text-h); }
.grad-text { background: linear-gradient(135deg, var(--text-h), var(--cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.section-desc { color: var(--text-b); max-width: 560px; line-height: 1.8; margin-bottom: 4rem; }

/* ── SERVICES — estilo Apple Card ── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}
.service-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: default;
  transition: transform 0.4s cubic-bezier(.25,.8,.25,1), box-shadow 0.4s;
  box-shadow: 0 2px 20px rgba(0,0,0,0.12);
}
.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 40px 80px rgba(0,0,0,0.22);
}

/* cuerpo superior — texto */
.sc-body { padding: 2rem 2rem 1.4rem; flex-shrink: 0; }
.sc-tag {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: #94a3b8; display: block; margin-bottom: 0.9rem;
}
.service-card h3 {
  font-family: 'Orbitron', monospace; font-size: 1.45rem; font-weight: 900;
  color: #111827; line-height: 1.2; margin-bottom: 0.75rem; letter-spacing: 0;
}
.service-card h3 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.service-card p { color: #6b7280; line-height: 1.7; font-size: 0.88rem; }
.service-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.2rem; }
.tag {
  font-size: 0.62rem; letter-spacing: 1px; text-transform: uppercase;
  padding: 0.25rem 0.75rem; border-radius: 20px;
  background: rgba(0,212,255,0.07); color: #0891b2;
  border: 1px solid rgba(0,212,255,0.18);
  transition: background 0.25s;
}
.service-card:hover .tag { background: rgba(0,212,255,0.14); }

/* área visual inferior */
.sc-visual {
  min-height: 190px; flex: 1;
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
}
.sc-vis-icon {
  font-size: 7.5rem; line-height: 1;
  transform: translateY(18%) scale(1.1);
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.25));
  transition: transform 0.45s cubic-bezier(.25,.8,.25,1);
  user-select: none; position: relative; z-index: 2;
}
.service-card:hover .sc-vis-icon {
  transform: translateY(8%) scale(1.25);
}
.sc-vis-glow {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 0.4s;
}
.service-card:hover .sc-vis-glow { opacity: 1; }

/* colores por tarjeta */
.sv-web  { background: linear-gradient(160deg,#bae6fd 0%,#7dd3fc 100%); }
.sv-app  { background: linear-gradient(160deg,#ddd6fe 0%,#c4b5fd 100%); }
.sv-ia   { background: linear-gradient(160deg,#99f6e4 0%,#5eead4 100%); }
.sv-cons { background: linear-gradient(160deg,#bfdbfe 0%,#93c5fd 100%); }
.sv-perf { background: linear-gradient(160deg,#fde68a 0%,#fbbf24 100%); }
.sv-host { background: linear-gradient(160deg,#bbf7d0 0%,#6ee7b7 100%); }

.sv-web  .sc-vis-glow { background: radial-gradient(ellipse at 50% 80%, rgba(14,165,233,0.3), transparent 70%); }
.sv-app  .sc-vis-glow { background: radial-gradient(ellipse at 50% 80%, rgba(124,58,237,0.3), transparent 70%); }
.sv-ia   .sc-vis-glow { background: radial-gradient(ellipse at 50% 80%, rgba(20,184,166,0.3), transparent 70%); }
.sv-cons .sc-vis-glow { background: radial-gradient(ellipse at 50% 80%, rgba(59,130,246,0.3), transparent 70%); }
.sv-perf .sc-vis-glow { background: radial-gradient(ellipse at 50% 80%, rgba(245,158,11,0.3), transparent 70%); }
.sv-host .sc-vis-glow { background: radial-gradient(ellipse at 50% 80%, rgba(16,185,129,0.3), transparent 70%); }

/* tarjetas-enlace (Negocios, hub) — mismo look que service-card */
a.service-card { cursor: pointer; text-decoration: none; }
.lineas-cta { font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--cyan); margin-top: 1rem; display: inline-block; }

/* ── HUB — 2 tarjetas grandes (Tecnología / Negocios) ── */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 2rem;
}
.hub-card .sc-body { padding: 2.6rem 2.6rem 1.8rem; }
.hub-card .sc-tag { font-size: 0.78rem; }
.hub-card h3 { font-size: 2.1rem; }
.hub-card p { font-size: 0.95rem; }
.hub-card .sc-visual { min-height: 280px; }
.hub-card .sc-vis-icon { font-size: 11rem; }

/* la tarjeta de "Tecnologia a medida" lleva foto real en vez del
   emoji + degradado plano: la misma imagen del panel parallax 1,
   con el mismo tinte azul de marca encima para que no desentone. */
.hub-card .sv-web {
  background-image:
    linear-gradient(160deg, rgba(186,230,253,.16) 0%, rgba(14,165,233,.2) 100%),
    url('img/panel-tecnologia.jpg');
  background-size: auto, cover;
  background-position: center, center 35%;
  background-repeat: no-repeat, no-repeat;
}
.hub-card .sv-web .sc-vis-icon { display: none; }

/* "Lineas de negocio": handshake humano-IA, con tinte lila a juego. */
.hub-card .sv-app {
  background-image:
    linear-gradient(160deg, rgba(221,214,254,.2) 0%, rgba(124,58,237,.24) 100%),
    url('img/panel-negocio.jpg');
  background-size: auto, cover;
  background-position: center, center 30%;
  background-repeat: no-repeat, no-repeat;
}
.hub-card .sv-app .sc-vis-icon { display: none; }

/* ── PAGE HERO — cabecera reducida para subpáginas (tecnología / negocios) ── */
.page-hero {
  position: relative; min-height: 60vh; display: flex; align-items: center; justify-content: center;
  text-align: center; z-index: 1; background: var(--bg-white); padding: 8rem 2rem 4rem;
}
.page-hero-inner { max-width: 800px; }
.page-back {
  display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem;
  letter-spacing: 2px; text-transform: uppercase; color: var(--text-m); text-decoration: none;
  margin-bottom: 1.6rem; transition: color 0.3s;
}
.page-back:hover { color: var(--cyan); }
.page-hero-title {
  font-family: 'Orbitron', monospace; font-size: clamp(2.4rem,6vw,4.5rem); font-weight: 900;
  line-height: 1.05; letter-spacing: 2px; margin-bottom: 1.2rem;
  background: linear-gradient(135deg, var(--text-h) 10%, var(--cyan) 55%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.page-hero-desc { font-size: 1.05rem; color: var(--text-b); max-width: 620px; margin: 0 auto; line-height: 1.8; }

/* ── CTA BAND — franja de cierre en subpáginas, con foto real de fondo ── */
.cta-band {
  text-align: center;
  background-image:
    linear-gradient(rgba(8,8,18,.78), rgba(8,8,18,.88)),
    url('img/hero-tecnologia.jpg');
  background-position: center, center 40%;
  background-size: auto, cover;
  background-repeat: no-repeat, no-repeat;
}
.cta-band .section-inner { padding: 5rem 2rem; }
.cta-band h2 {
  font-family: 'Orbitron', monospace; font-size: clamp(1.6rem,3.5vw,2.6rem); font-weight: 700;
  color: #fff; margin-bottom: 1rem;
}
.cta-band p { color: #94a3b8; margin-bottom: 2rem; }

/* ── STATS ── */
.stats { background: var(--bg-white); border-top: 1px solid var(--border-l); border-bottom: 1px solid var(--border-l); }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.stat-item { text-align: center; padding: 4rem 2rem; border-right: 1px solid var(--border-l); }
.stat-item:last-child { border-right: none; }
.stat-num { font-family: 'Orbitron', monospace; font-size: clamp(2.5rem,5vw,4rem); font-weight: 900; background: linear-gradient(135deg,var(--cyan),var(--violet)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; display: block; }
.stat-label { color: var(--text-m); font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; margin-top: 0.5rem; }

/* ── PROCESO ── */
.proceso { background: var(--bg-alt); }
.proceso-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 0;
  border: 1px solid var(--border-l); margin-top: 3rem;
  border-radius: 18px; overflow: hidden;
  background: var(--bg-white);
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}
.proceso-step {
  padding: 2.5rem 2rem; border-right: 1px solid var(--border-l);
  position: relative; overflow: hidden; transition: background 0.3s;
}
.proceso-step:last-child { border-right: none; }
.proceso-step:hover { background: rgba(8,145,178,0.04); }
.proceso-step::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transform: scaleX(0); transition: transform 0.4s; transform-origin: left;
}
.proceso-step:hover::before { transform: scaleX(1); }
.proceso-num {
  font-family: 'Orbitron', monospace; font-size: 3.5rem; font-weight: 900;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1; margin-bottom: 1rem; display: block;
}
.proceso-step h4 {
  font-family: 'Orbitron', monospace; font-size: 0.85rem; font-weight: 700;
  color: var(--text-h); margin-bottom: 0.75rem; letter-spacing: 1px;
}
.proceso-step p { color: var(--text-b); font-size: 0.85rem; line-height: 1.7; }
.proceso-icon { font-size: 1.8rem; margin-bottom: 0.75rem; display: block; }

/* ── WHY ── */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.why-features { display: flex; flex-direction: column; gap: 1.2rem; }
.why-feature {
  display: flex; gap: 1.5rem; align-items: flex-start; padding: 1.5rem;
  border: 1px solid var(--border-l); border-radius: 14px;
  background: var(--bg-white);
  transition: border-color 0.3s, box-shadow 0.3s;
  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}
.why-feature:hover { border-color: rgba(8,145,178,0.25); box-shadow: 0 8px 32px rgba(8,145,178,0.08); }
.why-icon { width: 48px; height: 48px; flex-shrink: 0; border: 1px solid rgba(8,145,178,0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; background: rgba(8,145,178,0.06); transition: background 0.3s; }
.why-feature:hover .why-icon { background: rgba(8,145,178,0.12); }
.why-feature h4 { font-family: 'Orbitron', monospace; font-size: 0.85rem; color: var(--text-h); margin-bottom: 0.4rem; }
.why-feature p { color: var(--text-b); font-size: 0.85rem; line-height: 1.6; }
.terminal { background: #080812; border: 1px solid var(--border); overflow: hidden; }
.terminal-header { background: rgba(255,255,255,0.04); padding: 0.8rem 1.2rem; display: flex; gap: 0.5rem; align-items: center; border-bottom: 1px solid var(--border); }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.red { background: #ff5f56; } .dot.yellow { background: #ffbd2e; } .dot.green { background: #27c93f; }
.terminal-title { color: #475569; font-size: 0.7rem; margin-left: 0.5rem; letter-spacing: 1px; }
.terminal-body { padding: 2rem; font-family: 'Courier New', monospace; font-size: 0.82rem; line-height: 2; }
.t-comment { color: #475569; } .t-key { color: var(--cyan); } .t-val { color: var(--violet); } .t-str { color: #f59e0b; }
.t-cursor { display: inline-block; width: 8px; height: 1em; background: var(--cyan); vertical-align: middle; animation: blink 1s infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }

/* ── CONTACT ── */
.contact { background: var(--bg-alt); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.contact-info p { color: var(--text-b); line-height: 1.8; margin-bottom: 2rem; }
.contact-links { display: flex; flex-direction: column; gap: 1rem; }
.contact-link { display: flex; align-items: center; gap: 1rem; color: var(--text-b); text-decoration: none; font-size: 0.9rem; transition: color 0.3s; }
.contact-link:hover { color: var(--cyan); }
.contact-link-icon { width: 36px; height: 36px; border: 1px solid var(--border-l); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; background: var(--bg-white); transition: background 0.3s, border-color 0.3s; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
.contact-link:hover .contact-link-icon { background: rgba(8,145,178,0.08); border-color: rgba(8,145,178,0.3); }
.form-group { margin-bottom: 1.2rem; }
.form-group label { display: block; font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-m); margin-bottom: 0.5rem; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; background: var(--bg-white); border: 1px solid var(--border-l);
  color: var(--text-h); padding: 0.9rem 1rem; font-family: 'Inter', sans-serif; font-size: 0.9rem;
  transition: border-color 0.3s, box-shadow 0.3s; outline: none; resize: none; appearance: none;
  border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.form-group select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2300d4ff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px; }
.form-group select option { background: var(--dark2); color: #e2e8f0; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(8,145,178,0.12); }
.form-group textarea { height: 120px; }
.form-group .field-error { color: #f87171; font-size: 0.7rem; margin-top: 0.3rem; letter-spacing: 1px; }
.form-submit { margin-top: 0.5rem; font-size: 0.8rem; letter-spacing: 3px; }

.php-alert {
  padding: 1rem 1.4rem; margin-bottom: 1.4rem;
  font-size: 0.82rem; letter-spacing: 0.5px; border: 1px solid;
  display: flex; align-items: center; gap: 0.7rem;
}
.php-alert.success { background: rgba(16,185,129,0.07); border-color: rgba(16,185,129,0.3); color: #6ee7b7; }
.php-alert.error   { background: rgba(248,113,113,0.07); border-color: rgba(248,113,113,0.3); color: #fca5a5; }

/* ── FOOTER — se mantiene oscuro como Apple ── */
footer {
  background: #1d1d1f; border-top: 1px solid rgba(255,255,255,0.08); padding: 3rem 4rem;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; z-index: 1; position: relative;
}
.footer-logo { font-family: 'Orbitron', monospace; font-size: 1.2rem; font-weight: 900; background: linear-gradient(135deg,var(--cyan-glow),var(--violet)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 4px; }
.footer-copy { color: #6e6e73; font-size: 0.8rem; letter-spacing: 1px; }
.footer-links { display: flex; gap: 2rem; }
.footer-links a { color: #6e6e73; text-decoration: none; font-size: 0.8rem; transition: color 0.3s; }
.footer-links a:hover { color: #fff; }

/* ── FLOATING BUTTONS ── */
.fab-group {
  position: fixed; bottom: 2rem; right: 2rem;
  display: flex; flex-direction: column; gap: 0.75rem;
  z-index: 200;
}
.fab {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; cursor: pointer; border: none;
  transition: transform 0.3s, box-shadow 0.3s, opacity 0.3s;
  text-decoration: none;
}
.fab:hover { transform: scale(1.1); }
.fab-wa {
  background: #25D366; color: white;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
}
.fab-wa:hover { box-shadow: 0 8px 30px rgba(37,211,102,0.6); }
.fab-top {
  background: var(--dark3); color: var(--cyan);
  border: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0,212,255,0.15);
  opacity: 0; pointer-events: none;
}
.fab-top.visible { opacity: 1; pointer-events: all; }
.fab-top:hover { box-shadow: 0 8px 30px rgba(0,212,255,0.3); }

.orb { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; z-index: 0; }
.orb-cyan { background: rgba(0,212,255,0.07); }
.orb-purple { background: rgba(124,58,237,0.07); }

/* ── PARALLAX PANELS ── */
.parallax-panel {
  position: relative; overflow: hidden;
  height: 55vh; min-height: 320px;
  z-index: 1;
}
.parallax-inner {
  position: absolute;
  inset: -15%;          /* más grande que el contenedor para el efecto scale */
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
}
.parallax-inner-bg {
  position: absolute; inset: 0;
}
/* Panel 1 — Tech Grid, con foto real de fondo (fotografia + degradado
   de marca encima para que el texto en blanco siga siendo legible) */
.panel-tech .parallax-inner-bg {
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(0,212,255,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 30%, rgba(124,58,237,0.28) 0%, transparent 60%),
    linear-gradient(rgba(8,8,18,.68), rgba(8,8,18,.8)),
    url('img/panel-tecnologia.jpg');
  background-position: center, center, center, center 30%;
  background-size: auto, auto, auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}
.panel-tech .parallax-inner-bg::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,212,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
}
/* Panel 2 — Glow Mesh, con foto real de fondo */
.panel-mesh .parallax-inner-bg {
  background-image:
    radial-gradient(ellipse 70% 70% at 70% 60%, rgba(168,85,247,0.3) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 25% 40%, rgba(0,212,255,0.18) 0%, transparent 55%),
    linear-gradient(rgba(10,10,20,.7), rgba(10,10,20,.82)),
    url('img/panel-prototipo.jpg');
  background-position: center, center, center, center 25%;
  background-size: auto, auto, auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}
.panel-mesh .parallax-inner-bg::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(0,212,255,0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}
.panel-text {
  position: relative; z-index: 2;
  text-align: center; padding: 2rem;
}
.panel-text .p-tag {
  font-size: 0.7rem; letter-spacing: 5px; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 1.2rem; display: block;
  opacity: 0.8;
}
.panel-text h2 {
  font-family: 'Orbitron', monospace;
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 900; line-height: 1.05;
  background: linear-gradient(135deg, #fff 20%, var(--cyan) 70%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: 4px;
}
.panel-text p {
  color: #64748b; font-size: 1rem; margin-top: 1rem; letter-spacing: 1px;
}
/* línea decorativa horizontal del panel */
.panel-line {
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  z-index: 2;
}
.panel-line-top {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--violet), transparent);
  z-index: 2;
}

@keyframes fadeUp { from{opacity:0;transform:translateY(30px);} to{opacity:1;transform:translateY(0);} }
/* .reveal ya no usa CSS transitions — GSAP controla todas las entradas */
.reveal { opacity: 1; }

/* ── RESPONSIVE ── */
@media(max-width:1000px) {
  .proceso-grid { grid-template-columns: repeat(2,1fr); }
  .proceso-step:nth-child(2) { border-right: none; }
  .proceso-step:nth-child(3) { border-top: 1px solid var(--border); }
}

@media(max-width:900px) {
  nav { padding: 1rem 1.5rem; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .mobile-menu { display: flex; }
  .why-grid, .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .stat-item:nth-child(2) { border-right: none; }
  /* el indicador "Scroll" queda anclado al fondo de .hero (100vh) y en
     pantallas estrechas el contenido del hero es mas alto que ancho de
     sobra: se solapa con el boton "Empezar proyecto". Se oculta aqui en
     vez de reposicionar, es un adorno de escritorio, no hace falta en
     movil donde el swipe para bajar ya es el gesto nativo. */
  .hero-scroll { display: none; }
  .hero-inner { padding-bottom: 2rem; }
}
@media(max-width:600px) {
  .proceso-grid { grid-template-columns: 1fr; }
  .proceso-step { border-right: none !important; border-top: 1px solid var(--border); }
  .proceso-step:first-child { border-top: none; }
}
@media(max-width:500px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-item { border-right: none; border-bottom: 1px solid var(--border); }
  footer { flex-direction: column; text-align: center; padding: 2rem 1.5rem; }
  .fab-group { bottom: 1.5rem; right: 1.5rem; }
}