/* ==========================================================================
   MERIDIAN 88.3 — hora dorada permanente. Índigo profundo, coral y ámbar,
   una serif editorial y mucho aire entre bloque y bloque.
   ========================================================================== */

:root {
  --bg: #120E1C;
  --bg-2: #17111F;
  --surface: rgba(255,255,255,.045);
  --surface-2: rgba(255,255,255,.08);
  --line: rgba(255,178,132,.22);
  --line-soft: rgba(255,255,255,.085);
  --text: #F6EFE9;
  --dim: rgba(246,239,233,.66);
  --faint: rgba(246,239,233,.54);
  --accent: #FF8A5B;
  --accent-ink: #2A1108;
  --accent-2: #F5C46B;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Jost", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --radius: 16px;
  --radius-lg: 26px;
  --dock-h: 92px;
}

body { font-weight: 300; letter-spacing: .004em; }
h1, h2, h3, h4 { font-weight: 400; letter-spacing: -.012em; }
.h-display, .h1 { font-weight: 300; }

/* cielo: gradiente de ocaso fijo detrás de todo */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 62% at 50% 96%, rgba(255,138,91,.34) 0%, rgba(255,138,91,.10) 34%, transparent 62%),
    radial-gradient(90% 48% at 50% 100%, rgba(245,196,107,.30) 0%, transparent 58%),
    linear-gradient(180deg, #0C0916 0%, #150F20 42%, #241428 78%, #3A1C2A 100%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(1px 1px at 18% 12%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 62% 8%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 82% 22%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 34% 26%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 91% 6%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 8% 32%, rgba(255,255,255,.28), transparent);
  mask-image: linear-gradient(180deg, #000 0%, transparent 46%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 46%);
}

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

.hero { padding-block: clamp(32px, 5vw, 68px) clamp(36px, 6vw, 80px); position: relative; text-align: center; }
.hero__sun {
  width: clamp(170px, 27vw, 330px); aspect-ratio: 1; margin: 0 auto clamp(-250px, -19vw, -110px);
  border-radius: 50%; position: relative; z-index: 0;
  background: radial-gradient(circle at 50% 44%, #FFF3D6 0%, #FFD08A 24%, #FF9A5E 52%, #F4703E 74%, rgba(244,112,62,0) 78%);
  filter: blur(.4px);
  animation: rise 2.4s cubic-bezier(.16,.8,.3,1) both;
}
@keyframes rise { from { transform: translateY(46px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.hero__word {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(3rem, 13vw, 9.6rem); line-height: .94; letter-spacing: .01em;
}
.hero__word { text-shadow: 0 3px 26px rgba(20,6,2,.5); }
.hero__word em { font-style: italic; color: #FFF1D8; }
.hero__freq {
  display: block; margin-top: 24px;
  font-family: var(--font-mono); font-size: clamp(.72rem, 1.5vw, .92rem);
  letter-spacing: .42em; text-transform: uppercase; color: var(--text); opacity: .78;
  text-shadow: 0 2px 16px rgba(20,6,2,.7);
}
.hero__tag {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.35rem, 3.4vw, 2.5rem); margin-top: 26px; color: var(--accent-2); letter-spacing: 0;
}
.hero .lede { margin: 22px auto 0; text-align: center; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; justify-content: center; }

.btn { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .18em; font-weight: 400; padding: 1em 1.9em; }

/* horizonte */
.horizon { height: 1px; background: linear-gradient(90deg, transparent, var(--accent) 22%, var(--accent-2) 50%, var(--accent) 78%, transparent); opacity: .55; }

/* ---------- reloj solar ---------- */

.sunclock { 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%, 236px), 1fr)); }
.sun {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 9px;
  transition: background .3s var(--ease);
}
.sun[data-daynight="night"] { background: color-mix(in srgb, #0A0714 88%, transparent); }
.sun__city { font-family: var(--font-display); font-size: 1.42rem; letter-spacing: -.01em; }
.sun__country { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.sun__time { font-family: var(--font-mono); font-size: 1.72rem; letter-spacing: -.02em; color: var(--accent-2); line-height: 1; margin-top: 4px; }
.sun__arc { height: 44px; margin-top: 4px; }
.sun__meta { font-family: var(--font-mono); font-size: .63rem; letter-spacing: .07em; color: var(--faint); display: flex; justify-content: space-between; gap: 10px; }
.sun__note { font-size: .8rem; color: var(--dim); line-height: 1.5; }
.sun__badge { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }

/* ---------- resto ---------- */

.onair { background: linear-gradient(168deg, rgba(255,138,91,.13), rgba(245,196,107,.05)); border-color: var(--line); text-align: left; }
.onair__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.slot__title { font-family: var(--font-display); font-weight: 400; font-size: 1.32rem; }
.host__name { font-family: var(--font-display); font-weight: 400; font-size: 1.24rem; }
.host__avatar { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; }
.eyebrow { color: var(--accent-2); }
.manifesto li { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.15rem, 2.1vw, 1.6rem); }
.chan__name { font-size: .7rem; letter-spacing: .18em; color: var(--accent-2); }
.dock__track { font-family: var(--font-body); font-weight: 400; }

.quote {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.5rem, 3.6vw, 2.7rem); line-height: 1.22; letter-spacing: -.01em; text-wrap: balance;
}
.quote cite { display: block; margin-top: 20px; font-family: var(--font-mono); font-style: normal; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }

/* Las tarjetas se apoyan sobre el gradiente de ocaso: un velo mínimo mantiene
   el contraste del texto sin perder la sensación de aire. */
.card, .chan {
  background: linear-gradient(180deg, rgba(10,6,18,.30), rgba(10,6,18,.48));
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.card:hover, .chan:hover { background: linear-gradient(180deg, rgba(10,6,18,.38), rgba(10,6,18,.56)); }
.schedule { background: linear-gradient(180deg, rgba(10,6,18,.16), rgba(10,6,18,.34)); border-radius: var(--radius); }
.slot { padding-inline: clamp(12px, 1.6vw, 22px); }