/* ==========================================================================
   GoFix — Sistema visual y de movimiento
   Tailwind (CDN) aporta el layout. Este archivo aporta identidad:
   profundidad, textura, iluminación y movimiento.
   ========================================================================== */

:root{
  --charcoal:#222B30;
  --charcoal-deep:#1A2226;
  --cyan:#00A8CC;
  --cyan-bright:#22C9E8;
  --bg-tech:#F8FAFC;
  --card-dark:#1E262B;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.4, 0.64, 1);
}

*{ scrollbar-color: #00A8CC #222B30; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', ui-sans-serif, system-ui, sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, .display{
  font-family:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
}

::selection{ background:var(--cyan); color:#FFFFFF; }

/* ==========================================================================
   1. PROFUNDIDAD: glows, textura, viñeta
   ========================================================================== */

/* Orbes de luz difusa. Dan la sensación de "iluminación de estudio"
   que distingue una web con presupuesto de una plantilla plana. */
.glow{
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.55;
}
.glow--cyan{ background: radial-gradient(circle, rgba(0,168,204,0.55) 0%, rgba(0,168,204,0) 70%); }
.glow--deep{ background: radial-gradient(circle, rgba(0,120,160,0.45) 0%, rgba(0,120,160,0) 70%); }

/* Deriva lenta de los orbes: movimiento ambiental, nunca protagonista */
.glow--drift{ animation: glow-drift 18s ease-in-out infinite alternate; }
.glow--drift-slow{ animation: glow-drift 26s ease-in-out infinite alternate-reverse; }
@keyframes glow-drift{
  from{ transform: translate3d(0,0,0) scale(1); }
  to  { transform: translate3d(40px,-30px,0) scale(1.12); }
}

/* Grano fino sobre los bloques oscuros: rompe el degradado plano */
.noise-overlay::before{
  content:'';
  position:absolute;
  inset:0;
  background-image: url('../img/texture-noise.png');
  background-repeat: repeat;
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events:none;
}

/* Retícula tipo placa base */
.pcb-grid{
  background-image:
    linear-gradient(rgba(0,168,204,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,168,204,0.08) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 75%);
}

/* ==========================================================================
   2. ILUSTRACIÓN DE PLACA (SVG animado)
   ========================================================================== */

.trace-line{ stroke: var(--cyan); stroke-width: 1.5; fill: none; opacity: 0.3; }
.trace-node{ fill: var(--cyan); opacity: 0.55; }

/* Pulso de datos que recorre una traza */
.trace-pulse{
  stroke: var(--cyan-bright);
  stroke-width: 2.5;
  fill: none;
  stroke-dasharray: 14 400;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(34,201,232,0.9));
  animation: pulse-flow 5s linear infinite;
}
.trace-pulse.delay-1{ animation-delay: 1.2s; }
.trace-pulse.delay-2{ animation-delay: 2.4s; }
.trace-pulse.delay-3{ animation-delay: 3.6s; }

@keyframes pulse-flow{
  0%   { stroke-dashoffset: 414; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Dibujo progresivo de las trazas al entrar en pantalla */
.trace-draw{
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}
.is-visible .trace-draw{
  animation: trace-draw 1.6s var(--ease-out-expo) forwards;
}
.is-visible .trace-draw.d1{ animation-delay: 0.15s; }
.is-visible .trace-draw.d2{ animation-delay: 0.3s; }
.is-visible .trace-draw.d3{ animation-delay: 0.45s; }
@keyframes trace-draw{ to{ stroke-dashoffset: 0; } }

/* Punto de avería localizada: anillo que late */
.fault-ring{
  transform-origin: center;
  animation: fault-pulse 2.4s ease-out infinite;
}
.fault-ring.r2{ animation-delay: 0.8s; }
@keyframes fault-pulse{
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Chips que respiran suavemente */
.chip-breathe{ animation: chip-breathe 4s ease-in-out infinite; }
.chip-breathe.b2{ animation-delay: 1.3s; }
.chip-breathe.b3{ animation-delay: 2.6s; }
@keyframes chip-breathe{
  0%, 100%{ opacity: 0.55; }
  50%     { opacity: 1; }
}

/* Barras del panel de rendimiento: crecen al entrar en pantalla */
.perf-bar{
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 1.1s var(--ease-out-expo);
}
.is-visible .perf-bar{ transform: scaleY(1); }
.is-visible .perf-bar.b1{ transition-delay: 0.05s; }
.is-visible .perf-bar.b2{ transition-delay: 0.13s; }
.is-visible .perf-bar.b3{ transition-delay: 0.21s; }
.is-visible .perf-bar.b4{ transition-delay: 0.29s; }
.is-visible .perf-bar.b5{ transition-delay: 0.37s; }
.is-visible .perf-bar.b6{ transition-delay: 0.45s; }
.is-visible .perf-bar.b7{ transition-delay: 0.53s; }

/* Línea de latencia que se dibuja sola */
.spark-line{
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
}
.is-visible .spark-line{
  animation: trace-draw 1.8s var(--ease-out-expo) 0.3s forwards;
}

/* Paquete que viaja por la ruta logística */
.parcel-travel{
  offset-path: path('M20 120 C 140 120, 180 40, 300 40 S 460 120, 580 120');
  offset-rotate: 0deg;
  animation: parcel-move 7s ease-in-out infinite;
}
@keyframes parcel-move{
  0%   { offset-distance: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ==========================================================================
   3. MOVIMIENTO AL HACER SCROLL
   ========================================================================== */

/* Reveal base */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
  will-change: opacity, transform;
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* Variantes direccionales */
.reveal-left { transform: translateX(-32px); }
.reveal-right{ transform: translateX(32px); }
.reveal-left.is-visible, .reveal-right.is-visible{ transform: translateX(0); }

.reveal-scale{ transform: scale(0.94); }
.reveal-scale.is-visible{ transform: scale(1); }

/* Escalonado de hijos: el contenedor lleva .stagger */
.stagger > *{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}
.stagger.is-visible > *{ opacity: 1; transform: translateY(0); }
.stagger.is-visible > *:nth-child(1){ transition-delay: 0.00s; }
.stagger.is-visible > *:nth-child(2){ transition-delay: 0.08s; }
.stagger.is-visible > *:nth-child(3){ transition-delay: 0.16s; }
.stagger.is-visible > *:nth-child(4){ transition-delay: 0.24s; }
.stagger.is-visible > *:nth-child(5){ transition-delay: 0.32s; }
.stagger.is-visible > *:nth-child(6){ transition-delay: 0.40s; }

/* Entrada del hero, sin esperar al scroll */
.hero-in{
  opacity: 0;
  transform: translateY(26px);
  animation: hero-enter 1s var(--ease-out-expo) forwards;
}
.hero-in.h1{ animation-delay: 0.05s; }
.hero-in.h2{ animation-delay: 0.16s; }
.hero-in.h3{ animation-delay: 0.27s; }
.hero-in.h4{ animation-delay: 0.38s; }
.hero-in.h5{ animation-delay: 0.50s; }
.hero-in.h6{ animation-delay: 0.62s; }
@keyframes hero-enter{ to{ opacity: 1; transform: translateY(0); } }

/* Parallax: main.js escribe --py en función del scroll */
.parallax{ transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* Barra de progreso de lectura */
.scroll-progress{
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-bright));
  z-index: 60;
  pointer-events: none;
}

/* ==========================================================================
   4. INTERACCIÓN: tarjetas, botones, spotlight
   ========================================================================== */

/* Spotlight que sigue al cursor dentro de la tarjeta (--mx/--my desde JS) */
.spotlight{ position: relative; overflow: hidden; }
.spotlight::before{
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(0,168,204,0.10), transparent 62%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events:none;
}
.spotlight:hover::before{ opacity: 1; }

.accent-card{
  position: relative;
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s ease, border-color 0.4s ease;
}
.accent-card::after{
  content:'';
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-bright));
  transform: scaleX(0);
  transform-origin:left;
  transition: transform 0.5s var(--ease-out-expo);
  border-radius: 2px 2px 0 0;
}
.accent-card:hover{
  transform: translateY(-6px);
  border-color: rgba(0,168,204,0.4);
  box-shadow: 0 24px 50px -28px rgba(34,43,48,0.45);
}
.accent-card:hover::after{ transform: scaleX(1); }

/* Tarjeta oscura con borde iluminado */
.dark-card{
  background: linear-gradient(160deg, #232D33 0%, var(--card-dark) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.4s var(--ease-out-expo), border-color 0.4s ease;
}
.dark-card:hover{
  transform: translateY(-6px);
  border-color: rgba(0,168,204,0.45);
}

/* Botón primario con barrido de luz */
.btn-shine{ position: relative; overflow: hidden; }
.btn-shine::after{
  content:'';
  position:absolute;
  top:0; bottom:0;
  left:-60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--ease-out-expo);
}
.btn-shine:hover::after{ left: 130%; }

/* Flecha que avanza en los enlaces */
.link-arrow svg{ transition: transform 0.35s var(--ease-out-expo); }
.link-arrow:hover svg{ transform: translateX(5px); }

/* Números de paso con anillo animado */
.step-num{
  position: relative;
  transition: transform 0.4s var(--ease-out-back), background-color 0.4s ease;
}
.step-num::before{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius: 9999px;
  border: 1px solid rgba(0,168,204,0.4);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.4s ease, transform 0.4s var(--ease-out-back);
}
.step-item:hover .step-num{ transform: scale(1.08); background-color: var(--cyan); }
.step-item:hover .step-num::before{ opacity: 1; transform: scale(1); }

.focus-ring:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ==========================================================================
   5. COMPONENTES DE SECCIÓN
   ========================================================================== */

.kicker{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-size:0.75rem; font-weight:600;
  letter-spacing:0.09em; text-transform:uppercase;
  color: var(--cyan);
}
.kicker::before{
  content:''; width:6px; height:6px; border-radius:9999px;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,168,204,0.18);
  animation: kicker-pulse 2.6s ease-in-out infinite;
}
@keyframes kicker-pulse{
  0%,100%{ box-shadow: 0 0 0 3px rgba(0,168,204,0.18); }
  50%    { box-shadow: 0 0 0 6px rgba(0,168,204,0.05); }
}
.kicker-on-dark{ color: var(--cyan-bright); }

/* Texto con degradado, para una palabra clave del titular */
.text-gradient{
  background: linear-gradient(100deg, var(--cyan-bright), var(--cyan));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Marquee */
.marquee{
  overflow:hidden; position:relative;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track{ display:flex; width:max-content; animation: marquee-scroll 38s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state: paused; }
@keyframes marquee-scroll{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* Pestañas */
.tab-btn{ border:1px solid transparent; transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s var(--ease-out-back); }
.tab-btn[aria-selected="true"]{ background: var(--charcoal); color:#fff; transform: translateY(-1px); }
.tab-btn[aria-selected="false"]:hover{ border-color: rgba(0,168,204,.45); color: var(--cyan); }
.tab-panel[hidden]{ display:none; }
.tab-panel{ animation: panel-in .5s var(--ease-out-expo); }
@keyframes panel-in{ from{ opacity:0; transform: translateY(12px);} to{ opacity:1; transform:none;} }

/* Terminal */
.terminal{
  background: var(--card-dark);
  border:1px solid rgba(255,255,255,.08);
  border-radius:.75rem; overflow:hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:.8125rem; line-height:1.75;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
}
.terminal__bar{
  display:flex; align-items:center; gap:.4rem;
  padding:.7rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.terminal__dot{ width:10px; height:10px; border-radius:9999px; }

/* Cursor parpadeante del terminal */
.caret::after{
  content:'▋';
  color: var(--cyan);
  animation: caret-blink 1.1s step-end infinite;
}
@keyframes caret-blink{ 0%,100%{opacity:1;} 50%{opacity:0;} }

/* Contador de uptime: puntos que se encienden en cascada */
.uptime-dot{
  opacity: 0;
  animation: dot-on .4s var(--ease-out-back) forwards;
}
@keyframes dot-on{ to{ opacity:1; } }

.step-line{
  background: repeating-linear-gradient(to right, var(--cyan) 0, var(--cyan) 6px, transparent 6px, transparent 12px);
}

.connector-divider{ position:relative; }
.connector-divider::before{
  content:''; position:absolute; top:0; bottom:0; left:50%; width:1px;
  background: repeating-linear-gradient(to bottom, var(--cyan) 0, var(--cyan) 6px, transparent 6px, transparent 12px);
  opacity:.4;
}
@media (max-width:1023px){ .connector-divider::before{ display:none; } }

/* Cabecera */
.header-elevated{
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 10px 30px -14px rgba(0,0,0,.18);
  background: rgba(255,255,255,.92);
}

/* Enlace de navegación con subrayado que crece */
.nav-link{ position:relative; }
.nav-link::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: var(--cyan);
  transform: scaleX(0); transform-origin:left;
  transition: transform .35s var(--ease-out-expo);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after{ transform: scaleX(1); }

/* Menú móvil */
.mobile-nav{ max-height:0; overflow:hidden; transition: max-height .45s var(--ease-out-expo); }
.mobile-nav.open{ max-height:360px; }
.hamburger-line{ transition: transform .3s var(--ease-out-back), opacity .3s ease; }
.hamburger.open .line-1{ transform: translateY(6px) rotate(45deg); }
.hamburger.open .line-2{ opacity:0; }
.hamburger.open .line-3{ transform: translateY(-6px) rotate(-45deg); }

/* Indicador de scroll del hero */
.scroll-hint{ animation: scroll-hint 2.2s ease-in-out infinite; }
@keyframes scroll-hint{
  0%,100%{ transform: translateY(0); opacity:.5; }
  50%    { transform: translateY(7px); opacity:1; }
}

/* ==========================================================================
   6. ACCESIBILIDAD: respetar la preferencia de menos movimiento
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal, .stagger > *, .hero-in{ opacity:1 !important; transform:none !important; }
  .marquee__track{ animation:none; }
  .parcel-travel{ animation:none; offset-distance:50%; }
  .perf-bar{ transform: scaleY(1); }
  .trace-draw, .spark-line{ stroke-dashoffset:0; }
  .parallax{ transform:none !important; }
}

/* ==========================================================================
   7. FORMULARIO DE CONTACTO: honeypot anti-spam + estados de envío
   ========================================================================== */

/* Campo trampa: invisible y no-tabulable para personas, visible para bots
   que rellenan formularios de forma automática. No usar display:none ni
   visibility:hidden, que algunos rastreadores de spam ya detectan y evitan. */
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  top:auto;
  width:1px; height:1px;
  overflow:hidden;
}

[data-form-status].is-success{ color:#22C9E8; }
[data-form-status].is-error{ color:#f87171; }

[data-contact-form].is-submitting [data-btn-text]{ opacity:.6; }
[data-contact-form].is-submitting button[type="submit"]{ cursor:progress; opacity:.75; }

/* ==========================================================================
   8. BANNER DE COOKIES / CONSENTIMIENTO
   ========================================================================== */
.cookie-banner{
  position:fixed; left:50%; bottom:16px; transform:translate(-50%, 130%);
  z-index:80; width:min(560px, calc(100% - 24px));
  background: var(--card-dark); color:#cbd5e1;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:18px 20px;
  box-shadow: 0 20px 50px -12px rgba(0,0,0,.55);
  transition: transform .5s var(--ease-out-expo);
}
.cookie-banner.is-visible{ transform:translate(-50%, 0); }
.cookie-banner p{ font-size:.85rem; line-height:1.5; }
.cookie-banner a{ color: var(--cyan-bright); text-decoration:underline; }
.cookie-banner__actions{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.cookie-banner__btn{
  font-size:.8rem; font-weight:600; padding:8px 16px; border-radius:8px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  cursor:pointer;
}
.cookie-banner__btn--accept{ background: var(--cyan); color:#fff; border:1px solid var(--cyan); }
.cookie-banner__btn--accept:hover{ background:#0092b3; }
.cookie-banner__btn--reject{ background:transparent; color:#cbd5e1; border:1px solid rgba(255,255,255,.15); }
.cookie-banner__btn--reject:hover{ border-color: var(--cyan); color:#fff; }

@media (prefers-reduced-motion: reduce){
  .cookie-banner{ transition:none; }
}