/* ============================================================
   A CASCA SIMÉTRICA (12/out/2026)
   "O menu deve ser simétrico e o quadrado de portal solar ficar no
   meio, sem o texto." O mundo à esquerda, você à direita, o Quadrado
   Negro exatamente no centro da tela. Carregado depois do forma.css;
   vale em todos os acabamentos (só quando html.menu-sim).

   1. a barra do alto       2. o Quadrado       3. a fileira de dentro
   4. o risco do celular    5. o Índice (o mapa de tudo)
   ============================================================ */

/* ── 1. A BARRA DO ALTO ── */
:root.menu-sim[data-estilo][data-acabamento] {
  & .tb.tb-sim {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
    gap: clamp(10px, 1.6vw, 28px); max-width: none; width: 100%; padding: 0 clamp(12px, 2.4vw, 36px);
    min-height: 64px; background: none; border: 0; box-shadow: none;
  }
  & .tb-metade { display: flex; align-items: center; gap: clamp(8px, 1.4vw, 20px); min-width: 0; }
  & .tb-metade-e { justify-content: space-between; }
  & .tb-metade-d { justify-content: space-between; }
  & .tb-ponta { display: flex; align-items: center; gap: 4px; flex: none; }
  /* a ponta da direita encosta na borda, espelho da esquerda (no celular as portas descem e ela ficava colada no Quadrado) */
  & .tb-ponta-d { margin-left: auto; }
  & .tb-lado { display: flex; align-items: stretch; gap: 2px; min-width: 0; align-self: stretch; }
  & .tb-mundo { justify-content: flex-end; margin-left: auto; }
  & .tb-voce { justify-content: flex-start; margin-right: auto; }
  & .tb-porta {
    position: relative; display: flex; align-items: center; padding: 0 clamp(8px, .9vw, 14px);
    font: 600 .94rem/1 var(--f-display); letter-spacing: -.005em; color: var(--suave); text-decoration: none; white-space: nowrap;
    transition: color var(--t-2) var(--curva);
  }
  & .tb-porta:hover { color: var(--tinta); }
  & .tb-porta[aria-current="page"] { color: var(--tinta); }
  & .tb-porta .tb-sol { position: absolute; left: clamp(8px, .9vw, 14px); right: clamp(8px, .9vw, 14px); bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--sinal, #E9822A); view-transition-name: tb-sol; }
  /* o pontinho de sol ao passar o mouse, como antes */
  & .tb-porta:not([aria-current])::before { content: ""; position: absolute; left: 50%; bottom: 8px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--sinal, #E9822A); opacity: 0; transform: translateY(4px) scale(.4); transition: opacity var(--t-3) var(--curva), transform var(--t-3) var(--curva); }
  & .tb-porta:not([aria-current]):hover::before { opacity: 1; transform: none; }
  & .tb-porta::after { display: none; }

  & .tb-busca { display: inline-flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; width: auto; padding: 0 8px 0 10px; gap: 8px; border: 1px solid var(--linha-2); border-radius: var(--r-pilula); color: var(--suave); min-height: 38px; }
  & .tb-busca:hover { color: var(--tinta); border-color: color-mix(in srgb, var(--tinta) 40%, transparent); }
  & .tb-busca svg { width: 17px; height: 17px; }
  & .tb-busca .tb-busca-t { font: 600 .86rem/1 var(--f-display); }
  & .tb-busca kbd { padding: 3px 6px; border-radius: var(--r-1); border: 1px solid var(--linha-2); font: 600 .66rem/1 var(--f-display); color: var(--suave); background: none; }
  & .tb-dia-sim { display: flex; align-items: center; gap: 8px; padding: 2px 6px; border: 0; background: none; border-radius: var(--r-2); color: var(--tinta); cursor: pointer; }
  & .tb-dia-sim:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); }
  & .tb-dia-sim .tb-anel { width: 34px; height: 34px; transform: rotate(-90deg); }
  & .tb-dia-sim .tb-anel .a0 { fill: none; stroke: var(--linha-2); stroke-width: 4; }
  & .tb-dia-sim .tb-anel .a1 { fill: none; stroke: var(--sinal, #E9822A); stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray .9s var(--curva); }
  & .tb-dia-sim .tb-dias { display: grid; line-height: 1.05; text-align: left; }
  & .tb-dia-sim .tb-dias b { font: 800 .95rem/1 var(--f-display); letter-spacing: -.02em; }
  & .tb-dia-sim .tb-dias small { font: 500 .7rem/1.25 var(--f-display); color: var(--suave); }
}

/* telas médias: três de cada lado (os de dentro); a porta atual sempre aparece */
@media (max-width: 1360px) {
  :root.menu-sim[data-estilo][data-acabamento] {
    & .tb-porta.tb-fora:not([aria-current]) { display: none; }
    & .tb-busca .tb-busca-t, & .tb-busca kbd { display: none; }
    & .tb-busca { padding: 0; width: 40px; justify-content: center; border-color: transparent; }
  }
}
@media (max-width: 1100px) {
  :root.menu-sim[data-estilo][data-acabamento] { & .tb-dia-sim .tb-dias { display: none; } }
}
/* celular e tablet em pé: em cima, só as pontas e o Quadrado; a navegação desce para o risco */
@media (max-width: 900px) {
  :root.menu-sim[data-estilo][data-acabamento] {
    & .tb.tb-sim { min-height: 56px; padding: 0 10px; }
    & .tb-lado { display: none; }
  }
}

/* ── 2. O QUADRADO ── */
:root.menu-sim[data-estilo][data-acabamento] {
  & .tb-quadrado, & .ab-quadrado {
    position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 4px;
    background: none; color: var(--tinta); cursor: pointer; isolation: isolate; -webkit-tap-highlight-color: transparent;
  }
  & .tb-quadrado svg, & .ab-quadrado svg { width: 28px; height: 28px; transition: transform var(--t-4) var(--curva); }
  /* o quadrado de Malevich não é perfeito: ao passar o mouse ele se inclina de leve, como a tela de 1915 */
  & .tb-quadrado:hover svg, & .ab-quadrado:hover svg { transform: rotate(-2.4deg) scale(1.06); }
  & .tb-quadrado:active svg { transform: scale(.92); }
  & .tb-q-luz { position: absolute; inset: -10px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--sinal, #E9822A) 32%, transparent), transparent); opacity: 0; transform: scale(.6); transition: opacity var(--t-4) var(--curva), transform var(--t-4) var(--curva); }
  & .tb-quadrado:hover .tb-q-luz, & .tb-quadrado:focus-visible .tb-q-luz { opacity: 1; transform: none; }
  /* segurar: um anel de sol se fecha em volta (0,6 s) e abre a esfera */
  & .tb-quadrado::after, & .ab-quadrado::after {
    content: ""; position: absolute; inset: 2px; border-radius: 50%;
    background: conic-gradient(var(--sinal, #E9822A) var(--giro, 0deg), transparent 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    opacity: 0; transition: opacity var(--t-1);
  }
  & .tb-quadrado.segurando::after, & .ab-quadrado.segurando::after { opacity: 1; animation: q-segura .6s linear forwards; }
}
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes q-segura { to { --giro: 360deg; } }

/* ── 3. A FILEIRA DE DENTRO: centrada, sob o Quadrado ── */
:root.menu-sim[data-estilo][data-acabamento] {
  & .subnav { justify-content: center; }
}

/* ── 4. O RISCO DO CELULAR ── */
:root.menu-sim[data-estilo][data-acabamento] {
  & nav.abas.abas-sim { display: none; }
}
@media (max-width: 900px) {
  :root.menu-sim[data-estilo][data-acabamento] {
    & nav.abas.abas-sim {
      position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-abas, 80);
      display: flex; flex-direction: column; align-items: center; gap: 0; width: min(100% - 16px, 460px);
      padding: 0; transform: translateX(-50%); background: none; border: 0; box-shadow: none; height: auto;
    }
    & nav.abas.abas-sim .risco {
      display: grid; place-items: center; width: 92px; height: 22px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; touch-action: none;
    }
    & nav.abas.abas-sim .risco i { display: block; width: 46px; height: 5px; border-radius: 5px; background: var(--tinta); opacity: .55; transition: width var(--t-3) var(--curva), opacity var(--t-2); }
    & nav.abas.abas-sim .risco:hover i { opacity: .85; width: 58px; }
    & nav.abas.abas-sim .abas-in {
      display: grid; grid-template-columns: repeat(3, 1fr) auto repeat(3, 1fr); align-items: center; width: 100%;
      padding: 6px 6px; border-radius: 22px; background: color-mix(in srgb, var(--cavalete, var(--papel)) 92%, transparent);
      -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
      border: 1px solid var(--linha); box-shadow: var(--s-3);
      transform-origin: 50% 100%; transition: transform var(--t-3) var(--curva), opacity var(--t-2) var(--curva), visibility 0s;
    }
    & nav.abas.abas-sim .abas-in a {
      display: grid; justify-items: center; gap: 2px; min-width: 0; padding: 6px 2px; border-radius: 14px;
      color: var(--suave); text-decoration: none; font: 600 .66rem/1.1 var(--f-display); letter-spacing: .01em;
    }
    & nav.abas.abas-sim .abas-in a svg { width: 22px; height: 22px; }
    & nav.abas.abas-sim .abas-in a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    & nav.abas.abas-sim .abas-in a[aria-current="page"] { color: var(--tinta); background: color-mix(in srgb, var(--sinal, #E9822A) 14%, transparent); }
    & nav.abas.abas-sim .ab-quadrado { width: 52px; height: 52px; margin: 0 4px; }
    & nav.abas.abas-sim .ab-quadrado svg { width: 30px; height: 30px; }
    & nav.abas.abas-sim.abas-fechadas { pointer-events: none; }
    & nav.abas.abas-sim.abas-fechadas .risco { pointer-events: auto; }
    & nav.abas.abas-sim.abas-fechadas .abas-in { transform: translateY(18px) scale(.94); opacity: 0; visibility: hidden; transition: transform var(--t-3) var(--curva), opacity var(--t-2) var(--curva), visibility 0s var(--t-3); }
    & nav.abas.abas-sim.abas-fechadas .risco i { width: 64px; opacity: .7; }
    /* a página não fica escondida atrás do menu */
    & body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  }
  :root.menu-sim.risco-fechado[data-estilo][data-acabamento] body { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
}

/* ── 5. O ÍNDICE: o mapa de tudo, por dentro do Quadrado (refeito em 22/out/2026, registro 116) ──
   "dê mais atenção à animação de entrar no menu do quadrado, e o mapa também pode ser mais claro e
   mais bem diagramado, sempre com respiro e qualidade". Por dentro do Quadrado é sempre negro, em
   qualquer cor do Portal; monocromático (o sol laranja saiu). indice.js monta e anima a abertura. */
.indice {
  --i-fundo: #0B0B0B; --i-papel: #EEEEEA; --i-suave: #A3A39D; --i-fio: rgba(238, 238, 234, .14); --i-fio-2: rgba(238, 238, 234, .32);
  position: fixed; inset: 0; z-index: var(--z-janela, 940); color: var(--i-papel);
  font-family: var(--f-display, "Archivo", system-ui, sans-serif);
}
.indice[hidden] { display: none; }
.indice-veu { position: absolute; inset: 0; background: var(--i-fundo); }
.indice-in {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid; align-content: start; gap: clamp(44px, 5.4vw, 80px);
  padding: clamp(28px, 4vw, 56px) clamp(20px, 5.4vw, 96px) clamp(56px, 6vw, 96px);
}
.indice:not(.pronto) .indice-in { visibility: hidden; }
.indice.saindo .indice-in { visibility: visible; opacity: 0; transition: opacity .11s linear; }

/* o cabeçalho, no centro: o quadrado, o título, a busca e as vistas */
.indice-cab { position: relative; display: grid; justify-items: center; gap: 16px; width: min(640px, 100%); margin: 0 auto; text-align: center; }
.indice-q { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; background: none; color: var(--i-papel); cursor: pointer; }
.indice-q svg { width: 42px; height: 42px; }
.indice-q svg .q-negro { fill: var(--i-papel); }
.indice-titulo { margin: 0; font: 600 .82rem/1 var(--f-display); letter-spacing: .02em; color: var(--i-suave); }
.indice-busca { position: relative; display: block; width: 100%; margin-top: 6px; }
html .indice .indice-busca input[type="search"], :root[data-estilo][data-acabamento] .indice .indice-busca input[type="search"] {
  width: 100%; height: 58px; padding: 0 4px; border: 0; border-radius: 0; background: none; box-shadow: none; outline: none;
  color: var(--i-papel); font: 400 clamp(1.2rem, 2vw, 1.55rem)/1.2 var(--f-texto, "Newsreader", Georgia, serif); text-align: center;
}
html .indice .indice-busca input[type="search"]::placeholder { color: var(--i-suave); }
:root[data-estilo][data-acabamento] .indice .indice-busca input[type="search"]:focus { border: 0; box-shadow: none; background: none; }
.indice .indice-busca input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.indice-busca-fio { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--i-fio-2); transform-origin: 50% 50%; transition: background .2s, height .2s; }
.indice-busca:focus-within .indice-busca-fio { height: 2px; background: var(--i-papel); }
.indice-vistas { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--i-fio); border-radius: 999px; }
.indice-vistas button { padding: 8px 16px; border: 0; border-radius: 999px; background: none; color: var(--i-suave); font: 600 .82rem/1 var(--f-display); cursor: pointer; transition: color .2s; }
.indice-vistas button:hover { color: var(--i-papel); }
.indice-vistas button[aria-pressed="true"] { background: var(--i-papel); color: var(--i-fundo); }
.indice-resultados { display: grid; gap: 2px; width: 100%; max-height: 46vh; margin: 0; padding: 0; overflow: auto; list-style: none; text-align: left; }
.indice-resultados a { display: grid; gap: 2px; padding: 10px 14px; border-radius: 10px; color: var(--i-papel); text-decoration: none; }
.indice-resultados a b { font: 600 1rem/1.2 var(--f-display); }
.indice-resultados a span { font: 400 .82rem/1.3 var(--f-display); color: var(--i-suave); }
.indice-resultados a:hover, .indice-resultados a.ativo { background: rgba(238, 238, 234, .08); }
.indice-nada { display: block; padding: 10px 14px; font: 400 .95rem/1.4 var(--f-texto, serif); color: var(--i-suave); }
.indice.buscando .indice-mapa { opacity: .22; transition: opacity .2s; }

/* o mapa: duas fileiras, O mundo e Você; as portas lado a lado, na ordem da barra do alto */
.indice-mapa { display: grid; gap: clamp(52px, 6vw, 96px); transition: opacity .2s; }
.indice-linha { display: grid; gap: clamp(22px, 2.4vw, 34px); }
.indice-linha-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--i-fio-2); }
.indice-linha-cab h3 { margin: 0; font: 800 clamp(1.7rem, 2.8vw, 2.5rem)/1 var(--f-display); letter-spacing: -.032em; }
.indice-linha-cab span { font: italic 400 1.02rem/1.3 var(--f-texto, "Newsreader", Georgia, serif); color: var(--i-suave); }
.indice-portas { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 44px); }
.indice-porta { position: relative; display: grid; align-content: start; gap: 16px; min-width: 0; padding-top: 18px; }
.indice-porta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--i-fio-2); transform-origin: 0 50%; }
.indice-porta.aqui::before { height: 2px; background: var(--i-papel); }
.indice-porta-cab { display: grid; gap: 5px; color: var(--i-papel); text-decoration: none; }
.indice-porta-cab b { font: 700 1.22rem/1.1 var(--f-display); letter-spacing: -.015em; }
.indice-porta-cab em { font: italic 400 .98rem/1.3 var(--f-texto, "Newsreader", Georgia, serif); color: var(--i-suave); }
.indice-porta-cab:hover b, .indice-porta-cab:focus-visible b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.indice-paginas { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.indice-paginas a { position: relative; display: block; padding: 5px 0 5px 16px; color: var(--i-suave); font: 500 .92rem/1.3 var(--f-display); text-decoration: none; transition: color .2s; }
.indice-paginas a::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 1px; background: var(--i-fio-2); }
.indice-paginas a:hover, .indice-paginas a:focus-visible { color: var(--i-papel); }
.indice-paginas a[aria-current="page"] { color: var(--i-papel); }
.indice-paginas a[aria-current="page"]::before { width: 7px; height: 7px; margin-top: -3.5px; background: var(--i-papel); }

/* a vista Lista: tudo numa coluna, com o nome da porta ao lado */
.indice-vista-lista .indice-mapa { display: none; }
.indice-lista-toda { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 32px; width: min(1100px, 100%); margin: 0 auto; padding: 0; list-style: none; }
.indice-lista-toda a { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--i-fio); color: var(--i-papel); text-decoration: none; }
.indice-lista-toda a b { font: 600 1rem/1.2 var(--f-display); }
.indice-lista-toda a span { font: 400 .82rem/1.3 var(--f-display); color: var(--i-suave); }
.indice-lista-toda a:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* o rodapé: o agora à esquerda, as ferramentas à direita, as teclas embaixo */
.indice-rodape { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px 40px; padding-top: 26px; border-top: 1px solid var(--i-fio); }
.indice-agora { display: grid; gap: 4px; }
.indice-agora p { margin: 0; font: 400 .98rem/1.4 var(--f-texto, "Newsreader", Georgia, serif); color: var(--i-suave); }
.indice-agora .indice-agora-dia { font: 700 1.08rem/1.2 var(--f-display); color: var(--i-papel); }
.indice-agora a { color: var(--i-papel); }
.indice-ferr { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 22px; }
.indice-ferr a, .indice-ferr button { padding: 6px 0; border: 0; background: none; color: var(--i-suave); font: 600 .9rem/1.2 var(--f-display); text-decoration: none; cursor: pointer; transition: color .2s; }
.indice-ferr a:hover, .indice-ferr button:hover, .indice-ferr a:focus-visible, .indice-ferr button:focus-visible { color: var(--i-papel); }
.indice-teclas { grid-column: 1 / -1; margin: 0; font: 500 .78rem/1.5 var(--f-display); color: var(--i-suave); }
.indice-teclas kbd { padding: 1px 6px; border: 1px solid var(--i-fio-2); border-radius: 4px; font: inherit; }
.indice-teclas a { color: var(--i-papel); }
.indice-fechar {
  position: fixed; z-index: 3; top: clamp(14px, 2vw, 24px); right: clamp(14px, 2vw, 24px); height: 40px; padding: 0 16px;
  border: 1px solid var(--i-fio-2); border-radius: 999px; background: rgba(11, 11, 11, .6); color: var(--i-papel); font: 600 .86rem/1 var(--f-display); cursor: pointer;
}
.indice-fechar:hover, .indice-fechar:focus-visible { border-color: var(--i-papel); }
.indice:not(.pronto) .indice-fechar { opacity: 0; }
/* o que está escondido no Índice: um ponto, quase nada (a doação) */
.indice-segredo { position: absolute; right: 0; bottom: -28px; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--i-papel); opacity: .2; transition: opacity .3s, transform .3s; }
.indice-segredo:hover, .indice-segredo:focus-visible { opacity: 1; transform: scale(1.8); }

/* a composição: logo atrás da abertura, o quadrado, o título, o fio da busca, as portas uma a uma */
@keyframes ind-sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ind-surge { from { opacity: 0; } to { opacity: 1; } }
@keyframes ind-fio { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ind-q { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
.indice.pronto .indice-q { animation: ind-q .52s var(--curva, cubic-bezier(.16, 1, .3, 1)) both; }
.indice.pronto .indice-titulo { animation: ind-sobe .5s var(--curva, ease) .05s both; }
.indice.pronto .indice-busca { animation: ind-surge .36s ease .08s both; }
.indice.pronto .indice-busca-fio { animation: ind-fio .62s var(--curva, ease) .1s both; }
.indice.pronto .indice-vistas { animation: ind-sobe .5s var(--curva, ease) .14s both; }
.indice.pronto .indice-linha-cab { animation: ind-sobe .5s var(--curva, ease) .16s both; }
.indice.pronto .indice-porta { animation: ind-sobe .56s var(--curva, ease) both; animation-delay: calc(var(--i, 0) * 32ms + 190ms); }
.indice.pronto .indice-porta::before { animation: ind-fio .7s var(--curva, ease) both; animation-delay: calc(var(--i, 0) * 32ms + 210ms); }
.indice.pronto .indice-rodape { animation: ind-surge .5s ease .46s both; }
.indice.pronto .indice-fechar { animation: ind-surge .4s ease .2s both; }

@media (max-width: 1180px) and (min-width: 901px) {
  .indice-portas { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
}
@media (max-width: 900px) {
  .indice-in { gap: 40px; padding: 72px 16px 120px; }
  .indice-portas { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .indice-porta { gap: 8px; padding: 16px 0 18px; }
  /* no celular, as páginas de cada porta em texto corrido */
  .indice-paginas { display: flex; flex-wrap: wrap; gap: 2px 16px; }
  .indice-paginas a { padding: 4px 0; }
  .indice-paginas a::before { display: none; }
  .indice-paginas a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .indice-rodape { grid-template-columns: minmax(0, 1fr); }
  .indice-ferr { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .indice.pronto :is(.indice-q, .indice-titulo, .indice-busca, .indice-busca-fio, .indice-vistas, .indice-linha-cab, .indice-porta, .indice-porta::before, .indice-rodape, .indice-fechar) { animation: none !important; }
}
html.indice-aberto { overflow: hidden; }

/* ── 6. o protetor de tela por cima da página (12/out/2026) ── */
.protetor-sobre { position: fixed; inset: 0; z-index: 2000; width: 100%; height: 100%; border: 0; background: #120D08; animation: protetor-entra 1.2s cubic-bezier(.2, .7, .2, 1) both; }
.protetor-sobre.saindo { animation: protetor-sai .42s ease both; }
@keyframes protetor-entra { from { opacity: 0; } }
@keyframes protetor-sai { to { opacity: 0; } }
html.com-protetor { overflow: hidden; }

/* ── 7. o segredo de digitar "doar" (12/out/2026): o Quadrado se abre em ouro ── */
.segredo-doar { position: fixed; inset: 0; z-index: 3000; pointer-events: none; background: radial-gradient(circle at 50% 50%, #F4D08A 0, #E9A84A 22%, #2A1A0C 62%, #120D08 100%); animation: segredo-doar .56s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes segredo-doar { from { clip-path: inset(calc(50% - 14px) calc(50% - 14px)); filter: brightness(1.6); } 55% { clip-path: inset(28% 28%); } to { clip-path: inset(0); filter: none; } }
@media (prefers-reduced-motion: reduce) { .segredo-doar { animation: none; } }

/* ── 8. a passagem entre páginas (13/out/2026): View Transitions entre documentos ──
   O Quadrado fica parado no centro enquanto o resto do mundo troca; o sol do menu
   desliza da porta antiga para a nova, e o da subnavegação também. Só nos navegadores
   que sabem (Chromium 126+); nos outros, a troca é a de sempre. Sem movimento para
   quem pede menos movimento. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  #b-quadrado { view-transition-name: portal-quadrado; }
  .tb-sim .tb-sol { view-transition-name: portal-menu-sol; }
  .subnav .sub-sol { view-transition-name: portal-sub-sol; }
  ::view-transition-old(root) { animation: vt-sai .28s cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: vt-entra .46s cubic-bezier(0, 0, .2, 1) .06s both; }
  ::view-transition-group(portal-menu-sol), ::view-transition-group(portal-sub-sol) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  @keyframes vt-sai { to { opacity: 0; filter: blur(5px); } }
  @keyframes vt-entra { from { opacity: 0; filter: blur(5px); transform: translateY(6px); } }
}

/* ============================================================
   9. O MENU SÓ DE TEXTO E O MENU DE BAIXO (14/out/2026)
   Pedidos dele: "tire os ícones do menu e substitua por texto somente"; "sabe os sub menus? eles
   devem ficar em um novo menu igual ao menu padrão, em baixo ao invés de em cima… cada sub menu
   dentro de cada página deve ficar na esquerda inferior, com um menu separado, e do mesmo tamanho,
   outro menu na direita inferior com o índice da página!"
   O menu de baixo usa o mesmo grid da barra do alto (metade · 44 px do Quadrado · metade), então
   as duas metades de baixo ficam exatamente sob as de cima. perfil.js monta (montarBaixo).
   ============================================================ */

/* ── as ações do alto, em palavras ── */
:root[data-estilo][data-acabamento] {
  & .tb-txt {
    display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 9px; border: 0; border-radius: var(--r-2, 10px);
    background: none; color: var(--suave); font: 600 .86rem/1 var(--f-display); letter-spacing: -.005em; white-space: nowrap; cursor: pointer;
    transition: color var(--t-2, .2s) var(--curva, ease), background var(--t-2, .2s) var(--curva, ease);
  }
  & .tb-txt:hover { color: var(--tinta); background: color-mix(in srgb, var(--tinta) 6%, transparent); }
  & .tb-txt[hidden] { display: none; }
  & .tb-txt kbd { padding: 3px 6px; border-radius: var(--r-1, 6px); border: 1px solid var(--linha-2); font: 600 .66rem/1 var(--f-display); letter-spacing: 0; text-transform: none; color: var(--suave); background: none; }
  /* 21/out/2026 (registro 115): o Almanaque punha a contagem em letra mono de caixa-alta; aqui ela fala como o resto do menu */
  & .tb-dia .tb-dias, & .tb-dia .tb-dias b, & .tb-dia .tb-dias small { font-family: var(--f-display); letter-spacing: -.01em; text-transform: none; }
}
:root.menu-sim[data-estilo][data-acabamento] {
  & .tb-busca { width: auto; padding: 0 8px 0 12px; border: 1px solid var(--linha-2); border-radius: var(--r-pilula, 999px); }
  & .tb-busca:hover { border-color: color-mix(in srgb, var(--tinta) 40%, transparent); }
  & .tb-dia-sim { padding: 2px 9px; }
  & .tb-dia-sim .tb-dias b { color: var(--tinta); }
}
@media (max-width: 1360px) {
  :root.menu-sim[data-estilo][data-acabamento] {
    & .tb-busca { width: auto; padding: 0 12px; border-color: var(--linha-2); }
    & .tb-busca .tb-busca-t { display: inline; }
    & .tb-busca kbd { display: none; }
  }
}
@media (max-width: 1100px) {
  /* a contagem continua, só sem o "até a prova" */
  :root.menu-sim[data-estilo][data-acabamento] { & .tb-dia-sim .tb-dias { display: grid; } & .tb-dia-sim .tb-dias small { display: none; } }
}
@media (max-width: 560px) {
  /* 21/out/2026 (registro 115): no telefone a contagem do alto empurrava a barra 12 px para fora da tela; ela continua no Hoje */
  :root.menu-sim[data-estilo][data-acabamento] .tb-dia-sim { display: none; }
}
@media (max-width: 900px) {
  :root.menu-sim[data-estilo][data-acabamento] {
    & .tb-ponta { gap: 2px; }
    & .tb-txt { padding: 0 7px; font-size: .8rem; }
    & .tb-busca { padding: 0 10px; }
    /* no celular, as portas embaixo também são só os nomes */
    & nav.abas.abas-sim .abas-in a { min-height: 42px; align-content: center; padding: 6px 2px; font: 600 .74rem/1.1 var(--f-display); }
  }
}

/* e o menu Tudo (Ctrl+K): sem a lupa e sem o ícone de cada resultado */
.tudo .tudo-lupa, .tudo .tudo-ic { display: none; }

/* ── o menu de baixo ── */
:root[data-baixo] :is(.eu-nav, .hj-indice, .cv-nav, .lp-abas, nav.eras, .dd-conjuntos) { display: none !important; }
/* quem salta pelo "Nesta página" (ou por um #endereço) para logo abaixo da barra do alto, não atrás dela */
:root[data-baixo] .miolo :is(h1, h2, h3, section, article, [data-secao])[id] { scroll-margin-top: 88px; }
/* o sumário do Manifesto, que no celular e no tablet virava uma faixa de números presa no alto:
   o "Nesta página" de baixo já tem os mesmos tópicos ("em baixo ao invés de em cima") */
@media (max-width: 1099px) { :root[data-baixo] .mf-de-obra .mv-lado { display: none; } }
:root[data-estilo][data-acabamento] {
  & .baixo {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-barra, 60);
    display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); align-items: stretch;
    gap: clamp(10px, 1.6vw, 28px); min-height: 64px; padding: 0 clamp(12px, 2.4vw, 36px) env(safe-area-inset-bottom, 0px);
    background: var(--pagina, var(--papel)); border-top: 1px solid var(--linha-2);
  }
  & .baixo[hidden] { display: none; }
  & .baixo-metade { position: relative; display: flex; align-items: stretch; gap: clamp(8px, 1.2vw, 18px); min-width: 0; }
  & .baixo-metade[hidden] { display: none; }
  & .baixo-e { grid-column: 1; }
  & .baixo-meio { grid-column: 2; align-self: center; justify-self: center; width: 1px; height: 22px; background: var(--linha-2); }
  & .baixo-d { grid-column: 3; }
  /* o nome de cada metade, nas pontas (como a busca e os ajustes no alto) */
  & .baixo-rot {
    flex: none; display: grid; align-content: center; justify-items: start; gap: 3px; max-width: 13rem; padding: 0 6px; border: 0; background: none;
    color: var(--suave); font: 600 .8125rem/1.25 var(--f-display); letter-spacing: -.005em; text-transform: none; text-align: left; cursor: pointer;
  }
  & .baixo-d .baixo-rot { order: 2; justify-items: end; text-align: right; }
  & .baixo-rot:hover, & .baixo-metade.aberta .baixo-rot { color: var(--tinta); }
  & .baixo-rot-a { display: none; }
  /* as listas: os mesmos nomes, o mesmo peso e a mesma marca da porta atual que o menu do alto */
  & .baixo-lista { flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; gap: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  & .baixo-lista::-webkit-scrollbar { display: none; }
  & .baixo-e .baixo-lista > :first-child { margin-left: auto; }
  & .baixo-lista > a, & .baixo-lista > button {
    position: relative; flex: none; display: flex; align-items: center; padding: 0 clamp(8px, .9vw, 14px); border: 0; background: none;
    font: 600 .94rem/1 var(--f-display); letter-spacing: -.005em; color: var(--suave); text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: color var(--t-2, .2s) var(--curva, ease);
  }
  & .baixo-lista > :hover, & .baixo-lista > :focus-visible { color: var(--tinta); }
  & .baixo-lista > [aria-current] { color: var(--tinta); }
  & .baixo-lista > [aria-current]::before { content: ""; position: absolute; left: clamp(8px, .9vw, 14px); right: clamp(8px, .9vw, 14px); top: -1px; height: 3px; background: var(--tinta); }
  & .baixo-lista[data-antes] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px); mask-image: linear-gradient(90deg, transparent, #000 32px); }
  & .baixo-lista[data-depois] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  & .baixo-lista[data-antes][data-depois] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
  /* aberta: a lista inteira sobe da metade, em coluna */
  & .baixo-metade.aberta .baixo-lista {
    position: absolute; bottom: calc(100% + 1px); left: 0; z-index: 2; flex-direction: column; gap: 0;
    width: min(380px, calc(100vw - 24px)); max-height: min(64vh, 560px); overflow: auto; padding: 6px 0;
    background: var(--pagina, var(--papel)); border: 1px solid var(--linha-2); border-bottom-color: var(--tinta); box-shadow: var(--s-3, none);
    -webkit-mask-image: none; mask-image: none;
  }
  & .baixo-d.aberta .baixo-lista { left: auto; right: 0; }
  & .baixo-metade.aberta .baixo-lista > * { margin: 0; padding: 11px 18px; white-space: normal; text-align: left; font-size: .92rem; line-height: 1.25; }
  & .baixo-metade.aberta .baixo-lista > :hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); }
  & .baixo-metade.aberta .baixo-lista > [aria-current]::before { left: 0; right: auto; top: 9px; bottom: 9px; width: 3px; height: auto; }
}
:root.com-baixo[data-estilo][data-acabamento] body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

/* no celular: as duas metades viram dois botões do mesmo tamanho, logo acima das portas */
@media (max-width: 900px) {
  :root[data-estilo][data-acabamento] {
    & .baixo {
      left: 8px; right: 8px; bottom: var(--sobre-abas, calc(104px + env(safe-area-inset-bottom, 0px))); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 8px; min-height: 0; padding: 0; background: none; border: 0;
      transition: transform var(--t-3, 320ms) var(--curva, ease), opacity var(--t-2, 200ms) var(--curva, ease);
    }
    & .baixo-meio { display: none; }
    & .baixo-e { grid-column: 1; }
    & .baixo-d { grid-column: 2; }
    & .baixo-lista { display: none; }
    & .baixo-rot, & .baixo-d .baixo-rot {
      width: 100%; max-width: none; min-height: 50px; padding: 7px 12px; justify-items: start; text-align: left; order: 0;
      border: 1px solid var(--linha-2); border-radius: var(--r-3, 14px);
      background: color-mix(in srgb, var(--pagina, var(--papel)) 94%, transparent);
      -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    }
    & .baixo-rot-a {
      display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      font: 600 .84rem/1.2 var(--f-display); letter-spacing: 0; text-transform: none; color: var(--tinta);
    }
    & .baixo-metade.aberta .baixo-lista { display: flex; width: calc(100vw - 16px); max-height: 58vh; }
    & .baixo-d.aberta .baixo-lista { right: 0; }
    & .baixo-e.aberta .baixo-lista { left: 0; }
  }
  /* o risco fechado leva o menu de baixo junto */
  :root.risco-fechado[data-estilo][data-acabamento] .baixo { transform: translateY(calc(100% + 112px)); opacity: 0; pointer-events: none; }
  :root.com-baixo.menu-sim[data-estilo][data-acabamento] body { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { :root[data-estilo][data-acabamento] .baixo { transition: none; } }
@media print { .baixo { display: none !important; } }

/* ============================================================
   O AVISO (21/out/2026, registro 114) — aviso.js e perfil.js
   "Esta interface é emergencial e provisória", com o que não pode esperar logo embaixo.
   · no Início, o bloco: a faixa do aviso em tinta cheia (o negro do Quadrado), as cinco colunas
     com fios (como "As palavras") e a sua área em texto corrido;
   · nas outras páginas, uma linha fina no alto, que abre o mesmo conteúdo numa folha.
   Monocromático: só tinta, papel e o suave; tamanhos e cantos da régua (forma.css).
   ============================================================ */
:root[data-acabamento] {
  & .aviso { display: grid; gap: var(--e-6, 32px); margin: clamp(8px, 2vw, 24px) 0 clamp(32px, 4vw, 56px); padding-bottom: clamp(28px, 3.4vw, 48px); border-bottom: 1px solid var(--linha-2); }
  & .aviso-cab {
    display: grid; grid-template-columns: minmax(120px, 2fr) minmax(0, 10fr); gap: 8px clamp(16px, 2.6vw, 40px); align-items: baseline;
    padding: clamp(18px, 2.4vw, 30px) clamp(18px, 2.4vw, 30px); border-radius: var(--r-3, 14px);
    background: var(--tinta); color: var(--sobre-tinta, var(--papel));
  }
  & .aviso-cab .rot { margin: 0; color: inherit; opacity: .78; }
  & .aviso-cab-txt { display: grid; gap: 10px; min-width: 0; }
  & .aviso-t { margin: 0; font: 800 clamp(1.5rem, 2.9vw, 2.6rem)/1.06 var(--f-display); letter-spacing: -.03em; text-wrap: balance; color: inherit; }
  & .aviso-txt { margin: 0; max-width: 78ch; font: 400 clamp(1rem, 1.2vw, 1.08rem)/1.5 var(--f-texto, "Newsreader", serif); color: inherit; opacity: .84; text-wrap: pretty; }

  & .aviso-grade { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--linha-2); }
  & .aviso-col { display: grid; grid-template-rows: auto auto 1fr auto; align-content: start; gap: 6px; min-width: 0; padding: var(--e-5, 24px) clamp(14px, 1.8vw, 26px) 4px 0; }
  & .aviso-col + .aviso-col { padding-left: clamp(14px, 1.8vw, 26px); border-left: 1px solid var(--linha); }
  & .aviso-col-t { margin: 0; font: 800 clamp(1.02rem, 1.3vw, 1.18rem)/1.15 var(--f-display); letter-spacing: -.015em; }
  & .aviso-col-sub { margin: 0 0 6px; font: 400 .9rem/1.35 var(--f-texto, "Newsreader", serif); font-style: italic; color: var(--suave); }
  & .aviso-lista { display: grid; align-content: start; gap: 10px; margin: 0; padding: 0; list-style: none; }
  & .aviso-lista li { display: grid; gap: 1px; min-width: 0; }
  & .aviso-lista a, & .aviso-corrido a, & .aviso-area-linha a { color: var(--tinta); font: 650 .94rem/1.3 var(--f-display); text-decoration: underline; text-decoration-color: var(--linha-2); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color var(--t-2, 200ms) var(--curva, ease); }
  & .aviso-lista a:hover, & .aviso-corrido a:hover, & .aviso-area-linha a:hover, & .aviso-dentro a:hover { text-decoration-color: var(--tinta); }
  & .aviso-lista span { font: 400 .86rem/1.35 var(--f-texto, "Newsreader", serif); color: var(--suave); }
  & .aviso-corrido { display: none; margin: 0; font: 400 .98rem/1.6 var(--f-texto, "Newsreader", serif); }
  & .aviso-dentro { margin: 8px 0 0; font: 500 .82rem/1.4 var(--f-display); color: var(--suave); }
  & .aviso-dentro a { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--linha-2); text-underline-offset: 3px; }

  & .aviso-areas { display: grid; grid-template-columns: minmax(120px, 2fr) minmax(0, 10fr); gap: 8px clamp(16px, 2.6vw, 40px); align-items: start; padding-top: var(--e-5, 24px); border-top: 1px solid var(--linha); }
  & .aviso-areas-corpo { display: grid; gap: var(--e-3, 12px); min-width: 0; }
  & .aviso-areas-nomes { display: flex; flex-wrap: wrap; gap: 6px; }
  & .aviso-areas-escolha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; font: 600 .86rem/1.3 var(--f-display); color: var(--suave); }
  & .aviso-areas-escolha select {
    -webkit-appearance: none; appearance: none; min-height: 40px; padding: 0 28px 0 0; border: 0; border-bottom: 2px solid var(--tinta); border-radius: 0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 4px center;
    width: auto; max-width: 100%; color: var(--tinta); font: 800 clamp(1.15rem, 1.6vw, 1.4rem)/1.1 var(--f-display); letter-spacing: -.02em; cursor: pointer; box-shadow: none;
  }
  & .aviso-areas-escolha select option { font: 500 1rem/1.4 var(--f-display); color: #111; background: #fff; }
  & .aviso-areas-nomes .chip { min-height: 30px; padding: 0 12px; font-size: .82rem; }
  & .aviso-area-linha { margin: 0; max-width: 88ch; min-height: 3.2em; font: 400 clamp(1rem, 1.25vw, 1.1rem)/1.6 var(--f-texto, "Newsreader", serif); color: var(--tinta); text-wrap: pretty; }
  & .aviso-area-linha b { font: 800 1em/1 var(--f-display); letter-spacing: -.01em; }
  & .aviso-area-linha a { font-size: 1em; }
  & .aviso-mais { padding: 0; border: 0; background: none; color: var(--tinta); font: inherit; text-decoration: underline; text-decoration-color: var(--linha-2); text-underline-offset: 3px; cursor: pointer; }
  & .aviso-mais:hover { text-decoration-color: var(--tinta); }
  & .aviso-assina { margin: 0; font: 400 .9rem/1.5 var(--f-texto, "Newsreader", serif); color: var(--suave); }
  & .aviso-assina a { color: var(--tinta); text-underline-offset: 3px; }

  /* na folha: o texto no alto, as colunas em duas, e todas as áreas em texto corrido */
  & .aviso-na-folha { margin: 0; padding: 0; border: 0; gap: var(--e-5, 24px); }
  & .aviso-folha-txt { margin: 0; font: 400 1.04rem/1.55 var(--f-texto, "Newsreader", serif); color: var(--tinta); }
  & .aviso-na-folha .aviso-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
  & .aviso-na-folha .aviso-col:nth-child(odd) { padding-left: 0; border-left: 0; }
  & .aviso-na-folha .aviso-col:nth-child(even) { padding-left: clamp(14px, 1.8vw, 26px); border-left: 1px solid var(--linha); }
  & .aviso-na-folha .aviso-areas { grid-template-columns: 1fr; }
  & .aviso-areas-todas .aviso-area-linha { min-height: 0; padding: 10px 0; border-bottom: 1px solid var(--linha); font-size: 1rem; }
  & .aviso-areas-todas .aviso-area-linha.sua { padding-left: 12px; border-left: 3px solid var(--tinta); }
  & .aviso-na-folha .aviso-col, & .aviso-na-folha .aviso-areas { scroll-margin-top: 12px; }

  /* a linha do aviso nas outras páginas */
  & .aviso-linha {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0 0 var(--e-5, 24px); padding: 0 0 12px;
    border-bottom: 1px solid var(--linha-2); font: 500 .86rem/1.3 var(--f-display); color: var(--tinta);
  }
  & .aviso-linha-txt { display: flex; align-items: center; gap: 10px; margin: 0; }
  & .aviso-linha-txt b { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: var(--r-pilula, 999px); background: var(--tinta); color: var(--sobre-tinta, var(--papel)); font: 700 .78rem/1 var(--f-display); }
  & .aviso-linha-nav { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-left: auto; }
  & .aviso-linha-nav button, & .aviso-linha-ver { padding: 4px 0; border: 0; background: none; color: var(--suave); font: 500 .84rem/1.2 var(--f-display); cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color var(--t-2, 200ms) var(--curva, ease), text-decoration-color var(--t-2, 200ms) var(--curva, ease); }
  & .aviso-linha-nav button:hover, & .aviso-linha-ver:hover { color: var(--tinta); text-decoration-color: var(--tinta); }
  & .aviso-linha-ver { display: none; color: var(--tinta); text-decoration-color: var(--linha-2); }
}
@media (max-width: 1180px) {
  :root[data-acabamento] {
    & .aviso-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; }
    & .aviso-col:nth-child(3n+1) { padding-left: 0; border-left: 0; }
    & .aviso-col:nth-child(3n+2), & .aviso-col:nth-child(3n) { padding-left: clamp(14px, 1.8vw, 26px); border-left: 1px solid var(--linha); }
    & .aviso-linha-nav { display: none; }
    & .aviso-linha-ver { display: inline-block; margin-left: auto; }
  }
}
@media (max-width: 900px) {
  :root[data-acabamento] {
    & .aviso-cab, & .aviso-areas { grid-template-columns: 1fr; }
    & .aviso-grade, & .aviso-na-folha .aviso-grade { grid-template-columns: 1fr; }
    & .aviso-col, & .aviso-col + .aviso-col, & .aviso-col:nth-child(n), & .aviso-na-folha .aviso-col:nth-child(n) { padding: 14px 0; border-left: 0; border-bottom: 1px solid var(--linha); }
    /* no celular, cada coluna vira uma linha de texto corrido: o porquê fica na dica do link */
    & .aviso-col { grid-template-rows: none; gap: 4px; }
    & .aviso-col-sub { margin: 0; }
    & .aviso-lista { display: none; }
    & .aviso-corrido { display: block; }
    & .aviso-areas-nomes { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
    & .aviso-areas-nomes::-webkit-scrollbar { display: none; }
    & .aviso-areas-nomes .chip { flex: none; }
    & .aviso-na-folha .aviso-lista { display: none; }
  }
}
@media (max-width: 560px) {
  :root[data-acabamento] {
    & .aviso-linha { gap: 4px 10px; }
    & .aviso-linha-txt { font-size: .8rem; }
  }
}
@media print { .aviso-linha { display: none !important; } }