/* ACESSIBILIDADE */

  :root{
    --a11y-focus:#ffbf47;
    --a11y-green:#06451b;
    --a11y-yellow:#ffff00;
  }

  /* Utilitários de acessibilidade */
  .sr-only{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
  }

  .skip-link{
    position:fixed;
    top:10px;
    left:10px;
    z-index:20000;
    padding:12px 16px;
    border-radius:8px;
    background:#fff;
    color:#000;
    font-weight:800;
    transform:translateY(-160%);
    transition:transform .2s ease;
    box-shadow:0 6px 22px rgba(0,0,0,.25);
  }
  .skip-link:focus{
    transform:translateY(0);
    outline:3px solid var(--a11y-focus);
    outline-offset:3px;
  }

  :where(a,button,input,textarea,select,[tabindex]):focus-visible{
    outline:3px solid var(--a11y-focus)!important;
    outline-offset:4px!important;
  }

  section[id]{scroll-margin-top:96px}

  html.a11y-font-1{font-size:112.5%}
  html.a11y-font-2{font-size:125%}
  html.a11y-font-3{font-size:137.5%}

  /* =========================================================
     PAINEL DE ACESSIBILIDADE
     ========================================================= */

  .accessibility-drawer{
    position:fixed!important;
    right:0!important;
    bottom:18px!important;
    top:auto!important;
    width:50px!important;
    height:224px!important;
    z-index:10000!important;
    overflow:visible!important;
    transform:none!important;
  }

  /* Área sensível próxima à borda, para facilitar a abertura por hover */
  .accessibility-edge{
    position:absolute!important;
    right:0!important;
    bottom:-12px!important;
    width:72px!important;
    height:248px!important;
    z-index:1!important;
    pointer-events:auto!important;
  }

  .accessibility-toolbar{
    position:absolute!important;
    right:0!important;
    bottom:0!important;
    top:auto!important;
    left:auto!important;

    width:290px!important;
    height:224px!important;
    min-width:290px!important;
    min-height:224px!important;

    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;

    padding:0!important;
    margin:0!important;
    gap:0!important;
    box-sizing:border-box!important;

    background:#fff!important;
    border:1px solid #cbd7cc!important;
    border-right:0!important;
    border-radius:14px 0 0 14px!important;
    box-shadow:0 14px 38px rgba(0,0,0,.20)!important;
    overflow:hidden!important;

    /* Só os 50px da aba ficam visíveis quando recolhida */
    transform:translateX(240px)!important;
    transition:transform .28s ease!important;

    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    z-index:2!important;
  }

  .accessibility-drawer:hover .accessibility-toolbar,
  .accessibility-drawer:focus-within .accessibility-toolbar{
    transform:translateX(0)!important;
  }

  .accessibility-handle{
    flex:0 0 50px!important;
    width:50px!important;
    height:224px!important;
    min-height:224px!important;

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

    padding:0!important;
    margin:0!important;
    box-sizing:border-box!important;

    background:var(--a11y-green)!important;
    color:#fff!important;
    border:0!important;
    border-radius:13px 0 0 13px!important;
    user-select:none!important;
  }

  .accessibility-handle-icon{
    display:block!important;
    font-size:20px!important;
    line-height:1!important;
    color:#fff!important;
  }

  .accessibility-handle-text{
    display:block!important;
    writing-mode:vertical-rl!important;
    transform:rotate(180deg)!important;
    color:#fff!important;
    font-size:10px!important;
    font-weight:900!important;
    line-height:1!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
    white-space:nowrap!important;
  }

  .accessibility-controls{
    flex:0 0 240px!important;
    width:240px!important;
    height:224px!important;

    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:1fr 1fr!important;
    gap:9px!important;

    padding:12px!important;
    margin:0!important;
    box-sizing:border-box!important;

    background:#fff!important;
    opacity:1!important;
    visibility:visible!important;
    overflow:hidden!important;
  }

  .accessibility-controls .accessibility-btn{
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;

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

    padding:8px!important;
    margin:0!important;
    box-sizing:border-box!important;

    border:1px solid #b9ccb9!important;
    border-radius:8px!important;
    background:#fff!important;
    color:#06451b!important;

    font:inherit!important;
    font-size:12px!important;
    font-weight:800!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    cursor:pointer!important;

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

  .accessibility-controls .accessibility-btn:hover{
    background:#edf6ee!important;
  }

  .accessibility-controls .accessibility-btn[aria-pressed="true"]{
    background:#06451b!important;
    color:#fff!important;
    border-color:#06451b!important;
  }

  .accessibility-controls .accessibility-btn span{
    display:inline!important;
    color:inherit!important;
  }

  /* =========================================================
     VLibras — separado do painel
     ========================================================= */
  [vw-access-button]{
    position:fixed!important;
    top:auto!important;
    right:12px!important;
    bottom:270px!important;
    left:auto!important;
    margin:0!important;
    z-index:9998!important;
  }

  [vw-plugin-wrapper]{
    z-index:9997!important;
  }

  /* =========================================================
     ALTO CONTRASTE
     ========================================================= */
  html.high-contrast,
  html.high-contrast body{
    background:#000!important;
    color:#fff!important;
  }

  html.high-contrast header,
  html.high-contrast footer,
  html.high-contrast .hero,
  html.high-contrast .tech,
  html.high-contrast .cloud,
  html.high-contrast .how,
  html.high-contrast .about,
  html.high-contrast .institutional,
  html.high-contrast .contact,
  html.high-contrast .project-access,
  html.high-contrast .feature,
  html.high-contrast .cloud-feature,
  html.high-contrast .cloud-visual,
  html.high-contrast .cloud-node,
  html.high-contrast .contact-card,
  html.high-contrast .institutional-card{
    background:#000!important;
    color:#fff!important;
    box-shadow:none!important;
  }

  html.high-contrast p,
  html.high-contrast .text,
  html.high-contrast small,
  html.high-contrast h1,
  html.high-contrast h2,
  html.high-contrast h3,
  html.high-contrast strong,
  html.high-contrast label{
    color:#fff!important;
  }

  /* Elementos originalmente verdes continuam destacados */
  html.high-contrast .eyebrow,
  html.high-contrast h1 span,
  html.high-contrast .highlight,
  html.high-contrast .feature b,
  html.high-contrast .cloud-feature b,
  html.high-contrast .num,
  html.high-contrast .ico,
  html.high-contrast .cloud-icon,
  html.high-contrast .node-icon,
  html.high-contrast .cloud-symbol,
  html.high-contrast .project-ico,
  html.high-contrast .institutional-icon,
  html.high-contrast .value-tag,
  html.high-contrast footer strong span{
    color:var(--a11y-yellow)!important;
  }

  html.high-contrast a{
    color:var(--a11y-yellow)!important;
    text-decoration:underline!important;
  }

  html.high-contrast .btn{
    background:var(--a11y-yellow)!important;
    color:#000!important;
    border:2px solid #fff!important;
    text-decoration:none!important;
  }

  html.high-contrast .circle{
    color:var(--a11y-yellow)!important;
    border-color:var(--a11y-yellow)!important;
    background:#000!important;
  }

  html.high-contrast .value-tag{
    background:#000!important;
    border:2px solid var(--a11y-yellow)!important;
  }

  html.high-contrast input,
  html.high-contrast textarea{
    background:#000!important;
    color:#fff!important;
    border:2px solid #fff!important;
  }

  html.high-contrast input::placeholder,
  html.high-contrast textarea::placeholder{
    color:#fff!important;
    opacity:.9!important;
  }

  /* O painel mantém identidade própria mesmo no modo de alto contraste */
  html.high-contrast .accessibility-toolbar,
  html.high-contrast .accessibility-controls{
    background:#000!important;
    border-color:#fff!important;
  }

  html.high-contrast .accessibility-handle{
    background:var(--a11y-yellow)!important;
    color:#000!important;
  }

  html.high-contrast .accessibility-handle-icon,
  html.high-contrast .accessibility-handle-text{
    color:#000!important;
  }

  html.high-contrast .accessibility-controls .accessibility-btn{
    background:#000!important;
    color:var(--a11y-yellow)!important;
    border:2px solid var(--a11y-yellow)!important;
  }

  html.high-contrast .accessibility-controls .accessibility-btn[aria-pressed="true"]{
    background:var(--a11y-yellow)!important;
    color:#000!important;
  }

  /* =========================================================
   ALTO CONTRASTE — PÁGINAS INTERNAS DO SALVE
   ========================================================= */

/*
 * Fundo principal
 */
html.high-contrast,
html.high-contrast body {
  background: #000 !important;
  color: #fff !important;
}


/* =========================================================
   SEÇÕES E CONTAINERS
   ========================================================= */

html.high-contrast .section,
html.high-contrast .section-soft,
html.high-contrast .cta,
html.high-contrast .hero,
html.high-contrast .attendance {
  background: #000 !important;
  color: #fff !important;
}


/* =========================================================
   CARDS E PAINÉIS
   ========================================================= */

html.high-contrast .metric,
html.high-contrast .panel,
html.high-contrast .scope-card,
html.high-contrast .hero-summary-card,
html.high-contrast .attendance-stat,
html.high-contrast .response-note {
  background: #000 !important;
  color: #fff !important;

  border-color: #fff !important;

  box-shadow: none !important;
}


/* =========================================================
   TÍTULOS
   ========================================================= */

html.high-contrast h1,
html.high-contrast h2,
html.high-contrast h3,
html.high-contrast h4,
html.high-contrast h5,
html.high-contrast h6 {
  color: #fff !important;
}


/* =========================================================
   TEXTOS NORMAIS
   ========================================================= */

html.high-contrast p,
html.high-contrast .text,
html.high-contrast .panel-intro,
html.high-contrast .response-item span,
html.high-contrast .scope-card p,
html.high-contrast .metric span,
html.high-contrast .attendance-stat span,
html.high-contrast .hero-summary-card span,
html.high-contrast .ring-copy span {
  color: #fff !important;
}


/* =========================================================
   DESTAQUES
   Elementos verdes viram amarelos.
   ========================================================= */

html.high-contrast .eyebrow,
html.high-contrast h1 span,

html.high-contrast .metric strong,

html.high-contrast .day-row b,

html.high-contrast .response-item strong,

html.high-contrast .attendance-stat strong,

html.high-contrast .hero-summary-card strong,

html.high-contrast .ring-copy strong,

html.high-contrast .scope-card .ico,

html.high-contrast footer strong span {
  color: #ffff00 !important;
}


/* =========================================================
   LINKS
   ========================================================= */

html.high-contrast a {
  color: #ffff00 !important;
}

html.high-contrast nav a {
  color: #fff !important;
}

html.high-contrast nav a:hover {
  color: #ffff00 !important;
}


/* =========================================================
   BOTÕES
   ========================================================= */

html.high-contrast .btn {
  background: #ffff00 !important;
  color: #000 !important;

  border: 2px solid #fff !important;

  box-shadow: none !important;
}


html.high-contrast .btn:hover {
  background: #fff !important;
  color: #000 !important;
}


/* Botões de contorno */

html.high-contrast .btn-outline {
  background: #000 !important;
  color: #ffff00 !important;

  border: 2px solid #ffff00 !important;
}


html.high-contrast .btn-outline:hover {
  background: #ffff00 !important;
  color: #000 !important;
}


/* =========================================================
   BARRAS DOS RESULTADOS
   ========================================================= */

html.high-contrast .day-bar {
  background: #333 !important;

  border: 1px solid #fff !important;
}


html.high-contrast .day-bar i {
  background: #ffff00 !important;
}


/* =========================================================
   LISTA DE TEMPO DE RESPOSTA
   ========================================================= */

html.high-contrast .response-item {
  border-color: #fff !important;
}


html.high-contrast .response-note {
  background: #000 !important;

  color: #fff !important;

  border: 2px solid #ffff00 !important;
}


/* =========================================================
   GRÁFICO CIRCULAR
   ========================================================= */

html.high-contrast .ring {

  background:
    conic-gradient(
      #ffff00 0 75%,
      #333 75% 100%
    ) !important;

  border: 2px solid #fff !important;

  box-shadow: none !important;
}


html.high-contrast .ring::after {

  background: #000 !important;

  border: 2px solid #fff !important;
}


/* =========================================================
   HERO
   ========================================================= */

html.high-contrast .hero {

  background: #000 !important;
}


html.high-contrast .hero::before {

  opacity: .15 !important;
}


/* =========================================================
   ÁREA DE ATENDIMENTO
   ========================================================= */

html.high-contrast .attendance {

  background: #000 !important;
}


html.high-contrast .attendance::before {

  opacity: .15 !important;
}


/* =========================================================
   HEADER
   ========================================================= */

html.high-contrast header {

  background: #000 !important;

  border-bottom:
    2px solid #ffff00 !important;

  box-shadow: none !important;
}


/* =========================================================
   MENU MOBILE
   ========================================================= */

html.high-contrast nav ul {

  background: #000 !important;
}


html.high-contrast .menu {

  background: #000 !important;

  color: #ffff00 !important;

  border:
    2px solid #ffff00 !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

html.high-contrast footer {

  background: #000 !important;

  color: #fff !important;

  border-top:
    1px solid #fff !important;
}


/* =========================================================
   LINHAS E BORDAS
   ========================================================= */

html.high-contrast .metric,
html.high-contrast .panel,
html.high-contrast .scope-card,
html.high-contrast .hero-summary-card,
html.high-contrast .attendance-stat {

  border:
    1px solid #fff !important;
}


/* =========================================================
   REMOVE SOMBRAS E EFEITOS QUE PREJUDICAM CONTRASTE
   ========================================================= */

html.high-contrast .metric,
html.high-contrast .panel,
html.high-contrast .scope-card,
html.high-contrast .hero-summary-card,
html.high-contrast .attendance-stat,
html.high-contrast .ring {

  box-shadow:
    none !important;
}


/* =========================================================
   ACESSIBILIDADE — MANTÉM O PAINEL LEGÍVEL
   ========================================================= */

html.high-contrast .accessibility-toolbar,
html.high-contrast .accessibility-controls {

  background: #000 !important;

  border-color: #fff !important;
}


html.high-contrast .accessibility-handle {

  background: #ffff00 !important;

  color: #000 !important;
}


html.high-contrast .accessibility-handle-icon,
html.high-contrast .accessibility-handle-text {

  color: #000 !important;
}


html.high-contrast
.accessibility-controls
.accessibility-btn {

  background: #000 !important;

  color: #ffff00 !important;

  border:
    2px solid #ffff00 !important;
}


html.high-contrast
.accessibility-controls
.accessibility-btn[aria-pressed="true"] {

  background: #ffff00 !important;

  color: #000 !important;
}

/* =========================================================
   ALTO CONTRASTE — PÁGINA DO PROJETO
   ========================================================= */

html.high-contrast,
html.high-contrast body {
  background: #000 !important;
  color: #fff !important;
}

/* Seções */
html.high-contrast .section,
html.high-contrast .section-soft,
html.high-contrast .hero,
html.high-contrast .results,
html.high-contrast .cta {
  background: #000 !important;
  color: #fff !important;
}


/* =========================================================
   TÍTULOS E TEXTOS
   ========================================================= */

html.high-contrast h1,
html.high-contrast h2,
html.high-contrast h3,
html.high-contrast h4,
html.high-contrast h5,
html.high-contrast h6 {
  color: #fff !important;
}

html.high-contrast p,
html.high-contrast .text,
html.high-contrast small {
  color: #fff !important;
}


/* Destaques originalmente verdes */

html.high-contrast .eyebrow,
html.high-contrast h1 span,
html.high-contrast .layer-tag,
html.high-contrast .overview-item b,
html.high-contrast .overview-callout strong,
html.high-contrast .arch-label span,
html.high-contrast .flow-num,
html.high-contrast .module-ico,
html.high-contrast .metric strong,
html.high-contrast footer strong span {
  color: #ffff00 !important;
}


/* =========================================================
   HERO / DIAGRAMA
   ========================================================= */

html.high-contrast .hero {
  background: #000 !important;
}

html.high-contrast .hero::before {
  opacity: .10 !important;
}

html.high-contrast .hero p {
  color: #fff !important;
}

html.high-contrast .hero-diagram {
  background: #000 !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
}

html.high-contrast .layer {
  background: #000 !important;
  border: 1px solid #fff !important;
}

html.high-contrast .layer strong,
html.high-contrast .layer small {
  color: #fff !important;
}


/* =========================================================
   VISÃO GERAL
   ========================================================= */

html.high-contrast .overview-item {
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}

html.high-contrast .overview-item span {
  color: #fff !important;
}

html.high-contrast .overview-callout {
  background: #000 !important;
  color: #fff !important;

  border: 2px solid #ffff00 !important;
  box-shadow: none !important;
}

html.high-contrast .overview-callout p {
  color: #fff !important;
}


/* =========================================================
   ARQUITETURA
   ========================================================= */

html.high-contrast .arch-row {
  background: #000 !important;
  color: #fff !important;

  border: 1px solid #fff !important;
  box-shadow: none !important;
}

html.high-contrast .arch-label {
  background: #000 !important;
  color: #fff !important;

  border-right: 1px solid #fff !important;
}

html.high-contrast .arch-label b {
  color: #fff !important;
}

html.high-contrast .arch-content {
  background: #000 !important;
}

html.high-contrast .arch-content p {
  color: #fff !important;
}


/* Chips */

html.high-contrast .chip {
  background: #000 !important;
  color: #ffff00 !important;

  border: 1px solid #ffff00 !important;
}


/* =========================================================
   FLUXO
   ========================================================= */

html.high-contrast .flow-step {
  background: #000 !important;
  color: #fff !important;

  border: 1px solid #fff !important;
  box-shadow: none !important;
}

html.high-contrast .flow-step h3 {
  color: #fff !important;
}

html.high-contrast .flow-step p {
  color: #fff !important;
}

html.high-contrast .flow-step:not(:last-child)::after {
  color: #ffff00 !important;
}


/* =========================================================
   MÓDULOS
   ========================================================= */

html.high-contrast .module {
  background: #000 !important;
  color: #fff !important;

  border: 1px solid #fff !important;
  box-shadow: none !important;
}

html.high-contrast .module h3 {
  color: #fff !important;
}

html.high-contrast .module p {
  color: #fff !important;
}


/* =========================================================
   RESULTADOS
   ========================================================= */

html.high-contrast .results {
  background: #000 !important;
  color: #fff !important;
}

html.high-contrast .results::before {
  opacity: .10 !important;
}

html.high-contrast .results .text {
  color: #fff !important;
}


/* Cards de métricas */

html.high-contrast .metric {
  background: #000 !important;
  color: #fff !important;

  border: 1px solid #fff !important;
}

html.high-contrast .metric span {
  color: #fff !important;
}


/* Barras */

html.high-contrast .day-row span,
html.high-contrast .day-row b {
  color: #fff !important;
}

html.high-contrast .day-bar {
  background: #333 !important;

  border: 1px solid #fff !important;
}

html.high-contrast .day-bar i {
  background: #ffff00 !important;
}


/* Nota de resultados */

html.high-contrast .result-note {
  background: #000 !important;
  color: #fff !important;

  border: 2px solid #ffff00 !important;
}

html.high-contrast .result-note h3,
html.high-contrast .result-note p {
  color: #fff !important;
}


/* =========================================================
   CTA
   ========================================================= */

html.high-contrast .cta {
  background: #000 !important;
  color: #fff !important;
}

html.high-contrast .cta .text {
  color: #fff !important;
}


/* =========================================================
   BOTÕES
   ========================================================= */

html.high-contrast .btn {
  background: #ffff00 !important;
  color: #000 !important;

  border: 2px solid #fff !important;

  box-shadow: none !important;
}

html.high-contrast .btn:hover {
  background: #fff !important;
  color: #000 !important;
}

html.high-contrast .btn-outline {
  background: #000 !important;
  color: #ffff00 !important;

  border: 2px solid #ffff00 !important;
}

html.high-contrast .btn-outline:hover {
  background: #ffff00 !important;
  color: #000 !important;
}


/* =========================================================
   LINKS
   ========================================================= */

html.high-contrast a {
  color: #ffff00 !important;
}

html.high-contrast nav a {
  color: #fff !important;
}

html.high-contrast nav a:hover {
  color: #ffff00 !important;
}


/* =========================================================
   HEADER
   ========================================================= */

html.high-contrast header {
  background: #000 !important;

  border-bottom: 2px solid #ffff00 !important;
}

html.high-contrast nav ul {
  background: #000 !important;
}

html.high-contrast .menu {
  background: #000 !important;
  color: #ffff00 !important;

  border: 2px solid #ffff00 !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

html.high-contrast footer {
  background: #000 !important;
  color: #fff !important;

  border-top: 1px solid #fff !important;
}


/* =========================================================
   REMOVE SOMBRAS
   ========================================================= */

html.high-contrast .hero-diagram,
html.high-contrast .overview-callout,
html.high-contrast .arch-row,
html.high-contrast .flow-step,
html.high-contrast .module {
  box-shadow: none !important;
}


/* =========================================================
   PAINEL DE ACESSIBILIDADE
   ========================================================= */

html.high-contrast .accessibility-toolbar,
html.high-contrast .accessibility-controls {
  background: #000 !important;
  border-color: #fff !important;
}

html.high-contrast .accessibility-handle {
  background: #ffff00 !important;
  color: #000 !important;
}

html.high-contrast .accessibility-handle-icon,
html.high-contrast .accessibility-handle-text {
  color: #000 !important;
}

html.high-contrast
.accessibility-controls
.accessibility-btn {
  background: #000 !important;
  color: #ffff00 !important;

  border: 2px solid #ffff00 !important;
}

html.high-contrast
.accessibility-controls
.accessibility-btn[aria-pressed="true"] {
  background: #ffff00 !important;
  color: #000 !important;
}

  /* =========================================================
     REDUÇÃO DE MOVIMENTO
     ========================================================= */
  html.reduce-motion *,
  html.reduce-motion *::before,
  html.reduce-motion *::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }

  html.reduce-motion .reveal{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }

  @media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
      animation-duration:.01ms!important;
      animation-iteration-count:1!important;
      transition-duration:.01ms!important;
      scroll-behavior:auto!important;
    }
    .reveal{
      opacity:1!important;
      transform:none!important;
      filter:none!important;
    }
  }

  /* =========================================================
     MENU RESPONSIVO
     ========================================================= */

  /* Desktop e tablet horizontal: menu normal, sem hambúrguer */
  @media(min-width:901px){
    #menuBtn,
    nav .menu{
      display:none!important;
    }

    #menuList,
    nav ul#menuList{
      display:flex!important;
      position:static!important;
      width:auto!important;
      padding:0!important;
      margin:0!important;
      flex-direction:row!important;
      align-items:center!important;
      background:transparent!important;
    }
  }

  /* Tablet/celular: usa o menu móvel definido pelo projeto */
  @media(max-width:900px){
    #menuBtn,
    nav .menu{
      display:inline-flex!important;
      align-items:center!important;
      justify-content:center!important;
    }

    #menuList,
    nav ul#menuList{
      display:none!important;
      position:absolute!important;
      top:72px!important;
      left:0!important;
      width:100%!important;
      padding:20px 5%!important;
      flex-direction:column!important;
      align-items:flex-start!important;
      background:#06230e!important;
    }

    #menuList.open,
    nav ul#menuList.open{
      display:flex!important;
    }
  }

  /* Em celular, preserva textos e tamanho dos quatro botões */
  @media (max-width: 600px) {

  .accessibility-drawer {
    width: 42px !important;
    height: 105px !important;
    right: 8px !important;
    bottom: 12px !important;
  }

  .accessibility-toolbar {
    width: 260px !important;
    height: 105px !important;
    min-width: 260px !important;
    min-height: 105px !important;

    /*
      Mantém somente a aba com ♿ visível
      quando estiver fechada.
    */
    transform: translateX(218px) !important;
  }

  .accessibility-drawer:hover .accessibility-toolbar,
  .accessibility-drawer:focus-within .accessibility-toolbar {
    transform: translateX(0) !important;
  }


  /* ABA */

  .accessibility-handle {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 105px !important;
    min-height: 105px !important;

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

  .accessibility-handle-icon {
    font-size: 19px !important;
  }

  /* Esconde "Acessibilidade" */
  .accessibility-handle-text {
    display: none !important;
  }


  /* CONTROLES */

  .accessibility-controls {
    flex: 0 0 218px !important;
    width: 218px !important;
    height: 105px !important;

    display: grid !important;

    /*
      4 botões na primeira linha
      3 botões na segunda
    */
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: repeat(2, 44px) !important;

    gap: 5px !important;
    padding: 6px !important;

    box-sizing: border-box !important;
  }


  /* BOTÕES */

  .accessibility-controls .accessibility-btn {
    width: 100% !important;
    height: 44px !important;

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

    padding: 3px !important;

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

    font-size: 12px !important;
    line-height: 1 !important;

    border-radius: 7px !important;
  }

  /*
    No celular mostra apenas:
    ◐  A−  A+  ◫
    🔊 ⏸/▶ ⏹
  */
  .accessibility-controls .accessibility-btn span {
    display: none !important;
  }
}

/* Fim acessibilidade*/