/* b&g tech group — Design System v2 */
:root {
  --bg:       #0c1017;
  --bg-alt:   #080c12;
  --surface:  #101624;
  --border:   #1c2840;
  --accent:   #e8a838;
  --accent-h: #d49630;
  --ink:      #f0ede4;
  --ink-2:    #7a8ba8;
  --ink-3:    #3d4f6a;
  --ink-inv:  #0c1017;
  --wa:       #25D366;
  --wa-h:     #1ea855;
  /* Easing */
  --ease-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

[x-cloak]              { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem; /* clears the fixed 64px navbar + breathing room */
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Bricolage Grotesque', sans-serif;
  overflow-x: hidden;
}

/* Subtle noise texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ── Service editorial rows ── */
.service-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 1rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--border);
  transition: border-color 0.2s ease;
}
.service-row:last-child { border-bottom: 1px solid var(--border); }
.service-row:hover { border-top-color: var(--accent); }

/* ── Form inputs ── */
.form-input {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 8px;
  padding: 12px 16px;
  width: 100%;
  transition: border-color 0.2s;
  outline: none;
  font-family: inherit;
  font-size: 0.9375rem;
}
.form-input:focus        { border-color: var(--accent); }
.form-input::placeholder { color: var(--ink-2); } /* #7a8ba8 = 5.24:1 on surface — WCAG AA pass */

/* ── Hero mouse-tracking glow ── */
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    900px circle at var(--mx, 50%) var(--my, 50%),
    rgba(232, 168, 56, 0.07),
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
}
#hero:hover .hero-glow { opacity: 1; }

/* ── WhatsApp pulse ── */
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); }
  50%       { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); }
}
.whatsapp-pulse { animation: pulse-green 2s infinite; }

/* ── CTA amber section ── */
.cta-amber { background: var(--accent); }

/* ── Scroll fade-in ── */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }
.no-js .fade-in  { opacity: 1 !important; transform: translateY(0) !important; }

/* ── Counter (kept for JS compat) ── */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.counter-visible { animation: countUp 0.5s ease forwards; }

/* ── Keyboard focus ring ── */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Hero content entrance ── */
.hero-content-line {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-expo), transform 0.7s var(--ease-expo);
}
#hero.hero-loaded .hero-content-line { opacity: 1; transform: none; }
.hero-content-line:nth-child(1) { transition-delay: 0.08s; }
.hero-content-line:nth-child(2) { transition-delay: 0.23s; }
.hero-content-line:nth-child(3) { transition-delay: 0.40s; }
.no-js .hero-content-line { opacity: 1 !important; transform: none !important; }

/* ── Service row stagger ── */
.service-row.stagger-ready {
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity   0.5s var(--ease-quart) calc(var(--i, 0) * 55ms),
    transform 0.5s var(--ease-quart) calc(var(--i, 0) * 55ms),
    border-color 0.2s ease;
}
.service-row.stagger-ready.revealed { opacity: 1; transform: none; }

/* Arrow nudge on service row hover */
.service-row svg {
  transition: transform 0.2s var(--ease-quart);
}
.service-row:hover svg { transform: translateX(5px); }

/* ── Process step stagger ── */
.process-step.stagger-ready {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   0.55s var(--ease-expo) calc(var(--i, 0) * 100ms),
    transform 0.55s var(--ease-expo) calc(var(--i, 0) * 100ms);
}
.process-step.stagger-ready.revealed { opacity: 1; transform: none; }

/* ── Pricing card hover ── */
.pricing-card {
  transition:
    transform     0.25s var(--ease-quart),
    box-shadow    0.25s ease,
    border-color  0.25s ease;
}
.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.4);
}
.pricing-card-dark:hover  { border-color: var(--accent); }
.pricing-card-featured:hover { box-shadow: 0 18px 50px rgba(232, 168, 56, 0.25); }

/* ── Button press (physical affordance) ── */
.btn-press:active { transform: scale(0.97); }

/* ── Navbar scroll state ── */
nav { transition: box-shadow 0.3s ease; }
nav.nav-scrolled { box-shadow: 0 4px 28px rgba(0, 0, 0, 0.45); }

/* ── Form success reveal ── */
#form-success {
  opacity: 0;
  transform: scale(0.96) translateY(8px);
  transition: opacity 0.45s var(--ease-quart), transform 0.45s var(--ease-expo);
}
#form-success.visible { opacity: 1; transform: none; }

/* ── Language toggle ── */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.lang-toggle button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.04em;
  transition: color 0.2s, background 0.15s;
  color: var(--ink-2);
}
.lang-toggle button:hover { color: var(--ink); }
html[data-active-lang="es"] .lang-toggle [data-lang="es"],
html[data-active-lang="en"] .lang-toggle [data-lang="en"] {
  color: var(--accent);
  background: rgba(232, 168, 56, 0.08);
}

/* ── Tech stack cards ── */
.tech-card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--ease-quart);
}
.tech-card:hover {
  border-color: var(--glow, #e8a838);
  box-shadow: 0 0 22px -5px var(--glow, #e8a838);
  transform: translateY(-2px);
}
@supports (color: color-mix(in srgb, red 40%, transparent)) {
  .tech-card:hover {
    border-color: color-mix(in srgb, var(--glow, #e8a838) 40%, transparent);
    box-shadow: 0 0 22px -5px color-mix(in srgb, var(--glow, #e8a838) 35%, transparent);
  }
}
.tech-card i[class^="devicon"] {
  opacity: 0.4;
  transition: opacity 0.2s ease;
  line-height: 1;
}
.tech-card:hover i[class^="devicon"] { opacity: 1; }
.tech-card .tech-svg {
  opacity: 0.35;
  transition: opacity 0.2s ease;
}
.tech-card:hover .tech-svg { opacity: 1; }

/* ── Contact section — ambient orbs + dot grid ── */
#contacto::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.032) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}
.contact-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.contact-orb-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(232,168,56,0.09) 0%, transparent 65%);
  top: -200px;
  left: -150px;
  animation: orb-drift-1 22s ease-in-out infinite;
}
.contact-orb-2 {
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(232,168,56,0.07) 0%, transparent 65%);
  bottom: -130px;
  right: -80px;
  animation: orb-drift-2 28s ease-in-out infinite;
}
.contact-orb-3 {
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(37,80,160,0.16) 0%, transparent 65%);
  top: 35%;
  left: 52%;
  animation: orb-drift-3 19s ease-in-out infinite;
}
@keyframes orb-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  38%       { transform: translate(55px, 75px) scale(1.07); }
  68%       { transform: translate(-28px, 38px) scale(0.96); }
}
@keyframes orb-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  52%       { transform: translate(-75px, -55px) scale(1.11); }
}
@keyframes orb-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  48%       { transform: translate(-45px, -65px) scale(1.16); }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  html            { scroll-behavior: auto; }
  .fade-in        { transition: none; }
  .whatsapp-pulse { animation: none; }
  .hero-glow      { transition: none; }
  /* Animation entries — skip transitions, ensure content visible */
  .hero-content-line,
  .service-row,
  .process-step,
  .pricing-card,
  .tech-card,
  #form-success {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .animate-bounce { animation: none !important; }
  .contact-orb    { animation: none !important; }
}