/* Zona Latina 103 — PRO Futuristic UI (V2) */
:root{
  --bg:#07070A;
  --text:#EDEDED;
  --red:#FF1A1A;
  --amber:#FF8A00;
  --shadow: 0 24px 60px rgba(0,0,0,.55);
  --radius2: 24px;
  --max: 1120px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
button,input{ font:inherit; }
.container{ width:min(var(--max), calc(100% - 40px)); margin-inline:auto; }

.srOnly{ position:absolute !important; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0); white-space:nowrap;border:0; }

/* Background */
.bg-fx{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
.orb{ position:absolute; width:780px; height:780px; filter:blur(40px); opacity:.45; border-radius:50%; }
.orb--a{ left:-220px; top:-220px; background:radial-gradient(circle at 30% 30%, rgba(255,26,26,.75), rgba(255,26,26,0)); animation:floatA 10s ease-in-out infinite; }
.orb--b{ right:-260px; bottom:-280px; background:radial-gradient(circle at 60% 30%, rgba(0,255,122,.22), rgba(255,138,0,0)); animation:floatB 12s ease-in-out infinite; }
@keyframes floatA{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}}
@keyframes floatB{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,-20px)}}
.grid{ position:absolute; inset:0; opacity:.16; background:linear-gradient(to right, rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.08) 1px, transparent 1px); background-size:90px 90px; mask-image:radial-gradient(circle at 50% 20%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 75%); }
.noise{ position:absolute; inset:0; opacity:.07; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }

/* Topbar */
.topbar{ position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:rgba(7,7,10,.55); border-bottom:1px solid rgba(255,255,255,.08); }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand__name{ font-weight:600; letter-spacing:.2px; opacity:.95; }
.brand__name strong{ color:var(--red); text-shadow:0 0 22px rgba(255,26,26,.35); }
.brand__name--white{ color:#fff; }

.nav{ display:flex; align-items:center; gap:14px; }
.nav__link{ color:rgba(237,237,237,.85); font-weight:500; font-size:14px; padding:10px 10px; border-radius:12px; transition:transform .2s ease, background .2s ease, color .2s ease; }
.nav__link:hover{ background:rgba(255,255,255,.06); transform:translateY(-1px); color:#fff; }
.nav__link--cta{ background:linear-gradient(135deg, rgba(255,26,26,.20), rgba(255,138,0,.14)); border:1px solid rgba(255,26,26,.25); }

.navToggle{ display:none; width:44px;height:44px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.05); cursor:pointer; padding:10px; 
  -webkit-appearance:none; appearance:none;}
.navToggle span{ display:block; height:2px; background:rgba(255,255,255,.85); margin:6px 0; border-radius:2px; }

.mobileNav{ border-top:1px solid rgba(255,255,255,.08); background:rgba(7,7,10,.78); backdrop-filter:blur(16px); }
.mobileNav__inner{ display:grid; gap:10px; padding:14px 0 18px; }
.mobileNav__link{ padding:12px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); }
.mobileNav__link--cta{ border-color:rgba(255,26,26,.25); background:linear-gradient(135deg, rgba(255,26,26,.18), rgba(255,138,0,.12)); }

/* Hero */
.hero{ padding:44px 0 14px; }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:26px; align-items:stretch; }

.pill{ display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); color:rgba(237,237,237,.9); font-size:13px; }
.pill.small{ padding:8px 12px; font-size:12px; }
.dot-live{ width:9px;height:9px;border-radius:50%; background:var(--red); box-shadow:0 0 18px rgba(255,26,26,.75); animation:pulseRed 1.2s ease-in-out infinite; }
@keyframes pulseRed{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.65}}

.heroLogoWrap{ margin-top:18px; }
.heroLogo{ width:min(520px,100%); max-height:120px; object-fit:contain; filter:drop-shadow(0 0 18px rgba(255,26,26,.25)); }

.hero__subtitle{ margin:14px 0 0; max-width:54ch; color:rgba(237,237,237,.82); font-size:clamp(15px, 1.4vw, 18px); line-height:1.6; }
.hero__actions{ margin-top:18px; display:flex; flex-wrap:wrap; gap:12px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.05); color:#fff; font-weight:600; font-size:14px; transition:transform .18s ease, filter .18s ease; box-shadow:0 10px 28px rgba(0,0,0,.22); 
  -webkit-appearance:none; appearance:none;}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.08); }
.btn--primary{ border-color:rgba(255,26,26,.25); background:linear-gradient(135deg, rgba(255,26,26,.26), rgba(255,138,0,.18)); position:relative; }
.btn--primary::after{ content:""; position:absolute; inset:-1px; border-radius:16px; pointer-events:none; box-shadow:0 0 0 1px rgba(255,26,26,.18), 0 0 30px rgba(255,26,26,.14); }
.btn--ghost{ background:rgba(255,255,255,.04); }

.miniStats{ margin-top:18px; display:flex; gap:12px; flex-wrap:wrap; }
.miniStats__item{ flex:1 1 140px; padding:12px 14px; border-radius:18px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); }
.miniStats__big{ font-weight:800; font-size:18px; }
.miniStats__small{ color:rgba(237,237,237,.70); font-size:12px; margin-top:2px; }

/* Card */
.card{ border-radius:var(--radius2); border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.05); box-shadow:var(--shadow); }
.card--glass{ backdrop-filter:blur(14px); }
.card--glow{ position:relative; }
.card--glow::before{ content:""; position:absolute; inset:-1px; border-radius:var(--radius2); pointer-events:none;
  background:radial-gradient(900px 180px at 30% 0%, rgba(255,26,26,.18), transparent 55%),
            radial-gradient(900px 180px at 70% 100%, rgba(255,138,0,.12), transparent 55%);
  opacity:.95;
}
.playerShell{ display:grid; gap:12px; }
.autoplayMsg{ padding:12px 14px; border-radius:16px; border:1px solid rgba(255,138,0,.25); background:rgba(255,138,0,.10); }

/* Player */
.player{ padding:16px 16px 14px; }
.player__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.player__brand{ display:flex; align-items:center; gap:10px; font-weight:700; }
.badgePulse{ width:10px;height:10px;border-radius:50%; background:rgba(255,26,26,.9); box-shadow:0 0 18px rgba(255,26,26,.55); animation:pulseRed 1.2s ease-in-out infinite; }
.player__state{ color:rgba(237,237,237,.75); font-size:13px; }
.player__controls{ margin-top:14px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; }

.iconBtn{ width:56px;height:56px; border-radius:18px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.05); cursor:pointer; display:grid; place-items:center; transition:transform .18s ease, filter .18s ease; 
  -webkit-appearance:none; appearance:none; color:#fff;}
.iconBtn:hover{ transform:translateY(-1px); filter:brightness(1.1); }
.iconBtn:disabled{ opacity:.55; cursor:not-allowed; }
.iconBtn--primary{ border-color:rgba(255,138,0,.35); background:linear-gradient(135deg, rgba(255,138,0,.28), rgba(255,26,26,.18)); box-shadow:0 0 34px rgba(255,138,0,.14); }
.iconBtn--soft{ width:52px;height:52px; background:rgba(255,255,255,.04); }
.icon{ font-size:20px; }

.vol{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:18px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); }
#volume{ width:180px; accent-color:var(--amber); }
.dot{ width:9px;height:9px;border-radius:50%; background:rgba(237,237,237,.35); }
.player__bar{ margin-top:14px; height:2px; border-radius:999px; background:linear-gradient(90deg, transparent, rgba(255,26,26,.65), rgba(255,138,0,.55), transparent); opacity:.8; }

.playerViz{ margin-top:14px; display:grid; gap:10px; }
.onAirMini{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.onAir__badge{ display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border-radius:999px; border:1px solid rgba(255,26,26,.22); background:rgba(255,26,26,.08); font-weight:600; font-size:13px; }
.onAir__badge--mini{ padding:7px 10px; font-size:12px; }
.onAir__led{ width:9px;height:9px;border-radius:50%; background:rgba(237,237,237,.35); box-shadow:none; }

.eq{ display:flex; gap:4px; align-items:flex-end; height:26px; opacity:.85; }
.eq span{ width:5px; border-radius:6px; background:linear-gradient(180deg, rgba(255,138,0,.95), rgba(255,26,26,.85)); height:8px; transform-origin:bottom; animation:eqIdle 1.2s ease-in-out infinite; }
.eq span:nth-child(2){ animation-delay:.12s; }
.eq span:nth-child(3){ animation-delay:.24s; }
.eq span:nth-child(4){ animation-delay:.36s; }
.eq span:nth-child(5){ animation-delay:.48s; }
.eq--mini{ height:20px; }
.eq--mini span{ width:4px; }
@keyframes eqIdle{0%,100%{transform:scaleY(.55);opacity:.55}50%{transform:scaleY(1);opacity:1}}
.eq.is-playing span{ animation-name:eqPlay; }
@keyframes eqPlay{0%,100%{transform:scaleY(.35);opacity:.75}50%{transform:scaleY(1.25);opacity:1}}

.visualWrap{ position:relative; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.08);
  background:radial-gradient(900px 220px at 50% 10%, rgba(255,26,26,.14), transparent 60%), rgba(255,255,255,.03);
}
#viz{ display:block; width:100%; height:auto; }
.vizHint{ position:absolute; left:14px; bottom:12px; font-size:12px; color:rgba(237,237,237,.72); background:rgba(0,0,0,.35); padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.10); }

/* Sections */
.sectionHead{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; }
.sectionHead h2{ margin:0; font-size:clamp(22px,2.2vw,30px); }
.sectionHead p{ margin:0; color:rgba(237,237,237,.70); max-width:52ch; font-size:14px; }

/* Genres */
.genres{ padding:26px 0; }
.cards3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.cards3 .card{ padding:18px; }
.cardIcon{ width:42px;height:42px;border-radius:16px; display:grid; place-items:center; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); margin-bottom:12px; }
.cards3 h3{ margin:0 0 6px; font-size:18px; }
.cards3 p{ margin:0; color:rgba(237,237,237,.72); line-height:1.6; font-size:14px; }

/* TuneIn */
.tunein{ padding:12px 0 22px; }
.banner{ padding:18px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.banner__copy h2{ margin:0 0 6px; }
.banner__copy p{ margin:0; color:rgba(237,237,237,.70); font-size:14px; }
.banner__actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* WhatsApp CTA */
.whatsapp{ padding:8px 0 34px; }
.cta{ padding:18px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cta--big{ padding:22px; }
.cta__copy h2{ margin:0 0 8px; font-size:clamp(22px,2.2vw,32px); }
.cta__copy p{ margin:0; color:rgba(237,237,237,.72); line-height:1.6; }
.cta__tags{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
.tag{ font-size:12px; padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); }

.cta__actions{ display:grid; justify-items:end; gap:8px; }
.cta__actions--big{ justify-items:stretch; }
.cta__small{ font-size:12px; color:rgba(237,237,237,.62); }

.btn--whatsapp{ background:linear-gradient(135deg, rgba(0,255,122,.30), rgba(0,255,122,.16)); border-color:rgba(0,255,122,.40); padding:14px 18px; border-radius:18px; font-size:15px; }
@keyframes waBreath{0%,100%{transform:translateY(0); box-shadow:0 0 0 1px rgba(0,255,122,.18), 0 0 28px rgba(0,255,122,.22); filter:brightness(1)}50%{transform:translateY(-1px); box-shadow:0 0 0 1px rgba(0,255,122,.26), 0 0 54px rgba(0,255,122,.36); filter:brightness(1.08)}}
.btn--whatsappPulse{ animation:waBreath 1.8s ease-in-out infinite; box-shadow:0 0 0 1px rgba(0,255,122,.18), 0 0 34px rgba(0,255,122,.22); }

.waIcon{ display:inline-grid; place-items:center; width:28px;height:28px; border-radius:10px; background:rgba(0,255,122,.16); border:1px solid rgba(0,255,122,.26); }
.waIcon--big{ width:32px;height:32px;border-radius:12px; }

/* Floating WhatsApp */
.waFloat{ position:fixed; right:16px; bottom:16px; z-index:60; width:56px;height:56px;border-radius:20px; display:grid; place-items:center; background:rgba(0,255,122,.18); border:1px solid rgba(0,255,122,.30); box-shadow:0 18px 50px rgba(0,0,0,.45); transition:transform .18s ease, filter .18s ease; }
.waFloat:hover{ transform:translateY(-2px); filter:brightness(1.1); }
.waFloat span{ font-size:22px; }
.waFloat--pulse{ animation:waBreath 1.8s ease-in-out infinite; }

/* Footer */
.footer{ border-top:1px solid rgba(255,255,255,.08); padding:18px 0 28px; background:rgba(7,7,10,.55); backdrop-filter:blur(14px); }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer__brand{ font-weight:800; }
.footer__sub{ color:rgba(237,237,237,.65); font-size:13px; margin-top:2px; }
.footer__right{ display:flex; gap:14px; flex-wrap:wrap; }
.footer__right a{ color:rgba(237,237,237,.75); font-size:13px; padding:8px 10px; border-radius:12px; }
.footer__right a:hover{ background:rgba(255,255,255,.05); color:#fff; }

/* Responsive */
@media (max-width:980px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero{ padding-top:34px; }
  .banner,.cta{ flex-direction:column; align-items:stretch; }
  .cta__actions{ justify-items:stretch; }
  #volume{ width:160px; }
}
@media (max-width:760px){
  .nav{ display:none; }
  .navToggle{ display:block; }
  .sectionHead{ flex-direction:column; align-items:flex-start; }
  .cards3{ grid-template-columns:1fr; }
  .player__controls{ justify-content:flex-start; }
  #volume{ width: 100%; }
  .heroLogo{ max-height:110px; }

  /* Player controls layout on mobile */
  .player__controls{
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: stretch;
    gap: 10px;
  }
  #btnPlay{ grid-column: 1; grid-row: 1; width: 100%; }
  #btnStop{ grid-column: 2; grid-row: 1; width: 100%; }
  .player__controls .pill.small{ grid-column: 3; grid-row: 1; justify-self: end; }
  .player__controls .vol{ grid-column: 1 / -1; grid-row: 2; width: 100%; }
  #volume{ width: 100%; }

}

/* WhatsApp badge (Hero button) */
.waEmoji{
  display:inline-flex;
  width:28px;
  height:28px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background: rgba(0,255,122,.16);
  border: 1px solid rgba(0,255,122,.28);
}

/* GENRES: centrar encabezado (desktop + mobile) */
.genres .sectionHead{
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.genres .sectionHead p{
  text-align: center;
}

/* GENRE cards: icono + título en una sola línea (desktop + mobile) */
.cardHead{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.cards3 .cardIcon{
  margin-bottom:0;
  flex:0 0 auto;
}
.cards3 h3{ margin:0; }

/* Center TuneIn + WhatsApp blocks (desktop + mobile) */
.tunein .banner{
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.tunein .banner__actions{
  justify-content: center;
}
.whatsapp .cta{
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.whatsapp .cta__tags{
  justify-content: center;
}
.whatsapp .cta__actions{
  justify-items: center;

  /* HERO: centrar textos y elementos en móvil */
  .hero__copy{ text-align:center; }
  .pill{ justify-content:center; }
  .heroLogoWrap{ display:flex; justify-content:center; }
  .hero__actions{ justify-content:center; }

  /* HERO buttons full width on mobile */
  .hero__actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    justify-items: stretch;
    width: 100%;
  }
  .hero__actions .btn{
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
    padding: 16px 18px;
    font-size: 16px;
    border-radius: 18px;
  }

  /* MiniStats: 3 en una sola línea en móvil */
  .miniStats{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    justify-items: stretch;
  }
  .miniStats__item{
    text-align: center;
    padding: 10px 10px;
    min-width: 0;
  }
  .miniStats__big{ font-size: 16px; }
  .miniStats__small{ font-size: 11px; }

}

/* cardHead_force: guarantee icon+title in one row everywhere */
.cardHead{
  display:flex !important;
  flex-direction: row !important;
  align-items:center !important;
  gap:12px !important;
  margin-bottom:10px;


  /* Mobile: center titles, text and buttons in TuneIn + WhatsApp blocks */
  .tunein .banner,
  .whatsapp .cta{
    text-align:center;
    align-items:center;
    justify-content:center;
  }
  .tunein .banner__copy,
  .whatsapp .cta__copy{
    text-align:center;
  }
  .tunein .banner__actions,
  .whatsapp .cta__actions{
    justify-content:center;
    width:100%;
  }
  .tunein .banner__actions{
    display:grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .tunein .banner__actions .btn{
    width:100%;
    max-width:520px;
    margin-inline:auto;
  }
  .whatsapp .btn--whatsapp{
    width:100%;
    max-width:520px;
    margin-inline:auto;
    justify-content:center;
  }

}