/* ============================================================
   Painel CPME — Spatial Signage (paisagem, 1080p → 4K)
   ============================================================ */

:root {
  --cor-fundo-0: #03050a;
  --cor-fundo-1: #050a15;
  --cor-fundo-2: #08101f;
  --cor-dourado: #f5b942;
  --cor-dourado-quente: #ffd98a;
  --cor-azul-eletrico: #5ab0ff;
  --cor-texto: #e8edf6;
  --cor-texto-suave: #9aa7bd;

  --tam-cpme: clamp(180px, 24vmin, 340px);
  --tam-unidade: clamp(120px, 16vmin, 235px);

  --fonte-display: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--fonte-display);
  color: var(--cor-texto);
  /* gradiente navy profundo + grade muito sutil em camadas */
  background-color: var(--cor-fundo-0);
  background-image:
    /* grade sutil (bem discreta) */
    repeating-linear-gradient(to right,
      rgba(140, 170, 220, 0.035) 0,
      rgba(140, 170, 220, 0.035) 1px,
      transparent 1px,
      transparent clamp(56px, 6vmin, 120px)),
    repeating-linear-gradient(to bottom,
      rgba(140, 170, 220, 0.035) 0,
      rgba(140, 170, 220, 0.035) 1px,
      transparent 1px,
      transparent clamp(56px, 6vmin, 120px)),
    /* leve variação de luz no centro */
    radial-gradient(ellipse 55% 45% at 50% 38%, rgba(28, 48, 96, 0.13), transparent 70%),
    /* gradiente principal azul-marinho profundo */
    linear-gradient(178deg, var(--cor-fundo-2) 0%, var(--cor-fundo-1) 45%, var(--cor-fundo-0) 100%);
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
}

/* Vinheta: cantos escuros, centro mais claro (mas mais escuro que o azul base) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at 50% 55%,
    transparent 35%,
    rgba(0, 0, 0, 0.5) 90%);
}

/* Campo de estrelas (vagalumes) — atrás da vinheta, abaixo do conteúdo */
.palco__estrelas {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ============================ Cabeçalho ============================ */

.topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(14px, 2.2vh, 34px) clamp(20px, 2.6vw, 52px) 0;
  z-index: 3;
}

.topo__eyebrow {
  display: block;
  font-size: clamp(11px, 1.15vmin, 20px);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--cor-dourado);
  margin-bottom: 0.55em;
}

.topo__titulo {
  font-size: clamp(20px, 3vmin, 54px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.topo__relogio {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vmin, 26px);
  text-align: right;
  flex-shrink: 0;
}

.topo__relogio-campos { text-align: right; }

.relogio__hora {
  display: block;
  font-size: clamp(24px, 3.6vmin, 64px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--cor-dourado);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.relogio__data {
  display: block;
  margin-top: 0.4em;
  font-size: clamp(11px, 1.4vmin, 24px);
  color: var(--cor-texto-suave);
  text-transform: capitalize;
  letter-spacing: 0.04em;
}

/* Botão de tela cheia — canto superior direito, acima do relógio.
   Mesmo padrão visual do botão de fechar dos modais (vidro escuro,
   borda dourada), porém menor e mais discreto. */
.btn-tela-cheia {
  display: inline-grid;
  place-items: center;
  width: clamp(34px, 3.8vmin, 46px);
  height: clamp(34px, 3.8vmin, 46px);
  border-radius: 50%;
  border: 1px solid rgba(90, 176, 255, 0.25);
  background: rgba(8, 14, 26, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--cor-texto-suave);
  cursor: pointer;
  transition: color 0.22s ease, border-color 0.22s ease,
              box-shadow 0.22s ease, transform 0.22s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-tela-cheia:hover,
.btn-tela-cheia:focus-visible {
  color: var(--cor-dourado);
  border-color: rgba(245, 185, 66, 0.5);
  box-shadow: 0 0 16px rgba(245, 185, 66, 0.25);
  transform: scale(1.06);
  outline: none;
}

.btn-tela-cheia:focus-visible {
  outline: 2px solid var(--cor-azul-eletrico);
  outline-offset: 3px;
}

/* alterna o ícone conforme o estado (fullscreen ativo ou não) */
.btn-tela-cheia__icone--recolher { display: none; }

.btn-tela-cheia--ativo .btn-tela-cheia__icone--expandir { display: none; }
.btn-tela-cheia--ativo .btn-tela-cheia__icone--recolher { display: inline; }

/* ============================ Palco ============================ */

.palco {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 0 clamp(20px, 3vw, 72px) clamp(24px, 5vh, 72px);
}

.palco__raios {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.palco__cpme,
.palco__unidades {
  position: relative;
  z-index: 2;
}

/* ============================ Flutuação ============================
   A flutuação fica em um wrapper externo para não conflitar com
   transforms de hover/clique aplicados no próprio botão/brasão. */

@keyframes flutuar {
  0%, 100% { transform: translateY(calc(-1 * var(--ampl, 1) * 1.05vh)); }
  50%      { transform: translateY(calc(var(--ampl, 1) * 1.05vh)); }
}

.flutuador { animation: flutuar 5.6s ease-in-out infinite; }

.flutuador--cpme { --ampl: 0.75; }

.flutuador--unidade {
  animation-duration: var(--dur, 5s);
  animation-delay: var(--atraso, 0s);
}

/* ============================ Brasão CPME ============================ */

.palco__cpme .flutuador {
  position: relative;
  display: grid;
  place-items: center;
}

.brasao {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.brasao--cpme {
  width: var(--tam-cpme);
  height: auto;
  /* brilho dourado contido, sem vazar para o resto da tela */
  filter:
    drop-shadow(0 0 calc(var(--tam-cpme) * 0.06) rgba(245, 185, 66, 0.4))
    drop-shadow(0 0 calc(var(--tam-cpme) * 0.018) rgba(255, 224, 150, 0.6));
}

.cpme__brilho {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.glow {
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
}

/* Halo largo — respiração lenta (~6s) */
.glow--halo {
  inset: -42%;
  background: radial-gradient(circle,
    rgba(245, 185, 66, 0.30) 0%,
    rgba(212, 140, 30, 0.13) 42%,
    transparent 68%);
  animation: respirar 6s ease-in-out infinite;
}

/* Núcleo quente — mais rápido (~3s), fase diferente → profundidade orgânica */
.glow--nucleo {
  inset: -14%;
  background: radial-gradient(circle,
    rgba(255, 224, 150, 0.5) 0%,
    rgba(245, 185, 66, 0.18) 48%,
    transparent 72%);
  animation: respirar 3s ease-in-out -1.35s infinite;
}

/* Flicker — opacidade controlada via JS com ruído suavizado (luz "real") */
.glow--flicker {
  inset: -26%;
  background: radial-gradient(circle,
    rgba(255, 240, 200, 0.55) 0%,
    rgba(245, 185, 66, 0.16) 50%,
    transparent 70%);
  opacity: var(--flicker, 0.35);
}

@keyframes respirar {
  0%, 100% { transform: scale(0.93); opacity: 0.75; }
  50%      { transform: scale(1.06); opacity: 1; }
}

/* ---------- Reflexos pontuais na borda do brasão ----------
   Pequenos brilhos que cintilam brevemente ao redor da borda
   do brasão, como luz pegando o metal. O JS ressorteia ângulo,
   raio, escala e duração a cada ciclo → aleatório e discreto. */

.reflexos {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.reflexo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--tam-cpme) * 0.085);
  aspect-ratio: 1;
  margin-left: calc(var(--tam-cpme) * -0.0425);
  margin-top: calc(var(--tam-cpme) * -0.0425);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 250, 230, 0.95) 0%,
    rgba(255, 215, 130, 0.40) 38%,
    transparent 70%);
  filter: blur(1px);
  opacity: 0;
  transform: rotate(var(--ang, 0deg))
             translateX(calc(var(--tam-cpme) * var(--dist, 0.47)))
             scale(var(--esc, 1));
  animation: cintilar var(--dur, 3s) ease-in-out var(--del, 0s) infinite;
}

@keyframes cintilar {
  0%, 100% { opacity: 0; }
  8%       { opacity: 0.85; }
  20%      { opacity: 0; }
}

/* ============================ Unidades subordinadas ============================ */

.palco__unidades {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(22px, 4.4vw, 120px);
  list-style: none;
  max-width: 100%;
}

.crest {
  display: block;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 12px;
  transition: transform 0.28s ease, filter 0.28s ease;
  -webkit-tap-highlight-color: transparent;
}

.brasao--unidade {
  width: var(--tam-unidade);
  height: auto;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.55));
  transition: filter 0.28s ease;
}

/* Hover/foco: elevação leve + glow azul suave */
.crest:hover,
.crest:focus-visible {
  transform: translateY(calc(-1 * clamp(4px, 0.9vmin, 14px))) scale(1.045);
}

.crest:hover .brasao--unidade,
.crest:focus-visible .brasao--unidade {
  filter:
    brightness(1.08)
    drop-shadow(0 0 clamp(10px, 2.2vmin, 34px) rgba(90, 176, 255, 0.5))
    drop-shadow(0 14px 30px rgba(0, 0, 0, 0.6));
}

.crest:focus-visible {
  outline: 3px solid var(--cor-azul-eletrico);
  outline-offset: 6px;
}

/* Feedback de clique/toque (~0.6s): brilho + leve escala */
.crest--clicado { animation: clique-flash 0.6s ease-out; }

@keyframes clique-flash {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.09); filter: brightness(1.6) drop-shadow(0 0 clamp(14px, 3vmin, 44px) rgba(90, 176, 255, 0.85)); }
  100% { transform: scale(1); }
}

/* ============================ Rodapé / Menu ============================ */

.rodape {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0 clamp(20px, 2.6vw, 52px) clamp(18px, 3.4vh, 44px);
}

.menu {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, 1.6vmin, 22px);
}

.menu__botao {
  position: relative;
  overflow: hidden;
  font-family: var(--fonte-display);
  font-size: clamp(13px, 1.6vmin, 23px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c3d2ea;
  padding: clamp(12px, 1.7vmin, 24px) clamp(22px, 2.8vmin, 40px);
  border-radius: 999px;
  border: 1px solid rgba(120, 180, 255, 0.32);
  /* vidro: topo iluminado + base profunda, mais saturado */
  background:
    linear-gradient(180deg,
      rgba(96, 140, 210, 0.12) 0%,
      rgba(20, 30, 52, 0.55) 38%,
      rgba(10, 14, 26, 0.72) 100%);
  border-top-color: rgba(160, 205, 255, 0.5);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(200, 225, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 6px 22px rgba(0, 0, 0, 0.42);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease,
              box-shadow 0.25s ease, transform 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

/* brilho "shine": um ciclo único de 8s percorre os 4 botões em sequência
   (2s por botão) — ao terminar em um, começa no seguinte */
/* brilho "shine": um único facho cruza TODOS os botões de uma vez
   (passagem mais rápida) e depois descansa.
   Os atrasos por botão são calculados automaticamente no JS
   (main.js, bloco "Brilho do menu"), então adicionar/remover botões
   no HTML não exige mexer no CSS. */
.menu__botao::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -45%;
  width: 38%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(200, 225, 255, 0.14) 35%,
    rgba(230, 240, 255, 0.22) 50%,
    rgba(200, 225, 255, 0.14) 65%,
    transparent 100%);
  transform: translateX(-120%) skewX(-14deg);
  /* ciclo fixo de 8s; --atraso-shine vem do JS (0s por padrão) */
  animation: brilho-varrer 8s ease-in-out var(--atraso-shine, 0s) infinite;
  pointer-events: none;
}

/* a passagem ocupa 20% do ciclo (1.6s) — mais rápida; as varreduras
   dos botões se sobrepõem, formando um facho contínuo */
@keyframes brilho-varrer {
  0%        { transform: translateX(-120%) skewX(-14deg); opacity: 0; }
  4%        { opacity: 1; }
  16%       { opacity: 1; }
  20%       { transform: translateX(480%) skewX(-14deg); opacity: 0; }
  100%      { transform: translateX(480%) skewX(-14deg); opacity: 0; }
}

/* reflexo do giroflex na borda inferior dos botões: acompanha o ciclo
   da sirene (vermelho na 1ª metade, azul na 2ª), bem sutil */
.menu__botao::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -2px;
  height: 5px;
  border-radius: 999px;
  filter: blur(3px);
  opacity: 0;
  background: rgba(255, 90, 110, 0.8);
  animation: reflexo-sirene 1.6s linear infinite;
  pointer-events: none;
}

/* acompanha os flashes: vermelho na primeira metade do ciclo,
   azul na segunda, bem atenuado (é só um reflexo distante) */
@keyframes reflexo-sirene {
  0%    { background: rgba(255, 90, 110, 0.8); opacity: 0; }
  3%    { opacity: 0.3; }
  8%    { opacity: 0.05; }
  13%   { opacity: 0.34; }
  18%   { opacity: 0.04; }
  23%   { opacity: 0.34; }
  30%   { opacity: 0.17; }
  42%   { opacity: 0.02; }
  50%, 100% { background: rgba(90, 150, 255, 0.8); opacity: 0; }
  53%   { opacity: 0.3; }
  58%   { opacity: 0.05; }
  63%   { opacity: 0.34; }
  68%   { opacity: 0.04; }
  73%   { opacity: 0.34; }
  80%   { opacity: 0.17; }
  92%   { opacity: 0.02; }
}

.menu__botao:hover,
.menu__botao:focus-visible {
  color: var(--cor-dourado);
  border-color: rgba(245, 185, 66, 0.5);
  background:
    linear-gradient(180deg,
      rgba(120, 150, 210, 0.16) 0%,
      rgba(24, 32, 54, 0.6) 38%,
      rgba(14, 18, 32, 0.75) 100%);
  box-shadow:
    inset 0 1px 0 rgba(220, 235, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 6px 24px rgba(0, 0, 0, 0.45),
    0 0 22px rgba(245, 185, 66, 0.18);
  transform: translateY(-2px);
  outline: none;
}

.menu__botao:focus-visible {
  outline: 2px solid var(--cor-azul-eletrico);
  outline-offset: 3px;
}

/* ---------- Reflexo distante de sirene ----------
   Uma única fonte (giroflex) bem abaixo do quadro: os dois fachos
   ficam lado a lado, quase sobrepostos, como na sirene real.
   Apenas o topo do brilho invade a base dos botões, com opacidade
   muito baixa — crossfade lento azul/vermelho, sem estrobo. */

.rodape__sirene {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(1000px, 66vw);
  height: clamp(26px, 4.6vh, 60px);
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.sirene__facho {
  position: absolute;
  /* a maior parte da elipse fica ABAIXO da linha do rodapé */
  top: -4%;
  left: 50%;
  width: 100%;
  height: 280%;
  border-radius: 50%;
  filter: blur(22px);
  will-change: opacity;
}

/* fachos quase sobrepostos (leve deslocamento entre si) */
/* fachos quase sobrepostos: núcleo branco quente cercado pela cor,
   halo bem transparente — como na foto de um giroflex real */
.sirene__facho--vermelho {
  transform: translateX(calc(-50% - clamp(12px, 1.9vmin, 30px)));
  background: radial-gradient(ellipse at 50% 40%,
    rgba(255, 240, 242, 0.7) 0%,
    rgba(255, 46, 70, 0.4) 26%,
    rgba(210, 20, 46, 0.13) 52%,
    transparent 71%);
  opacity: 0;
  animation: sirene-vermelho 1.6s linear infinite;
}

.sirene__facho--azul {
  transform: translateX(calc(-50% + clamp(12px, 1.9vmin, 30px)));
  background: radial-gradient(ellipse at 50% 40%,
    rgba(240, 248, 255, 0.7) 0%,
    rgba(52, 132, 255, 0.4) 26%,
    rgba(28, 105, 240, 0.13) 52%,
    transparent 71%);
  opacity: 0;
  animation: sirene-azul 1.6s linear infinite;
}

/* piscada realista do giroflex: cada cor domina ~0.8s (metade do
   ciclo) e DENTRO da sua janela pisca em flashes rápidos (liga/desliga),
   como o estroboscópio do giroflex real — sem as duas cores se
   misturarem. Picos moderados = fonte distante, mas visível */
@keyframes sirene-vermelho {
  0%    { opacity: 0; }
  3%    { opacity: 0.6; }
  8%    { opacity: 0.1; }
  13%   { opacity: 0.63; }
  18%   { opacity: 0.08; }
  23%   { opacity: 0.63; }
  30%   { opacity: 0.32; }
  42%   { opacity: 0.04; }
  50%, 100% { opacity: 0; }
}

@keyframes sirene-azul {
  0%, 50% { opacity: 0; }
  53%   { opacity: 0.6; }
  58%   { opacity: 0.1; }
  63%   { opacity: 0.63; }
  68%   { opacity: 0.08; }
  73%   { opacity: 0.63; }
  80%   { opacity: 0.32; }
  92%   { opacity: 0.04; }
  100%  { opacity: 0; }
}

/* ============================ Modal de perfil ============================
   Fundo translúcido com blur; caixa em vidro escuro com detalhes
   dourados, na mesma linguagem visual do painel. */

.modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vmin, 44px);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.32s ease, visibility 0s 0.32s;
}

.modal--aberto {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.32s ease;
}

/* fundo translúcido com desfoque — bem transparente, tom cinza-escuro */
.modal__fundo {
  position: absolute;
  inset: 0;
  background: rgba(9, 10, 14, 0.34);
  backdrop-filter: blur(9px) saturate(0.9);
  -webkit-backdrop-filter: blur(9px) saturate(0.9);
}

.modal__caixa {
  position: relative;
  display: grid;
  grid-template-columns: 46% 1fr;
  gap: clamp(20px, 3vmin, 48px);
  width: min(1320px, 92vw);
  max-height: min(960px, 96vh);
  min-height: min(700px, 76vh);
  padding: clamp(22px, 3.6vmin, 56px);
  border-radius: clamp(14px, 1.8vmin, 26px);
  background:
    linear-gradient(160deg, rgba(18, 26, 42, 0.84), rgba(8, 12, 20, 0.88));
  border: 1px solid rgba(245, 185, 66, 0.22);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(90, 176, 255, 0.06) inset,
    0 0 60px rgba(245, 185, 66, 0.06) inset;
  transform: scale(0.955) translateY(10px);
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.modal--aberto .modal__caixa {
  transform: scale(1) translateY(0);
}

/* detalhe luminoso no topo da caixa */
.modal__caixa::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(to right,
    transparent, rgba(245, 185, 66, 0.55), transparent);
}

/* botão de fechar */
.modal__fechar {
  position: absolute;
  top: clamp(10px, 1.6vmin, 22px);
  right: clamp(10px, 1.6vmin, 22px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(38px, 4.6vmin, 52px);
  height: clamp(38px, 4.6vmin, 52px);
  border-radius: 50%;
  border: 1px solid rgba(245, 185, 66, 0.35);
  background: rgba(8, 14, 26, 0.7);
  color: var(--cor-dourado);
  cursor: pointer;
  transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.modal__fechar:hover,
.modal__fechar:focus-visible {
  background: rgba(245, 185, 66, 0.14);
  box-shadow: 0 0 18px rgba(245, 185, 66, 0.35);
  transform: scale(1.07);
  outline: none;
}

.modal__fechar:focus-visible {
  outline: 2px solid var(--cor-azul-eletrico);
  outline-offset: 3px;
}

/* ---------- Carrossel (lado esquerdo) ---------- */

.carrossel {
  position: relative;
  border-radius: clamp(10px, 1.4vmin, 18px);
  overflow: hidden;
  min-height: clamp(300px, 58vmin, 640px);
  background:
    radial-gradient(circle at 50% 42%, rgba(40, 56, 86, 0.28), transparent 72%),
    linear-gradient(170deg, #101623, #080b12);
  border: 1px solid rgba(90, 176, 255, 0.14);
}

.carrossel__trilho {
  position: absolute;
  inset: 0;
}

.carrossel__slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.9s ease, transform 1.4s ease;
}

.carrossel__slide--ativo {
  opacity: 1;
  transform: scale(1);
}

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

/* placeholder: brasão da unidade sobre fundo escuro (sem fotos) */
.carrossel__placeholder {
  width: clamp(190px, 34vmin, 380px);
  height: auto;
  opacity: 0.9;
  filter: drop-shadow(0 0 clamp(16px, 3vmin, 40px) rgba(245, 185, 66, 0.3));
}

/* legenda do placeholder */
.carrossel__vazio {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(12px, 2vmin, 24px);
  text-align: center;
  font-size: clamp(13px, 1.5vmin, 22px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  opacity: 0.8;
}

/* vinheta inferior do carrossel para destacar os indicadores */
.carrossel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 28%;
  background: linear-gradient(to top, rgba(3, 6, 12, 0.75), transparent);
  pointer-events: none;
}

.carrossel__indicadores {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: clamp(10px, 1.6vmin, 20px);
  display: flex;
  justify-content: center;
  gap: clamp(6px, 1vmin, 12px);
}

.carrossel__ponto {
  width: clamp(8px, 1vmin, 12px);
  height: clamp(8px, 1vmin, 12px);
  border-radius: 50%;
  background: rgba(232, 237, 246, 0.28);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.carrossel__ponto--ativo {
  background: var(--cor-dourado);
  box-shadow: 0 0 10px rgba(245, 185, 66, 0.6);
  transform: scale(1.2);
}

/* ---------- Informações (lado direito) ---------- */

.modal__info {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vmin, 26px);
  min-width: 0;
  overflow: hidden;
}

.modal__cabecalho {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vmin, 26px);
  padding-right: clamp(40px, 5vmin, 60px); /* espaço do botão fechar */
}

.modal__brasao {
  width: clamp(120px, 14.5vmin, 210px);
  height: auto;
  flex-shrink: 0;
  filter:
    drop-shadow(0 0 clamp(10px, 2vmin, 24px) rgba(245, 185, 66, 0.35))
    drop-shadow(0 10px 22px rgba(0, 0, 0, 0.5));
}

.modal__sigla {
  display: block;
  font-size: clamp(15px, 1.9vmin, 30px);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--cor-dourado);
  margin-bottom: 0.35em;
}

.modal__titulo {
  font-size: clamp(26px, 3.7vmin, 56px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

.modal__texto {
  overflow-y: auto;
  padding-right: clamp(6px, 1vmin, 14px);
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 185, 66, 0.4) transparent;
}

.modal__paragrafo {
  font-size: clamp(18px, 2.2vmin, 32px);
  line-height: 1.65;
  color: var(--cor-texto);
  opacity: 0.94;
  margin-bottom: clamp(14px, 2vmin, 26px);
}

.modal__rotulo {
  font-size: clamp(14px, 1.65vmin, 24px);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cor-azul-eletrico);
  margin-bottom: clamp(6px, 1vmin, 12px);
}

.modal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.6vmin, 22px);
  margin-top: clamp(4px, 1vmin, 12px);
  border-top: 1px solid rgba(90, 176, 255, 0.16);
  padding-top: clamp(12px, 1.8vmin, 24px);
}

.modal__meta-item { min-width: 40%; }

.modal__meta-rotulo {
  display: block;
  font-size: clamp(13px, 1.6vmin, 23px);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  margin-bottom: 0.4em;
}

.modal__meta-valor {
  font-size: clamp(18px, 2.15vmin, 31px);
  font-weight: 600;
  color: var(--cor-dourado-quente);
}

/* ============================ Modal: Estatística Operacional ============================
   Moldura quase fullscreen para a dashboard do Looker Studio.
   Reaproveita .modal (overlay/transição) e .modal__fechar aqui acima. */

.dash__moldura {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(92vw, 2400px);
  height: min(92vh, 1500px);
  border-radius: clamp(14px, 1.8vmin, 26px);
  background:
    linear-gradient(160deg, rgba(18, 26, 42, 0.84), rgba(8, 12, 20, 0.88));
  border: 1px solid rgba(245, 185, 66, 0.22);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(90, 176, 255, 0.06) inset,
    0 0 60px rgba(245, 185, 66, 0.05) inset;
  transform: scale(0.965) translateY(10px);
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.modal--aberto .dash__moldura {
  transform: scale(1) translateY(0);
}

/* linha luminosa no topo da moldura (mesma linguagem do modal de perfil) */
.dash__moldura::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(to right,
    transparent, rgba(245, 185, 66, 0.55), transparent);
  z-index: 2;
}

.dash__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vmin, 28px);
  padding: clamp(10px, 1.6vmin, 22px) clamp(18px, 2.6vmin, 40px);
  border-bottom: 1px solid rgba(90, 176, 255, 0.12);
  flex-shrink: 0;
}

.dash__eyebrow {
  display: block;
  font-size: clamp(11px, 1.3vmin, 20px);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--cor-dourado);
  margin-bottom: 0.3em;
}

.dash__titulo {
  font-size: clamp(20px, 2.6vmin, 40px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

/* botão fechar fica posicionado em fluxo (não absoluto) neste modal */
.dash__fechar {
  position: static;
  flex-shrink: 0;
}

.dash__corpo {
  position: relative;
  flex: 1;
  min-height: 0;
  /* fundo no tom do painel para transição suave ao carregar a dashboard */
  background: #050a14;

}

.dash__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #050a14;
}

/* indicador de carregamento */
.dash__loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vmin, 26px);
  background: #050a14;
  transition: opacity 0.4s ease, visibility 0.4s;
}

.dash__loading--oculto {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.dash__spinner {
  width: clamp(36px, 5vmin, 64px);
  height: clamp(36px, 5vmin, 64px);
  border-radius: 50%;
  border: 3px solid rgba(245, 185, 66, 0.15);
  border-top-color: var(--cor-dourado);
  animation: girar 1s linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

.dash__loading-texto {
  font-size: clamp(12px, 1.5vmin, 22px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

/* ============================ Modal: Escalas do Mês ============================
   Reaproveita .dash__moldura, .dash__topo, .dash__fechar, .dash__iframe,
   .dash__loading e .dash__spinner definidos acima. */

.escalas__corpo {
  display: grid;
  grid-template-columns: clamp(273px, 23.1vw, 441px) 1fr;
  flex: 1;
  min-height: 0;
  background: #050a14;
}

/* ---- Coluna esquerda: lista de escalas ---- */

.escalas__coluna-lista {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid rgba(90, 176, 255, 0.12);
}

.escalas__rotulo {
  padding: clamp(12px, 1.8vmin, 24px) clamp(16px, 2.2vmin, 32px)
           clamp(8px, 1.2vmin, 16px);
  font-size: clamp(11px, 1.3vmin, 19px);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cor-dourado-quente);
  flex-shrink: 0;
}

.escalas__lista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: clamp(8px, 1.2vmin, 16px) clamp(16px, 2.2vmin, 32px)
           clamp(16px, 2.2vmin, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.1vmin, 16px);
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 185, 66, 0.35) transparent;
}

.escalas__card {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vmin, 20px);
  width: 100%;
  padding: clamp(12px, 1.6vmin, 22px) clamp(14px, 1.8vmin, 24px);
  text-align: left;
  background: rgba(90, 176, 255, 0.05);
  border: 1px solid rgba(90, 176, 255, 0.16);
  border-radius: clamp(8px, 1vmin, 14px);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease,
              box-shadow 0.25s ease, transform 0.25s ease;
}

.escalas__card:hover,
.escalas__card:focus-visible {
  background: rgba(245, 185, 66, 0.07);
  border-color: rgba(245, 185, 66, 0.45);
  transform: translateY(-1px);
  outline: none;
}

.escalas__card--ativo,
.escalas__card--ativo:hover,
.escalas__card--ativo:focus-visible {
  background: rgba(245, 185, 66, 0.1);
  border-color: var(--cor-dourado);
  box-shadow: 0 0 18px rgba(245, 185, 66, 0.18) inset,
              0 4px 18px rgba(0, 0, 0, 0.35);
}

.escalas__card-icone {
  color: var(--cor-dourado);
  flex-shrink: 0;
  display: inline-flex;
}

.escalas__card-nome {
  font-size: clamp(14px, 1.6vmin, 24px);
  font-weight: 300;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.escalas__lista-aviso {
  padding: clamp(12px, 1.6vmin, 22px);
  font-size: clamp(13px, 1.5vmin, 21px);
  color: var(--cor-texto-suave);
  text-align: center;
}

/* ---- Coluna direita: viewer do PDF ---- */

.escalas__viewer {
  position: relative;
  min-height: 0;
  background: #050a14;
}

/* estado (vazio / erro / config pendente) no lugar do iframe */
.escalas__estado {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vmin, 22px);
  text-align: center;
  padding: clamp(20px, 3vmin, 48px);
}

.escalas__estado-titulo {
  margin: 0;
  font-size: clamp(18px, 2.2vmin, 32px);
  font-weight: 600;
  color: var(--cor-dourado-quente);
}

.escalas__estado-texto {
  margin: 0;
  font-size: clamp(13px, 1.6vmin, 23px);
  color: var(--cor-texto-suave);
  max-width: 46ch;
}

.escalas__retry {
  padding: clamp(8px, 1.2vmin, 14px) clamp(20px, 2.4vmin, 36px);
  background: transparent;
  border: 1px solid rgba(245, 185, 66, 0.5);
  border-radius: clamp(8px, 1vmin, 14px);
  color: var(--cor-dourado);
  font: inherit;
  font-size: clamp(12px, 1.4vmin, 20px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.escalas__retry:hover,
.escalas__retry:focus-visible {
  background: rgba(245, 185, 66, 0.12);
  border-color: var(--cor-dourado);
  outline: none;
}

/* ============================ Modal: Links Úteis ============================
   Reaproveita .dash__moldura/topo/fechar, .escalas__rotulo e
   .escalas__card/lista definidos acima. */

/* moldura maior: prioriza a altura para o mockup do celular */
#modal-links .dash__moldura {
  width: min(90vw, 2600px);
  height: min(96vh, 1700px);
}

.links__corpo {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  background: #050a14;
}

/* ---- Coluna 1: seções de links ---- */

.links__coluna {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid rgba(90, 176, 255, 0.12);
}

/* cada seção ocupa 1/3 da coluna e rola internamente se estourar */
.links__secao {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 0;
}

.links__secao + .links__secao {
  border-top: 1px solid rgba(90, 176, 255, 0.08);
}

.links__lista {
  padding-top: clamp(6px, 0.9vmin, 12px);
  padding-bottom: clamp(10px, 1.4vmin, 20px);
}

/* ---- Cards de formulários: destaque principal da coluna ---- */
.links__card--form {
  padding: clamp(14px, 1.9vmin, 26px) clamp(16px, 2vmin, 28px);
  background: linear-gradient(140deg,
    rgba(245, 185, 66, 0.14), rgba(245, 185, 66, 0.03) 55%);
  border: 1px solid rgba(245, 185, 66, 0.4);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.35),
    0 0 22px rgba(245, 185, 66, 0.08) inset;
}

.links__card--form:hover,
.links__card--form:focus-visible {
  border-color: var(--cor-dourado);
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.45),
    0 0 30px rgba(245, 185, 66, 0.18);
}

/* seta: aparece acesa no card ativo, apagada nos demais */
.links__card-seta {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--cor-dourado);
  opacity: 0.25;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.links__card--form:hover .links__card-seta {
  opacity: 0.6;
}

/* card do form aberto no mockup: destaque máximo */
.links__card--form.escalas__card--ativo {
  background: linear-gradient(140deg,
    rgba(245, 185, 66, 0.26), rgba(245, 185, 66, 0.06) 60%);
  border-color: var(--cor-dourado);
  box-shadow:
    0 8px 26px rgba(0, 0, 0, 0.5),
    0 0 34px rgba(245, 185, 66, 0.22),
    0 0 22px rgba(245, 185, 66, 0.14) inset;
}

.links__card--form.escalas__card--ativo .links__card-seta {
  opacity: 1;
  transform: translateX(3px);
  filter: drop-shadow(0 0 6px rgba(245, 185, 66, 0.6));
}

.links__card--form .escalas__card-nome {
  font-size: clamp(17px, 2vmin, 30px);
  font-weight: 500;
  color: var(--cor-dourado-quente);
  white-space: normal;      /* títulos longos podem quebrar linha */
  line-height: 1.25;
}

/* ---- "Outros Links": cards simples, visual subordinado ---- */
.links__card--simples {
  padding: clamp(9px, 1.2vmin, 16px) clamp(14px, 1.8vmin, 24px);
  text-decoration: none;
  opacity: 0.9;
}

.links__card--simples:hover,
.links__card--simples:focus-visible {
  opacity: 1;
}

.links__card--simples .escalas__card-nome {
  font-size: clamp(15px, 1.75vmin, 26px);
}

/* ---- Seção: Aplicativo de Permutas ---- */

.links__permutas {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(12px, 1.6vmin, 24px) clamp(16px, 2.2vmin, 32px);
}

/* card de destaque: borda com gradiente dourado + vidro escuro */
.links__permutas-card {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vmin, 20px);
  min-height: 100%;           /* pode crescer; a seção rola se faltar altura */
  height: auto;
  padding: clamp(10px, 1.6vmin, 22px);
  border-radius: clamp(12px, 1.6vmin, 22px);
  border: 1px solid transparent;
  background:
    linear-gradient(155deg, rgba(30, 40, 62, 0.75), rgba(10, 14, 24, 0.85))
      padding-box,
    linear-gradient(135deg, rgba(245, 185, 66, 0.55), rgba(90, 176, 255, 0.18) 60%)
      border-box;
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.45),
    0 0 34px rgba(245, 185, 66, 0.06) inset;
}

.links__permutas-app {
  width: 26%;
  height: auto;
  object-fit: contain;
  border-radius: clamp(10px, 1.3vmin, 18px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.55),
    0 0 26px rgba(90, 176, 255, 0.1);
  flex-shrink: 1;
}

.links__permutas-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.2vmin, 18px);
  min-width: 0;
  text-align: center;
}

.links__permutas-eyebrow {
  font-size: clamp(11px, 1.25vmin, 18px);
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--cor-azul-eletrico);
  text-shadow: 0 0 14px rgba(90, 176, 255, 0.5);
}

.links__permutas-titulo {
  margin: 0;
  padding: 0;
  font-size: clamp(18px, 2.3vmin, 36px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(120deg,
    var(--cor-dourado-quente) 10%, var(--cor-dourado) 55%,
    #fff3d6 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.links__permutas-desc {
  margin: 0;
  font-size: clamp(13px, 1.5vmin, 22px);
  font-weight: 300;
  line-height: 1.45;
  color: var(--cor-texto-suave);
  max-width: 40ch;
}

.links__permutas-qrcode {
  width: clamp(96px, 11vmin, 190px);
  height: auto;
  padding: clamp(6px, 0.9vmin, 12px);
  background: #fff;
  border-radius: clamp(8px, 1.1vmin, 16px);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.45),
    0 0 22px rgba(245, 185, 66, 0.12);
}

/* ---- Coluna 2: mockup de celular ---- */

.links__dispositivo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vmin, 22px);
  min-height: 0;
  min-width: 0;
  padding: clamp(12px, 1.8vmin, 28px);
}

.links__form-titulo {
  margin: 0;
  font-size: clamp(14px, 1.6vmin, 24px);
  font-weight: 600;
  color: var(--cor-dourado-quente);
  text-align: center;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* ---- Mockup de celular: proporção real ~9:19.5, corpo com
        moldura metálica, botões laterais e punch-hole ---- */
.links__celular {
  --raio: clamp(30px, 4vmin, 56px);
  --borda: clamp(7px, 0.9vmin, 12px);
  position: relative;
  flex: 1;
  min-height: 0;
  aspect-ratio: 9 / 15.79;
  max-width: 100%;
  box-sizing: border-box;
  border: var(--borda) solid #141a26;
  border-radius: var(--raio);
  background: #141a26;
  /* aro metálico externo */
  outline: 2px solid rgba(245, 185, 66, 0.35);
  outline-offset: 1px;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 46px rgba(245, 185, 66, 0.08);
}

/* botão power (direita) */
.links__celular::before {
  content: "";
  position: absolute;
  right: calc(-1 * var(--borda) - 3px);
  top: 22%;
  width: 3px;
  height: 11%;
  border-radius: 2px;
  background: linear-gradient(#3a4460, #2a3448);
}

/* botões de volume (esquerda) */
.links__celular::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--borda) - 3px);
  top: 18%;
  width: 3px;
  height: 18%;
  border-radius: 2px;
  background: linear-gradient(#3a4460, #2a3448);
  box-shadow: 0 calc(clamp(30px, 4vmin, 56px)) 0 0 #2e3850;
}

/* câmera punch-hole */
.links__celular-notch {
  position: absolute;
  top: clamp(6px, 1vmin, 14px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(10px, 1.3vmin, 18px);
  height: clamp(10px, 1.3vmin, 18px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2a3448, #05070c 70%);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
  z-index: 2;
}

.links__celular-tela {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--raio) - var(--borda));
  background: #fff;   /* forms ficam nítidos sobre fundo claro */
}

.links__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* estados (sem forms / link inválido) dentro da tela do celular */
.links__estado {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vmin, 16px);
  text-align: center;
  padding: clamp(14px, 2vmin, 28px);
  background: linear-gradient(160deg, #101828, #050a14);
  color: var(--cor-texto);
}

.links__estado-titulo {
  margin: 0;
  font-size: clamp(14px, 1.7vmin, 24px);
  font-weight: 600;
  color: var(--cor-dourado-quente);
}

.links__estado-texto {
  margin: 0;
  font-size: clamp(12px, 1.4vmin, 19px);
  color: var(--cor-texto-suave);
}

/* ============================ Modal "Em breve" ============================ */

.embreve__caixa {
  grid-template-columns: 1fr;
  width: min(640px, 90vw);
  min-height: 0;
  max-height: none;
  text-align: center;
}

.embreve__conteudo {
  padding: clamp(14px, 2.4vmin, 32px) clamp(8px, 1.4vmin, 20px);
}

.embreve__conteudo .modal__sigla { margin-bottom: 0.6em; }

.embreve__texto {
  margin-top: clamp(12px, 2vmin, 24px);
  margin-bottom: 0;
  color: var(--cor-texto-suave);
}

/* ============================ Reduced motion ============================ */

@media (prefers-reduced-motion: reduce) {
  .flutuador,
  .glow--halo,
  .glow--nucleo,
  .crest--clicado {
    animation: none !important;
  }

  .glow--halo { opacity: 0.85; }
  .glow--nucleo { opacity: 0.9; }
  .glow--flicker { opacity: 0.28; }

  .reflexo { animation: none; opacity: 0; }

  /* sirene estática: vermelho baixo fixo (sem mistura com o azul) */
  .sirene__facho { animation: none; opacity: 0; }
  .sirene__facho--vermelho { opacity: 0.18; }

  /* brilho varrendo os botões desativado */
  .menu__botao::after { animation: none; opacity: 0; }

  /* reflexo de sirene nos botões estático: vermelho baixo */
  .menu__botao::before { animation: none; opacity: 0.18; }

  .crest,
  .brasao--unidade,
  .menu__botao,
  .btn-tela-cheia,
  .modal,
  .modal__caixa,
  .dash__moldura,
  .dash__loading,
  .dash__spinner,
    .carrossel__slide,
    .carrossel__ponto,
    .escalas__card,
    .escalas__retry,
    .links__celular,
    .modal__fechar {
    transition: none;
  }

  .dash__spinner { animation: none; }
}

/* ============================ Telas estreitas (fallback) ============================ */

@media (max-width: 720px) {
  :root {
    --tam-cpme: clamp(140px, 30vmin, 220px);
    --tam-unidade: clamp(96px, 20vmin, 160px);
  }

  .palco__unidades { gap: clamp(12px, 3vw, 28px); }

  /* relógio, data e botão de tela cheia ficam fora do mobile */
  .topo__relogio { display: none; }
}

/* Modal empilhado em telas estreitas */
@media (max-width: 900px) {
  .modal__caixa {
    grid-template-columns: 1fr;
    max-height: 92vh;
    overflow-y: auto;
  }

  .carrossel { min-height: clamp(200px, 38vmin, 340px); }

  .modal__texto { overflow: visible; }

  /* Escalas: lista acima, viewer abaixo */
  .escalas__corpo {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    overflow-y: auto;
  }

  .escalas__coluna-lista {
    border-right: 0;
    border-bottom: 1px solid rgba(90, 176, 255, 0.12);
  }

  .escalas__lista { max-height: 30vh; }

  .escalas__viewer { min-height: 50vh; }

  /* Links Úteis: colunas empilham, celular vai para baixo */
  .links__corpo {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .links__coluna {
    border-right: 0;
    border-bottom: 1px solid rgba(90, 176, 255, 0.12);
  }

  .links__secao { flex: none; }

  .links__dispositivo { min-height: 80vh; }
}