/* Header */
#pHeader { position: relative; }

.cover-wrap { padding-top: 24px; }

/* Cover artwork is 1600x320 (5:1), reserved upfront to avoid layout shift */
.cover {
  display: block;
  aspect-ratio: 5 / 1;
  overflow: hidden;
  background: var(--surface);
  border-radius: 7px;
}

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

/* Menu: full width bar, no card, active item underlined by the accent */
.menu-wrap {
  max-width: none;
  padding: 0;
  margin: 0;
  background: var(--menu-bg);
}

.menu {
  position: relative;
  z-index: 20;
  display: block;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px;
  background: none;
  border: 0;
  border-radius: 0;
}

/* Hamburger: only on phones, where the list turns into a panel */
.menu__toggle { display: none; }

.menu__bars {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: background 0.2s;
}

.menu__bars::before,
.menu__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s;
}

.menu__bars::before { top: -6px; }
.menu__bars::after { top: 6px; }

.menu.is-open .menu__bars { background: transparent; }
.menu.is-open .menu__bars::before { transform: translateY(6px) rotate(45deg); }
.menu.is-open .menu__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Wider gap with tighter side padding: the backgrounds get room to breathe
   without pushing the labels further apart */
.menu__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__list > li {
  display: block;
  position: relative;
}

.menu__list a {
  position: relative;
  display: inline-block;
  padding: 16px 18px;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  color: var(--menu-fg);
  border-radius: 0;
  transition: color var(--ease), background var(--ease);
}

.menu__list a:hover {
  color: var(--menu-fg-strong);
  background: var(--surface);
}

/* Active item is painted, not underlined */
.menu__list a.is-active,
.menu__list a.is-active:hover {
  color: var(--accent-fg);
  background: var(--accent);
}

.menu__more > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.menu__more > a span {
  font-size: var(--fs-base);
  font-weight: 600;
  transition: transform 0.22s;
}

.menu__more.is-open > a span { transform: rotate(90deg); }

.submenu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 200px;
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--ease), visibility var(--ease), transform var(--ease);
}

.menu__more.is-open .submenu,
.menu__more:has(a:focus-visible) .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.submenu a {
  display: block;
  padding: 9px 14px;
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--fg);
  border-radius: var(--radius-sm);
  transition: background var(--ease), color var(--ease);
}

.submenu a:hover { background: var(--muted); color: var(--accent); }

/* Main grid */
.main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 40px;
  padding-top: 32px;
  padding-bottom: 48px;
}

.rail,
.center {
  display: flex;
  flex-direction: column;
  gap: 34px;
  min-width: 0;
}

/* Full width strip under the two columns */
.wide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 34px;
  padding-bottom: 48px;
}

.center > .modules { grid-column: auto; }

/* addons.css (global, loaded after this file) sizes .mod-reduced with
   float + width: calc(50% - 6px). Inside the grid that halves it twice,
   so the float sizing is cancelled here and the column does the work. */
.center > .modules.mod-reduced {
  grid-column: span 1;
  float: none;
  width: auto;
  margin-left: 0;
  margin-right: 0;
}

.modules {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.modules.pos-1 { margin: 0; }
.modules:empty { display: none; }

/* Card shell */
.card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
}

.card__h {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 0 0 10px;
  color: var(--fg);
  background: none;
  border-bottom: 2px solid var(--border);
  border-radius: 0;
}

.card__h::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 56px;
  height: 2px;
  background: var(--accent);
}

/* Plain text action: keeps the header the same height as the title. Flex so
   the arrow centres on the label instead of sitting on the baseline. */
.card__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--muted-fg);
  transition: color var(--ease);
}

.card__link:hover { color: var(--accent); }

.card__h > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.card__hh {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--fg);
}

/* Inline icon instead of the icon font: the tile keeps its size and the svg
   is set in pixels, since there is no glyph to scale with the font */
.card__hh .icon {
  display: inline-block;
  width: 4px;
  height: 17px;
  background: var(--accent);
  border-radius: 2px;
}

.card__hh .icon svg { display: none; }

.card__body { padding: 0; color: var(--fg); }
.card__f { margin-top: 12px; }

.card__empty {
  padding: 18px 16px;
  font-size: var(--fs-sm);
  color: var(--muted-fg);
  background: var(--surface);
  border-radius: var(--radius);
}

.section-head { margin: 0; }
.section-head .card__h { padding: 14px 18px; }

/* Footer */
.foot {
  margin-top: 24px;
  background: var(--muted);
  border-top: 1px solid var(--border);
}

/* Sits above the footer, not inside it */
.foot__modules { padding: 8px 32px 24px; }

.foot__row {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: 48px;
  padding: 48px 24px 36px;
}

.foot__id { display: flex; flex-direction: column; align-items: flex-start; }

.foot__id b {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--fg);
}

.foot__id p {
  max-width: 520px;
  margin: 10px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--muted-fg);
}

/* One list of links: the panel decides the order, the columns only wrap it */
.foot__links-list {
  columns: 2;
  column-gap: 30px;
}

.foot__links a {
  display: block;
  padding: 5px 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--fg);
  break-inside: avoid;
  transition: color var(--ease);
}

.foot__links a:hover { color: var(--accent); }

/* Store buttons, shown only when the client has the links filled in */
.foot__apps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 220px;
}

.foot__app {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  color: var(--fg);
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  transition: color var(--ease), border-color var(--ease);
}

.foot__app:hover { color: var(--accent); border-color: var(--accent); }
.foot__app i { font-size: 20px; }
.foot__app span { text-align: left; }

.foot__app small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.3;
  opacity: 0.65;
}

.foot__app b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.foot__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.foot__socials a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: var(--fs-base);
  color: var(--fg);
  background: var(--card);
  border-radius: 999px;
  transition: background var(--ease), color var(--ease);
}

.foot__socials a:hover { color: var(--accent-fg); background: var(--accent); }

.foot__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  flex-wrap: wrap;
  margin-top: 0;
  padding: 16px 24px 20px;
  font-size: var(--fs-xs);
  color: var(--muted-fg);
  border-top: 1px solid var(--border);
}

.foot__base b { font-weight: 700; color: var(--fg); }
.foot__base a { font-weight: 800; color: var(--fg); }
.foot__base a:hover { color: var(--accent); }

/* Provider credit: the inline logo inherits the footer text color.
   Scoped under .foot__base to outrank the generic link rules above. */
/* The svg ends exactly on the wordmark baseline: aligning to the end puts the
   text on the same line, centering left it above the logo */
.foot__base .foot__by,
.foot__base .foot__by:hover,
.foot__base .foot__by:focus {
  display: inline-flex;
  align-items: end;
  gap: 8px;
  color: var(--muted-fg);
  opacity: 0.85;
}

/* line-height 1 shrinks the text box to the glyph: without it the leading
   pushes the text away from the middle of the svg */
.foot__by span { font-weight: 600; line-height: 1; }

.foot__by svg {
  display: block;
  width: auto;
  height: 15px;
  fill: currentColor;
}

/* Cookie notice: a card in the corner instead of a bar across the page */
/* Wide bar centered at the bottom: icon, text and action on a single row */
#cookie-banner-lgpd {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2147483647;
  /* Fixed dark surface on purpose: deriving it from the palette turned the bar
     white on sites whose p2 is the light colour */
  color: #fff;
  background: #22262e;
  border-top: 3px solid var(--accent);
}

#cookie-banner-lgpd .cookie-banner-lgpd-container {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 18px 24px;
}

.cookie__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  font-size: var(--fs-lg);
  color: var(--accent);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

#cookie-banner-lgpd .cookie-banner-lgpd_text-box { min-width: 0; flex: 1; }

#cookie-banner-lgpd .cookie-banner-lgpd_text {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}

#cookie-banner-lgpd .cookie-banner-lgpd_text a {
  font-weight: 700;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#cookie-banner-lgpd .cookie-banner-lgpd_button-box { flex-shrink: 0; }

#cookie-banner-lgpd .btn {
  height: 42px;
  padding: 0 30px;
  font-size: var(--fs-base);
  border-radius: var(--radius-sm);
}

/* Phones read the text first and tap a full width button */
@media (max-width: 700px) {
  #cookie-banner-lgpd .cookie-banner-lgpd-container {
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px;
  }

  .cookie__icon { display: none; }
  #cookie-banner-lgpd .cookie-banner-lgpd_button-box { width: 100%; }
  #cookie-banner-lgpd .btn { width: 100%; }
}

/* Responsive */
@media (max-width: 1300px) {
  .main { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (max-width: 1100px) {
  .main { grid-template-columns: minmax(0, 1fr); }

  /* Only the sides give in: cutting the vertical padding made the whole bar
     shrink, and the extra items already fold into the "Mais" menu */
  .menu__list a { padding: 16px 12px; }
}

@media (max-width: 760px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .cover-wrap { padding-top: 16px; }
  .center > .modules.mod-reduced { grid-column: span 2; width: auto; }

  /* Phones get a panel: the horizontal scroller hid pages and clipped the
     dropdown, which is why "Mais" seemed dead */
  .menu { padding: 0; }

  .menu__toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 14px;
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--fg);
    background: none;
    border: 0;
    cursor: pointer;
  }

  /* stretch and full width: each row is one tap target across the panel */
  .menu__list {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 6px;
    border-top: 1px solid var(--border);
  }

  .menu.is-open .menu__list { display: flex; }
  .menu__list > li { width: 100%; }

  .menu__list a {
    display: block;
    width: 100%;
    padding: 12px 14px;
    font-size: var(--fs-base);
    text-align: left;
  }

  .menu__more { display: none !important; }
  .main { grid-template-columns: 1fr; }
  .foot__main { padding: 34px 16px 26px; }
  .foot__base { flex-direction: column; gap: 6px; padding: 16px 16px 24px; }
  #cookie-banner-lgpd { border-radius: var(--radius); }
  #cookie-banner-lgpd .cookie-banner-lgpd-container { flex-wrap: wrap; padding: 14px 16px; }
  #cookie-banner-lgpd .cookie-banner-lgpd_button-box { width: 100%; }
  #cookie-banner-lgpd .btn { width: 100%; }
}

/* Header identity: name, WhatsApp and who is on air, from the approved base */
.head { padding: 16px 0; background: var(--bg); }

.head__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
}

.logo { display: inline-flex; align-items: center; gap: 12px; }

.logo img {
  display: block;
  width: 250px;
  height: 100px;
  object-fit: contain;
  object-position: left center;
}

.logo__dot {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(140deg, var(--accent), var(--second));
  border-radius: 12px;
}

.logo__dot::after {
  content: "";
  position: absolute;
  inset: 11px;
  border: 2.5px solid var(--p1);
  border-radius: 999px;
}

.logo__txt {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
}

.logo__word { display: block; white-space: nowrap; }

.wa {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px 10px 12px;
  color: #fff;
  background: linear-gradient(135deg, #25d366, #128c7e);
  border-radius: 999px;
  transition: transform var(--ease), filter var(--ease);
}

.wa:hover { color: #fff; filter: brightness(1.06); transform: translateY(-1px); }

.wa__ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}

.wa__ico svg { width: 22px; height: 22px; }
.wa__txt { display: flex; flex-direction: column; line-height: 1.2; }
.wa__txt small { font-size: var(--fs-xs); font-weight: 500; opacity: 0.92; }
.wa__txt b { font-size: var(--fs-md); font-weight: 800; letter-spacing: -0.01em; }

.onair {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 8px 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.onair[hidden] { display: none; }

/* A station with no WhatsApp leaves the row with two children, and the schedule
   used to slide into the free middle column. It keeps its place at the end and
   the gap in the middle simply stays empty. */
.onair { grid-column: 3; }

.onair__art {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  background: var(--surface) center / cover no-repeat;
  border-radius: 999px;
}

.onair__info { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }

.onair__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.onair__info b {
  overflow: hidden;
  max-width: 240px;
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.onair__info small { font-size: var(--fs-xs); color: var(--muted-fg); }

@media (max-width: 1100px) {
  .head__row { grid-template-columns: 1fr auto; }
  .wa { justify-self: end; }
  .onair { display: none; }
}

@media (max-width: 640px) {
  .head__row { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .wa { justify-self: center; }
}

/* Breadcrumb: a quiet line above the page title */
.crumb {
  display: flex;
  padding-top: 4px;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted-fg);
}

.crumb a { color: var(--muted-fg); transition: color var(--ease); }
.crumb a:hover { color: var(--accent); }

.crumb__home { display: inline-flex; align-items: center; gap: 6px; }
.crumb__home .icon svg { width: 15px; height: 15px; }

.crumb__sep { display: inline-flex; opacity: 0.5; }
.crumb__sep .icon svg { width: 13px; height: 13px; }

.crumb__here { color: var(--fg); font-weight: 700; }

/* The trail already names the section, so the entry version drops its own rules */
.entry__crumb { margin-bottom: 18px; }

@media (max-width: 1000px) {
  .foot__row { grid-template-columns: 1fr; gap: 30px; }
  .foot__apps { min-width: 0; }
}

@media (max-width: 560px) {
  .foot__links-list { columns: 1; }
  .foot__base { justify-content: center; text-align: center; }
}