/* ==========================================================================
   TRIWAVE — portada de la red. Neutra y oscura, para que el color lo pongan
   las tres emisoras.
   ========================================================================== */

:root {
  --bg: #0A0A0D;
  --bg-2: #111115;
  --surface: rgba(255,255,255,.04);
  --surface-2: rgba(255,255,255,.075);
  --line: rgba(255,255,255,.14);
  --line-soft: rgba(255,255,255,.08);
  --text: #F4F4F6;
  --dim: rgba(244,244,246,.63);
  --faint: rgba(244,244,246,.52);
  --accent: #F4F4F6;
  --accent-ink: #0A0A0D;
  --accent-2: #9AA0AA;
  --font-display: "Inter Tight", system-ui, sans-serif;
  --font-body: "Inter Tight", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --radius: 14px;
  --radius-lg: 22px;
}

body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(660px 420px at 12% -4%, rgba(198,242,78,.11), transparent 62%),
    radial-gradient(680px 440px at 52% -8%, rgba(255,138,91,.12), transparent 62%),
    radial-gradient(660px 420px at 92% -4%, rgba(255,45,120,.12), transparent 62%);
}

.triband { height: 3px; background: linear-gradient(90deg, #C6F24E 0 33.33%, #FF8A5B 33.33% 66.66%, #FF2D78 66.66% 100%); }

/* ---------- hero ---------- */

.hero { padding-block: clamp(60px, 10vw, 128px) clamp(40px, 6vw, 72px); }
.hero__eyebrow { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--faint); }
.hero__word {
  font-family: var(--font-display); font-weight: 700; margin-top: 24px;
  font-size: clamp(2.6rem, 7.6vw, 5.6rem); line-height: .98; letter-spacing: -.045em; max-width: 15ch;
}
.hero__word span { background: linear-gradient(96deg, #C6F24E, #FF8A5B 52%, #FF2D78); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 34px; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.hero__meta b { color: var(--text); font-weight: 500; }

/* ---------- panel de emisora ---------- */

.network { display: grid; gap: clamp(16px, 2vw, 22px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

.net {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 13px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 32px);
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.net::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--st);
  transform: scaleX(.16); transform-origin: left; transition: transform .5s var(--ease);
}
.net:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--st) 45%, transparent); }
.net:hover::before, .net[data-active="true"]::before { transform: scaleX(1); }
.net[data-active="true"] {
  border-color: color-mix(in srgb, var(--st) 58%, transparent);
  background: linear-gradient(168deg, color-mix(in srgb, var(--st) 12%, transparent), var(--surface) 62%);
}
.net__top { display: flex; align-items: center; gap: 12px; }
.net__ident { width: 46px; height: 46px; border-radius: 11px; flex: none; }
.net__live { margin-left: auto; }
.net__dial { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; color: var(--st); }
.net__live { display: inline-flex; align-items: center; gap: .45em; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.net__live .dot { color: var(--st); }
.net__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.7rem); letter-spacing: -.04em; line-height: 1; }
.net__format { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--st); }
.net__blurb { font-size: .9rem; color: var(--dim); line-height: 1.56; }
.net__now {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-soft);
  display: grid; gap: 3px;
}
.net__nowlabel { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .16em; color: var(--faint); }
.net__now strong { font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; }
.net__nowhost { font-size: .82rem; color: var(--dim); }
.net__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.net__play { --btn-bg: var(--st); --btn-fg: #0A0A0D; flex: 1 1 auto; }
.net .btn { font-size: .7rem; padding: .8em 1.2em; }

/* ---------- cómo funciona ---------- */

.how { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.how > article { background: var(--bg); padding: clamp(22px, 2.6vw, 30px); }
.how h3 { font-size: 1.06rem; font-weight: 600; margin-bottom: .55rem; }
.how p { font-size: .88rem; color: var(--dim); }
.how__n { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .18em; color: var(--faint); margin-bottom: 14px; display: block; }