/**
 * FocaWeb Campanha — header e navegação responsiva.
 *
 * Responsabilidades: header desktop, header mobile, drawer, busca interna,
 * CTAs e bloco de redes. Este arquivo é carregado por último de propósito.
 */

/* Header mobile e estados de rolagem. */
/* Header mobile consolidado. */

@media (max-width: 760px) {
  /*
   * HEADER NO TOPO
   * Mantém o cartão branco aprovado.
   */
  html body .site-header:not(.is-scrolled) {
    position: fixed !important;
    z-index: 1000 !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    padding: 18px 16px 0 !important;
    background: transparent !important;
    pointer-events: none !important;
  }

  html body .site-header:not(.is-scrolled) .header-inner {
    width: 100% !important;
    max-width: 680px !important;
    height: 104px !important;
    margin: 0 auto !important;
    padding: 14px 18px !important;

    display: grid !important;
    grid-template-columns: 60px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 26px !important;

    background: rgba(255, 255, 255, 0.985) !important;
    border: 1px solid rgba(34, 67, 149, 0.12) !important;
    border-radius: 28px !important;
    box-shadow: 0 18px 48px rgba(9, 26, 67, 0.18) !important;

    pointer-events: auto !important;
  }

  html body .site-header:not(.is-scrolled) .header-tools {
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  /*
   * BOTÃO NO TOPO
   * Circular, azul intermediário e conteúdo branco.
   */
  html body .site-header:not(.is-scrolled) .menu-toggle {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;

    height: 60px !important;
    min-height: 60px !important;

    margin: 0 !important;
    padding: 8px 5px 7px !important;

    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    background: #3157a4 !important;
    border: 1px solid #3157a4 !important;
    border-radius: 50% !important;

    color: #ffffff !important;
    box-shadow: none !important;
  }

  html body .site-header:not(.is-scrolled) .menu-toggle:hover,
  html body .site-header:not(.is-scrolled) .menu-toggle:focus-visible {
    background: #294b91 !important;
    border-color: #294b91 !important;
    color: #ffffff !important;
  }

  /*
   * Hambúrguer.
   */
  html body .site-header .menu-toggle__icon {
    position: relative !important;
    flex: 0 0 17px !important;
    width: 22px !important;
    height: 17px !important;
    display: block !important;
  }

  html body .site-header .menu-toggle__icon i {
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    margin: 0 !important;
    display: block !important;
    background: currentColor !important;
    border-radius: 999px !important;
  }

  html body .site-header .menu-toggle__icon i:first-child {
    top: 0 !important;
  }

  html body .site-header .menu-toggle__icon i:nth-child(2) {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  html body .site-header .menu-toggle__icon i:last-child {
    top: auto !important;
    bottom: 0 !important;
  }

  html body .site-header .menu-toggle__icon::before {
    display: none !important;
    content: none !important;
  }

  /*
   * Palavra MENU.
   */
  html body .site-header .menu-toggle > span:last-child {
    display: block !important;
    margin: 0 !important;
    color: currentColor !important;
    font-size: 0.4rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  /*
   * LOGOTIPO MENOR E COM RESPIRO REAL.
   * O espaçamento vem do column-gap de 26px.
   */
  html body .site-header:not(.is-scrolled) .header-brand {
    width: min(100%, 300px) !important;
    max-width: 300px !important;
    height: 56px !important;

    margin: 0 !important;
    justify-self: start !important;
    overflow: visible !important;
  }

  html body .site-header:not(.is-scrolled)
    .header-brand__logo--initial,
  html body .site-header:not(.is-scrolled)
    .header-brand__office,
  html body .site-header:not(.is-scrolled)
    .header-brand__digits,
  html body .site-header:not(.is-scrolled)
    .header-brand__logo--mobile {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  html body .site-header:not(.is-scrolled)
    .header-brand__logo--scroll {
    position: static !important;
    inset: auto !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: left center !important;

    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  html body .site-header:not(.is-scrolled) .header-brand *,
  html body .site-header:not(.is-scrolled) .header-brand::before,
  html body .site-header:not(.is-scrolled) .header-brand::after {
    animation: none !important;
    transition: none !important;
  }

  html body .site-header .header-actions,
  html body .site-header .header-search {
    display: none !important;
  }

  /*
   * APÓS ROLAR
   * Some cartão e logotipo. Fica somente o menu branco.
   */
  html body .site-header.is-scrolled {
    position: fixed !important;
    z-index: 1000 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;

    width: auto !important;
    height: auto !important;
    padding: 14px !important;

    background: transparent !important;
    pointer-events: none !important;
  }

  html body .site-header.is-scrolled .header-inner {
    width: 58px !important;
    max-width: 58px !important;
    height: 52px !important;
    min-height: 52px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    pointer-events: none !important;
  }

  html body .site-header.is-scrolled .header-brand,
  html body .site-header.is-scrolled .header-actions,
  html body .site-header.is-scrolled .header-search {
    display: none !important;
  }

  html body .site-header.is-scrolled .header-tools {
    width: 58px !important;
    height: 52px !important;
    display: block !important;
    pointer-events: auto !important;
  }

  html body .site-header.is-scrolled .menu-toggle {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;

    height: 52px !important;
    min-height: 52px !important;

    margin: 0 !important;
    padding: 7px 5px 6px !important;

    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;

    background: rgba(255, 255, 255, 0.985) !important;
    border: 1px solid rgba(34, 67, 149, 0.18) !important;
    border-radius: 10px !important;

    color: var(--brand-dark) !important;

    box-shadow: 0 12px 30px rgba(9, 26, 67, 0.2) !important;

    pointer-events: auto !important;
  }

  html body.menu-open .site-header.is-scrolled .menu-toggle {
    background: var(--brand-dark) !important;
    border-color: var(--brand-dark) !important;
    color: var(--white) !important;
  }

  html body.admin-bar .site-header:not(.is-scrolled),
  html body.admin-bar .site-header.is-scrolled {
    top: 46px !important;
  }
}

@media (max-width: 420px) {
  html body .site-header:not(.is-scrolled) {
    padding: 14px 12px 0 !important;
  }

  html body .site-header:not(.is-scrolled) .header-inner {
    height: 88px !important;
    padding: 10px 12px !important;

    grid-template-columns: 52px minmax(0, 1fr) !important;
    column-gap: 18px !important;

    border-radius: 22px !important;
  }

  html body .site-header:not(.is-scrolled) .header-tools,
  html body .site-header:not(.is-scrolled) .menu-toggle {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;

    height: 52px !important;
    min-height: 52px !important;
  }

  html body .site-header:not(.is-scrolled) .header-brand {
    width: min(100%, 215px) !important;
    max-width: 215px !important;
    height: 48px !important;
  }

  html body .site-header .menu-toggle > span:last-child {
    font-size: 0.36rem !important;
  }

  html body .site-header .menu-toggle__icon {
    width: 19px !important;
    height: 14px !important;
    flex-basis: 14px !important;
  }

  html body .site-header.is-scrolled {
    padding: 12px !important;
  }

  html body .site-header.is-scrolled .header-inner,
  html body .site-header.is-scrolled .header-tools,
  html body .site-header.is-scrolled .menu-toggle {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;

    height: 50px !important;
    min-height: 50px !important;
  }
}


/* Escalas relativas do header mobile. */

@media (max-width: 26.25rem) {
  /*
   * Logo proporcional ao espaço disponível.
   * Equivale visualmente a 260 × 50, usando rem.
   */
  html body .site-header:not(.is-scrolled) .header-brand {
    width: min(100%, 16.25rem) !important;
    max-width: 16.25rem !important;
    height: 3.125rem !important;
    margin-left: 0.3125rem !important;
  }

  /*
   * Três linhas reais no botão inicial.
   */
  html body .site-header:not(.is-scrolled) .menu-toggle__icon {
    width: 1.25rem !important;
    height: 1rem !important;
    flex-basis: 1rem !important;
  }

  html body .site-header:not(.is-scrolled)
    .menu-toggle__icon i:first-child {
    top: 0 !important;
    bottom: auto !important;
  }

  html body .site-header:not(.is-scrolled)
    .menu-toggle__icon i:nth-child(2) {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }

  html body .site-header:not(.is-scrolled)
    .menu-toggle__icon i:nth-child(3) {
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
  }

  /*
   * Flutuante levemente maior, mantendo proporção.
   */
  html body .site-header.is-scrolled .header-inner,
  html body .site-header.is-scrolled .header-tools,
  html body .site-header.is-scrolled .menu-toggle {
    width: 3.75rem !important;
    min-width: 3.75rem !important;
    max-width: 3.75rem !important;

    height: 3.5rem !important;
    min-height: 3.5rem !important;
  }

  html body .site-header.is-scrolled .menu-toggle {
    padding: 0.4375rem 0.3125rem 0.375rem !important;
    gap: 0.3125rem !important;
  }

  html body .site-header.is-scrolled .menu-toggle__icon {
    width: 1.375rem !important;
    height: 1rem !important;
    flex-basis: 1rem !important;
  }

  html body .site-header.is-scrolled
    .menu-toggle > span:last-child {
    font-size: 0.46rem !important;
    letter-spacing: 0.08em !important;
  }
}


/* Estrutura interna do drawer mobile. */

@media (max-width: 47.5rem) {
  /*
   * Cabeçalho Navegue.
   */
  html body .menu-panel__top {
    margin: 0 !important;
    padding: 0 0 1.25rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
  }

  /*
   * Busca abaixo de Navegue.
   */
  html body .menu-panel__search-row {
    width: 100% !important;
    margin: 1.125rem 0 1.875rem !important;
  }

  html body .menu-panel__search-row .menu-panel__search {
    width: 100% !important;
    min-height: 4.25rem !important;
    margin: 0 !important;
    padding: 0.875rem 1.125rem !important;

    display: grid !important;
    grid-template-columns: 1.375rem minmax(0, 1fr) 1.25rem !important;
    align-items: center !important;
    column-gap: 0.875rem !important;

    background: var(--white) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 1.125rem !important;

    color: var(--brand-dark) !important;
    box-shadow: 0 0.75rem 1.75rem rgba(9, 26, 67, 0.16) !important;

    text-align: left !important;
  }

  html body .menu-panel__search-row .menu-panel__search span {
    font-size: 0.875rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }

  html body .menu-panel__search-row .menu-panel__search svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  html body .menu-panel__search-row .menu-panel__search svg:last-child {
    justify-self: end !important;
  }

  html body .menu-panel__search-row .menu-panel__search:hover,
  html body .menu-panel__search-row .menu-panel__search:focus-visible {
    background: var(--sun) !important;
    border-color: var(--sun) !important;
  }

  /*
   * Busca aberta sobre o drawer.
   */
  html body.menu-open .search-panel[aria-hidden="false"] {
    z-index: 1300 !important;
  }

  html body.menu-open .search-panel[aria-hidden="false"]
    .search-panel__inner {
    z-index: 1301 !important;
  }

  /*
   * Ações inferiores.
   */
  html body .menu-panel__actions {
    margin-top: 2rem !important;
    display: grid !important;
    gap: 0.875rem !important;
  }

  /*
   * Plano parlamentar:
   * conserva fundo, cor e hover da classe desktop .header-plan.
   */
  html body .menu-panel__plan.header-plan {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 3.75rem !important;
    margin: 0 !important;
    padding: 0.875rem 1.125rem !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;

    border-radius: 1.125rem !important;

    font-size: 0.8rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
  }

  html body .menu-panel__plan.header-plan svg {
    flex: 0 0 auto !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
  }

  /*
   * Faça parte com a mesma proporção, mas identidade amarela.
   */
  html body .menu-panel__actions .menu-panel__cta {
    width: 100% !important;
    min-height: 3.75rem !important;
    margin: 0 !important;
    padding: 0.875rem 1.125rem !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;

    background: var(--sun) !important;
    border: 1px solid var(--sun) !important;
    border-radius: 1.125rem !important;

    color: var(--brand-dark) !important;

    font-size: 0.8rem !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
  }

  html body .menu-panel__actions .menu-panel__cta:hover,
  html body .menu-panel__actions .menu-panel__cta:focus-visible {
    background: var(--white) !important;
    border-color: var(--white) !important;
    color: var(--brand-dark) !important;
  }

  /*
   * Bloco social.
   */
  html body .menu-panel__footer {
    margin-top: 1.875rem !important;
    padding: 1.5rem !important;

    display: grid !important;
    gap: 1.25rem !important;

    background:
      linear-gradient(
        145deg,
        rgba(16, 42, 99, 0.98),
        rgba(23, 54, 119, 0.94)
      ) !important;

    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 1.25rem !important;

    box-shadow: 0 1rem 2rem rgba(9, 26, 67, 0.18) !important;
  }

  html body .menu-panel__community {
    display: grid !important;
    gap: 0.625rem !important;
  }

  html body .menu-panel__community > span {
    color: var(--sun) !important;

    font-size: 0.7rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  html body .menu-panel__community strong {
    max-width: 19rem !important;

    color: var(--white) !important;

    font-family: var(--display) !important;
    font-size: clamp(1.65rem, 7vw, 2.15rem) !important;
    font-weight: 650 !important;
    letter-spacing: -0.035em !important;
    line-height: 0.98 !important;
  }

  html body .menu-panel__community strong em {
    color: var(--sun) !important;
    font-style: normal !important;
  }

  html body .menu-panel__community p {
    max-width: 18rem !important;
    margin: 0 !important;

    color: rgba(255, 255, 255, 0.72) !important;

    font-size: 0.8rem !important;
    line-height: 1.5 !important;
  }

  html body .menu-panel__socials {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.625rem !important;
  }

  html body .menu-panel__socials a {
    width: 2.875rem !important;
    height: 2.875rem !important;

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

    background: var(--white) !important;
    border: 1px solid rgba(255, 255, 255, 0.68) !important;
    border-radius: 0.875rem !important;

    transition:
      transform 0.2s ease,
      background 0.2s ease !important;
  }

  html body .menu-panel__socials a:hover,
  html body .menu-panel__socials a:focus-visible {
    background: var(--sun) !important;
    transform: translateY(-0.125rem) !important;
  }

  html body .menu-panel__socials img {
    width: 1.25rem !important;
    height: 1.25rem !important;
    object-fit: contain !important;

    filter:
      brightness(0)
      saturate(100%)
      invert(24%)
      sepia(36%)
      saturate(2775%)
      hue-rotate(195deg)
      brightness(84%)
      contrast(89%) !important;
  }
}


/* Elementos exclusivos do drawer mobile. */

/*
 * Busca, Plano parlamentar e Faça parte já existem
 * no header desktop. Dentro do drawer aparecem apenas
 * em tablet/mobile.
 */
@media (min-width: 47.5001rem) {
  html body .menu-panel__drawer > .menu-panel__search-row,
  html body .menu-panel__drawer > .menu-panel__actions {
    display: none !important;

    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    visibility: hidden !important;
  }
}


/* Compensação da barra administrativa e ritmo vertical. */

/*
 * A compensação superior só existe quando a barra
 * administrativa do WordPress estiver presente.
 */
body.admin-bar .menu-panel__drawer,
body.admin-bar .menu-panel__backdrop {
  top: 2rem !important;
  bottom: 0 !important;
  height: auto !important;
  max-height: none !important;
}

@media (max-width: 48.875rem) {
  body.admin-bar .menu-panel__drawer,
  body.admin-bar .menu-panel__backdrop {
    top: 2.875rem !important;
  }
}

/*
 * Ritmo vertical comum ao drawer.
 * Não altera largura, cores, tipografia ou estrutura.
 */
html body .menu-panel__drawer {
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

html body .menu-panel__top {
  margin: 0 !important;
  padding-bottom: 0.75rem !important;
}

html body .menu-panel__nav {
  margin-top: clamp(0.75rem, 1.6vh, 1.125rem) !important;
  margin-bottom: 0 !important;
}

html body .menu-panel__nav ul {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

html body .menu-panel__nav a {
  min-height: clamp(3.25rem, 7vh, 4rem) !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

html body .menu-panel__actions {
  margin-top: clamp(0.875rem, 1.6vh, 1.125rem) !important;
}

html body .menu-panel__footer {
  margin-top: clamp(0.875rem, 1.6vh, 1.125rem) !important;
}

/*
 * Desktop: redistribui o conteúdo sem reservar
 * grandes vazios antes ou depois da navegação.
 */
@media (min-width: 47.5001rem) {
  html body .menu-panel__drawer {
    padding-top: clamp(1.25rem, 2.4vh, 1.75rem) !important;
    padding-bottom: clamp(1.125rem, 2vh, 1.5rem) !important;
  }

  html body .menu-panel__nav {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  html body .menu-panel__footer {
    padding-top: 0.875rem !important;
  }
}

/*
 * Mobile: busca, navegação, CTAs e redes com
 * intervalos menores e consistentes.
 */
@media (max-width: 47.5rem) {
  html body .menu-panel__drawer {
    padding-top: 1rem !important;
    padding-bottom:
      calc(1rem + env(safe-area-inset-bottom)) !important;
  }

  html body .menu-panel__search-row {
    margin-top: 0.75rem !important;
    margin-bottom: 0.875rem !important;
  }

  html body .menu-panel__nav {
    margin-top: 0.625rem !important;
  }

  html body .menu-panel__nav a {
    min-height: 3.25rem !important;
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
  }

  html body .menu-panel__actions {
    margin-top: 0.875rem !important;
    gap: 0.625rem !important;
  }

  html body .menu-panel__footer {
    margin-top: 0.875rem !important;
  }
}


/* Tipografia e alinhamento da navegação. */

/*
 * Número e texto compartilham exatamente o mesmo eixo vertical.
 */
html body .menu-panel__nav a {
  display: grid !important;
  align-items: center !important;
}

html body .menu-panel__nav a em {
  align-self: center !important;
  justify-self: start !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  height: 100% !important;
  margin: 0 !important;

  line-height: 1 !important;
}

html body .menu-panel__nav a span {
  align-self: center !important;

  display: flex !important;
  align-items: center !important;

  min-height: 100% !important;
  margin: 0 !important;

  line-height: 1 !important;
}

/*
 * Desktop: reduz a escala que estava exagerada.
 */
@media (min-width: 47.5001rem) {
  html body .menu-panel__nav a {
    grid-template-columns: 2.75rem minmax(0, 1fr) !important;
    column-gap: 1rem !important;
  }

  html body .menu-panel__nav a em {
    font-size: 0.66rem !important;
  }

  html body .menu-panel__nav a span {
    font-size: clamp(1.45rem, 2.05vw, 1.95rem) !important;
    letter-spacing: -0.025em !important;
  }
}

/*
 * Mobile: mantém leitura confortável sem dominar a tela.
 */
@media (max-width: 47.5rem) {
  html body .menu-panel__nav a {
    grid-template-columns: 2.25rem minmax(0, 1fr) !important;
    column-gap: 0.75rem !important;
  }

  html body .menu-panel__nav a em {
    font-size: 0.61rem !important;
  }

  html body .menu-panel__nav a span {
    font-size: clamp(1.2rem, 5.1vw, 1.55rem) !important;
    letter-spacing: -0.02em !important;
  }
}


/* Bloco de redes e espaçamentos do drawer. */

/*
 * Bloco visual das redes:
 * aplicado tanto no desktop quanto no mobile.
 */
html body .menu-panel__footer {
  box-sizing: border-box !important;

  width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding: 1.25rem !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 1rem !important;

  background:
    linear-gradient(
      145deg,
      rgba(13, 37, 91, 0.99),
      rgba(23, 54, 119, 0.96)
    ) !important;

  border:
    1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 1.125rem !important;

  box-shadow:
    0 1rem 2.25rem rgba(7, 20, 51, 0.2) !important;
}

html body .menu-panel__community {
  min-width: 0 !important;

  display: grid !important;
  gap: 0.5rem !important;
}

html body .menu-panel__community > span {
  color: var(--sun) !important;

  font-size: 0.65rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

html body .menu-panel__community strong {
  max-width: 21rem !important;

  color: var(--white) !important;

  font-family: var(--display) !important;
  font-size: clamp(1.45rem, 3vw, 1.9rem) !important;
  font-weight: 650 !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
}

html body .menu-panel__community strong em {
  color: var(--sun) !important;
  font-style: normal !important;
}

html body .menu-panel__community p {
  max-width: 21rem !important;
  margin: 0 !important;

  color: rgba(255, 255, 255, 0.72) !important;

  font-size: 0.78rem !important;
  line-height: 1.48 !important;
}

/*
 * Ícones em botões abaixo do texto.
 */
html body .menu-panel__socials {
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.625rem !important;

  visibility: visible !important;
  opacity: 1 !important;
}

html body .menu-panel__socials a {
  width: 2.875rem !important;
  height: 2.875rem !important;
  min-width: 2.875rem !important;

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

  margin: 0 !important;
  padding: 0 !important;

  background: var(--white) !important;

  border:
    1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 0.8rem !important;

  box-shadow:
    0 0.5rem 1rem rgba(5, 17, 45, 0.16) !important;

  transition:
    transform 0.2s ease,
    background 0.2s ease !important;
}

html body .menu-panel__socials a:hover,
html body .menu-panel__socials a:focus-visible {
  background: var(--sun) !important;
  transform: translateY(-0.125rem) !important;
}

html body .menu-panel__socials img {
  width: 1.25rem !important;
  height: 1.25rem !important;

  display: block !important;
  object-fit: contain !important;
}

/*
 * ============================================================
 * DESKTOP
 * ============================================================
 */
@media (min-width: 47.5001rem) {
  /*
   * Busca e CTAs continuam exclusivos do mobile.
   */
  html body .menu-panel__search-row,
  html body .menu-panel__actions {
    display: none !important;
  }

  /*
   * Como busca e ações continuam no HTML, usamos seletores
   * de irmãos gerais, e não seletores de irmão imediato.
   */
  html body .menu-panel__top ~ .menu-panel__nav {
    margin-top: 1.875rem !important;
  }

  html body .menu-panel__nav ~ .menu-panel__footer {
    margin-top: 1.875rem !important;
  }

  html body .menu-panel__footer {
    padding: 1.375rem !important;
  }

  html body .menu-panel__nav a span {
    font-size: clamp(1.6rem, 2.15vw, 2.1rem) !important;
  }
}

/*
 * ============================================================
 * MOBILE
 * ============================================================
 */
@media (max-width: 47.5rem) {
  /*
   * Espaço entre Navegue e busca.
   */
  html body .menu-panel__top + .menu-panel__search-row {
    margin-top: 1.5rem !important;
  }

  /*
   * Espaço entre busca e primeiro item da navegação.
   */
  html body .menu-panel__search-row + .menu-panel__nav {
    margin-top: 1.25rem !important;
  }

  /*
   * Espaço após a última linha de Notícias.
   */
  html body .menu-panel__nav + .menu-panel__actions {
    margin-top: 1.5rem !important;
  }

  /*
   * Mesmo ritmo antes do cartão das redes.
   */
  html body .menu-panel__actions + .menu-panel__footer {
    margin-top: 1.5rem !important;
  }

  html body .menu-panel__footer {
    padding: 1.25rem !important;
  }

  html body .menu-panel__nav a span {
    font-size: clamp(1.35rem, 5.6vw, 1.72rem) !important;
  }
}


/* Busca real e ações do drawer mobile. */

@media (max-width: 47.5rem) {
  /*
   * Busca real, compacta e funcional.
   */
  html body .menu-panel__search-row {
    width: 100% !important;
    margin: 1.125rem 0 1rem !important;
  }

  html body .menu-panel__search-form {
    box-sizing: border-box !important;

    width: 100% !important;
    min-height: 3.25rem !important;

    margin: 0 !important;
    padding: 0.375rem 0.375rem 0.375rem 0.875rem !important;

    display: grid !important;
    grid-template-columns:
      1.125rem minmax(0, 1fr) 2.625rem !important;
    align-items: center !important;
    column-gap: 0.625rem !important;

    background: var(--white) !important;

    border:
      1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 0.9375rem !important;

    color: var(--brand-dark) !important;

    box-shadow:
      0 0.625rem 1.5rem rgba(9, 26, 67, 0.14) !important;
  }

  html body .menu-panel__search-form > svg {
    width: 1.125rem !important;
    height: 1.125rem !important;

    color: var(--brand-dark) !important;
  }

  html body .menu-panel__search-form input {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0.625rem 0 !important;

    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    color: var(--brand-dark) !important;

    font-family: inherit !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  html body .menu-panel__search-form input::placeholder {
    color: rgba(16, 42, 99, 0.56) !important;
    opacity: 1 !important;
  }

  html body .menu-panel__search-form:focus-within {
    border-color: var(--sun) !important;

    outline:
      0.125rem solid rgba(232, 208, 29, 0.32) !important;
    outline-offset: 0.125rem !important;
  }

  html body .menu-panel__search-form button {
    width: 2.625rem !important;
    min-width: 2.625rem !important;
    height: 2.5rem !important;
    min-height: 2.5rem !important;

    margin: 0 !important;
    padding: 0 !important;

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

    background: var(--brand-deep) !important;

    border: 1px solid var(--brand-deep) !important;
    border-radius: 0.75rem !important;

    color: var(--white) !important;
  }

  html body .menu-panel__search-form button:hover,
  html body .menu-panel__search-form button:focus-visible {
    background: var(--sun) !important;
    border-color: var(--sun) !important;
    color: var(--brand-dark) !important;
  }

  html body .menu-panel__search-form button svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
  }

  /*
   * Plano parlamentar e Faça parte na mesma linha.
   */
  html body .menu-panel__actions {
    width: 100% !important;

    margin: 1rem 0 0 !important;

    display: grid !important;
    grid-template-columns:
      minmax(0, 1.45fr) minmax(0, 0.85fr) !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  html body .menu-panel__actions .menu-panel__plan,
  html body .menu-panel__actions .menu-panel__cta {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 3.25rem !important;

    margin: 0 !important;
    padding: 0.6875rem 0.75rem !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.375rem !important;

    border-radius: 1rem !important;

    font-size:
      clamp(0.61rem, 2.7vw, 0.72rem) !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  html body .menu-panel__actions .menu-panel__plan svg,
  html body .menu-panel__actions .menu-panel__cta svg {
    flex: 0 0 auto !important;

    width: 0.9375rem !important;
    height: 0.9375rem !important;
  }

  html body .menu-panel__actions .menu-panel__cta {
    background: var(--sun) !important;
    border: 1px solid var(--sun) !important;
    color: var(--brand-dark) !important;
  }

  /*
   * O cartão das redes sobe após os CTAs compactados.
   */
  html body .menu-panel__actions + .menu-panel__footer {
    margin-top: 1rem !important;
  }
}


/* Proporção final dos CTAs mobile. */

@media (max-width: 47.5rem) {
  /*
   * Linha inteira do menu:
   * Plano parlamentar maior que Faça parte.
   */
  html body .menu-panel__drawer .menu-panel__actions {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: none !important;

    margin: 1.25rem 0 0 !important;
    padding: 0 !important;

    display: grid !important;
    grid-template-columns:
      minmax(0, 1.35fr)
      minmax(0, 0.9fr) !important;

    align-items: stretch !important;
    gap: 0.625rem !important;
  }

  html body
    .menu-panel__drawer
    .menu-panel__actions
    > .menu-panel__plan,
  html body
    .menu-panel__drawer
    .menu-panel__actions
    > .menu-panel__cta {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 3.25rem !important;

    margin: 0 !important;
    padding: 0.75rem 0.75rem !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;

    border-radius: 999rem !important;

    font-size: clamp(0.625rem, 2.55vw, 0.72rem) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /*
   * Mantém texto e seta juntos, sem a seta isolada na borda.
   */
  html body
    .menu-panel__drawer
    .menu-panel__actions
    > a
    > span {
    flex: 0 1 auto !important;
  }

  html body
    .menu-panel__drawer
    .menu-panel__actions
    > a
    > svg {
    flex: 0 0 auto !important;

    width: 0.9375rem !important;
    height: 0.9375rem !important;
  }

  /*
   * Recupera o respiro entre os botões e o cartão social.
   */
  html body
    .menu-panel__drawer
    .menu-panel__actions
    + .menu-panel__footer {
    margin-top: 1rem !important;
  }
}


/* Espaçamentos finais aprovados no mobile. */

@media (max-width: 47.5rem) {
  /*
   * Mesmo respiro visual existente entre
   * a busca e o primeiro item da navegação.
   */
  html body
    .menu-panel__drawer
    .menu-panel__nav
    + .menu-panel__actions {
    margin-top: 2.25rem !important;
  }

  /*
   * Um pouco mais de espaço entre os botões
   * e o cartão das redes.
   */
  html body
    .menu-panel__drawer
    .menu-panel__actions
    + .menu-panel__footer {
    margin-top: 1.25rem !important;
  }
}