/* =====================================================================
   REDE XM — Matias Marinho · XMTV · Rádio Verdes Mares
   Todo o CSS fica dentro de .rx para não brigar com o tema do WordPress.
   ===================================================================== */

@font-face { font-family: 'Nolan'; src: url('../fonts/Nolan Next Light.otf') format('opentype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Nolan'; src: url('../fonts/Nolan Next Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Nolan'; src: url('../fonts/Nolan Next Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Nolan'; src: url('../fonts/Nolan Next Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Nolan'; src: url('../fonts/Nolan Next ExtraBold.otf') format('opentype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Nolan'; src: url('../fonts/Nolan Next Heavy.otf') format('opentype'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Nolan'; src: url('../fonts/Nolan Next Heavy Italic.otf') format('opentype'); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Quicksilver'; src: url('../fonts/Quicksilver.otf') format('opentype'); font-weight: 400; font-display: swap; }

/* ---------- Paletas oficiais ---------- */
.rx {
  /* Rede XM */
  --xm-teal: #004d6d; --xm-white: #ffffff;
  /* Matias Marinho */
  --mm-navy: #00112f; --mm-gray: #e3e3e3;
  /* Xeque Mate TV (arco-íris) */
  --tv-blue: #1d9ad4; --tv-green: #4eaa2c; --tv-navy: #011f80; --tv-red: #e01412; --tv-gray: #606060;
  --tv-lime: #97be1b; --tv-purple: #66117f; --tv-pink: #db1583; --tv-orange: #f1990a; --tv-black: #000;
  --tv-rainbow: linear-gradient(90deg, #f1990a, #e01412, #db1583, #66117f, #011f80, #1d9ad4, #4eaa2c, #97be1b);
  /* Rádio Verdes Mares */
  --vm-green: #79af7f; --vm-blue: #6099cb; --vm-yellow: #feee00; --vm-red: #c64832; --vm-indigo: #4f72b5;
  --vm-deep: #00354b; --vm-deep2: #004d6d;
  --vm-stripe: linear-gradient(90deg, #79af7f 0 20%, #6099cb 20% 40%, #feee00 40% 60%, #c64832 60% 80%, #4f72b5 80%);

  /* tokens do tema atual (padrão = Rede XM / home) */
  --bg: #eef1f3;
  --surface: #ffffff;
  --surface-2: #f6f8f9;
  --ink: #04141c;
  --muted: #5b6b73;
  --line: rgba(4, 20, 28, .1);
  --accent: var(--xm-teal);
  --accent-2: #0a7aa8;
  --on-accent: #fff;
  --head-bg: rgba(238, 241, 243, .9);
  --head-ink: var(--ink);
  --display: 'Nolan', system-ui, sans-serif;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px -12px rgba(0, 20, 40, .18);
  --shadow-lg: 0 30px 80px -24px rgba(0, 20, 40, .35);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --wrap: clamp(1240px, 88vw, 1680px); /* acompanha a tela: menos sobra nas laterais em monitores grandes */
  --gutter: clamp(16px, 4vw, 40px);
}

.rx[data-brand="mm"] {
  --bg: #f4f4f2; --surface: #fff; --surface-2: #ececea; --ink: #00112f; --muted: #556074;
  --line: rgba(0, 17, 47, .12); --accent: #00112f; --accent-2: #1e3a74; --on-accent: #fff;
  --head-bg: rgba(244, 244, 242, .92); --head-ink: #00112f;
}
.rx[data-brand="tv"] {
  --bg: #07080d; --surface: #11131c; --surface-2: #181b27; --ink: #f3f4f8; --muted: #9aa0b4;
  --line: rgba(255, 255, 255, .09); --accent: #db1583; --accent-2: #1d9ad4; --on-accent: #fff;
  --head-bg: rgba(7, 8, 13, .88); --head-ink: #fff;
  --shadow: 0 20px 50px -20px rgba(0, 0, 0, .8);
}
.rx[data-brand="vm"] {
  --bg: #00293a; --surface: #00354b; --surface-2: #004460; --ink: #f2f8fa; --muted: #a9c6d3;
  --line: rgba(255, 255, 255, .1); --accent: #feee00; --accent-2: #79af7f; --on-accent: #00293a;
  --head-bg: rgba(0, 41, 58, .9); --head-ink: #fff;
  --shadow: 0 20px 50px -20px rgba(0, 0, 0, .55);
}

/* ---------- Reset escopado ---------- */
.rx, .rx *, .rx *::before, .rx *::after { box-sizing: border-box; }
.rx { font-family: 'Nolan', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.5;
  color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: clip;
  transition: background-color .7s var(--ease), color .7s var(--ease); }
:where(.rx) :is(h1, h2, h3, h4, h5, p, ul, ol, figure) { margin: 0; padding: 0; }
:where(.rx) :is(ul, ol) { list-style: none; }
:where(.rx) a { color: inherit; text-decoration: none; }
:where(.rx) img { display: block; max-width: 100%; height: auto; }
:where(.rx) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(.rx) input { font: inherit; color: inherit; }
.rx :focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }
.rx-skip { position: absolute; left: -9999px; top: 8px; z-index: 999; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: 10px; }
.rx-skip:focus { left: 8px; }
.rx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rx-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
:where(.rx) svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Tipografia ---------- */
.rx-kicker { font-weight: 800; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); display: inline-flex; align-items: center; gap: 8px; }
.rx[data-brand="vm"] .rx-kicker { color: var(--vm-yellow); }
.rx[data-brand="tv"] .rx-kicker { color: #4fc3f7; }
.rx-h-sec { font-family: var(--display); font-weight: 900; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.02; letter-spacing: -.02em; }
.rx[data-brand="tv"] .rx-h-sec, .rx-tvh { font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.01em; }
.rx-sec { padding: clamp(48px, 7vw, 96px) 0; }
.rx-sec-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.rx-sec-head .rx-kicker { margin-bottom: 10px; }
.rx-more { font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); transition: background .3s, gap .3s var(--ease); }
.rx-more:hover { background: var(--surface); gap: 10px; }

/* ---------- Botões ---------- */
.rx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 800; font-size: 15px; padding: 14px 22px; border-radius: 999px; background: var(--accent); color: var(--on-accent); transition: transform .35s var(--spring), box-shadow .35s, filter .3s; white-space: nowrap; }
.rx-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -10px var(--accent); }
.rx-btn:active { transform: scale(.97); }
.rx-btn--ghost { background: transparent; color: inherit; border: 1.5px solid currentColor; }
.rx-btn--ghost:hover { box-shadow: none; background: rgba(127, 127, 127, .1); }
.rx-btn--wa { background: #25d366; color: #052e16; }
.rx-btn--yt { background: #ff0033; color: #fff; }

/* ======================= HEADER ======================= */
/* WordPress: com a barra preta do admin aberta, o cabeçalho fixo desce para não ficar escondido */
body.admin-bar { --wpab: 32px; }
@media (max-width: 782px) { body.admin-bar { --wpab: 46px; } }
@media (max-width: 600px) { body.admin-bar { --wpab: 0px; } }
.rx-top { position: sticky; top: var(--wpab, 0px); z-index: 50; view-transition-name: rx-top; }
.rx-util { background: var(--xm-teal); color: #fff; font-size: 12px; font-weight: 500; transition: background .7s var(--ease); }
.rx[data-brand="mm"] .rx-util { background: var(--mm-navy); }
.rx[data-brand="tv"] .rx-util { background: #000; }
.rx[data-brand="vm"] .rx-util { background: #001c28; }
.rx-util .rx-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 34px; }
.rx-util-l { display: flex; align-items: center; gap: 14px; opacity: .85; white-space: nowrap; overflow: hidden; }
.rx-util-r { display: flex; align-items: center; gap: 6px; }
.rx-live-chip { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; transition: background .3s; }
.rx-live-chip:hover { background: rgba(255, 255, 255, .2); }
.rx-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff2d55; box-shadow: 0 0 0 0 rgba(255, 45, 85, .7); animation: rx-pulse 1.6s infinite; flex: none; }
.rx-dot--y { background: var(--vm-yellow); box-shadow: 0 0 0 0 rgba(254, 238, 0, .6); }
.rx-dot--off { background: #8a9aa3; animation: none; }
@keyframes rx-pulse { 70% { box-shadow: 0 0 0 8px rgba(255, 45, 85, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 45, 85, 0); } }

.rx-bar { background: var(--head-bg); color: var(--head-ink); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); border-bottom: 1px solid var(--line); transition: background .7s var(--ease), color .7s; }
.rx-bar .rx-wrap { display: flex; align-items: center; gap: 24px; height: 72px; }
.rx-logo { display: flex; align-items: center; height: 40px; flex: none; }
.rx-logo img { height: 100%; width: auto; }
.rx[data-brand="tv"] .rx-logo, .rx[data-brand="vm"] .rx-logo { height: 46px; }
.rx-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.rx-nav a { position: relative; font-weight: 700; font-size: 14px; padding: 10px 14px; border-radius: 999px; white-space: nowrap; transition: background .3s, color .3s; }
.rx-nav a:hover { background: rgba(127, 127, 127, .12); }
.rx-nav a[aria-current="page"] { background: var(--accent); color: var(--on-accent); }
.rx-nav a .rx-nav-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.rx-icon-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; transition: background .3s; flex: none; }
.rx-icon-btn:hover { background: rgba(127, 127, 127, .14); }
.rx-burger { display: none; }

/* Faixa de marca embaixo do header */
.rx-stripe { height: 3px; background: linear-gradient(90deg, var(--xm-teal), #0a7aa8); transition: background .7s; }
.rx[data-brand="mm"] .rx-stripe { background: var(--mm-navy); }
.rx[data-brand="tv"] .rx-stripe { background: var(--tv-rainbow); background-size: 200% 100%; animation: rx-slide 6s linear infinite; }
.rx[data-brand="vm"] .rx-stripe { background: var(--vm-stripe); }
@keyframes rx-slide { to { background-position: -200% 0; } }

/* Barra de alerta compacta (páginas internas) */
.rx-abar { display: block; background: #c8102e; color: #fff; overflow: hidden; }
.rx-abar .rx-wrap { display: flex; align-items: center; gap: 14px; height: 40px; }
.rx-abar-tag { font-weight: 900; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; background: #fff; color: #c8102e; padding: 4px 9px; border-radius: 6px; flex: none; display: flex; align-items: center; gap: 6px; }
.rx-abar-tag .rx-dot { background: #c8102e; }
.rx-abar-t { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Menu móvel */
.rx-drawer { position: fixed; inset: 0; z-index: 80; display: none; }
.rx-drawer.is-open { display: block; }
.rx-drawer-bg { position: absolute; inset: 0; background: rgba(0, 8, 14, .55); backdrop-filter: blur(4px); animation: rx-fade .3s; }
.rx-drawer-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(360px, 88vw); background: var(--surface); color: var(--ink); padding: 24px; display: flex; flex-direction: column; gap: 10px; animation: rx-in-right .45s var(--ease); overflow-y: auto; }
.rx-drawer-panel a.rx-dl { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; font-weight: 800; font-size: 18px; background: var(--surface-2); }
.rx-drawer-panel a.rx-dl img { height: 30px; width: auto; }
@keyframes rx-in-right { from { transform: translateX(100%); } }
@keyframes rx-fade { from { opacity: 0; } }

/* ======================= ALERTA (notificação) ======================= */
.rx-hero { padding: clamp(20px, 3vw, 36px) 0 clamp(36px, 5vw, 64px); position: relative; }
.rx-mm-lead .rx-capa span { display: none; }

/* ---------- topo da home: 1 grande + 1 ao lado + 3 embaixo, Buemba Buemba na lateral ---------- */
.rx-hgrid {
  display: grid; gap: clamp(14px, 1.6vw, 22px);
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(320px, 28%);
  grid-template-rows: repeat(2, minmax(clamp(260px, 23vw, 420px), auto));
  grid-template-areas: "c0 c0 c1 bb" "c2 c3 c4 bb";
}
.rx-hc--0 { grid-area: c0; } .rx-hc--1 { grid-area: c1; } .rx-hc--2 { grid-area: c2; } .rx-hc--3 { grid-area: c3; } .rx-hc--4 { grid-area: c4; }
.rx-hc {
  position: relative; display: flex; align-items: flex-end; min-height: 240px;
  border-radius: 22px; overflow: hidden; isolation: isolate; color: #fff;
  background: var(--mm-navy, #00112f); box-shadow: var(--shadow);
}
.rx-hc .rx-media { position: absolute; inset: 0; z-index: -2; }
.rx-hc .rx-media img, .rx-hc .rx-media .rx-capa { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.rx-hc .rx-capa span { display: none; }
.rx-hc:hover .rx-media img, .rx-hc:hover .rx-media .rx-capa { transform: scale(1.05); }
.rx-hc::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 8, 18, 0) 38%, rgba(0, 8, 18, .55) 62%, rgba(0, 8, 18, .9) 100%); }
.rx-hc > .rx-tag { position: absolute; top: 16px; left: 16px; }
.rx-hc-b { padding: clamp(18px, 2vw, 30px); }
.rx-hc h2, .rx-hc h3 { font-weight: 800; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.rx-hc h2 { font-size: clamp(24px, 2.5vw, 40px); }
.rx-hc h3 { font-size: clamp(17px, 1.55vw, 25px); }
.rx-hc:hover h3, .rx-hc:hover h2 .rx-split > span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Buemba Buemba — o plantão da Rede XM, no estilo das notificações do celular */
.rx-bb-zone {
  grid-area: bb; min-width: 0; position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; padding: 24px 16px 20px; border-radius: 26px; color: #fff;
  background:
    radial-gradient(120% 55% at 0% 0%, rgba(10, 122, 168, .55), transparent 62%),
    radial-gradient(90% 50% at 100% 100%, rgba(219, 21, 131, .16), transparent 60%),
    linear-gradient(165deg, #004d6d 0%, #00354b 52%, #001f2c 100%);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .12);
}
/* faixa com as cores da rede no topo */
.rx-bb-zone::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #79af7f, #6099cb, #feee00, #f1990a, #db1583, #1d9ad4, #79af7f); background-size: 200% 100%; animation: rx-slide 8s linear infinite; }
/* marca d'água */
.rx-bb-zone::after { content: ''; position: absolute; right: -40px; bottom: -40px; width: 220px; height: 220px; z-index: -1; opacity: .06; background: url('../img/logos/xm_mark_white.png') center / contain no-repeat; transform: rotate(-12deg); }
.rx-bb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 6px; margin: 8px 0 16px; }
.rx-bb-h { font-weight: 900; font-size: clamp(26px, 2.1vw, 32px); letter-spacing: -.03em; line-height: 1; white-space: nowrap; padding: 0 6px; }
.rx-bb-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px 6px 9px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); white-space: nowrap; }
.rx-bb-live i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b4e; box-shadow: 0 0 0 0 rgba(255, 59, 78, .7); animation: rx-bb-ping 1.8s var(--ease) infinite; }
@keyframes rx-bb-ping { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 78, .7); } 70%, 100% { box-shadow: 0 0 0 9px rgba(255, 59, 78, 0); } }
.rx-bb-sub { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .62); }
.rx-bb-list { display: grid; gap: 10px; position: relative; }

/* cada notificação */
.rx-bb {
  --mx: 50%; --my: 50%;
  position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 11px; align-items: start;
  padding: 13px 14px 14px 12px; border-radius: 20px; color: #fff; overflow: hidden; isolation: isolate;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform .5s var(--spring), background .35s var(--ease), border-color .35s var(--ease), box-shadow .5s var(--ease);
  animation: rx-ios-in .85s calc(var(--i, 0) * .11s + .2s) cubic-bezier(.2, .9, .25, 1.15) backwards;
}
.rx-bb.is-top { background: rgba(255, 255, 255, .13); }
/* luz que segue o mouse */
.rx-bb::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s; background: radial-gradient(220px circle at var(--mx) var(--my), rgba(255, 255, 255, .18), transparent 65%); }
/* brilho que passa no hover */
.rx-bb::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .14), transparent); transform: skewX(-18deg); opacity: 0; }
/* hover: só um brilho e um leve destaque (o Buemba não é clicável, então nada de seta ou "botão") */
.rx-bb:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .22); box-shadow: 0 22px 40px -20px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .14); }
.rx-bb:hover::before { opacity: 1; }
.rx-bb:hover::after { animation: rx-bb-sweep .9s var(--ease); }
@keyframes rx-bb-sweep { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 1; } }

/* "ícone do app": a marca de quem publicou */
.rx-bb-app { position: relative; width: 36px; height: 36px; border-radius: 10px; background: #fff; display: grid; place-items: center; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .55); transition: transform .5s var(--spring); }
.rx-bb-app img { width: 24px; height: 24px; object-fit: contain; }
.rx-bb:hover .rx-bb-app { transform: rotate(-7deg) scale(1.08); }
.rx-bb-badge { position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: #ff3b4e; box-shadow: 0 0 0 2.5px #00415c; animation: rx-bb-ping 1.8s var(--ease) infinite; }

.rx-bb-body { display: grid; gap: 4px; min-width: 0; }
.rx-bb-k { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); white-space: nowrap; }
.rx-bb-k b { font-weight: 800; color: rgba(255, 255, 255, .92); }
.rx-bb-src { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.rx-bb-src::before { content: '·'; margin-right: 6px; }
.rx-bb-k time { margin-left: auto; padding-left: 6px; flex: none; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; }
.rx-bb-t { font-weight: 700; font-size: 15px; line-height: 1.3; letter-spacing: -.005em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rx-bb-r { font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .68); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* pilha: os anteriores "guardados" atrás do último */
.rx-bb-pilha { position: relative; height: 12px; margin: -16px 0 0; z-index: -1; pointer-events: none; }
.rx-bb-pilha::before, .rx-bb-pilha::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); border-radius: 0 0 18px 18px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .08); border-top: 0; }
.rx-bb-pilha::before { width: 92%; height: 14px; top: 0; }
.rx-bb-pilha::after { width: 82%; height: 14px; top: 7px; background: rgba(255, 255, 255, .04); }
.rx-bb-foot { margin-top: auto; padding: 18px 6px 0; display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, .5); }
.rx-bb-foot i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); border-top-color: #feee00; animation: rx-spin 2.4s linear infinite; flex: none; }
.rx-bb-vazio { color: rgba(255, 255, 255, .7); padding: 20px; border: 1px dashed rgba(255, 255, 255, .2); border-radius: 20px; }

/* entrada: cai do alto com mola, como o banner de notificação do iPhone */
@keyframes rx-ios-in {
  0% { opacity: 0; transform: translateY(-22px) scale(.9); filter: blur(8px); }
  55% { opacity: 1; transform: translateY(3px) scale(1.012); filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
.rx-bb-list.is-repinta .rx-bb:not(.is-new) { animation: none; }
/* o novo: cai de mais alto, com um clarão e o selo "Novo" */
.rx-bb.is-new { animation: rx-ios-new 1s cubic-bezier(.2, .9, .25, 1.2) backwards, rx-bb-flash 1.6s .35s var(--ease) backwards; }
@keyframes rx-ios-new {
  0% { opacity: 0; transform: translateY(-70px) scale(.86); filter: blur(10px); }
  50% { opacity: 1; transform: translateY(5px) scale(1.025); filter: blur(0); }
  72% { transform: translateY(-2px) scale(.995); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes rx-bb-flash {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55), 0 10px 30px -18px rgba(0, 0, 0, .6); background: rgba(255, 255, 255, .3); }
  100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0), 0 10px 30px -18px rgba(0, 0, 0, .6); background: rgba(255, 255, 255, .13); }
}
.rx-bb.is-new .rx-bb-k b::after { content: 'Novo'; margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: #ff3b4e; color: #fff; font-size: 10px; letter-spacing: .08em; vertical-align: 1px; }
/* o mais antigo afunda na pilha e some */
.rx-bb.is-out { animation: rx-ios-out .42s cubic-bezier(.4, 0, .7, .2) forwards; }
@keyframes rx-ios-out { to { opacity: 0; transform: translateY(16px) scale(.88); filter: blur(6px); } }

@media (prefers-reduced-motion: reduce) {
  .rx-bb, .rx-bb.is-new, .rx-bb.is-out, .rx-bb-zone::before, .rx-bb-live i, .rx-bb-badge, .rx-bb-foot i { animation: none !important; }
}

.rx-tag { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; }
.rx-tag img { height: 14px; width: auto; }
.rx-tag[data-m="mm"] { background: var(--mm-navy); }
.rx-tag[data-m="tv"] { background: linear-gradient(90deg, #db1583, #66117f); }
.rx-tag[data-m="vm"] { background: var(--vm-deep); color: var(--vm-yellow); }
.rx-tag[data-m="rede"] { background: var(--xm-teal); }

/* Cards de notícia */
.rx-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.rx-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.rx-card .rx-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.rx-card .rx-media img, .rx-card .rx-media .rx-capa { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.rx-card:hover .rx-media img, .rx-card:hover .rx-media .rx-capa { transform: scale(1.06); }
.rx-card .rx-media .rx-tag { position: absolute; left: 12px; top: 12px; }
.rx-card-b { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.rx-card-b h3 { font-weight: 800; font-size: 19px; line-height: 1.18; letter-spacing: -.01em; text-wrap: balance; }
.rx-card-b p { color: var(--muted); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rx-card-meta { margin-top: auto; padding-top: 6px; font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; font-weight: 500; }
.rx-card-meta b { color: var(--ink); font-weight: 700; }
.rx-card--over { color: #fff; justify-content: flex-end; min-height: 220px; }
.rx-card--over .rx-media { position: absolute; inset: 0; aspect-ratio: auto; }
.rx-card--over::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, rgba(0, 10, 20, .9)); pointer-events: none; }
.rx-card--over .rx-card-b { position: relative; z-index: 1; flex: none; }
.rx-card--over .rx-card-b p, .rx-card--over .rx-card-meta, .rx-card--over .rx-card-meta b { color: rgba(255, 255, 255, .85); }
.rx-card--over .rx-media .rx-tag { z-index: 2; }
.rx-grid { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.rx-grid-3 { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(3, 1fr); }

/* Capa gerada quando a notícia não tem foto */
.rx-capa { position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(120% 120% at 100% 0%, #0d2a62 0%, #00112f 60%); }
.rx-capa img.rx-capa-mark { position: absolute; right: -8%; bottom: -18%; width: 62%; height: auto; opacity: .16; transform: rotate(-8deg); object-fit: contain; }
.rx-capa span { position: relative; font-weight: 900; font-size: clamp(20px, 3vw, 34px); color: rgba(255, 255, 255, .92); letter-spacing: -.02em; text-transform: uppercase; }
.rx-capa[data-m="tv"] { background: radial-gradient(100% 140% at 0% 100%, #66117f, #11131c 60%); }
.rx-capa[data-m="vm"] { background: radial-gradient(120% 120% at 100% 0%, #004d6d, #00293a 70%); }
.rx-capa[data-m="rede"] { background: radial-gradient(120% 120% at 100% 0%, #0a7aa8, #004d6d 60%); }

/* Portais (as 3 marcas) */
.rx-portals { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
.rx-portal { position: relative; border-radius: 26px; padding: 28px; min-height: 380px; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; color: #fff; transition: transform .6s var(--ease), box-shadow .6s; transform-style: preserve-3d; will-change: transform; }
.rx-portal:hover { box-shadow: var(--shadow-lg); }
.rx-portal[data-m="mm"] { background: linear-gradient(160deg, #0b2557 0%, #00112f 70%); }
.rx-portal[data-m="tv"] { background: #0b0c12; }
.rx-portal[data-m="tv"]::before { content: ''; position: absolute; inset: 0; z-index: -1; background: conic-gradient(from 200deg at 80% 10%, #f1990a, #e01412, #db1583, #66117f, #011f80, #1d9ad4, #4eaa2c, #97be1b, #f1990a); opacity: .55; filter: blur(60px); animation: rx-spin 14s linear infinite; }
.rx-portal[data-m="vm"] { background: linear-gradient(170deg, #004d6d 0%, #00293a 75%); }
@keyframes rx-spin { to { transform: rotate(1turn); } }
.rx-portal-logo { height: 64px; width: auto; align-self: flex-start; }
.rx-portal-logo img { height: 100%; width: auto; }
.rx-portal-mark { position: absolute; right: -60px; bottom: -60px; width: 260px; opacity: .1; z-index: -1; transition: transform 1s var(--ease); }
.rx-portal:hover .rx-portal-mark { transform: rotate(-10deg) scale(1.1); }
.rx-portal-desc { margin-top: 18px; font-size: 15px; opacity: .8; max-width: 32ch; }
.rx-portal-live { margin-top: auto; background: rgba(255, 255, 255, .1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; padding: 14px 16px; }
.rx-portal-live small { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.rx-portal-live strong { display: block; font-weight: 800; font-size: 17px; line-height: 1.2; margin-top: 6px; }
.rx-portal-cta { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; font-weight: 800; }
.rx-portal-cta i { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #00112f; display: grid; place-items: center; font-style: normal; transition: transform .5s var(--spring); }
.rx-portal:hover .rx-portal-cta i { transform: translateX(4px) rotate(-45deg); }
.rx-portal[data-m="vm"] .rx-portal-cta i { background: var(--vm-yellow); }
.rx-portal::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; }
.rx-portal[data-m="tv"]::after { background: var(--tv-rainbow); }
.rx-portal[data-m="vm"]::after { background: var(--vm-stripe); }
.rx-portal[data-m="mm"]::after { background: var(--mm-gray); }

/* Faixas escuras na home (TV e Rádio) */
.rx-band { position: relative; color: #fff; overflow: hidden; isolation: isolate; }
.rx-band--tv { background: #07080d; --surface: #11131c; --surface-2: #181b27; --ink: #f3f4f8; --muted: #9aa0b4; --line: rgba(255, 255, 255, .09); }
.rx-band--tv::before { content: ''; position: absolute; width: 900px; height: 900px; right: -300px; top: -400px; z-index: -1; background: radial-gradient(closest-side, rgba(219, 21, 131, .35), transparent); }
.rx-band--tv::after { content: ''; position: absolute; width: 700px; height: 700px; left: -300px; bottom: -400px; z-index: -1; background: radial-gradient(closest-side, rgba(29, 154, 212, .3), transparent); }
.rx-band--vm { background: linear-gradient(180deg, #00354b, #00293a); --surface: rgba(255, 255, 255, .06); --surface-2: rgba(255, 255, 255, .1); --ink: #f2f8fa; --muted: #a9c6d3; --line: rgba(255, 255, 255, .1); }
.rx-band .rx-more { border-color: rgba(255, 255, 255, .2); }
.rx-band .rx-more:hover { background: rgba(255, 255, 255, .08); }
.rx-band .rx-kicker { color: #4fc3f7; }
.rx-band--vm .rx-kicker { color: var(--vm-yellow); }

/* Ticker */
.rx-ticker { border-block: 1px solid var(--line); overflow: hidden; background: var(--surface); }
.rx-ticker-in { display: flex; gap: 48px; width: max-content; padding: 14px 0; animation: rx-marquee 50s linear infinite; }
.rx-ticker:hover .rx-ticker-in { animation-play-state: paused; }
.rx-ticker a { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 15px; white-space: nowrap; }
.rx-ticker a:hover { color: var(--accent-2); }
.rx-ticker a i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@keyframes rx-marquee { to { transform: translateX(-50%); } }

/* ======================= PLAYER DE VÍDEO (YouTube leve) ======================= */
.rx-yt { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; isolation: isolate; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }
.rx-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rx-yt-face { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }
.rx-yt-face img, .rx-yt-face .rx-capa { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .6s; }
.rx-yt-face:hover img, .rx-yt-face:hover .rx-capa { transform: scale(1.03); filter: brightness(.85); }
.rx-yt-face::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .65)); }
.rx-yt-play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: rgba(255, 255, 255, .95); color: #000; display: grid; place-items: center; font-size: 30px; transition: transform .45s var(--spring); }
.rx-yt-play svg { fill: currentColor; stroke: none; margin-left: 4px; }
.rx-yt-face:hover .rx-yt-play { transform: scale(1.1); }
.rx-yt-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px 22px; color: #fff; text-align: left; }
.rx-yt-info strong { display: block; font-weight: 800; font-size: clamp(17px, 2vw, 24px); line-height: 1.15; margin-top: 8px; }
.rx-live-badge { display: inline-flex; align-items: center; gap: 8px; background: #ff0033; color: #fff; font-weight: 900; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; }
.rx-live-badge .rx-dot { background: #fff; }
.rx-live-badge--off { background: rgba(255, 255, 255, .16); }

/* ======================= XMTV ======================= */
.rx-tv-hero { padding: clamp(24px, 3vw, 40px) 0 clamp(40px, 5vw, 72px); position: relative; isolation: isolate; }
.rx-tv-hero::before { content: ''; position: absolute; inset: -200px 0 0; z-index: -1; background: radial-gradient(800px 500px at 85% 0%, rgba(219, 21, 131, .28), transparent 60%), radial-gradient(700px 500px at 0% 30%, rgba(29, 154, 212, .22), transparent 60%); }
.rx-tv-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 24px; align-items: start; }
.rx-tv-side { display: flex; flex-direction: column; gap: 14px; }
.rx-tv-side h1 { font-family: 'Quicksilver', 'Nolan', sans-serif; font-weight: 400; font-size: clamp(34px, 4.4vw, 58px); line-height: .95; }
.rx-tv-side h1 em { font-style: normal; background: var(--tv-rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rx-tv-side p { color: var(--muted); }
.rx-upnext { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; }
.rx-upnext a { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 8px; border-radius: 12px; align-items: center; transition: background .3s; }
.rx-upnext a:hover { background: var(--surface-2); }
.rx-upnext .rx-thumb { aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; position: relative; }
.rx-upnext .rx-thumb img, .rx-upnext .rx-thumb .rx-capa { width: 100%; height: 100%; object-fit: cover; }
.rx-upnext strong { font-weight: 700; font-size: 14px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rx-upnext small { color: var(--muted); font-size: 12px; }
/* home: lista com rolagem, da mesma altura do player (o conteúdo não estica a linha: contain: size) */
.rx-tv-grid > .rx-yt { width: 100%; align-self: start; } /* o player define a altura da linha */
.rx-tv-grid > .rx-upnext--rola { align-self: stretch; }  /* a lista acompanha essa altura */
.rx-upnext--rola {
  contain: size; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent);
  padding-bottom: 40px;
}
/* página da XMTV: a lista fica embaixo dos botões, com altura fixa e rolagem */
.rx-upnext--lado { contain: none; max-height: 300px; margin-top: 4px; }
.rx-upnext--rola::-webkit-scrollbar { width: 6px; }
.rx-upnext--rola::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 99px; }
.rx-dur { position: absolute; right: 6px; bottom: 6px; background: rgba(0, 0, 0, .8); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }

.rx-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.rx-chips::-webkit-scrollbar { display: none; }
.rx-chip { flex: none; font-weight: 700; font-size: 14px; padding: 9px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); transition: background .3s, color .3s, transform .3s var(--spring); }
.rx-chip:hover { transform: translateY(-2px); }
.rx-chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: transparent; }

/* Programas: 2 fileiras iguais (--cols = metade dos programas). O tamanho do cartão é limitado
   pela altura da tela, para as duas fileiras caberem juntas sem precisar rolar.
   A capa vertical (4:5) tem o mesmo formato do cartão, então não corta. */
.rx-progs {
  --cols: 4; --gap: clamp(12px, 1.4vw, 18px);
  --card: min(calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)), max(150px, calc((100vh - 340px) * .4)));
  display: grid; gap: var(--gap); justify-content: start;
  grid-template-columns: repeat(var(--cols), var(--card));
}
@supports (height: 100svh) { .rx-progs { --card: min(calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)), max(150px, calc((100svh - 340px) * .4))); } }
.rx-prog { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; display: flex; align-items: flex-end; color: #fff; isolation: isolate; background: var(--surface); text-align: left; width: 100%; }
.rx-prog img, .rx-prog .rx-capa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: -2; transition: transform 1s var(--ease); }
.rx-prog::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .85)); }
.rx-prog:hover img { transform: scale(1.04); }
.rx-prog { transition: transform .5s var(--spring), box-shadow .5s var(--ease); }
.rx-prog:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -26px rgba(0, 0, 0, .9); }
.rx-prog-b { padding: clamp(12px, 1.2vw, 18px); }
.rx-prog-b small { font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #4fc3f7; }
.rx-prog-b strong { display: block; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(15px, 1.35vw, 20px); line-height: 1; margin: 6px 0; }
.rx-prog-b span { font-size: 13px; opacity: .8; }
.rx-prog[aria-pressed="true"] { outline: 3px solid #fff; outline-offset: -3px; }
.rx-prog::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--tv-rainbow); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); z-index: 2; }
.rx-prog:hover::before, .rx-prog[aria-pressed="true"]::before { transform: scaleX(1); }

.rx-vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px 18px; }
.rx-vid { display: flex; flex-direction: column; gap: 10px; text-align: left; width: 100%; }
.rx-vid .rx-thumb { position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: var(--surface); }
.rx-vid .rx-thumb img, .rx-vid .rx-thumb .rx-capa { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.rx-vid:hover .rx-thumb img, .rx-vid:hover .rx-thumb .rx-capa { transform: scale(1.06); }
.rx-vid .rx-thumb::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='white'/%3E%3Cpath d='M10 8l6 4-6 4z' fill='black'/%3E%3C/svg%3E") center / 54px no-repeat; opacity: 0; transition: opacity .35s; }
.rx-vid:hover .rx-thumb::after { opacity: 1; }
.rx-vid strong { font-weight: 700; font-size: 16px; line-height: 1.25; }
.rx-vid small { color: var(--muted); font-size: 13px; }

.rx-shorts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 210px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; }
.rx-short { scroll-snap-align: start; position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; color: #fff; display: flex; align-items: flex-end; isolation: isolate; text-align: left; width: 100%; }
.rx-short img, .rx-short .rx-capa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.rx-short::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .85)); }
.rx-short span { padding: 14px; font-weight: 800; font-size: 15px; line-height: 1.2; }
.rx-short i { position: absolute; top: 10px; left: 10px; font-style: normal; font-size: 10px; font-weight: 900; letter-spacing: .12em; background: #ff0033; padding: 3px 7px; border-radius: 5px; }

.rx-sub-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(24px, 4vw, 44px); border-radius: 28px; background: #0f111a; border: 1px solid var(--line); position: relative; overflow: hidden; isolation: isolate; flex-wrap: wrap; }
.rx-sub-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--tv-rainbow); opacity: .14; }
.rx-sub-cta h3 { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(26px, 3.4vw, 40px); line-height: 1; }

/* Modal de vídeo */
.rx-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--gutter); background: rgba(0, 0, 0, .82); backdrop-filter: blur(8px); animation: rx-fade .3s; }
.rx-modal-in { width: min(1100px, 100%); animation: rx-pop .5s var(--spring); }
.rx-modal-in.is-short { width: min(400px, 100%); }
.rx-modal-in.is-short .rx-yt { aspect-ratio: 9/16; }
.rx-modal-close { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; font-size: 22px; }
.rx-modal-t { color: #fff; font-weight: 800; font-size: 18px; margin-top: 14px; }
@keyframes rx-pop { from { opacity: 0; transform: scale(.92) translateY(20px); } }

/* ======================= RÁDIO ======================= */
.rx-radio-hero { position: relative; padding: clamp(32px, 5vw, 72px) 0 clamp(120px, 14vw, 180px); overflow: hidden; isolation: isolate; }
.rx-radio-hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(900px 500px at 80% 10%, rgba(96, 153, 203, .35), transparent 60%), radial-gradient(700px 400px at 10% 90%, rgba(121, 175, 127, .28), transparent 60%); }
.rx-waves { position: absolute; left: 0; right: 0; bottom: -2px; height: 160px; z-index: -1; pointer-events: none; }
.rx-waves svg { position: absolute; bottom: 0; width: 200%; height: 100%; stroke: none; }
.rx-waves .w1 { fill: rgba(96, 153, 203, .25); animation: rx-wave 14s linear infinite; }
.rx-waves .w2 { fill: rgba(121, 175, 127, .22); animation: rx-wave 9s linear infinite reverse; bottom: -10px; }
.rx-waves .w3 { fill: var(--bg); animation: rx-wave 18s linear infinite; bottom: -24px; }
@keyframes rx-wave { to { transform: translateX(-50%); } }
.rx-radio-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.rx-radio-freq { font-weight: 900; font-size: clamp(64px, 11vw, 150px); line-height: .85; letter-spacing: -.04em; color: var(--vm-yellow); }
.rx-radio-freq small { font-size: .32em; letter-spacing: 0; color: #fff; margin-left: 8px; }
.rx-radio-copy h1 { font-weight: 900; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.05; margin-top: 18px; letter-spacing: -.02em; }
.rx-radio-copy p { color: var(--muted); margin-top: 10px; font-size: 17px; max-width: 46ch; }
.rx-onair { position: relative; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 30px; padding: 26px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); }
.rx-onair-top { display: flex; align-items: center; gap: 20px; }
.rx-bigplay { position: relative; width: 104px; height: 104px; border-radius: 50%; background: var(--vm-yellow); color: #00293a; display: grid; place-items: center; font-size: 38px; flex: none; transition: transform .45s var(--spring); }
.rx-bigplay svg { fill: currentColor; stroke: none; }
.rx-bigplay:hover { transform: scale(1.06); }
.rx-bigplay::before, .rx-bigplay::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--vm-yellow); opacity: 0; }
.rx-bigplay.is-playing::before { animation: rx-ring 2s infinite; }
.rx-bigplay.is-playing::after { animation: rx-ring 2s 1s infinite; }
@keyframes rx-ring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
.rx-onair small { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--vm-yellow); }
.rx-onair h2 { font-weight: 900; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.05; margin: 6px 0 4px; }
.rx-onair p { color: var(--muted); font-size: 14px; }
.rx-prog-bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .12); margin: 22px 0 8px; overflow: hidden; }
.rx-prog-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--vm-green), var(--vm-yellow)); border-radius: inherit; transition: width 1s var(--ease); }
.rx-prog-times { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-weight: 700; }
.rx-next { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; align-items: center; gap: 14px; }
.rx-next img, .rx-next .rx-capa { width: 76px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; }
.rx-next div { font-size: 13px; color: var(--muted); }
.rx-next b { display: block; color: #fff; font-size: 15px; }
.rx-countdown { display: flex; gap: 10px; margin-top: 18px; }
.rx-countdown div { flex: 1; text-align: center; background: rgba(0, 0, 0, .2); border-radius: 14px; padding: 12px 6px; }
.rx-countdown b { display: block; font-weight: 900; font-size: 28px; line-height: 1; color: var(--vm-yellow); font-variant-numeric: tabular-nums; }
.rx-countdown span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* Equalizador */
.rx-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.rx-eq i { width: 3px; height: 30%; background: currentColor; border-radius: 2px; }
.is-playing .rx-eq i, .rx-eq.is-on i { animation: rx-eq .9s ease-in-out infinite; }
.rx-eq i:nth-child(2) { animation-delay: -.3s !important; }
.rx-eq i:nth-child(3) { animation-delay: -.6s !important; }
.rx-eq i:nth-child(4) { animation-delay: -.15s !important; }
@keyframes rx-eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }

/* Grade */
.rx-days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 22px; }
.rx-days::-webkit-scrollbar { display: none; }
.rx-day { flex: none; min-width: 72px; padding: 10px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-align: center; font-weight: 800; transition: background .3s, color .3s, transform .3s var(--spring); }
.rx-day small { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.rx-day[aria-pressed="true"] { background: var(--vm-yellow); color: #00293a; transform: translateY(-2px); }
.rx-day[aria-pressed="true"] small { color: #00293a; }
.rx-sched { display: grid; gap: 10px; }
.rx-slot { display: grid; grid-template-columns: 120px 140px 1fr auto; gap: 18px; align-items: center; padding: 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); transition: transform .4s var(--ease), background .3s; }
.rx-slot:hover { transform: translateX(4px); }
.rx-slot-h { font-weight: 900; font-size: 18px; font-variant-numeric: tabular-nums; }
.rx-slot-h small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.rx-slot img, .rx-slot .rx-capa { width: 140px; aspect-ratio: 16/9; border-radius: 10px; object-fit: cover; }
.rx-slot strong { display: block; font-weight: 800; font-size: 18px; }
.rx-slot span { color: var(--muted); font-size: 14px; }
.rx-slot.is-live { background: linear-gradient(90deg, rgba(254, 238, 0, .14), var(--surface) 60%); border-color: rgba(254, 238, 0, .5); }
.rx-slot-badge { font-weight: 900; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; border-radius: 8px; background: var(--vm-yellow); color: #00293a; display: inline-flex; gap: 6px; align-items: center; }
.rx-slot-badge--soon { background: rgba(255, 255, 255, .1); color: var(--muted); }

.rx-cta-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rx-cta-card { border-radius: 24px; padding: 26px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; }
.rx-cta-card .rx-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: rgba(254, 238, 0, .14); color: var(--vm-yellow); }
.rx-cta-card h3 { font-weight: 900; font-size: 22px; }
.rx-cta-card p { color: var(--muted); font-size: 15px; flex: 1; }

/* ======================= MATIAS MARINHO (portal) ======================= */
.rx-mast { padding: clamp(28px, 4vw, 48px) 0 18px; border-bottom: 3px double var(--line); }
.rx-mast-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.rx-mast img { height: clamp(56px, 7vw, 86px); width: auto; }
.rx-mast-info { text-align: right; color: var(--muted); font-size: 14px; }
.rx-mast-info b { display: block; color: var(--ink); font-size: 15px; }
.rx-mast-info b::first-letter { text-transform: uppercase; }
.rx-ed-nav { position: sticky; top: calc(var(--wpab, 0px) + var(--top-h, 109px)); z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.rx-ed-nav .rx-chips { padding: 12px 0; }
.rx-ed-nav .rx-chip { background: transparent; border-color: transparent; }
.rx-ed-nav .rx-chip[aria-pressed="true"] { background: var(--mm-navy); }
.rx-mm-top { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(20px, 3vw, 40px); padding: clamp(24px, 3vw, 40px) 0; }
.rx-mm-lead h2 { font-weight: 900; font-size: clamp(30px, 4.2vw, 56px); line-height: 1; letter-spacing: -.03em; margin: 14px 0 12px; text-wrap: balance; }
.rx-mm-lead p { font-size: 19px; color: var(--muted); max-width: 62ch; }
.rx-mm-lead .rx-media { aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; margin-top: 18px; }
.rx-mm-lead .rx-media img, .rx-mm-lead .rx-media .rx-capa { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.rx-mm-lead:hover .rx-media img, .rx-mm-lead:hover .rx-media .rx-capa { transform: scale(1.03); }
.rx-mm-lead:hover h2 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.rx-mm-side { display: flex; flex-direction: column; gap: 0; border-left: 1px solid var(--line); padding-left: clamp(20px, 3vw, 40px); }
.rx-mm-side h4 { font-weight: 900; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; padding-bottom: 12px; border-bottom: 3px solid var(--mm-navy); margin-bottom: 4px; }
.rx-line { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.rx-line time { font-weight: 800; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 2px; }
.rx-line strong { font-weight: 800; font-size: 16px; line-height: 1.25; }
.rx-line:hover strong { text-decoration: underline; }
.rx-line small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 2px; }
.rx-mm-body { display: grid; grid-template-columns: 1fr 320px; gap: clamp(24px, 3vw, 48px); padding-bottom: 64px; }
.rx-rank li { counter-increment: rk; display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.rx-rank li::before { content: counter(rk); font-weight: 900; font-size: 36px; line-height: .9; color: var(--mm-navy); opacity: .2; }
.rx-rank a { font-weight: 800; font-size: 15px; line-height: 1.25; }
.rx-rank a:hover { text-decoration: underline; }
.rx-rank { counter-reset: rk; }
.rx-aside { display: flex; flex-direction: column; gap: 28px; }
.rx-aside-box { background: var(--surface); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.rx-aside-box h4 { font-weight: 900; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 8px; }
.rx-col { display: flex; gap: 14px; align-items: center; padding: 20px; border-radius: var(--radius); background: var(--mm-navy); color: #fff; }
.rx-col img { width: 64px; height: 64px; border-radius: 50%; background: var(--mm-gray); padding: 8px; object-fit: contain; flex: none; }
.rx-col small { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.rx-col strong { display: block; font-weight: 800; font-size: 17px; line-height: 1.2; margin-top: 4px; }
.rx-ad { display: grid; place-items: center; text-align: center; border: 1.5px dashed var(--line); border-radius: 14px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: repeating-linear-gradient(45deg, transparent 0 10px, rgba(127, 127, 127, .05) 10px 20px); }
.rx-ad--wide { height: 110px; margin: 8px 0 32px; }
.rx-ad--box { aspect-ratio: 300/250; }
.rx-news-list { display: grid; gap: 0; }
.rx-row { display: grid; grid-template-columns: 240px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: start; }
.rx-row .rx-media { aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; }
.rx-row .rx-media img, .rx-row .rx-media .rx-capa { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.rx-row:hover .rx-media img, .rx-row:hover .rx-media .rx-capa { transform: scale(1.05); }
.rx-row h3 { font-weight: 900; font-size: 22px; line-height: 1.15; letter-spacing: -.01em; margin: 6px 0; }
.rx-row:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.rx-row p { color: var(--muted); }
.rx-row small { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); }
.rx-empty { padding: 48px 0; text-align: center; color: var(--muted); }

/* WhatsApp box */
.rx-wa { background: linear-gradient(135deg, #075e54, #128c7e); color: #fff; border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.rx-wa h4 { font-size: 20px !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 900; margin: 0 !important; }
.rx-wa p { opacity: .85; font-size: 14px; }

/* ======================= ARTIGO ======================= */
.rx-progress { position: fixed; left: 0; top: 0; height: 4px; width: 100%; z-index: 100; transform-origin: 0 50%; transform: scaleX(0); background: var(--accent); }
.rx[data-brand="tv"] .rx-progress { background: var(--tv-rainbow); }
.rx[data-brand="vm"] .rx-progress { background: var(--vm-stripe); }
.rx-art { padding: clamp(28px, 4vw, 56px) 0 64px; }
.rx-art-head { max-width: 860px; margin: 0 auto; }
.rx-crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); font-weight: 700; margin-bottom: 18px; flex-wrap: wrap; }
.rx-crumbs a:hover { color: var(--ink); }
.rx-art h1 { font-weight: 900; font-size: clamp(32px, 4.8vw, 60px); line-height: 1; letter-spacing: -.03em; text-wrap: balance; }
.rx[data-brand="tv"] .rx-art h1 { font-family: 'Nolan', sans-serif; }
.rx-art-sub { font-size: clamp(18px, 2vw, 22px); color: var(--muted); margin-top: 16px; line-height: 1.4; }
.rx-art-by { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; margin-top: 24px; border-block: 1px solid var(--line); flex-wrap: wrap; }
.rx-art-by-l { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.rx-art-by-l b { color: var(--ink); display: block; font-size: 15px; }
.rx-avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.rx-avatar img { width: 70%; height: 70%; object-fit: contain; }
.rx-share { display: flex; gap: 6px; flex-wrap: wrap; }
.rx-share button, .rx-share a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); font-size: 17px; transition: transform .3s var(--spring), background .3s; }
.rx-share button:hover, .rx-share a:hover { transform: translateY(-3px); }
.rx-share .is-wa { background: #25d366; color: #fff; border-color: transparent; }
.rx-art-fig { max-width: 1100px; margin: 32px auto 0; }
.rx-art-fig .rx-media { aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; }
.rx-art-fig .rx-media img, .rx-art-fig .rx-media .rx-capa { width: 100%; height: 100%; object-fit: cover; }
.rx-art-fig figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; }
.rx-art-body { max-width: 720px; margin: 36px auto 0; font-size: var(--fs, 19px); line-height: 1.7; }
.rx-art-body p { margin: 0 0 1.2em; }
.rx-art-body > p:first-child::first-letter { float: left; font-weight: 900; font-size: 4.2em; line-height: .82; margin: .06em .1em 0 0; color: var(--accent); }
.rx[data-brand="vm"] .rx-art-body > p:first-child::first-letter { color: var(--vm-yellow); }
.rx[data-brand="tv"] .rx-art-body > p:first-child::first-letter { color: var(--tv-pink); }
.rx-art-body h2, .rx-art-body h3 { font-weight: 900; line-height: 1.15; margin: 1.6em 0 .6em; }
.rx-art-body a { color: var(--accent-2); text-decoration: underline; }
.rx-art-body img { border-radius: 12px; margin: 1.4em 0; }
.rx-art-body blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--accent); font-size: 1.15em; font-weight: 700; }
.rx-art-tools { display: flex; gap: 6px; }
.rx-art-tools button { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); font-weight: 900; }
.rx-art-foot { max-width: 720px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 16px; }
.rx-art-wa { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); flex-wrap: wrap; }
.rx-art-wa strong { font-size: 17px; font-weight: 800; }

/* ======================= BUSCA ======================= */
.rx-search { position: fixed; inset: 0; z-index: 95; background: rgba(0, 8, 14, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: none; padding: clamp(16px, 8vh, 100px) var(--gutter); animation: rx-fade .25s; }
.rx-search.is-open { display: block; }
.rx-search-box { max-width: 760px; margin: 0 auto; background: var(--surface); color: var(--ink); border-radius: 24px; box-shadow: var(--shadow-lg); overflow: hidden; animation: rx-pop .45s var(--spring); }
.rx-search-in { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); font-size: 22px; }
.rx-search-in input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 20px; font-weight: 600; min-width: 0; }
.rx-search-res { max-height: 60vh; overflow-y: auto; padding: 8px; }
.rx-search-res a { display: grid; grid-template-columns: 90px 1fr; gap: 14px; padding: 10px; border-radius: 14px; align-items: center; }
.rx-search-res a:hover, .rx-search-res a:focus { background: var(--surface-2); }
.rx-search-res .rx-media { aspect-ratio: 16/10; border-radius: 8px; overflow: hidden; }
.rx-search-res .rx-media img, .rx-search-res .rx-media .rx-capa { width: 100%; height: 100%; object-fit: cover; }
.rx-search-res .rx-media .rx-capa span { font-size: 11px; }
.rx-search-res strong { font-weight: 800; font-size: 15px; line-height: 1.25; display: block; }
.rx-search-res small { color: var(--muted); font-size: 12px; }
.rx-search-hint { padding: 22px; color: var(--muted); font-size: 14px; }

/* ======================= MINI PLAYER DA RÁDIO (fixo) ======================= */
.rx-mp { position: fixed; right: 16px; bottom: 16px; z-index: 70; display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(0, 41, 58, .92); color: #fff; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .12); max-width: calc(100vw - 32px); animation: rx-mp-in .8s 1s var(--spring) both; transition: transform .5s var(--ease), padding .4s; view-transition-name: rx-mp; }
@keyframes rx-mp-in { from { transform: translateY(140%); } }
.rx-mp-btn { width: 46px; height: 46px; border-radius: 50%; background: var(--vm-yellow); color: #00293a; display: grid; place-items: center; font-size: 18px; flex: none; transition: transform .35s var(--spring); }
.rx-mp-btn svg { fill: currentColor; stroke: none; }
.rx-mp-btn:hover { transform: scale(1.08); }
.rx-mp-logo { width: 36px; height: 36px; flex: none; }
.rx-mp-t { min-width: 0; line-height: 1.2; }
.rx-mp-t small { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--vm-yellow); }
.rx-mp-t strong { display: block; font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.rx-mp .rx-eq { color: var(--vm-yellow); margin-left: 4px; }
.rx-mp-vol { width: 80px; accent-color: var(--vm-yellow); }
.rx-mp-msg { position: absolute; bottom: calc(100% + 10px); right: 0; background: #fff; color: #00293a; font-size: 13px; font-weight: 700; padding: 10px 14px; border-radius: 12px; width: max-content; max-width: 280px; box-shadow: var(--shadow-lg); animation: rx-pop .4s var(--spring); }

/* ======================= FOOTER ======================= */
.rx-foot { background: #021820; color: rgba(255, 255, 255, .78); padding: 64px 0 120px; margin-top: 0; position: relative; }
.rx[data-brand="mm"] .rx-foot { background: var(--mm-navy); }
.rx[data-brand="tv"] .rx-foot { background: #000; }
.rx[data-brand="vm"] .rx-foot { background: #001c28; }
.rx-foot::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--mm-navy) 0 33.3%, transparent 33.3%), var(--vm-stripe); }
.rx-foot::after { content: ''; position: absolute; left: 33.3%; width: 33.4%; top: 0; height: 4px; background: var(--tv-rainbow); }
.rx-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.rx-foot-brand img { height: 46px; width: auto; margin-bottom: 18px; }
.rx-foot h5 { color: #fff; font-weight: 900; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
.rx-foot li { margin-bottom: 9px; font-size: 15px; }
.rx-foot a:hover { color: #fff; }
.rx-foot-logos { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .1); }
.rx-foot-logos img { height: 38px; width: auto; opacity: .85; transition: opacity .3s, transform .4s var(--spring); }
.rx-foot-logos a:hover img { opacity: 1; transform: translateY(-3px); }
.rx-foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; font-size: 13px; opacity: .7; }
.rx-social { display: flex; gap: 8px; margin-top: 18px; }
.rx-social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .08); display: grid; place-items: center; font-size: 17px; transition: background .3s, transform .3s var(--spring); }
.rx-social a:hover { background: rgba(255, 255, 255, .18); transform: translateY(-3px); }
.rx-demo { display: inline-block; margin-top: 10px; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(254, 238, 0, .15); color: var(--vm-yellow); font-weight: 700; }

/* ======================= MOTION ======================= */
.rx-rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.rx-rv.is-in { opacity: 1; transform: none; }
.rx-split > span { display: inline-block; opacity: 0; transform: translateY(.5em); animation: rx-word .8s var(--ease) forwards; animation-delay: calc(var(--w) * 45ms + 100ms); }
@keyframes rx-word { to { opacity: 1; transform: none; } }
.rx-view { animation: rx-view-in .7s var(--ease); }
@keyframes rx-view-in { from { opacity: 0; transform: translateY(14px); } }

/* View Transitions (Chrome/Edge/Safari 18+) */
::view-transition-old(root) { animation: rx-vt-out .45s var(--ease, ease) both; }
::view-transition-new(root) { animation: rx-vt-in .6s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes rx-vt-out { to { opacity: 0; transform: scale(.985); filter: blur(4px); } }
@keyframes rx-vt-in { from { opacity: 0; transform: translateY(24px) scale(1.01); clip-path: inset(0 0 100% 0 round 24px); } to { clip-path: inset(0 0 0 0 round 0); } }
::view-transition-group(rx-top), ::view-transition-group(rx-mp) { animation-duration: .6s; }

@media (prefers-reduced-motion: reduce) {
  .rx *, .rx *::before, .rx *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .rx-rv { opacity: 1; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ======================= RESPONSIVO ======================= */
@media (max-width: 1080px) {
  .rx-nav { display: none; }
  .rx-burger { display: grid; }
  .rx-bar .rx-wrap { gap: 8px; }
  .rx-bar .rx-tools { margin-left: auto; }
  .rx-hgrid { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: auto; grid-template-areas: "c0 c0" "bb bb" "c1 c2" "c3 c4"; }
  .rx-hc { min-height: 280px; }
  .rx-hc--0 { min-height: 420px; }
  .rx-bb-list { grid-template-columns: 1fr; }
  .rx-portals { grid-template-columns: 1fr; }
  .rx-portal { min-height: 300px; }
  .rx-tv-grid, .rx-radio-grid, .rx-mm-top, .rx-mm-body { grid-template-columns: 1fr; }
  .rx-upnext--rola { contain: none; max-height: 420px; }
  .rx-progs { --card: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); }
  /* cartões menores: o texto vai para baixo da capa (não fica em cima do desenho) */
  .rx-prog { aspect-ratio: auto; flex-direction: column; align-items: stretch; }
  .rx-prog img, .rx-prog .rx-capa { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 5; z-index: 0; }
  .rx-prog::after { display: none; }
  .rx-prog-b { padding: 10px 12px 12px; }
  .rx-prog-b strong { font-size: 15px; margin: 3px 0; }
  .rx-mm-side { border-left: 0; padding-left: 0; }
  .rx-foot-grid { grid-template-columns: 1fr 1fr; }
  .rx-grid-3, .rx-cta-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .rx-hide-m { display: none; }
  .rx-util-l { min-width: 0; }
  .rx-util-l span { overflow: hidden; text-overflow: ellipsis; }
  .rx-bar .rx-wrap { height: 62px; }
  .rx-logo { height: 32px; }
  .rx[data-brand="tv"] .rx-logo, .rx[data-brand="vm"] .rx-logo { height: 38px; }
  .rx-hgrid { grid-template-columns: 1fr; grid-template-areas: "c0" "bb" "c1" "c2" "c3" "c4"; }
  .rx-hc { min-height: 230px; border-radius: 18px; }
  .rx-hc--0 { min-height: 360px; }
  .rx-bb-list { grid-template-columns: 1fr; }
  .rx-bb-zone { border-radius: 22px; padding: 22px 12px 16px; }
  .rx-grid-3, .rx-cta-row, .rx-foot-grid { grid-template-columns: 1fr; }
  /* celular: sempre 2 por linha */
  .rx-progs { --cols: 2 !important; --gap: 12px; }
  .rx-prog-b small { font-size: 10px; letter-spacing: .08em; }
  .rx-prog-b span { font-size: 12px; }
  .rx-row { grid-template-columns: 110px 1fr; gap: 14px; }
  .rx-row h3 { font-size: 17px; }
  .rx-row p { display: none; }
  .rx-slot { grid-template-columns: 70px 1fr auto; gap: 12px; }
  .rx-slot img, .rx-slot .rx-capa { display: none; }
  .rx-slot strong { font-size: 16px; }
  .rx-slot span { font-size: 13px; }
  .rx-onair { padding: 20px; border-radius: 24px; }
  .rx-bigplay { width: 80px; height: 80px; font-size: 30px; }
  .rx-mp { left: 12px; right: 12px; bottom: 12px; }
  .rx-mp-t strong { max-width: none; }
  .rx-mp-vol { display: none; }
  .rx-mp-t { flex: 1; }
  .rx-mast-info { text-align: left; }
  .rx-yt-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; font-size: 24px; }
  .rx-art-by { flex-direction: column; align-items: flex-start; }
}


/* ---------- Rádio: "tocando agora" (música real do streaming) ---------- */
.rx-np[hidden] { display: none; }
.rx-np-in { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; margin: 18px 0 4px; padding: 12px; border-radius: 18px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); animation: rx-np-in .6s var(--ease); }
.rx-np-in img, .rx-np-ic { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .6); }
.rx-np-ic { display: grid; place-items: center; background: rgba(255, 255, 255, .12); }
.rx-np-in > div { display: grid; gap: 2px; min-width: 0; }
.rx-np-in small { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--vm-yellow); }
.rx-np-in strong { font-weight: 800; font-size: 18px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-np-in span { font-size: 14px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-np-in em { font-style: normal; font-size: 12px; opacity: .6; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes rx-np-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rx-mp-logo.is-capa { border-radius: 10px; object-fit: cover; }