/* ==========================================================================
   PULSO 99.7 — consulta con ventanas abiertas. Base marfil, magenta,
   turquesa y oro; geometría redondeada y el latido como motivo gráfico.
   ========================================================================== */

:root {
  --bg: #FFF7F2;
  --bg-2: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #FFF0F5;
  --line: rgba(23,18,28,.14);
  --line-soft: rgba(23,18,28,.085);
  --text: #1B1420;
  --dim: rgba(27,20,32,.66);
  --faint: rgba(27,20,32,.58);
  --accent: #FF2D78;
  --accent-ink: #FFFFFF;
  --accent-2: #00A99B;
  --gold: #FFB000;
  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "Outfit", system-ui, sans-serif;
  --font-mono: "Sora", ui-monospace, Menlo, monospace;
  --radius: 18px;
  --radius-lg: 30px;
  --dock-h: 92px;
}

body { font-weight: 400; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.03em; }

body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(720px 460px at 88% -8%, rgba(255,45,120,.14), transparent 62%),
    radial-gradient(640px 420px at 4% 8%, rgba(0,201,183,.15), transparent 60%),
    radial-gradient(520px 340px at 60% 102%, rgba(255,176,0,.13), transparent 62%);
}

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

.hero { padding-block: clamp(44px, 7vw, 96px) clamp(30px, 5vw, 60px); position: relative; }
.hero__grid { display: grid; gap: clamp(26px, 4vw, 56px); grid-template-columns: minmax(0,1fr); align-items: center; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr); } }

.hero__kicker {
  display: inline-flex; align-items: center; gap: .6em; margin-bottom: 20px;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); background: var(--surface-2); border-radius: 100px; padding: .55em 1.1em;
}
.hero__word {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3.6rem, 13vw, 9rem); line-height: .86; letter-spacing: -.055em;
  background: linear-gradient(100deg, var(--accent) 0%, #FF5C3D 34%, var(--gold) 58%, #24B39C 82%, var(--accent-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__freq {
  display: block; margin-top: 16px; color: var(--text);
  font-family: var(--font-mono); font-size: clamp(.74rem, 1.5vw, .92rem);
  letter-spacing: .3em; text-transform: uppercase;
}
.hero__tag { font-size: clamp(1.3rem, 2.9vw, 2rem); font-weight: 600; letter-spacing: -.035em; margin-top: 20px; }
.hero__tag b { color: var(--accent); font-weight: 700; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* latido: ECG que se convierte en onda de sonido */
.ecg { width: 100%; height: clamp(74px, 9vw, 112px); margin-top: 30px; overflow: visible; }
.ecg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ecg .beat { stroke: var(--accent); stroke-width: 2.6; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 3.4s cubic-bezier(.5,0,.2,1) infinite; }
.ecg .base { stroke: var(--line); stroke-width: 1; }
@keyframes draw { 0% { stroke-dashoffset: 1400; } 55% { stroke-dashoffset: 0; } 92%,100% { stroke-dashoffset: -1400; } }

.btn { font-weight: 700; letter-spacing: .11em; }
.btn--ghost { border-color: var(--line); }
.card { box-shadow: 0 1px 2px rgba(27,20,32,.05), 0 12px 32px -22px rgba(27,20,32,.35); }
.card:hover { transform: translateY(-3px); }

.onair { background: linear-gradient(158deg, #FFFFFF, #FFF1F6 62%, #ECFBF8); border-color: var(--line-soft); box-shadow: 0 24px 60px -34px rgba(255,45,120,.5); }
.onair__host { color: var(--accent-2); }

.statusbar { border-block: 1px solid var(--line-soft); background: var(--surface); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.statusbar__inner { display: flex; flex-wrap: wrap; gap: 8px clamp(16px, 3vw, 40px); padding-block: 13px; align-items: center; color: var(--faint); }
.statusbar b { color: var(--accent); font-weight: 600; }

.host__avatar { background: linear-gradient(140deg, var(--accent), var(--gold) 58%, var(--accent-2)); color: #fff; }
.host__role { color: var(--accent-2); }
.chan__name { color: var(--accent); }
.chan { background: var(--surface); box-shadow: 0 1px 2px rgba(27,20,32,.05); }
.eyebrow { color: var(--accent-2); }
.slot[data-onair="true"]::before { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tag--live { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.manifesto li::before { color: var(--accent); }

.spec { display: flex; flex-direction: column; }
.spec__show { margin-top: auto; padding-top: 14px; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.spec__show strong { color: var(--accent); font-weight: 600; }

/* aviso médico */
.notice {
  border: 1px solid color-mix(in srgb, var(--accent-2) 34%, transparent);
  background: linear-gradient(150deg, #ECFBF8, #FFFFFF);
  border-radius: var(--radius-lg); padding: clamp(24px, 3.4vw, 40px);
  display: grid; gap: 14px; grid-template-columns: 44px 1fr; align-items: start;
}
.notice__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-2); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.2rem; }
.notice h3 { font-size: 1.12rem; }
.notice p { font-size: .9rem; color: var(--dim); margin-top: .5rem; max-width: 74ch; }

/* dock claro */
.dock { background: rgba(255,255,255,.9); border-top-color: var(--line); box-shadow: 0 -18px 44px -34px rgba(27,20,32,.5); }
.dock__sub, .chan-select { color: var(--dim); }
.chan-select { background-color: var(--surface-2); }
.vol input[type="range"]::-webkit-slider-thumb { background: var(--accent); }
.vol input[type="range"]::-moz-range-thumb { background: var(--accent); }
.site-head { background: color-mix(in srgb, var(--bg) 88%, transparent); }

@media (max-width: 600px) {
  .hero__kicker { letter-spacing: .13em; font-size: .6rem; padding: .5em .9em; line-height: 1.5; }
  .notice { grid-template-columns: 1fr; }
}