/* ==========================================================================
   TOQUE DIGITAL — Design System (dark tech-boutique)
   Efectos, microinteracciones y estados que complementan Tailwind CSS v4.
   ========================================================================== */

/* ---------- Base ---------- */
:root {
  color-scheme: dark;
  --accent: #6366f1;
  --accent-2: #8b5cf6;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* compensa el navbar fijo */
}

/* Fallback por si el CSS compilado no carga */
body {
  background-color: #0a0a0f;
  color: #a1a1aa;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

::selection {
  background: rgba(99, 102, 241, 0.45);
  color: #fff;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0a0f; }
::-webkit-scrollbar-thumb { background: #27272a; border-radius: 8px; border: 2px solid #0a0a0f; }
::-webkit-scrollbar-thumb:hover { background: #3f3f46; }
* { scrollbar-color: #27272a #0a0a0f; }

:focus-visible {
  outline: 2px solid #818cf8;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Accesibilidad: skip link ---------- */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  transform: translateY(-200%);
  padding: 10px 16px;
  border-radius: 10px;
  background: #6366f1;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: transform 0.2s ease;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- Fondo: grid sutil ---------- */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, black 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, black 30%, transparent 78%);
}

/* ---------- Navbar ---------- */
#site-header.is-scrolled {
  background: rgba(10, 10, 15, 0.75);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 1px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: #fff !important; }

/* Menú móvil */
#mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ---------- Eyebrow de sección ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #818cf8;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #6366f1, #a855f7);
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.7);
}

/* ---------- Botones ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  padding: 0.8rem 1.5rem;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background-image: linear-gradient(92deg, #6366f1, #7c3aed);
  background-size: 100% 100%;
  box-shadow: 0 8px 28px rgba(99, 102, 241, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: box-shadow 0.3s ease, filter 0.3s ease, transform 0.2s ease;
}
.btn-primary:hover {
  filter: brightness(1.12);
  box-shadow: 0 10px 40px rgba(99, 102, 241, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.btn-primary:active { transform: translateY(1px); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.8rem 1.5rem;
  font-size: 14px;
  font-weight: 500;
  color: #e4e4e7;
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.22); }

/* Brillo que recorre el botón primario */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s ease;
}
.btn-shine:hover::after { left: 130%; }

/* ---------- Tarjetas: borde con gradiente + spotlight ---------- */
.gradient-card { position: relative; border: 1px solid rgba(255, 255, 255, 0.07); }
.gradient-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.65), rgba(139, 92, 246, 0.25), rgba(96, 165, 250, 0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.gradient-card:hover::after { opacity: 1; }

[data-spotlight]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(99, 102, 241, 0.13), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
[data-spotlight]:hover::before,
[data-spotlight]:focus-within::before { opacity: 1; }

/* ---------- Marquee de tecnologías ---------- */
.fade-x {
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; flex-shrink: 0; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 1.4rem;
  font-size: 13px;
  font-weight: 500;
  color: #71717a;
  white-space: nowrap;
}
.marquee-item::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: #3f3f46;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---------- Reveal on scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Barra de uptime ---------- */
.uptime-bar { width: 0; transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.35s; }
.is-visible .uptime-bar { width: 100%; }

/* ---------- Proceso (tabs interactivos) ---------- */
.process-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.72rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
  color: #a1a1aa;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-align: left;
  transition: all 0.25s ease;
}
.process-tab:hover { background: rgba(255, 255, 255, 0.05); color: #e4e4e7; }
.process-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  color: #818cf8;
}
.process-tab[aria-selected="true"] {
  background: linear-gradient(120deg, rgba(99, 102, 241, 0.16), rgba(139, 92, 246, 0.08));
  border-color: rgba(99, 102, 241, 0.4);
  color: #fff;
  box-shadow: 0 0 24px rgba(99, 102, 241, 0.18);
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.process-panel.is-active { animation: panel-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* Ocultar scrollbar del tablist móvil */
#process-tabs { scrollbar-width: none; }
#process-tabs::-webkit-scrollbar { display: none; }

/* ---------- Chips ---------- */
.chip {
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.35rem 0.8rem;
  font-size: 12px;
  color: #d4d4d8;
}

.badge-tech {
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  padding: 0.3rem 0.75rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  color: #a1a1aa;
  transition: all 0.25s ease;
}
.badge-tech:hover { border-color: rgba(99, 102, 241, 0.4); color: #e4e4e7; }

/* ---------- Formulario ---------- */
.input-field {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
  padding: 0.8rem 1rem;
  font-size: 14px;
  color: #fafafa;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.input-field::placeholder { color: #52525b; }
.input-field:focus {
  outline: none;
  border-color: #818cf8;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.input-field.has-error { border-color: rgba(248, 113, 113, 0.55); }
.input-field.has-error:focus { box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15); }

.select-field {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
}
.select-field option { background: #121218; color: #e4e4e7; }

.field-error {
  margin-top: 0.45rem;
  font-size: 12px;
  color: #f87171;
}

.form-glow { box-shadow: 0 0 60px rgba(99, 102, 241, 0.08), 0 24px 60px rgba(0, 0, 0, 0.5); }

/* ---------- Botón volver arriba ---------- */
#back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}
#back-to-top:not(.is-visible) { pointer-events: none; }

/* ---------- Accesibilidad: menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .marquee-track { animation: none !important; }
  .btn-shine::after { display: none; }
  .uptime-bar { transition: none; }
  .process-panel.is-active { animation: none; }
  .animate-ping { animation: none !important; }
}