/* Alfredo FM 2.0 — capa visual 2026 */
:root {
  --black: #030705;
  --black-2: #07120b;
  --black-3: #0c1c11;
  --green: #35f36d;
  --green-soft: #b4ffc7;
  --gold: #ffd34f;
  --gold-soft: #fff0ad;
  --text: #f7fbf8;
  --muted: #9aa9a0;
  --border: rgba(255, 255, 255, .1);
  --shadow: 0 24px 70px rgba(0, 0, 0, .4);
}

body {
  background:
    radial-gradient(circle at 15% 5%, rgba(53, 243, 109, .11), transparent 31rem),
    radial-gradient(circle at 90% 22%, rgba(255, 211, 79, .07), transparent 27rem),
    #030705;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.background-grid { opacity: .2; background-size: 56px 56px; }

.main-header {
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: rgba(3, 7, 5, .76);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.header-container { max-width: 1240px; min-height: 76px; }
.brand-logo {
  width: 48px; height: 48px; border-radius: 15px;
  background: linear-gradient(145deg, rgba(53, 243, 109, .16), rgba(255, 211, 79, .05));
  border: 1px solid rgba(53, 243, 109, .2);
}
.brand-copy strong { font-size: .98rem; letter-spacing: .08em; }
.brand-copy span { color: var(--muted); font-size: .7rem; }
.main-nav {
  padding: 6px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 18px;
  background: rgba(255, 255, 255, .025);
}
.main-nav a {
  min-height: 42px; padding: 0 14px; display: inline-flex; align-items: center;
  border-radius: 12px; color: #bdc9c0; font-size: .79rem; font-weight: 750;
}
.main-nav a:hover, .main-nav a:focus-visible { color: white; background: rgba(255, 255, 255, .06); }
.nav-install-button {
  min-height: 42px; border-radius: 12px; background: linear-gradient(135deg, var(--green), #12b947);
  box-shadow: 0 10px 24px rgba(53, 243, 109, .17);
}

.hero-section { padding-top: 48px; }
.hero-layout {
  max-width: 1240px; grid-template-columns: minmax(0, 1.38fr) minmax(330px, .82fr); gap: 22px;
}
.premium-card {
  border-color: rgba(255, 255, 255, .09);
  background: linear-gradient(155deg, rgba(17, 35, 22, .88), rgba(5, 11, 7, .95));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.station-card {
  min-height: 630px; padding: 40px clamp(24px, 5vw, 58px); border-radius: 34px;
  overflow: hidden; isolation: isolate;
}
.station-card::before {
  content: "ALFREDO FM"; position: absolute; right: -10px; bottom: 8px; z-index: -1;
  color: rgba(255, 255, 255, .018); font-size: clamp(4.5rem, 9vw, 9rem);
  font-weight: 950; letter-spacing: -.06em; white-space: nowrap;
}
.station-logo-stage { width: 208px; height: 208px; margin-bottom: 22px; }
.station-logo-stage img { filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .42)); }
.station-card h1 { font-size: clamp(2.7rem, 6vw, 5.1rem); line-height: .94; letter-spacing: -.055em; }
.station-slogan { margin-top: 14px; color: #d4ddd6; font-size: clamp(1rem, 1.6vw, 1.2rem); }
.live-chip { border: 1px solid rgba(53, 243, 109, .22); background: rgba(53, 243, 109, .08); box-shadow: none; }
.main-player {
  margin-top: 32px; padding: 23px; border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px; background: rgba(0, 0, 0, .27); backdrop-filter: blur(14px);
}
.main-play-button {
  width: 82px; height: 82px; background: linear-gradient(145deg, #fff3a9, var(--gold) 52%, #c78b00);
  box-shadow: 0 7px 0 #745000, 0 18px 35px rgba(0, 0, 0, .38);
}
.quick-actions { gap: 12px; }
.quick-action {
  min-height: 126px; border-radius: 20px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.quick-action:hover { transform: translateY(-3px); filter: brightness(1.08); }
.chat-panel {
  top: 92px; border-radius: 28px;
  background: linear-gradient(165deg, rgba(15, 32, 20, .96), rgba(4, 10, 6, .98));
}
.chat-header { padding: 20px; }
.chat-messages { scrollbar-color: rgba(53, 243, 109, .35) transparent; }
.chat-send-row button, .whatsapp-3d-button {
  background: linear-gradient(135deg, #35f36d, #12aa42);
  box-shadow: 0 10px 25px rgba(20, 190, 72, .2);
}

.stats-section, .content-section, .app-promo-section { max-width: 1240px; }
.stats-section { margin-top: 20px; }
.stats-grid, .schedule-grid, .advertising-grid { gap: 16px; }
.stat-card { min-height: 118px; border-radius: 21px; transition: transform .2s ease, border-color .2s ease; }
.stat-card:hover { transform: translateY(-3px); border-color: rgba(53, 243, 109, .24); }
.content-section, .bi-news-section, .app-promo-section { padding-top: 96px; }
.section-heading { max-width: 720px; }
.section-heading > span, .section-label { color: var(--green); letter-spacing: .16em; }
.section-heading h2, .app-promo-copy h2 {
  font-size: clamp(2.1rem, 4.5vw, 3.6rem); line-height: 1.02; letter-spacing: -.045em;
}
.schedule-card, .advertising-card {
  border-radius: 24px; transition: transform .22s ease, border-color .22s ease;
}
.schedule-card:hover, .advertising-card:hover {
  transform: translateY(-5px); border-color: rgba(255, 211, 79, .24);
}
.app-promo {
  border-radius: 32px;
  background: radial-gradient(circle at 16% 40%, rgba(53, 243, 109, .13), transparent 28%),
    linear-gradient(145deg, rgba(17, 36, 23, .96), rgba(5, 11, 7, .99));
}
.app-icon-stage { width: min(245px, 55vw); }
.primary-3d-button {
  min-height: 54px; border-radius: 16px; background: linear-gradient(135deg, var(--gold), #eaaa0a);
  box-shadow: 0 12px 30px rgba(255, 196, 37, .16);
}
.advertising-cta { border-radius: 24px; }
.contact-item { min-height: 104px; border-radius: 22px; }
.mini-player {
  left: 50%; right: auto; bottom: max(16px, env(safe-area-inset-bottom));
  width: min(650px, calc(100% - 28px)); transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, .11); border-radius: 22px;
  background: rgba(7, 18, 11, .88); box-shadow: 0 20px 55px rgba(0, 0, 0, .55);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
}
:focus-visible { outline: 3px solid rgba(255, 211, 79, .88); outline-offset: 3px; }

@media (max-width: 980px) {
  .hero-layout { grid-template-columns: 1fr; }
  .chat-panel { position: relative; top: 0; }
  .main-nav {
    top: 76px; right: 18px; left: 18px; padding: 12px; border-radius: 20px;
    background: rgba(5, 12, 7, .97); box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  }
  .main-nav a, .nav-install-button { width: 100%; justify-content: center; }
}

@media (max-width: 720px) {
  body { padding-bottom: 96px; }
  .hero-section { padding: 24px 14px 0; }
  .station-card { min-height: auto; padding: 28px 20px 22px; border-radius: 27px; }
  .station-logo-stage { width: 165px; height: 165px; }
  .station-card h1 { font-size: clamp(2.65rem, 14vw, 4rem); }
  .main-player { padding: 18px; }
  .main-play-button { width: 70px; height: 70px; }
  .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-section, .bi-news-section, .app-promo-section { padding-top: 72px; }
  .mini-player { border-radius: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important; animation-duration: .01ms !important;
    animation-iteration-count: 1 !important; transition-duration: .01ms !important;
  }
}