/* ==========================================================
   Angostura System — Dark Tech Premium
   Componentes visuales complementarios a Tailwind
   ========================================================== */

:root {
  color-scheme: dark;
  --bg: #020617;            /* slate-950 */
  --cyan: 0 174 239;        /* #00AEEF */
  --red: 229 35 32;         /* #E52320 */
  --yellow: 255 235 59;     /* #FFEB3B */
  --wa: 37 211 102;         /* #25D366 */
}

html { scroll-behavior: smooth; scroll-padding-top: 96px; background: var(--bg); }
body { -webkit-font-smoothing: antialiased; }
::selection { background: rgb(var(--cyan) / .35); color: #fff; }

/* Fuente de marca (similar a la tipografía del logo) */
.font-brand { font-family: 'Audiowide', system-ui, sans-serif; letter-spacing: 0.04em; }

/* ---------- Franjas y divisores neón ---------- */
.brand-stripe {
  background: linear-gradient(90deg,
    rgb(var(--cyan)) 0 33.3%, rgb(var(--yellow)) 33.3% 66.6%, rgb(var(--red)) 66.6% 100%);
}

.neon-divider {
  position: relative; height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, rgb(var(--cyan)) 20%, rgb(var(--red)) 55%, rgb(var(--yellow)) 80%, transparent);
  opacity: .7;
}
.neon-divider::after {
  content: ''; position: absolute; inset: -3px 10%;
  background: inherit; filter: blur(6px); opacity: .8;
}

/* Texto con brillo neón */
.neon-cyan   { color: rgb(var(--cyan));   text-shadow: 0 0 18px rgb(var(--cyan) / .55); }
.neon-red    { color: rgb(var(--red));    text-shadow: 0 0 18px rgb(var(--red) / .55); }
.neon-yellow { color: rgb(var(--yellow)); text-shadow: 0 0 18px rgb(var(--yellow) / .45); }

/* ---------- Fondos tecnológicos ---------- */
.grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.grid-bg-soft {
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 20%, transparent 80%);
}

/* ---------- Glassmorphism ---------- */
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* Header flotante */
.header-shell {
  background: rgba(2, 6, 23, .55);
  border: 1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 0 rgb(var(--cyan) / .35), 0 10px 30px -18px rgb(var(--cyan) / .6);
  transition: background .3s ease, box-shadow .3s ease;
}
#site-header.scrolled .header-shell {
  background: rgba(2, 6, 23, .8);
  box-shadow: 0 1px 0 0 rgb(var(--cyan) / .5), 0 14px 40px -16px rgb(var(--cyan) / .55);
}

/* ---------- Colores de brillo por tarjeta ---------- */
.glow-cyan   { --glow: var(--cyan); }
.glow-red    { --glow: var(--red); }
.glow-yellow { --glow: var(--yellow); }
.glow-white  { --glow: 226 232 240; }
.glow-wa     { --glow: var(--wa); }

/* Chip de ícono */
.icon-chip {
  display: flex; align-items: center; justify-content: center;
  color: rgb(var(--glow, var(--cyan)));
  background: rgb(var(--glow, var(--cyan)) / .1);
  border: 1px solid rgb(var(--glow, var(--cyan)) / .25);
  transition: filter .35s ease, background .35s ease;
}

/* ---------- Animación de aparición al hacer scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Tarjeta glass con resplandor neón ---------- */
.card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: opacity .6s ease, transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.card:hover,
.card.reveal.is-visible:hover {
  transform: translateY(-6px);
  border-color: rgb(var(--glow, var(--cyan)) / .55);
  box-shadow:
    0 0 0 1px rgb(var(--glow, var(--cyan)) / .15),
    0 20px 50px -14px rgb(var(--glow, var(--cyan)) / .5),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.card:hover .icon-chip {
  background: rgb(var(--glow, var(--cyan)) / .16);
  filter: drop-shadow(0 0 10px rgb(var(--glow, var(--cyan)) / .6));
}

/* ---------- Botones ---------- */
.btn-wa, .btn-red {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-wa {
  color: #fff;
  background: linear-gradient(135deg, #2bea74 0%, #25d366 45%, #0f9e6e 100%);
  box-shadow: 0 10px 28px -10px rgb(var(--wa) / .7), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-red {
  color: #fff;
  background: linear-gradient(135deg, #ff4b3e 0%, #e52320 55%, #b8160f 100%);
  box-shadow: 0 10px 28px -10px rgb(var(--red) / .75), inset 0 1px 0 rgba(255,255,255,.25);
}
/* Brillo que cruza el botón */
.btn-wa::after, .btn-red::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s ease;
}
.btn-wa:hover, .btn-red:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn-wa:hover::after, .btn-red:hover::after { transform: translateX(120%); }
.btn-wa:hover { animation: glow-wa 1.6s ease-in-out infinite; }
.btn-red:hover { box-shadow: 0 16px 36px -10px rgb(var(--red) / .85), inset 0 1px 0 rgba(255,255,255,.25); }
@keyframes glow-wa {
  0%, 100% { box-shadow: 0 14px 32px -10px rgb(var(--wa) / .75), 0 0 0 0 rgb(var(--wa) / .35), inset 0 1px 0 rgba(255,255,255,.3); }
  50%      { box-shadow: 0 18px 40px -10px rgb(var(--wa) / .9),  0 0 0 6px rgb(var(--wa) / 0),  inset 0 1px 0 rgba(255,255,255,.3); }
}

.btn-ghost {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease, transform .25s ease;
}
.btn-ghost:hover {
  background: rgba(255,255,255,.07);
  border-color: rgb(var(--cyan) / .6);
  box-shadow: 0 0 24px -6px rgb(var(--cyan) / .55);
  transform: translateY(-2px);
}

/* ---------- Formulario ---------- */
.field {
  width: 100%; border-radius: .75rem; padding: .75rem 1rem;
  background: rgba(2, 6, 23, .6); color: #f1f5f9;
  border: 1px solid rgba(255,255,255,.12);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field::placeholder { color: #64748b; }
.field:focus {
  outline: none; border-color: rgb(var(--cyan));
  box-shadow: 0 0 0 3px rgb(var(--cyan) / .18), 0 0 18px -4px rgb(var(--cyan) / .6);
}

.device-opt {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  color: #94a3b8;
  transition: all .25s ease;
}
.device-opt:hover { border-color: rgba(255,255,255,.25); color: #e2e8f0; }
.peer:checked + .device-opt {
  color: rgb(var(--cyan));
  background: rgb(var(--cyan) / .08);
  border-color: rgb(var(--cyan));
  box-shadow: 0 0 0 1px rgb(var(--cyan) / .4), 0 0 22px -4px rgb(var(--cyan) / .7), inset 0 0 14px -6px rgb(var(--cyan) / .6);
}
.peer:checked + .device-opt svg { filter: drop-shadow(0 0 6px rgb(var(--cyan) / .8)); }
.peer:focus-visible + .device-opt { outline: 2px solid rgb(var(--cyan)); outline-offset: 2px; }

/* Pasos numerados */
.step-dot {
  box-shadow: 0 0 0 4px rgb(var(--glow) / .12), 0 0 20px -2px rgb(var(--glow) / .7);
}

/* Mapa en modo oscuro */
.map-dark { filter: invert(.92) hue-rotate(180deg) saturate(.7) brightness(.95) contrast(.95); }

/* ---------- Anillos animados del hero ---------- */
.ring-spin { transform-origin: 50% 50%; animation: spin 40s linear infinite; }
.ring-spin-rev { transform-origin: 50% 50%; animation: spin 55s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.ring-glow { filter: drop-shadow(0 0 4px currentColor); }

/* Pulso del botón flotante de WhatsApp */
.wa-pulse::before {
  content: ''; position: absolute; inset: 0; border-radius: 9999px;
  background: #25d366; z-index: -1; animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.7); opacity: 0; } }

/* Menú móvil */
#mobile-menu { transition: max-height .35s ease, opacity .25s ease; max-height: 0; opacity: 0; overflow: hidden; }
#mobile-menu.open { max-height: 520px; opacity: 1; }

/* Enlaces del menú con subrayado neón */
.nav-link { position: relative; transition: color .2s ease; }
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: rgb(var(--cyan)); box-shadow: 0 0 10px rgb(var(--cyan));
  transform: scaleX(0); transition: transform .25s ease;
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ring-spin, .ring-spin-rev, .wa-pulse::before, .btn-wa:hover { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card:hover, .btn-wa:hover, .btn-red:hover, .btn-ghost:hover { transform: none; }
}