/* ============================================================
   RADIO ZOOM ONLINE — STYLESHEET
   ============================================================ */

:root {
  --clr-bg:         #07071a;
  --clr-bg-2:       #0d0d2b;
  --clr-surface:    #111132;
  --clr-border:     rgba(255,255,255,0.07);
  --clr-primary:    #1a3fde;
  --clr-primary-lt: #3a66ff;
  --clr-primary-glow: #3a66ff55;
  --clr-accent:     #4d7dff;
  --clr-accent-2:   #7ba3ff;
  --clr-live:       #e74c3c;
  --clr-text:       #f0f0ff;
  --clr-text-muted: #8888bb;
  --clr-text-dim:   #555580;
  --grad-ig: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  --font-heading: 'Montserrat', sans-serif;
  --font-body:    'Inter', sans-serif;
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-full: 9999px;
  --ease:     cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --dur:      0.35s;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--clr-bg); color:var(--clr-text); font-family:var(--font-body); line-height:1.6; overflow-x:hidden; }
img  { max-width:100%; display:block; }
a    { text-decoration:none; color:inherit; }
ul   { list-style:none; }

/* ── Utility ─────────────────────────────────────────────── */
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
.accent    { color:var(--clr-accent); }

.section-header { text-align:center; margin-bottom:64px; }
.section-title  { font-family:var(--font-heading); font-size:clamp(1.8rem,4vw,2.8rem); font-weight:700; line-height:1.2; margin-bottom:16px; }
.section-subtitle { color:var(--clr-text-muted); font-size:1.05rem; max-width:560px; margin:0 auto; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 32px; border-radius:var(--radius-full);
  font-family:var(--font-heading); font-weight:600; font-size:0.95rem;
  letter-spacing:0.03em; cursor:pointer; border:2px solid transparent;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur);
}
.btn--primary { background:linear-gradient(135deg,var(--clr-primary),var(--clr-primary-lt)); color:#fff; box-shadow:0 8px 32px var(--clr-primary-glow); }
.btn--primary:hover { transform:translateY(-2px) scale(1.02); box-shadow:0 16px 48px var(--clr-primary-glow); }
.btn--outline { background:transparent; border-color:var(--clr-accent); color:var(--clr-accent); }
.btn--outline:hover { background:var(--clr-accent); color:#fff; transform:translateY(-2px); }
.btn--lg { padding:18px 44px; font-size:1.05rem; }
.btn--sm { padding:10px 20px; font-size:0.85rem; }

/* ── Scroll Reveal ───────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(36px); transition:opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── HEADER ──────────────────────────────────────────────── */
.header { position:fixed; top:0; left:0; right:0; z-index:999; padding:16px 0; transition:background var(--dur), box-shadow var(--dur), padding var(--dur); }
.header.scrolled { background:rgba(7,7,26,0.92); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); box-shadow:0 4px 32px rgba(0,0,0,0.5); padding:12px 0; }
.header__container { max-width:1200px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.header__brand { display:flex; align-items:center; gap:16px; flex-shrink:0; }
.header__logo { width:48px; height:48px; border-radius:50%; object-fit:cover; transition:transform var(--dur) var(--ease); }
.header__brand:hover .header__logo { transform:rotate(8deg) scale(1.1); }
.header__name { font-family:var(--font-heading); font-weight:700; font-size:1.15rem; letter-spacing:0.02em; }
.header__name em { font-style:normal; color:var(--clr-accent); }

.header__menu-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; z-index:1001; }
.header__menu-toggle span { display:block; width:24px; height:2px; background:var(--clr-text); border-radius:2px; transition:transform 0.3s var(--ease), opacity 0.3s; }
.header__menu-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.header__menu-toggle.open span:nth-child(2) { opacity:0; }
.header__menu-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.header__nav-list { display:flex; align-items:center; gap:4px; }
.header__nav-link { padding:8px 16px; border-radius:var(--radius-full); font-weight:500; font-size:0.9rem; color:var(--clr-text-muted); transition:color var(--dur), background var(--dur); }
.header__nav-link:hover { color:var(--clr-text); background:rgba(255,255,255,0.06); }
.header__nav-cta { background:linear-gradient(135deg,var(--clr-primary),var(--clr-primary-lt)); color:#fff !important; box-shadow:0 4px 16px var(--clr-primary-glow); }
.header__nav-cta:hover { transform:translateY(-1px); box-shadow:0 8px 24px var(--clr-primary-glow); }

/* ── HERO ────────────────────────────────────────────────── */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero__bg { position:absolute; inset:0; background-size:cover; background-position:center; background-attachment:fixed; transform:scale(1.06); }
.hero__overlay { position:absolute; inset:0; background:linear-gradient(160deg,rgba(7,7,26,0.88) 0%,rgba(13,27,90,0.72) 50%,rgba(7,7,26,0.94) 100%); }
.hero__content { position:relative; z-index:2; text-align:center; padding:96px 24px 48px; max-width:760px; }

.hero__badge { display:inline-flex; align-items:center; gap:8px; background:rgba(231,76,60,0.15); border:1px solid rgba(231,76,60,0.35); color:#ff6b6b; border-radius:var(--radius-full); padding:6px 16px; font-size:0.78rem; font-weight:700; letter-spacing:0.12em; margin-bottom:24px; text-transform:uppercase; }
.hero__live-dot { width:8px; height:8px; background:var(--clr-live); border-radius:50%; animation:pulse-live 1.4s ease-in-out infinite; }

@keyframes pulse-live { 0%,100%{box-shadow:0 0 0 0 rgba(231,76,60,0.6)}50%{box-shadow:0 0 0 8px rgba(231,76,60,0)} }

.hero__title { font-family:var(--font-heading); font-size:clamp(2.4rem,6vw,4.4rem); font-weight:900; line-height:1.1; margin-bottom:24px; text-shadow:0 4px 24px rgba(0,0,0,0.4); }
.hero__title--accent { background:linear-gradient(135deg,var(--clr-accent),var(--clr-accent-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero__subtitle { font-size:clamp(1rem,2.2vw,1.2rem); color:rgba(240,240,255,0.72); margin-bottom:40px; line-height:1.65; }
.hero__cta { animation:hero-pulse 3s ease-in-out infinite; }
@keyframes hero-pulse { 0%,100%{box-shadow:0 8px 32px var(--clr-primary-glow)}50%{box-shadow:0 16px 60px rgba(58,102,255,0.55)} }

.hero__scroll-hint { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; color:rgba(255,255,255,0.4); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; animation:scroll-bounce 2s ease-in-out infinite; z-index:2; }
@keyframes scroll-bounce { 0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)} }

/* ── PLAYER ──────────────────────────────────────────────── */
.player-section { padding:96px 0; background:var(--clr-bg-2); position:relative; }
.player-section::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:600px; height:1px; background:linear-gradient(90deg,transparent,var(--clr-accent),transparent); }

.player-card { max-width:680px; margin:0 auto; background:rgba(255,255,255,0.04); border:1px solid var(--clr-border); border-radius:var(--radius-xl); padding:40px 40px 32px; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); box-shadow:0 0 0 1px rgba(58,102,255,0.08),0 32px 80px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.07); position:relative; overflow:hidden; transition:box-shadow 0.5s var(--ease); }
.player-card.playing { box-shadow:0 0 0 1px rgba(58,102,255,0.25),0 32px 80px rgba(0,0,0,0.5),0 0 80px rgba(26,63,222,0.2),inset 0 1px 0 rgba(255,255,255,0.1); }

.player-card__visualizer { display:flex; align-items:flex-end; justify-content:center; gap:4px; height:40px; margin-bottom:32px; }
.player-card__visualizer span { display:block; width:4px; background:linear-gradient(to top,var(--clr-primary),var(--clr-accent)); border-radius:2px; height:6px; }

.player-card.playing .player-card__visualizer span:nth-child(1)  { animation:bar 1.1s 0.00s ease-in-out infinite alternate; }
.player-card.playing .player-card__visualizer span:nth-child(2)  { animation:bar 1.1s 0.10s ease-in-out infinite alternate; }
.player-card.playing .player-card__visualizer span:nth-child(3)  { animation:bar 1.1s 0.20s ease-in-out infinite alternate; }
.player-card.playing .player-card__visualizer span:nth-child(4)  { animation:bar 1.1s 0.30s ease-in-out infinite alternate; }
.player-card.playing .player-card__visualizer span:nth-child(5)  { animation:bar 1.1s 0.15s ease-in-out infinite alternate; }
.player-card.playing .player-card__visualizer span:nth-child(6)  { animation:bar 1.1s 0.05s ease-in-out infinite alternate; }
.player-card.playing .player-card__visualizer span:nth-child(7)  { animation:bar 1.1s 0.25s ease-in-out infinite alternate; }
.player-card.playing .player-card__visualizer span:nth-child(8)  { animation:bar 1.1s 0.35s ease-in-out infinite alternate; }
.player-card.playing .player-card__visualizer span:nth-child(9)  { animation:bar 1.1s 0.18s ease-in-out infinite alternate; }
.player-card.playing .player-card__visualizer span:nth-child(10) { animation:bar 1.1s 0.08s ease-in-out infinite alternate; }
@keyframes bar { from{height:6px}to{height:36px} }

.player-card__info { display:flex; align-items:center; gap:24px; margin-bottom:32px; }
.player-card__logo { width:72px; height:72px; border-radius:50%; object-fit:cover; border:2px solid rgba(58,102,255,0.4); box-shadow:0 0 24px rgba(26,63,222,0.3); flex-shrink:0; }
.player-card.playing .player-card__logo { animation:spin-slow 12s linear infinite; }
@keyframes spin-slow { to{transform:rotate(360deg)} }
.player-card__meta { flex:1; }
.player-card__station { display:block; font-family:var(--font-heading); font-weight:700; font-size:1.25rem; margin-bottom:4px; }
.player-card__status { display:inline-flex; align-items:center; gap:6px; font-size:0.82rem; color:var(--clr-text-muted); }
.player-card__status i { font-size:0.6rem; color:var(--clr-text-dim); }
.player-card__status.live { color:#ff6b6b; }
.player-card__status.live i { color:var(--clr-live); animation:pulse-live 1.4s ease-in-out infinite; }
.player-card__live-badge { background:linear-gradient(135deg,#c0392b,var(--clr-live)); color:#fff; font-family:var(--font-heading); font-size:0.7rem; font-weight:700; letter-spacing:0.1em; padding:4px 10px; border-radius:var(--radius-full); box-shadow:0 4px 12px rgba(231,76,60,0.4); flex-shrink:0; }

.player-card__controls { display:flex; align-items:center; justify-content:center; gap:32px; margin-bottom:24px; }
.player-btn { background:none; border:none; cursor:pointer; color:var(--clr-text); transition:transform var(--dur) var(--ease), color var(--dur); }
.player-btn--play { width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg,var(--clr-primary),var(--clr-primary-lt)); color:#fff; font-size:1.4rem; box-shadow:0 8px 32px var(--clr-primary-glow); display:flex; align-items:center; justify-content:center; transition:transform var(--dur) var(--ease), box-shadow var(--dur); }
.player-btn--play:hover { transform:scale(1.1); box-shadow:0 16px 48px rgba(58,102,255,0.6); }
.player-btn--play:active { transform:scale(0.95); }
.player-card__volume { display:flex; align-items:center; gap:12px; }
.player-btn--mute { font-size:1rem; color:var(--clr-text-muted); }
.player-btn--mute:hover { color:var(--clr-text); transform:scale(1.1); }
.volume-slider { -webkit-appearance:none; appearance:none; width:110px; height:4px; background:rgba(255,255,255,0.12); border-radius:var(--radius-full); outline:none; cursor:pointer; }
.volume-slider::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--clr-accent); box-shadow:0 2px 8px rgba(58,102,255,0.5); transition:transform 0.2s; }
.volume-slider::-webkit-slider-thumb:hover { transform:scale(1.3); }
.volume-slider::-moz-range-thumb { width:100px; height:14px; border:none; border-radius:50%; background:var(--clr-accent); }
.player-card__wave { height:30px; opacity:0.18; margin-top:8px; }
.wave-path { fill:none; stroke:var(--clr-accent); stroke-width:2; stroke-dasharray:800; animation:wave-dash 6s linear infinite; }
@keyframes wave-dash { to{stroke-dashoffset:-800} }

/* ── SOCIAL ──────────────────────────────────────────────── */
.social-section { padding:96px 0; background:var(--clr-bg); }
.social-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:32px; max-width:720px; margin:0 auto; }
.social-card { position:relative; display:flex; align-items:center; gap:24px; padding:32px; border-radius:var(--radius-lg); background:var(--clr-surface); border:1px solid var(--clr-border); overflow:hidden; transition:transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur); }
.social-card:hover { transform:translateY(-6px); }
.social-card__glow { position:absolute; top:-40%; right:-20%; width:200px; height:200px; border-radius:50%; opacity:0; transition:opacity var(--dur); pointer-events:none; }
.social-card:hover .social-card__glow { opacity:0.15; }
.social-card--instagram:hover { border-color:rgba(225,48,108,0.4); box-shadow:0 16px 48px rgba(225,48,108,0.2); }
.social-card--instagram .social-card__glow { background:var(--grad-ig); }
.social-card--instagram .social-card__icon { background:var(--grad-ig); }
.social-card--twitter:hover { border-color:rgba(255,255,255,0.2); box-shadow:0 16px 48px rgba(255,255,255,0.08); }
.social-card--twitter .social-card__glow { background:#fff; }
.social-card--twitter .social-card__icon { background:#1a1a1a; border:1px solid rgba(255,255,255,0.2); }
.social-card__icon { width:56px; height:56px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:#fff; flex-shrink:0; }
.social-card__content { display:flex; flex-direction:column; gap:3px; }
.social-card__platform { font-family:var(--font-heading); font-weight:700; font-size:1.05rem; }
.social-card__handle { color:var(--clr-text-muted); font-size:0.85rem; }
.social-card__action { color:var(--clr-accent); font-size:0.82rem; font-weight:600; display:inline-flex; align-items:center; gap:4px; margin-top:4px; transition:gap var(--dur); }
.social-card:hover .social-card__action { gap:8px; }

/* ── ABOUT ───────────────────────────────────────────────── */
.about-section { padding:96px 0; background:var(--clr-bg-2); }
.about-layout { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.about-image { position:relative; }
.about-image img { border-radius:var(--radius-xl); width:100%; aspect-ratio:4/3; object-fit:cover; }
.about-image__frame { position:absolute; inset:-12px -12px -12px -12px; border:2px solid var(--clr-accent); border-radius:var(--radius-xl); opacity:0.25; pointer-events:none; }
.about-label { display:inline-block; color:var(--clr-accent); font-size:0.78rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:16px; }
.about-content .section-title { text-align:left; margin-bottom:24px; }
.about-text { color:var(--clr-text-muted); line-height:1.75; margin-bottom:24px; font-size:0.97rem; }

/* ── FOOTER ──────────────────────────────────────────────── */
.footer { background:var(--clr-surface); border-top:1px solid var(--clr-border); padding-top:64px; }
.footer__top { display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; padding-bottom:64px; border-bottom:1px solid var(--clr-border); }
.footer__logo { width:56px; height:56px; border-radius:50%; object-fit:cover; margin-bottom:16px; }
.footer__tagline { color:var(--clr-text-muted); font-size:0.9rem; margin-bottom:24px; }
.footer__social { display:flex; gap:16px; }
.footer__social a { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid var(--clr-border); display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--clr-text-muted); transition:background var(--dur), color var(--dur), transform var(--dur); }
.footer__social a:hover { background:var(--clr-primary); color:#fff; transform:translateY(-3px); border-color:var(--clr-primary); }
.footer__links h4,.footer__contact h4 { font-family:var(--font-heading); font-size:0.85rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:24px; }
.footer__links ul { display:flex; flex-direction:column; gap:8px; }
.footer__links a { color:var(--clr-text-muted); font-size:0.9rem; transition:color var(--dur); }
.footer__links a:hover { color:var(--clr-accent); }
.footer__contact p { color:var(--clr-text-muted); font-size:0.9rem; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.footer__contact p i { color:var(--clr-accent); width:14px; }
.footer__contact .btn { margin-top:16px; }
.footer__bottom { display:flex; align-items:center; justify-content:space-between; padding:24px 0; }
.footer__copy { color:var(--clr-text-dim); font-size:0.85rem; }
.back-to-top { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--clr-primary),var(--clr-primary-lt)); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:0.9rem; box-shadow:0 4px 16px var(--clr-primary-glow); transition:transform var(--dur) var(--ease), box-shadow var(--dur); }
.back-to-top:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(58,102,255,0.5); }

/* ── FLOATING PLAYER ─────────────────────────────────────── */
.floating-player { position:fixed; bottom:32px; right:32px; z-index:998; display:flex; align-items:center; gap:12px; flex-direction:row-reverse; }
.floating-player__btn { width:58px; height:58px; border-radius:50%; background:linear-gradient(135deg,var(--clr-primary),var(--clr-primary-lt)); border:none; color:#fff; font-size:1.25rem; cursor:pointer; box-shadow:0 8px 32px var(--clr-primary-glow); display:flex; align-items:center; justify-content:center; transition:transform var(--dur) var(--ease), box-shadow var(--dur); animation:floating-breathe 3s ease-in-out infinite; }
@keyframes floating-breathe { 0%,100%{box-shadow:0 8px 32px var(--clr-primary-glow)}50%{box-shadow:0 12px 48px rgba(58,102,255,0.6)} }
.floating-player__btn:hover { transform:scale(1.12); }
.floating-player__tooltip { background:rgba(13,13,43,0.95); border:1px solid var(--clr-border); color:var(--clr-text); font-size:0.78rem; font-weight:600; padding:7px 14px; border-radius:var(--radius-full); white-space:nowrap; backdrop-filter:blur(12px); opacity:0; transform:translateX(8px); transition:opacity var(--dur), transform var(--dur); pointer-events:none; }
.floating-player:hover .floating-player__tooltip { opacity:1; transform:translateX(0); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
/* ── RESPONSIVE OPTIMIZADO ───────────────────────────────── */
@media (max-width: 992px) {
  .about-layout { 
    grid-template-columns: 1fr; 
    gap: 40px; 
    text-align: center;
  }
  .about-content .section-title {
    text-align: center;
  }
  .footer__top { 
    grid-template-columns: 1fr 1fr; 
    gap: 32px;
  }
  .footer__brand { 
    grid-column: 1 / -1; 
  }
}

@media (max-width: 768px) {
  .hero__content {
    padding: 120px 16px 60px;
    width: 100%;
  }
  .player-card { 
    padding: 32px 20px 24px; 
    border-radius: var(--radius-lg);
  }
  .player-card__info {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  .player-card__controls { 
    flex-direction: column;
    gap: 20px; 
  }
  .player-card__volume {
    width: 100%;
    justify-content: center;
  }
  .volume-slider { 
    width: 140px; 
  }

  /* Menú Móvil */
  .header__menu-toggle { 
    display: flex; 
  }
  .header__nav { 
    position: fixed; 
    inset: 0; 
    background: rgba(7, 7, 26, 0.98); 
    backdrop-filter: blur(24px); 
    -webkit-backdrop-filter: blur(24px);
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transform: translateX(100%); 
    transition: transform 0.4s var(--ease-out); 
    z-index: 1000; 
  }
  .header__nav.open { 
    transform: translateX(0); 
  }
  .header__nav-list { 
    flex-direction: column; 
    gap: 24px; 
    text-align: center; 
  }
  .header__nav-link { 
    font-size: 1.3rem; 
    padding: 12px 32px; 
  }
  
  .social-grid {
    grid-template-columns: 1fr;
    padding: 0 16px;
  }
}

@media (max-width: 480px) {
  .hero__title { 
    font-size: 2.2rem; 
  }
  .footer__top {
    grid-template-columns: 1fr;
    text-align: left; /* <-- Volvemos a alinear textos e h4 a la izquierda */
  }
  .footer__social {
    justify-content: flex-start; /* <-- Los círculos de Instagram/X a la izquierda */
  }
  .footer__contact p {
    justify-content: flex-start; /* <-- Iconos de señal y globo a la izquierda */
  }
  .footer__bottom { 
    flex-direction: column; 
    gap: 16px; 
    text-align: left; /* <-- Copyright y botón de volver arriba a la izquierda */
  }
  .floating-player {
    bottom: 16px;
    right: 16px;
  }
}