:root{
  --bg:#070b14;
  --card:rgba(20,28,50,.55);
  --card2:rgba(12,18,34,.6);
  --line:rgba(255,255,255,.08);
  --text:#eaf0ff;
  --muted:rgba(234,240,255,.62);
  --accent:#7c3aed;
  --shadow: 0 18px 40px rgba(0,0,0,.45);
  --radius:26px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
a{color:inherit}

body{
  background:
    radial-gradient(1000px 700px at 25% -10%, rgba(124,58,237,.26), transparent 55%),
    radial-gradient(900px 650px at 80% 10%, rgba(59,130,246,.18), transparent 55%),
    linear-gradient(180deg, #050813 0%, #070b14 100%);
}

.container{
  width: min(1100px, 92%);
  margin: 0 auto;
  padding: 14px 0 92px;
}

/* ===== TOP BAR ===== */
.appTop{
  position: sticky;
  top:0;
  z-index: 50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  background: rgba(5,8,19,.72);
  backdrop-filter: none;
  border-bottom: 1px solid var(--line);
}

.appTop__left{display:flex;align-items:center;gap:12px;min-width:0}
.appTop__logo{
  width:44px;height:44px;border-radius:14px;object-fit:cover;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 20px rgba(0,0,0,.35);
}
.appTop__logo.ph{background:rgba(255,255,255,.06)}
.appTop__title{min-width:0}
.appTop__name{font-weight:900;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appTop__subtitle{font-size:12px;color:var(--muted);margin-top:2px}

.shareBtn{
  width:44px;height:44px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff;
  display:grid;place-items:center;
  cursor:pointer;
  transition:.18s transform, .18s background;
}
.shareBtn:hover{transform: translateY(-1px); background: rgba(255,255,255,.10)}

/* ===== CARDS ===== */
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.pad{padding:16px}

.sectionHead{
  display:flex;align-items:baseline;justify-content:space-between;
  padding: 16px 16px 10px;
}
.h2{margin:0;font-size:28px;letter-spacing:.2px}
.small{color:var(--muted);font-size:14px}

/* ===== SLIDER (como la captura) ===== */
.hero{
  padding: 14px;
}
.heroFrame{
  border-radius: 28px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}
.heroImg{
  width:100%;
  aspect-ratio: 16 / 9;
  position:relative;
}
.heroImg img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.02);
}

.dots{
  display:flex;gap:8px;justify-content:center;
  padding: 10px 0 2px;
}
.dots span{
  width:8px;height:8px;border-radius:999px;
  background: rgba(255,255,255,.25);
}
.dots span.on{background: rgba(255,255,255,.85)}

/* ===== TV ===== */
.videoBox{
  margin: 0 16px 16px;
  border-radius: 26px;
  overflow:hidden;
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.10);
}
.videoBox iframe, .videoBox video{
  width:100%;
  aspect-ratio:16/9;
  border:0;
  display:block;
}

/* ===== Social Buttons (reales) ===== */
.socialRow{
  display:flex;
  gap:14px;
  padding: 12px 16px 18px;
  flex-wrap:wrap;
}
.soc{
  width:62px;height:62px;border-radius:999px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 30px rgba(0,0,0,.25);
  transition:.18s transform, .18s background;
  text-decoration:none;
}
.soc:hover{transform: translateY(-2px); background: rgba(255,255,255,.10)}
.soc svg{opacity:.95}

.soc.wh{color:#34C759}
.soc.fb{color:#1877F2}
.soc.ig{color:#ff4bd8}
.soc.yt{color:#ff2d2d}
.soc.web{color:#22c1ff}
.soc.tt{color:#ffffff}

/* ===== Videos grid ===== */
.grid{display:grid;gap:14px}
.grid2{grid-template-columns:repeat(2, minmax(0,1fr))}
@media (max-width:720px){ .grid2{grid-template-columns:1fr} }

.vCard{
  border-radius: 22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  text-decoration:none;
}
.vthumb{
  aspect-ratio: 16/9;
  background: rgba(255,255,255,.06);
}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block}
.vInfo{padding:12px 12px 14px}
.vTitle{font-weight:900;font-size:18px;line-height:1.15}
.vMeta{color:var(--muted);font-size:13px;margin-top:6px}

.btnMini{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  text-decoration:none;
  font-weight:800;
}

/* ===== footer ===== */
.footer{
  text-align:center;
  color:rgba(234,240,255,.55);
  font-size:14px;
  padding: 18px 0 0;
}

/* ===== bottom nav ===== */
.bottomNav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(5,8,19,.82);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display:flex;
  gap:10px;
  justify-content:space-around;
  z-index: 99;
}

.bottomNav__item{
  width: 92px;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color: rgba(234,240,255,.65);
}
.bottomNav__icon{
  width:54px;height:54px;border-radius:18px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.bottomNav__text{font-weight:800;font-size:14px}

.bottomNav__item.is-active{color:#fff}
.bottomNav__item.is-active .bottomNav__icon{
  background: rgba(124,58,237,.25);
  border-color: rgba(124,58,237,.45);
}
/* ===== RADIO (PRO - compatible con tu theme) ===== */

.radioCard{
  position:relative;
  padding: 16px;
  min-height: 540px;
}

.radioCard__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 600px at 20% -10%, rgba(124,58,237,.24), transparent 55%),
    radial-gradient(900px 650px at 85% 10%, rgba(59,130,246,.16), transparent 55%),
    radial-gradient(700px 520px at 50% 90%, rgba(255,255,255,.06), transparent 60%);
  pointer-events:none;
}

.radioTopRow{
  position:relative;
  display:flex;
  justify-content:flex-start;
}

.livePill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  box-shadow: 0 16px 30px rgba(0,0,0,.35);
  font-weight:900;
}
.liveDot{
  width:10px;height:10px;border-radius:999px;
  background:#ef4444;
  box-shadow: 0 0 0 6px rgba(239,68,68,.18);
  opacity:.45;
}
.livePill.is-live .liveDot{opacity:1}

.radioCenter{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding: 20px 0 12px;
}

.radioLogoCircle{
  width: 240px;
  height: 240px;
  border-radius:999px;
  border: 14px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  box-shadow: 0 28px 60px rgba(0,0,0,.45);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.radioLogoCircle img{width:100%;height:100%;object-fit:cover;display:block}

.radioTitle{
  margin-top: 22px;
  font-size: 34px;
  font-weight: 1000;
  letter-spacing: .4px;
}
.radioSub{
  margin-top: 8px;
  font-size: 16px;
  color: var(--muted);
}

.playMain{
  margin-top: 18px;
  width: 112px;
  height: 112px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
  box-shadow: 0 28px 60px rgba(0,0,0,.35);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:.18s transform, .18s background;
}
.playMain:hover{transform: translateY(-2px); background: rgba(255,255,255,.14)}
.playIcon{
  font-size: 46px;
  font-weight: 1000;
  transform: translateX(2px);
}

.radioBottom{
  position:relative;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  text-align:center;
}

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono";
  font-size: 12px;
  opacity:.85;
  word-break: break-all;
}

@media (max-width:520px){
  .radioLogoCircle{width: 210px; height:210px}
  .radioTitle{font-size: 28px}
  .playMain{width:96px;height:96px}
  .playIcon{font-size:40px}
}
/* ===== SLIDER PRO (como captura) ===== */
.hero{ padding:14px; }

.heroFrame{
  border-radius: 28px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

.heroImg{
  width:100%;
  aspect-ratio: 16 / 9;
  position:relative;
}
.heroImg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.02);
}

.dots{
  display:flex;
  gap:8px;
  justify-content:center;
  padding: 10px 0 2px;
}
.dots span{
  width:8px;height:8px;border-radius:999px;
  background: rgba(255,255,255,.25);
}
.dots span.on{ background: rgba(255,255,255,.85); }
/* ===== REDES (2 filas) ===== */
.socialRow{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
  padding: 12px 16px 18px;
}
@media (max-width:420px){
  .socialRow{ grid-template-columns: repeat(3, 1fr); }
}
.soc{
  width:62px;height:62px;border-radius:999px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 30px rgba(0,0,0,.25);
  transition:.18s transform, .18s background;
  text-decoration:none;
  margin:0 auto;
}
.soc:hover{transform: translateY(-2px); background: rgba(255,255,255,.10)}
/* ===== VIDEOS tipo app ===== */
.vList{ padding: 0 16px 16px; }
.vCard{
  border-radius: 22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  text-decoration:none;
  display:block;
}
.vthumb{
  aspect-ratio: 16/9;
  background: rgba(255,255,255,.06);
}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block}
.vInfo{padding:12px 12px 14px}
.vTitle{font-weight:900;font-size:18px;line-height:1.15}
/* ===== RADIO: ocultar url y animaci贸n pro ===== */

.radioBottom{ display:none !important; } /* quita el bloque feo */

.nowPlaying{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  max-width: 520px;
}

.npLabel{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .2px;
}
.npTitle{
  margin-top: 6px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
}
.npSub{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(234,240,255,.70);
}

.radioLogoCircle{
  transition: transform .25s ease, box-shadow .25s ease;
}

/* girar logo cuando est谩 reproduciendo */
.radioLogoCircle.is-playing{
  animation: spinLogo 6s linear infinite;
  box-shadow: 0 28px 60px rgba(0,0,0,.45), 0 0 0 10px rgba(124,58,237,.10);
}

@keyframes spinLogo{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* respeta usuarios con reduce motion */
@media (prefers-reduced-motion: reduce){
  .radioLogoCircle.is-playing{ animation: none; }
}
/* =========================
   HERO / SLIDER SUELTO
========================= */
.heroLoose{
  margin-top: 12px;
}

.heroLoose .heroFrame{
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}

.heroLoose .heroImg{
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
}

.heroLoose .heroImg img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* CLAVE: que se vea bonito en móvil */
  display: block;
}

/* dots centrados */
.heroLoose .dots{
  display:flex;
  gap:8px;
  justify-content:center;
  align-items:center;
  padding:10px 0 0;
}
.heroLoose .dots span{
  width:8px; height:8px;
  border-radius:999px;
  background: rgba(255,255,255,.35);
  cursor:pointer;
}
.heroLoose .dots span.on{
  background: rgba(255,255,255,.95);
}

/* En móvil: un poco más alto el hero para que luzca */
@media (max-width: 520px){
  .heroLoose .heroFrame{ border-radius: 16px; }
  .heroLoose .heroImg{ aspect-ratio: 4/3; }
}

/* =========================
   TV SUELTA
========================= */
.tvLoose .videoBox.loose{
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}

/* Asegura ratio bonito */
.videoBox.loose{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
}
.videoBox.loose iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* =========================
   REDES EN UNA SOLA LINEA
========================= */
.socialRow.oneLine{
  display: flex;
  flex-wrap: nowrap;          /* NO baja a otra línea */
  gap: 10px;
  overflow-x: auto;           /* si no caben, scroll horizontal */
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.socialRow.oneLine::-webkit-scrollbar{ height: 6px; }
.socialRow.oneLine::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.25); border-radius: 999px; }

.socialRow.oneLine .soc{
  flex: 0 0 auto;             /* mantiene tamaño */
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* opcional: efecto pro */
.socialRow.oneLine .soc svg{
  width: 22px;
  height: 22px;
}
/* =========================
   FIX FINAL: REDES 1 LINEA
========================= */
.socialRow.oneLine{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:12px !important;
  padding: 12px 16px 18px !important;

  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width: thin;
  scroll-snap-type: x mandatory;
}

.socialRow.oneLine::-webkit-scrollbar{ height:6px; }
.socialRow.oneLine::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.22);
  border-radius:999px;
}

.socialRow.oneLine .soc{
  flex:0 0 auto !important;
  width:62px !important;
  height:62px !important;
  border-radius:999px !important;
  margin:0 !important;
  scroll-snap-align:start;
}
/* =========================
   HERO SUELTO - PRO
========================= */
.heroLoose{
  margin-top: 12px;
}

.heroLoose .heroFrame{
  border-radius: 28px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  box-shadow: var(--shadow);
}

.heroLoose .heroImg{
  width:100%;
  aspect-ratio: 16/9;
  position:relative;
}

.heroLoose .heroImg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.02);
}

/* dots */
.heroLoose .dots{
  display:flex;
  gap:8px;
  justify-content:center;
  padding: 10px 0 2px;
}
.heroLoose .dots span{
  width:8px;height:8px;border-radius:999px;
  background: rgba(255,255,255,.25);
  cursor:pointer;
}
.heroLoose .dots span.on{ background: rgba(255,255,255,.85); }

/* móvil: más alto para que no se mire “aplastado” */
@media (max-width:520px){
  .heroLoose .heroImg{ aspect-ratio: 4/3; }
}
/* =========================
   TV SUELTA - PRO
========================= */
.tvLoose .videoBox.loose{
  margin: 0;
  border-radius: 26px;
  overflow:hidden;
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
}

.videoBox.loose{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
}
.videoBox.loose iframe,
.videoBox.loose video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}
/* =========================
   FONDO CON IMAGEN + GRADIENTE
========================= */
body.hasHomeBg{
  background:
    radial-gradient(1000px 700px at 25% -10%, rgba(124,58,237,.26), transparent 55%),
    radial-gradient(900px 650px at 80% 10%, rgba(59,130,246,.18), transparent 55%),
    linear-gradient(180deg, rgba(5,8,19,.75) 0%, rgba(7,11,20,.85) 100%),
    var(--homeBg);
  background-size: auto, auto, auto, cover;
  background-position: center, center, center, center;
  background-repeat: no-repeat;
  background-attachment: scroll, scroll, scroll, fixed;
}
/* =========================
   SLIDER: tamaño controlado (PC + Móvil)
========================= */
.heroLoose .heroImg{
  aspect-ratio: auto !important;     /* quita 16/9 */
  height: clamp(200px, 28vw, 360px) !important;  /* MIN, flexible, MAX */
}

/* imagen siempre cubre sin deformar */
.heroLoose .heroImg img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: none !important; /* quita el zoom 1.02 si lo sentís grande */
}

/* en móvil más compacto */
@media (max-width: 520px){
  .heroLoose .heroImg{
    height: 220px !important;
  }
}

/* en pantallas grandes que no se dispare */
@media (min-width: 1100px){
  .heroLoose .heroImg{
    height: 320px !important;
  }
}
/* =========================
   SLIDER TIPO BANNER PRO
========================= */

/* Quitamos cualquier aspect-ratio anterior */
.heroLoose .heroImg{
  aspect-ratio: auto !important;
  height: 300px !important;   /* altura en PC */
  position: relative;
}

/* Imagen ocupa todo */
.heroLoose .heroImg img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform:none !important;
}

/* Marco elegante */
.heroLoose .heroFrame{
  border-radius: 26px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  box-shadow: 0 20px 45px rgba(0,0,0,.45);
}

/* Dots */
.heroLoose .dots{
  display:flex;
  justify-content:center;
  gap:8px;
  padding:10px 0 4px;
}

.heroLoose .dots span{
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,.35);
}

.heroLoose .dots span.on{
  background: rgba(255,255,255,.95);
}

/* 📱 MÓVIL */
@media (max-width: 768px){
  .heroLoose .heroImg{
    height: 220px !important;   /* más compacto */
  }
}

/* 📱 Móvil pequeño */
@media (max-width: 480px){
  .heroLoose .heroImg{
    height: 190px !important;
  }
}
/* =========================
   SLIDER ESTILO APP TV (PRO)
========================= */

.heroLoose{
  margin-top: 0;
}

/* marco del banner */
.heroLoose .heroFrame{
  border-radius: 0;
  border:0;
  box-shadow:none;
  background:transparent;
}

/* ALTURA tipo banner */
.heroLoose .heroImg{
  height: 140px !important;   /* tamaño ideal tipo app */
  overflow:hidden;
  position:relative;
}

/* imagen ocupa todo */
.heroLoose .heroImg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* dots minimal */
.heroLoose .dots{
  position:absolute;
  bottom:6px;
  left:0;
  right:0;
  justify-content:center;
}

.heroLoose .dots span{
  width:6px;
  height:6px;
  background:rgba(255,255,255,.4);
}

.heroLoose .dots span.on{
  background:#fff;
}

/* móvil */
@media (max-width:520px){
  .heroLoose .heroImg{
    height:110px !important;
  }
}

/* pantallas grandes */
@media (min-width:1000px){
  .heroLoose .heroImg{
    height:180px !important;
  }
}
/* =========================
   SLIDER FULL WIDTH PRO
========================= */

/* sin bordes ni padding */
.heroLoose .heroFrame{
  border-radius:0 !important;
  border:0 !important;
  box-shadow:none !important;
}
/* =========================
   SLIDER FULL APP STYLE PRO
========================= */

/* rompe el container */
.heroLoose{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:-14px; /* pega al header */
}

/* sin caja */
.heroLoose .heroFrame{
  border-radius:0 !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent;
}

/* altura tipo banner PRO */
.heroLoose .heroImg{
  height:160px !important;
  overflow:hidden;
}

/* imagen limpia */
.heroLoose .heroImg img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* dots flotantes */
.heroLoose .dots{
  position:absolute;
  bottom:10px;
  left:0;
  right:0;
  justify-content:center;
}

/* móvil */
@media (max-width:520px){
  .heroLoose .heroImg{
    height:120px !important;
  }
}
/* =========================
   FIX PC: Banner más bajo
========================= */

/* base (tablet/móvil) */
.heroLoose .heroImg{
  height: 120px !important;
}

/* móvil pequeño */
@media (max-width: 420px){
  .heroLoose .heroImg{ height: 110px !important; }
}

/* tablet */
@media (min-width: 521px) and (max-width: 999px){
  .heroLoose .heroImg{ height: 150px !important; }
}

/* PC (lo que te molesta) */
@media (min-width: 1000px){
  .heroLoose .heroImg{
    height: 170px !important;     /* BAJITO en PC */
  }
  .heroLoose .heroImg img{
    object-position: center center; /* menos recorte raro */
  }
}

/* PC grande */
@media (min-width: 1400px){
  .heroLoose .heroImg{ height: 600px !important; }
}
/* =========================
   SLIDER: full móvil / centrado PC
========================= */

/* MÓVIL: full width */
.heroLoose{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* Banner móvil (como ya te gusta) */
.heroLoose .heroImg{ height:120px !important; }

/* PC: regresarlo al container para que no se vea gigante */
@media (min-width: 900px){
  .heroLoose{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .heroLoose .heroFrame{
    border-radius: 26px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(0,0,0,.22) !important;
    box-shadow: var(--shadow) !important;
  }
  /* =========================
   REDES: 1 sola línea, pequeñas, sin caja
========================= */
.socialRow.oneLine{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:space-between !important; /* reparte */
  gap:10px !important;

  overflow: hidden !important;  /* NO scroll */
  padding: 10px 14px 16px !important;
}

/* botones más pequeños */
.socialRow.oneLine .soc{
  width:52px !important;
  height:52px !important;
  border-radius:999px !important;
  margin:0 !important;
}

/* icono más pequeño */
.socialRow.oneLine .soc svg{
  width:20px !important;
  height:20px !important;
}

/* móviles pequeños: aún más compacto */
@media (max-width: 380px){
  .socialRow.oneLine{ gap:8px !important; }
  .socialRow.oneLine .soc{ width:46px !important; height:46px !important; }
  .socialRow.oneLine .soc svg{ width:18px !important; height:18px !important; }
}
  .heroLoose .heroImg{
    height:170px !important; /* compacto en PC */
  }
}
/* =========================
   BOTÓN COMPARTIR PRO
========================= */
.shareBtn{
  width:44px;height:44px;
  border-radius:14px;              /* más moderno que círculo */
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 24px rgba(0,0,0,.35);
  transition: .18s transform, .18s background, .18s border-color;
}
.shareBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
}
.shareBtn svg{ width:20px; height:20px; opacity:.95; }
/* ==========================================
   FIX DEFINITIVO REDES: 1 línea, pequeñas
   (gana sobre grid/flex anteriores)
========================================== */

/* súper específico para que nadie le gane */
.card .socialRow.oneLine{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:space-between !important;
  align-items:center !important;

  padding: 10px 14px 16px !important;
  gap: 10px !important;

  overflow: hidden !important;     /* NO caja / NO scroll */
}

/* Botones más pequeños para que quepan */
.card .socialRow.oneLine .soc{
  width: 50px !important;
  height: 50px !important;
  border-radius: 999px !important;
  margin: 0 !important;
  box-shadow: 0 12px 22px rgba(0,0,0,.25) !important;
}

/* Iconos más pequeños */
.card .socialRow.oneLine .soc svg{
  width: 18px !important;
  height: 18px !important;
}

/* Móvil pequeño: todavía más compacto */
@media (max-width: 380px){
  .card .socialRow.oneLine{ gap: 8px !important; }
  .card .socialRow.oneLine .soc{ width: 46px !important; height: 46px !important; }
  .card .socialRow.oneLine .soc svg{ width: 17px !important; height: 17px !important; }
}
/* ==========================================
   BOTTOM NAV PRO (Radio / Programas / Chat)
========================================== */
.bottomNav{
  background: rgba(7,11,20,.82) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(14px) !important;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom)) !important;
}

/* cada item más compacto */
.bottomNav__item{
  width: 84px !important;
  gap: 6px !important;
  color: rgba(234,240,255,.60) !important;
}

/* icono: más pro tipo “pill” */
.bottomNav__icon{
  width: 58px !important;
  height: 42px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.35) !important;
  transition: .18s transform, .18s background, .18s border-color;
}

/* texto más fino */
.bottomNav__text{
  font-weight: 900 !important;
  font-size: 12px !important;
  letter-spacing: .2px !important;
}

/* activo: glow pro */
.bottomNav__item.is-active{
  color:#fff !important;
}
.bottomNav__item.is-active .bottomNav__icon{
  background: linear-gradient(180deg, rgba(124,58,237,.35), rgba(59,130,246,.18)) !important;
  border-color: rgba(124,58,237,.55) !important;
  box-shadow: 0 18px 40px rgba(124,58,237,.18), 0 14px 28px rgba(0,0,0,.35) !important;
  transform: translateY(-1px);
}

/* iconos un poquito más pequeños dentro */
.bottomNav__icon svg{
  width: 22px;
  height: 22px;
  opacity: .95;
}
/* ==========================================
   SHARE BUTTON PRO
========================================== */
.shareBtn{
  width:42px !important;
  height:42px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.08) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.35) !important;
  transition: .18s transform, .18s background, .18s border-color;
}
.shareBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.22) !important;
}
.shareBtn svg{ width:20px; height:20px; opacity:.95; }
/* ==========================================
   HEADER PRO estilo Vision NDV
========================================== */
.appTop{
  background: rgba(0,0,0,.82) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(10px) !important;
  padding: 14px 14px !important;
}

/* nombre más pro */
.appTop__name{
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: .2px;
}

/* si el subtitle quedó en el HTML, lo ocultamos igual */
.appTop__subtitle{ display:none !important; }

/* logo un poco más “premium” */
.appTop__logo{
  width:46px !important;
  height:46px !important;
  border-radius: 999px !important; /* como app */
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.35) !important;
}

/* ==========================================
   BOTÓN COMPARTIR PRO (igual al ejemplo)
========================================== */
.shareBtn{
  width:46px !important;
  height:46px !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,.92) !important;
  color: #0b1220 !important;

  border: 0 !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.30) !important;

  display:grid !important;
  place-items:center !important;
  transition: .16s transform, .16s filter, .16s opacity;
}

.shareBtn:hover{
  transform: translateY(-1px) scale(1.02);
  filter: brightness(1.04);
}

.shareBtn:active{
  transform: scale(.98);
  opacity: .92;
}

.shareBtn svg{
  width:22px !important;
  height:22px !important;
  opacity: .95;
}
/* giro del logo cuando suena */
#logoWheel.is-playing{
  animation: spin 6s linear infinite;
}
@keyframes spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
/* ===== Bottom Nav PRO ===== */
.bottomNav{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 999;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;

  padding: 10px;
  border-radius: 18px;

  background: rgba(12, 18, 32, .72);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);

  max-width: 920px;
  margin: 0 auto;
}

.bottomNav__item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  border-radius: 14px;
  padding: 10px 8px;

  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);

  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.bottomNav__item:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

.bottomNav__icon{
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}

/* clave: tus SVG ahora son outline */
.bottomNav__icon svg{
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .95;
}

.bottomNav__text{
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .2px;
  opacity: .92;
}

.bottomNav__item.is-active{
  background: linear-gradient(180deg, rgba(29,78,216,.35), rgba(29,78,216,.15));
  border-color: rgba(59,130,246,.45);
  box-shadow: 0 10px 20px rgba(29,78,216,.18);
  color: #fff;
}

.bottomNav__item.is-active .bottomNav__icon svg{
  stroke-width: 2.1;
}

/* para que no tape contenido */
body{ padding-bottom: 92px; }
/* ===== Bottom Nav ULTRA PRO (badges + brillo + animación) ===== */
.bottomNav.pro{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 999;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;

  padding: 10px;
  border-radius: 20px;

  background: rgba(10, 16, 28, .72);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    0 18px 40px rgba(0,0,0,.38),
    0 2px 10px rgba(0,0,0,.25);

  max-width: 980px;
  margin: 0 auto;
}

.bottomNav.pro .bottomNav__item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  border-radius: 16px;
  padding: 10px 8px;

  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);

  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
  -webkit-tap-highlight-color: transparent;
}

.bottomNav.pro .bottomNav__item:active{
  transform: translateY(1px) scale(.98);
}

.bottomNav.pro .bottomNav__item:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

/* Badge circular (como app) */
.bottomNav.pro .bottomNav__badge{
  width: 44px;
  height: 44px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: radial-gradient(circle at 30% 20%,
    rgba(255,255,255,.18),
    rgba(255,255,255,.06) 40%,
    rgba(0,0,0,.10) 75%);

  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 10px 18px rgba(0,0,0,.28);

  margin-bottom: 6px;

  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}

.bottomNav.pro .bottomNav__icon{
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}

/* SVG outline premium */
.bottomNav.pro .bottomNav__icon svg{
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.95;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .96;
}

.bottomNav.pro .bottomNav__text{
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .2px;
  opacity: .92;
}

/* Activo: “glow” y badge más vivo */
.bottomNav.pro .bottomNav__item.is-active{
  background: linear-gradient(180deg, rgba(29,78,216,.22), rgba(29,78,216,.10));
  border-color: rgba(59,130,246,.45);
  box-shadow: 0 10px 20px rgba(29,78,216,.16);
  color: #fff;
}

.bottomNav.pro .bottomNav__item.is-active .bottomNav__badge{
  background: radial-gradient(circle at 30% 20%,
    rgba(255,255,255,.22),
    rgba(59,130,246,.20) 38%,
    rgba(29,78,216,.12) 78%);

  border-color: rgba(59,130,246,.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 14px 26px rgba(29,78,216,.20),
    0 10px 18px rgba(0,0,0,.28);

  transform: translateY(-1px);
}

.bottomNav.pro .bottomNav__item.is-active .bottomNav__icon svg{
  stroke-width: 2.15;
}

/* Para que no tape contenido */
body{ padding-bottom: 98px; }
/* ===== FIX: bottom nav no se corta en móvil ===== */
.bottomNav.pro{
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  width: auto;
  box-sizing: border-box;

  /* si por cualquier cosa se pasa, no se corta */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bottomNav.pro::-webkit-scrollbar{ display:none; }

/* reduce un poquito el espacio para que quepa perfecto */
.bottomNav.pro{
  gap: 8px;
  padding: 9px;
}

.bottomNav.pro .bottomNav__item{
  min-width: 0;          /* clave para grid */
  padding: 10px 6px;
}

.bottomNav.pro .bottomNav__badge{
  width: 42px;
  height: 42px;
}

.bottomNav.pro .bottomNav__text{
  font-size: 10.5px;
}

/* evita que el texto empuje el layout */
.bottomNav.pro .bottomNav__text{
  white-space: nowrap;
}
/* ===== Share button PRO ===== */
.shareBtn{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 12px;
  border-radius: 999px;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);

  box-shadow: 0 10px 18px rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.shareBtn:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.20);
}

.shareBtn:active{
  transform: scale(.98);
}

.shareBtn__ic{
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}

.shareBtn__ic svg{
  width: 18px;
  height: 18px;
}

.shareBtn__tx{
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .2px;
}

/* en pantallas muy pequeñas, deja solo el icono */
@media (max-width: 360px){
  .shareBtn{ padding: 10px; }
  .shareBtn__tx{ display:none; }
}
/* ===== Share redondo tipo app ===== */
.shareBtn.shareBtn--round{
  width: 44px;
  height: 44px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  color: rgba(0,0,0,.85);

  box-shadow: 0 10px 18px rgba(0,0,0,.22);
  cursor: pointer;

  transition: transform .12s ease, filter .12s ease;
  -webkit-tap-highlight-color: transparent;
}

.shareBtn.shareBtn--round:active{ transform: scale(.96); }

.shareBtn.shareBtn--round svg{
  width: 20px;
  height: 20px;
}
/* ===== Bottom nav: ajustar a móvil SIN scroll ===== */
.bottomNav.pro{
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));

  /* NO scroll */
  overflow: hidden;

  /* más compacto */
  gap: 6px;
  padding: 8px;
  border-radius: 18px;
}

.bottomNav.pro .bottomNav__item{
  min-width: 0;          /* clave para que el grid no se salga */
  padding: 9px 6px;
  border-radius: 14px;
}

/* badge más pequeño para que quepa */
.bottomNav.pro .bottomNav__badge{
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
}

.bottomNav.pro .bottomNav__icon svg{
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

/* texto un poquito más pequeño */
.bottomNav.pro .bottomNav__text{
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15px;
  white-space: nowrap;
}

/* espacio inferior del body */
body{ padding-bottom: 92px; }
.bottomNav.pro{
  max-width: 520px; /* fuerza tamaño cómodo en móviles grandes */
}
/* Share redondo pro */
.shareBtn.shareBtn--round{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  color: rgba(0,0,0,.85);
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
  -webkit-tap-highlight-color: transparent;
}
.shareBtn.shareBtn--round:active{ transform: scale(.96); }

/* el SVG share ahora es outline */
.shareBtn.shareBtn--round svg{
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bottomNav__icon svg{
  width: 24px;
  height: 24px;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* ==============================
   FIX FINAL: BottomNav PRO
   - No se corre
   - No se corta
   - No “claro” abajo
============================== */

.bottomNav.pro{
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 999;

  /* IMPORTANTE: sin scroll horizontal (era lo que la corría) */
  overflow: visible;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;

  padding: 10px;
  border-radius: 20px;

  /* más sólido (quita el “claro”) */
  background: rgba(10, 14, 24, .92);
  border: 1px solid rgba(255,255,255,.12);

  box-shadow:
    0 18px 40px rgba(0,0,0,.45),
    0 2px 10px rgba(0,0,0,.25);

  box-sizing: border-box;
  max-width: 980px;
  margin: 0 auto;
}

/* para que NUNCA se vayan a un lado */
.bottomNav.pro .bottomNav__item{
  min-width: 0;
  padding: 10px 6px;
  border-radius: 16px;

  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);

  transform: none !important; /* evita “lado”/saltos por transforms */
}

.bottomNav.pro .bottomNav__item:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
}

/* badge más limpio (sin efecto raro) */
.bottomNav.pro .bottomNav__badge{
  width: 42px;
  height: 42px;
  border-radius: 999px;

  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 10px 16px rgba(0,0,0,.28);

  margin-bottom: 6px;
}

/* iconos outline correctos */
.bottomNav.pro .bottomNav__icon svg{
  width: 24px;
  height: 24px;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .98;
}

.bottomNav.pro .bottomNav__text{
  font-size: 10.8px;
  font-weight: 900;
  letter-spacing: .2px;
  white-space: nowrap;
  opacity: .95;
}

/* ACTIVO: glow bonito pero sin mover */
.bottomNav.pro .bottomNav__item.is-active{
  color: #fff;
  background: linear-gradient(180deg, rgba(29,78,216,.35), rgba(29,78,216,.18));
  border-color: rgba(59,130,246,.50);
  box-shadow: 0 10px 22px rgba(29,78,216,.18);
}

.bottomNav.pro .bottomNav__item.is-active .bottomNav__badge{
  background: rgba(59,130,246,.20);
  border-color: rgba(59,130,246,.55);
}

/* el “claro” abajo casi siempre es porque el body no deja espacio exacto */
body{
  padding-bottom: 110px; /* deja espacio firme */
}
html, body { background-color: #0b1220; }
/* ==========================================
   MODO PEGADO ABAJO (como tu captura)
   para .bottomNav.pro
========================================== */

.bottomNav.pro{
  position: fixed;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  max-width: none !important;
  margin: 0 !important;

  border-radius: 0 !important;

  /* estilo tipo tab bar */
  background: rgba(245,245,245,.96) !important;
  border-top: 1px solid rgba(0,0,0,.10) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;

  box-shadow: 0 -10px 22px rgba(0,0,0,.18) !important;

  padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) 10px !important;

  /* nada de scroll */
  overflow: hidden !important;
}

/* items más “planos”, como la barra pegada */
.bottomNav.pro .bottomNav__item{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 14px !important;
  padding: 8px 6px !important;
}

/* badges más simples (sin caja flotante) */
.bottomNav.pro .bottomNav__badge{
  width: 36px !important;
  height: 36px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin-bottom: 4px !important;
}

/* texto y color */
.bottomNav.pro .bottomNav__text{
  font-size: 11px !important;
  font-weight: 800 !important;
  color: rgba(0,0,0,.55) !important;
}

/* iconos */
.bottomNav.pro .bottomNav__icon svg{
  stroke: rgba(0,0,0,.55) !important;
}

/* activo tipo iOS: color + leve glow */
.bottomNav.pro .bottomNav__item.is-active .bottomNav__text{
  color: #ff3b30 !important;
}
.bottomNav.pro .bottomNav__item.is-active .bottomNav__icon svg{
  stroke: #ff3b30 !important;
}
.bottomNav.pro .bottomNav__item.is-active{
  background: rgba(255,59,48,.10) !important;
}

/* espacio para que no tape contenido */
body{
  padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
}
/* ==========================
   REDES SOCIALES (GLASS)
========================== */
.socialRow.oneLine{
  display:flex;
  gap:14px;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding:8px 2px 2px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.socialRow.oneLine::-webkit-scrollbar{ display:none; }

.soc{
  width:58px;
  height:58px;
  border-radius:999px;
  display:grid;
  place-items:center;
  text-decoration:none;

  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(12px);

  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.soc:hover{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.18); }
.soc:active{ transform: scale(.96); }

/* si tus svg salen grandes, normalizamos */
.soc svg{ width:26px; height:26px; display:block; }

/* ==========================
   VIDEOS (CARROUSEL SWIPE)
========================== */
.vCarousel{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding:10px 2px 2px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.vCarousel::-webkit-scrollbar{ display:none; }

.vSlide{
  flex:0 0 auto;
  width:min(78vw, 430px);
  scroll-snap-align:start;

  border-radius:18px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}

.vSlideThumb{
  width:100%;
  aspect-ratio:16/9;
  background:#0b1220;
}
.vSlideThumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.vSlideMeta{ padding:12px 12px 14px; }
.vSlideTitle{
  font-weight:1000;
  line-height:1.2;
  font-size:16px;
}
.vSlideSub{
  margin-top:6px;
  font-size:13px;
  opacity:.8;
}

/* ==========================
   BOTTOM NAV EN NEGRO
   (ajusta el selector según tu layout)
========================== */
.bottomNav, .bottom-nav, .navBottom{
  background:#000 !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
}
.bottomNav a, .bottom-nav a, .navBottom a{
  color: rgba(255,255,255,.70) !important;
}
.bottomNav a.active, .bottom-nav a.active, .navBottom a.active{
  color:#fff !important;
}
/* ==========================
   SOCIAL ICONS (GLASS PRO)
   usa tu HTML: .socialRow.oneLine .soc
========================== */

.socialRow.oneLine{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:10px 2px 4px;
}
.socialRow.oneLine::-webkit-scrollbar{ display:none; }

.soc{
  width:58px;
  height:58px;
  border-radius:999px;
  display:grid;
  place-items:center;
  text-decoration:none;
  color:#fff;

  /* glass */
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  box-shadow:
    0 14px 34px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.10);

  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.soc:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.18);
}
.soc:active{ transform: scale(.96); }

/* tus SVG ya usan currentColor, solo normalizamos tamaño */
.soc svg{ width:26px; height:26px; display:block; }

/* glow suave por red */
.soc.wh{ box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 0 rgba(37,211,102,.0); }
.soc.fb{ box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 0 rgba(24,119,242,.0); }
.soc.ig{ box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 0 rgba(225,48,108,.0); }
.soc.yt{ box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 0 rgba(255,0,0,.0); }
.soc.web{box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 0 rgba(56,189,248,.0); }
.soc.tt{ box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 0 rgba(255,255,255,.0); }

/* al hover, activamos glow */
.soc.wh:hover{ box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 6px rgba(37,211,102,.14); }
.soc.fb:hover{ box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 6px rgba(24,119,242,.14); }
.soc.ig:hover{ box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 6px rgba(225,48,108,.14); }
.soc.yt:hover{ box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 6px rgba(255,0,0,.14); }
.soc.web:hover{box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 6px rgba(56,189,248,.14); }
.soc.tt:hover{ box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 6px rgba(255,255,255,.10); }
/* ==========================
   BOTTOM NAV NEGRO (PRO)
========================== */
.bottomNav.pro{
  background:#000 !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
}

.bottomNav.pro .bottomNav__item{
  color: rgba(255,255,255,.68) !important;
}

.bottomNav.pro .bottomNav__item .bottomNav__badge{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.bottomNav.pro .bottomNav__item.is-active{
  color:#fff !important;
}

.bottomNav.pro .bottomNav__item.is-active .bottomNav__badge{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
}
/* ==========================
   BOTTOM NAV (ARREGLADO PRO)
========================== */

.bottomNav.pro{
  position: sticky; /* si lo usas fijo cambia a fixed */
  bottom: 0;
  background:#000 !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  z-index: 50;
}

.bottomNav.pro{
  display:flex;
  gap:10px;
  justify-content:space-between;
}

.bottomNav.pro .bottomNav__item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-decoration:none;
  color: rgba(255,255,255,.72) !important;
  font-weight:800;
}

.bottomNav.pro .bottomNav__badge{
  width:54px;
  height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;

  /* glass claro para que NO se pierda */
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 26px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(10px);

  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.bottomNav.pro .bottomNav__item:hover .bottomNav__badge{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.18);
}
.bottomNav.pro .bottomNav__item:active .bottomNav__badge{
  transform: scale(.97);
}

.bottomNav.pro .bottomNav__text{
  font-size: 12px;
  opacity: .92;
}

/* ===== MUY IMPORTANTE: tus SVG no traen stroke/fill definido ===== */
.bottomNav.pro .bottomNav__icon svg{
  width:24px;
  height:24px;
  display:block;

  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===== Activo (se mire como app) ===== */
.bottomNav.pro .bottomNav__item.is-active{
  color:#fff !important;
}

.bottomNav.pro .bottomNav__item.is-active .bottomNav__badge{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 14px 34px rgba(0,0,0,.60),
    0 0 0 6px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.14);
}

/* Opcional: si querés un puntito indicador abajo */
.bottomNav.pro .bottomNav__item.is-active .bottomNav__text{
  text-shadow: 0 1px 10px rgba(255,255,255,.18);
}
.bottomNav.pro{ position: fixed; left:0; right:0; }
body{ padding-bottom: 90px; } /* para que no tape contenido */
/* ==========================
   FIX: TEXTO VISIBLE SIEMPRE
   BOTTOM NAV
========================== */

.bottomNav.pro .bottomNav__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:#fff !important;   /* FORZAMOS BLANCO */
}

.bottomNav.pro .bottomNav__text{
  font-size:13px;
  font-weight:700;
  color:#fff !important;   /* TEXTO SIEMPRE BLANCO */
  opacity:1 !important;    /* QUITAMOS OPACIDAD */
  visibility:visible !important;
  display:block !important;
}

/* si algún CSS anterior lo estaba ocultando */
.bottomNav.pro .bottomNav__item:not(.is-active) .bottomNav__text{
  opacity:1 !important;
  color:#fff !important;
}

/* activo más brillante */
.bottomNav.pro .bottomNav__item.is-active{
  color:#ffffff !important;
}
/* ==========================
   COLOR DORADO ACTIVO
========================== */

:root{
  --gold-main: #d4af37;      /* dorado clásico */
  --gold-soft: #f6d776;      /* brillo */
}

/* Icono + texto activos en dorado */
.bottomNav.pro .bottomNav__item.is-active{
  color: var(--gold-main) !important;
}

/* Badge activo con glow dorado */
.bottomNav.pro .bottomNav__item.is-active .bottomNav__badge{
  background: rgba(212,175,55,.15);
  border: 1px solid rgba(212,175,55,.35);
  box-shadow:
    0 14px 34px rgba(0,0,0,.60),
    0 0 0 6px rgba(212,175,55,.12),
    0 0 20px rgba(212,175,55,.25),
    inset 0 1px 0 rgba(255,255,255,.15);
}

/* Texto activo dorado brillante */
.bottomNav.pro .bottomNav__item.is-active .bottomNav__text{
  color: var(--gold-main) !important;
  text-shadow: 0 0 10px rgba(212,175,55,.35);
}

/* Icono SVG activo */
.bottomNav.pro .bottomNav__item.is-active svg{
  stroke: var(--gold-main) !important;
}
/* ==========================
   QUITAR ROJISO + ACTIVO DORADO
   (mata cualquier highlight rojo anterior)
========================== */

:root{
  --gold-main:#d4af37;
  --gold-soft:#f6d776;
}

/* 1) mata backgrounds raros del activo (rojos) */
.bottomNav.pro .bottomNav__item.is-active{
  background: transparent !important;
  box-shadow: none !important;
}

/* por si el rojo viene de pseudo-elementos */
.bottomNav.pro .bottomNav__item.is-active::before,
.bottomNav.pro .bottomNav__item.is-active::after{
  content: none !important;
  display: none !important;
}

/* 2) dorado en icono + texto */
.bottomNav.pro .bottomNav__item.is-active{
  color: var(--gold-main) !important;
}
.bottomNav.pro .bottomNav__item.is-active .bottomNav__text{
  color: var(--gold-main) !important;
  text-shadow: 0 0 10px rgba(212,175,55,.35) !important;
}

/* 3) badge activo dorado (aquí va el highlight bonito) */
.bottomNav.pro .bottomNav__item.is-active .bottomNav__badge{
  background: rgba(212,175,55,.16) !important;
  border-color: rgba(212,175,55,.40) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.60),
    0 0 0 6px rgba(212,175,55,.10),
    0 0 20px rgba(212,175,55,.22),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

/* 4) svg activo dorado (stroke) */
.bottomNav.pro .bottomNav__item.is-active svg{
  stroke: var(--gold-main) !important;
}
/* mata tintes/filtros rojos en badges */
.bottomNav.pro .bottomNav__badge{
  filter: none !important;
}
/* ======================================
   FIX: QUITAR ROJO DEL ACTIVO + DORADO
====================================== */
:root{
  --gold-main:#d4af37;
  --gold-soft:#f6d776;
}

/* 1) Apaga cualquier highlight del item activo (rojo/gradiente) */
.bottomNav.pro .bottomNav__item.is-active{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* 2) Apaga pseudo-elementos (muchas veces allí está el rojiso) */
.bottomNav.pro .bottomNav__item.is-active::before,
.bottomNav.pro .bottomNav__item.is-active::after{
  content: none !important;
  display: none !important;
}

/* 3) Si el rojo viene por el contenedor del nav (overlay) */
.bottomNav.pro::before,
.bottomNav.pro::after{
  content: none !important;
  display: none !important;
}

/* 4) Dorado: texto e icono */
.bottomNav.pro .bottomNav__item.is-active{
  color: var(--gold-main) !important;
}
.bottomNav.pro .bottomNav__item.is-active .bottomNav__text{
  color: var(--gold-main) !important;
  opacity: 1 !important;
  text-shadow: 0 0 10px rgba(212,175,55,.35) !important;
}

/* 5) Dorado: badge (aquí queremos el highlight bonito) */
.bottomNav.pro .bottomNav__item.is-active .bottomNav__badge{
  background: rgba(212,175,55,.16) !important;
  border: 1px solid rgba(212,175,55,.40) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.60),
    0 0 0 6px rgba(212,175,55,.10),
    0 0 22px rgba(212,175,55,.25),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
  filter: none !important;
}

/* 6) Tus SVG del nav necesitan stroke para verse bien */
.bottomNav.pro .bottomNav__icon svg{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
/* =========================================================
   BOTTOM NAV — RESET TOTAL + DISEÑO PRO (NEGRO + DORADO)
   (mata estilos viejos rojisos/marrones)
========================================================= */

:root{
  --gold:#d4af37;
  --goldGlow: rgba(212,175,55,.28);
  --glass: rgba(255,255,255,.10);
  --glass2: rgba(255,255,255,.14);
}

/* Barra negra */
.bottomNav.pro{
  background:#000 !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
}

/* Layout */
.bottomNav.pro{
  display:flex !important;
  gap:10px !important;
  justify-content:space-between !important;
}

/* ====== RESET: quita cualquier "píldora" fea (roja/marrón) ====== */
.bottomNav.pro .bottomNav__item{
  background: transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  border:none !important;
  outline:none !important;

  flex:1;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  text-decoration:none !important;

  color: rgba(255,255,255,.86) !important;
}

/* Si el rojiso viene de pseudo elementos */
.bottomNav.pro .bottomNav__item::before,
.bottomNav.pro .bottomNav__item::after{
  content:none !important;
  display:none !important;
}

/* Badge circular bonito */
.bottomNav.pro .bottomNav__badge{
  width:54px !important;
  height:54px !important;
  border-radius:999px !important;

  display:grid !important;
  place-items:center !important;

  background: var(--glass) !important;
  border: 1px solid var(--glass2) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter: blur(12px) !important;

  filter:none !important;
}

/* Si el badge tenía pseudo glow feo */
.bottomNav.pro .bottomNav__badge::before,
.bottomNav.pro .bottomNav__badge::after{
  content:none !important;
  display:none !important;
}

/* Texto SIEMPRE visible */
.bottomNav.pro .bottomNav__text{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;

  font-size:13px !important;
  font-weight:800 !important;
  color: rgba(255,255,255,.90) !important;
}

/* SVG del nav (tus iconos son outline, les falta stroke) */
.bottomNav.pro .bottomNav__icon svg{
  width:24px !important;
  height:24px !important;
  display:block !important;

  fill:none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* ====== ACTIVO DORADO ====== */
.bottomNav.pro .bottomNav__item.is-active{
  color: var(--gold) !important;
}

.bottomNav.pro .bottomNav__item.is-active .bottomNav__text{
  color: var(--gold) !important;
  text-shadow: 0 0 10px rgba(212,175,55,.35) !important;
}

/* aro + glow dorado en el badge activo */
.bottomNav.pro .bottomNav__item.is-active .bottomNav__badge{
  background: rgba(212,175,55,.14) !important;
  border: 1px solid rgba(212,175,55,.45) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.60),
    0 0 0 6px rgba(212,175,55,.12),
    0 0 22px var(--goldGlow),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

/* toque al presionar */
.bottomNav.pro .bottomNav__item:active .bottomNav__badge{
  transform: scale(.97);
}
/* =========================================
   FIX: ICONOS NO ROJOS (BLANCO / DORADO)
========================================= */

:root{ --gold:#d4af37; }

/* fuerza color del link SIEMPRE (evita rojiso/visited) */
.bottomNav.pro a.bottomNav__item:link,
.bottomNav.pro a.bottomNav__item:visited{
  color: rgba(255,255,255,.90) !important;
}

/* activo dorado */
.bottomNav.pro a.bottomNav__item.is-active:link,
.bottomNav.pro a.bottomNav__item.is-active:visited{
  color: var(--gold) !important;
}

/* quita cualquier filtro que tiña los iconos */
.bottomNav.pro .bottomNav__icon,
.bottomNav.pro .bottomNav__icon svg{
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* SVG: blanco por defecto */
.bottomNav.pro .bottomNav__icon svg{
  fill: none !important;
  stroke: #ffffff !important;     /* <- CLAVE */
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* SVG: dorado SOLO activo */
.bottomNav.pro .bottomNav__item.is-active .bottomNav__icon svg{
  stroke: var(--gold) !important;
}

/* texto siempre visible */
.bottomNav.pro .bottomNav__text{
  opacity: 1 !important;
  color: rgba(255,255,255,.90) !important;
}
.bottomNav.pro .bottomNav__item.is-active .bottomNav__text{
  color: var(--gold) !important;
}
/* =========================================
   NAV LIMPIO — SIN ARO MORADO
========================================= */

/* Quitar cualquier glow viejo */
.bottomNav.pro .bottomNav__badge::before,
.bottomNav.pro .bottomNav__badge::after{
  display:none !important;
  content:none !important;
}

/* Estado normal */
.bottomNav.pro .bottomNav__badge{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.5) !important;
}

/* ACTIVO — SOLO DORADO LIMPIO */
.bottomNav.pro .bottomNav__item.is-active .bottomNav__badge{
  background: rgba(212,175,55,.12) !important;
  border: 1px solid rgba(212,175,55,.45) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.6) !important;
}

/* Icono dorado */
.bottomNav.pro .bottomNav__item.is-active{
  color: #d4af37 !important;
}

/* Texto dorado */
.bottomNav.pro .bottomNav__item.is-active .bottomNav__text{
  color: #d4af37 !important;
  text-shadow: none !important;
}
/* =========================================
   KILL MORADO (RESET ULTRA)
   Quita cualquier highlight / overlay
========================================= */

/* 1) mata overlays del NAV */
.bottomNav.pro,
.bottomNav.pro *{
  background-image:none !important;
}

/* por si el morado está en pseudo del nav */
.bottomNav.pro::before,
.bottomNav.pro::after{
  content:none !important;
  display:none !important;
  background:none !important;
}

/* 2) mata overlays del ITEM (a) */
.bottomNav.pro .bottomNav__item{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* por si el morado es un ::before/::after del item */
.bottomNav.pro .bottomNav__item::before,
.bottomNav.pro .bottomNav__item::after{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
}

/* 3) mata overlays del ACTIVO (a.is-active) */
.bottomNav.pro .bottomNav__item.is-active{
  background: transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
}
.bottomNav.pro .bottomNav__item.is-active::before,
.bottomNav.pro .bottomNav__item.is-active::after{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
}

/* 4) deja SOLO el circulito (badge) como highlight */
.bottomNav.pro .bottomNav__badge{
  background: rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  border-radius:999px !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.55) !important;
}
.bottomNav.pro .bottomNav__badge::before,
.bottomNav.pro .bottomNav__badge::after{
  content:none !important;
  display:none !important;
}

/* 5) activo dorado LIMPIO (sin morado) */
.bottomNav.pro .bottomNav__item.is-active{
  color:#d4af37 !important;
}
.bottomNav.pro .bottomNav__item.is-active .bottomNav__text{
  color:#d4af37 !important;
  text-shadow:none !important;
}
.bottomNav.pro .bottomNav__item.is-active .bottomNav__badge{
  background: rgba(212,175,55,.12) !important;
  border:1px solid rgba(212,175,55,.45) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.6) !important;
}

/* 6) tus SVG outline visibles */
.bottomNav.pro .bottomNav__icon svg{
  fill:none !important;
  stroke: currentColor !important;
  stroke-width:2.2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
/* =========================================================
   BOTTOM NAV LIMPIO (NEGRO + ACTIVO DORADO)
   - Texto SIEMPRE visible
   - SIN morado / SIN rojo
========================================================= */

:root{ --gold:#d4af37; }

.bottomNav.pro{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;

  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 0;

  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  background: #000;                 /* sólido para que no se tiña */
  border-top: 1px solid rgba(255,255,255,.10);
  backdrop-filter: none !important; /* evita tintes raros */
}

/* LINK */
.bottomNav.pro a.bottomNav__item{
  text-decoration: none;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 8px 6px;

  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;

  color: rgba(255,255,255,.85) !important;
}

/* IMPORTANTÍSIMO: mata el morado que viene en .bottomNav__icon */
.bottomNav.pro .bottomNav__icon{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}

/* BADGE (la ruedita) */
.bottomNav.pro .bottomNav__badge{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 22px rgba(0,0,0,.55);
}

/* ICONO SVG outline */
.bottomNav.pro .bottomNav__icon svg{
  width: 24px;
  height: 24px;

  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* TEXTO SIEMPRE VISIBLE */
.bottomNav.pro .bottomNav__text{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255,255,255,.88);
}

/* ACTIVO DORADO */
.bottomNav.pro a.bottomNav__item.is-active{
  color: var(--gold) !important;
}

.bottomNav.pro a.bottomNav__item.is-active .bottomNav__text{
  color: var(--gold) !important;
}

.bottomNav.pro a.bottomNav__item.is-active .bottomNav__badge{
  background: rgba(212,175,55,.14);
  border-color: rgba(212,175,55,.45);
  box-shadow:
    0 10px 22px rgba(0,0,0,.60),
    0 0 0 6px rgba(212,175,55,.10);
}

/* espacio para que no tape contenido */
body{ padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important; }
/* ============================
   PERF FIX (smooth scroll)
   Pegarlo al FINAL del CSS
============================ */

/* 1) MATA el "fixed" del fondo (principal causa de lag) */
body.hasHomeBg{
  background-attachment: scroll, scroll, scroll, scroll !important;
}

/* 2) Reduce/Apaga BLUR en elementos fijos (otro gran culpable) */
.bottomNav,
.bottomNav.pro,
.appTop,
.shareBtn,
.soc,
.heroLoose .heroFrame{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 3) Baja sombras pesadas (repaint costoso) */
:root{
  --shadow: 0 12px 26px rgba(0,0,0,.35) !important;
}
.card,
.heroFrame,
.heroLoose .heroFrame,
.bottomNav,
.bottomNav.pro,
.soc,
.shareBtn{
  box-shadow: var(--shadow) !important;
}

/* 4) Quita el zoom/transform en imágenes del slider (repinta) */
.heroImg img,
.heroLoose .heroImg img{
  transform: none !important;
}

/* 5) En móvil: quita transforms hover (a veces se siente "lag") */
@media (hover:none){
  .soc:hover,
  .shareBtn:hover,
  .bottomNav__item:hover{
    transform: none !important;
  }
}

/* 6) Si el logo girando te da "lag", baja FPS o apágalo */
@media (prefers-reduced-motion: reduce){
  .radioLogoCircle.is-playing{ animation: none !important; }
}
@media (max-width: 900px){
  .bottomNav, .bottomNav.pro, .appTop, .shareBtn, .soc{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
:root{
  --navH: 92px; /* altura aprox de tu bottom nav */
}

/* Deja espacio abajo para que no tape inputs ni botones */
body{
  padding-bottom: calc(var(--navH) + env(safe-area-inset-bottom)) !important;
}

/* Si tu nav es fijo al fondo */
.bottomNav.pro,
.bottomNav{
  height: var(--navH);
}
body.hasHomeBg{
  background-attachment: scroll, scroll, scroll, scroll !important;
}
.vItem.is-active{
  border-color: rgba(212,175,55,.35);
  background: linear-gradient(90deg, rgba(212,175,55,.08), rgba(212,175,55,.02));
}
.vItem{
  display:flex;
  gap:14px;
  text-decoration:none;
  color:inherit;
  padding:14px;
  border-radius:20px;

  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);

  transition:.15s ease;
}

.vItem:active{
  transform: scale(.99);
}
/* =========================
   FIX MOVIL: nada se “sale”
========================= */
html, body{
  width: 100%;
  overflow-x: hidden; /* mata el “se sale la cajita” */
}

/* evita que cualquier card/iframe empuje ancho */
.container, .card{
  max-width: 100%;
}

/* si alguna vez metiste 100vw en algo (heroLoose), que no provoque overflow */
.heroLoose{
  max-width: 100%;
}

/* =========================
   FIX: el nav no tape abajo
========================= */
body{
  padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
}
.grid3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px){
  .grid3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 520px){
  .grid3{ grid-template-columns: 1fr; }
}
/* ============================
   FIX SLIDER (NO SE CORRE)
   para container 92%
============================ */

/* evita scroll horizontal por 100vw */
html, body{ overflow-x:hidden; }

/* rompe el container sin usar 100vw */
.heroLoose{
  margin-left: -4% !important;
  margin-right: -4% !important;
  width: calc(100% + 8%) !important;
}

/* sin bordes raros */
.heroLoose .heroFrame{
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: hidden !important;
}

/* altura tipo banner */
.heroLoose .heroImg{
  height: 140px !important;
  position: relative !important;
}

/* imagen bien centrada */
.heroLoose .heroImg img{
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  display:block !important;
}

/* dots sobre la imagen */
.heroLoose .dots{
  position:absolute !important;
  left:0; right:0; bottom:8px !important;
  padding:0 !important;
  justify-content:center !important;
}

/* móvil */
@media (max-width:520px){
  .heroLoose .heroImg{ height: 120px !important; }
}

/* PC: vuelve a verse “dentro” y bonito */
@media (min-width:900px){
  .heroLoose{
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  .heroLoose .heroFrame{
    border-radius: 26px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(0,0,0,.22) !important;
    box-shadow: var(--shadow) !important;
  }
  .heroLoose .heroImg{ height: 180px !important; }
}
/* ======================================
   FIX: NO SE CORRA "DE UN LADO" (MÓVIL)
====================================== */

/* 1) Corta el overflow horizontal real */
html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

/* 2) Todo elemento grande NO puede empujar ancho */
img, video, iframe, canvas, svg{
  max-width: 100% !important;
}

/* 3) Evita que cards/containers hagan overflow */
.container, .card{
  max-width: 100% !important;
}

/* 4) Mata cualquier “100vw + calc(50% - 50vw)” que deje scroll */
.heroLoose{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 5) Banner/slider siempre centrado y sin salir */
.heroLoose .heroFrame{
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* 6) Si alguna vez quedó algo con 100vw en otras secciones */
[class*="hero"], [class*="slider"], [class*="banner"]{
  max-width: 100% !important;
}

/* 7) (OPCIONAL) si el video empuja por algún estilo raro */
.videoBox, .videoBox iframe, .videoBox video{
  max-width: 100% !important;
}
/* Slider full ancho */
.heroLoose{
  width:100%;
  margin:0;
}

.heroLoose .heroFrame{
  border-radius:0 !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  overflow:hidden;
  position:relative;
}

.heroLoose .heroImg{
  height:140px;
}
@media (max-width:520px){ .heroLoose .heroImg{ height:120px; } }
@media (min-width:1000px){ .heroLoose .heroImg{ height:180px; } }

.heroLoose .heroImg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* dots flotando */
.heroLoose .dots{
  position:absolute;
  left:0; right:0;
  bottom:10px;
  display:flex;
  justify-content:center;
  gap:8px;
}