/* Secretaria Acadêmica — estilo único do site */

/*
  PALETA — um sistema, não uma coleção de cores bonitas.
  Organizada em 4 camadas e distribuída pela regra 60-30-10:
    60% neutras (fundos, cartões, leitura)
    30% marca (faixa do topo, horário em destaque, rodapé)
    10% acento (botões principais, links, avisos em destaque)
  Todo par texto/fundo passa no teste de contraste (WCAG AA):
  supabase/testes/contraste.test.ts lê as cores DESTE bloco.
*/
:root {
  /* CAMADA 1 · MARCA — o vermelho da Etec. Preserva-se. */
  --marca: #B3121A;
  --marca-escura: #8E0E14;       /* hover e blocos sobre o vermelho */
  --marca-clara: #FBEBEC;        /* tinta de fundo */
  --marca-borda: #F0C4C7;
  --sobre-marca: #FFFFFF;        /* texto em cima do vermelho: o único branco puro */
  --sobre-marca-suave: #FBE3E4;  /* texto de apoio em cima do vermelho */

  /* CAMADA 2 · FEEDBACK — a situação das coisas, nunca decoração */
  --sucesso-fundo: #E6F2EA;
  --sucesso-texto: #1E6B3A;
  --info-fundo: #E8EEF8;
  --info-texto: #234B8C;
  --alerta-fundo: #FFF4DC;
  --alerta-texto: #6E4A00;
  --erro-fundo: #FBEBEC;
  --erro-texto: #8E0E14;

  /* CAMADA 3 · NEUTRAS — escada de cinzas quentes, puxados para o vermelho da marca.
     Nada de #000 nem #FFF puros no layout: cansam a vista. */
  --cinza-50: #FFFDFC;   /* cartões e campos */
  --cinza-100: #F7F5F3;  /* fundo da tela */
  --cinza-200: #F0EDEA;  /* áreas secundárias, chips, trilhos */
  --cinza-300: #E6E1DD;  /* bordas de cartão, separadores */
  --cinza-400: #CDC6C0;  /* separadores fortes */
  --cinza-500: #857D76;  /* bordas de campo e indicadores (3:1) */
  --cinza-600: #6E6660;
  --cinza-700: #5A534E;  /* texto secundário */
  --cinza-800: #433D39;  /* texto de apoio */
  --cinza-900: #1C1917;  /* títulos e texto: o "preto" do site */

  /* CAMADA 4 · INTERATIVAS — ação principal (sólida) e alternativa (contorno) */
  --acao: var(--marca);
  --acao-hover: var(--marca-escura);
  --acao-texto: var(--sobre-marca);
  --acao-alt: var(--marca);
  --acao-alt-hover: var(--marca-clara);
  --foco: var(--marca);

  /* PAPÉIS — o resto do CSS usa só estes nomes */
  --fundo: var(--cinza-100);
  --superficie: var(--cinza-50);
  --texto: var(--cinza-900);
  --texto-2: var(--cinza-800);
  --suave: var(--cinza-700);
  --linha: var(--cinza-300);
  --linha-2: var(--cinza-200);
  --fundo-2: var(--cinza-200);
  --fundo-3: var(--cinza-200);
  --campo-borda: var(--cinza-500);
  --escuro: var(--cinza-900);
  --rodape-texto: #BDB6AF;
  --rodape-linha: var(--cinza-800);
  --sombra: rgba(28, 25, 23, 0.12);
  --veu: rgba(28, 25, 23, 0.72);
  /* apelidos antigos */
  --vermelho: var(--marca);
  --vermelho-escuro: var(--marca-escura);
  --vermelho-claro: var(--marca-clara);
  --vermelho-borda: var(--marca-borda);

  --titulo: 'Archivo', system-ui, sans-serif;
  --corpo: 'Public Sans', system-ui, sans-serif;
  --raio: 16px;
  --largura: 1136px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--corpo);
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex-grow: 1; }
h1, h2, h3 { font-family: var(--titulo); margin: 0; line-height: 1.12; }
p { margin: 0; }
a { color: var(--vermelho); }
a:hover { color: var(--vermelho-escuro); }
button { font-family: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--vermelho); outline-offset: 2px; }

.container { width: min(var(--largura), 100% - 32px); margin-inline: auto; }

.pular {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  background: var(--texto); color: var(--sobre-marca); padding: 10px 14px; border-radius: 8px;
}
.pular:focus { top: 8px; color: var(--sobre-marca); }

/* ---------- Faixa e cabeçalho ---------- */
.faixa { background: var(--vermelho); color: var(--sobre-marca); font-size: 13px; font-weight: 500; }
.faixa-dentro { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faixa-contato { display: flex; gap: 24px; }

.cabecalho { border-bottom: 1px solid var(--linha); background: var(--superficie); position: sticky; top: 0; z-index: 20; }
.cabecalho-dentro { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marca { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--texto); }
.marca:hover { color: var(--texto); }
.marca-selo {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px;
  background: var(--vermelho); color: var(--sobre-marca);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--titulo); font-weight: 800; font-size: 21px;
}
.marca-texto { display: flex; flex-direction: column; gap: 2px; }
.marca-texto strong { font-family: var(--titulo); font-size: 19px; font-weight: 700; }
.marca-texto span { font-size: 13px; color: var(--suave); }

.menu { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.menu a {
  padding: 12px 16px; border-radius: 8px; font-size: 15px; font-weight: 600;
  text-decoration: none; color: var(--texto);
}
.menu a:hover { background: var(--fundo-2); color: var(--texto); }
.menu a[aria-current="page"] { background: var(--vermelho-claro); color: var(--vermelho); }
.menu-botao {
  display: none; width: 48px; height: 48px; border-radius: 10px;
  border: 1px solid var(--linha); background: var(--superficie); color: var(--texto);
  align-items: center; justify-content: center; cursor: pointer;
}

/* ---------- Pedaços comuns ---------- */
.secao { padding-top: 56px; }
.secao-ultima { padding-bottom: 72px; }
.secao-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.secao-topo h2 { font-size: 32px; font-weight: 800; }
.secao-topo p { font-size: 17px; color: var(--suave); margin-top: 8px; }

.cartao { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); }
.cartao-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cartao-titulo { display: flex; align-items: center; gap: 12px; }
.cartao-titulo h2 { font-size: 22px; font-weight: 700; }
.bolinha-icone {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px;
  background: var(--vermelho-claro); color: var(--vermelho);
  display: flex; align-items: center; justify-content: center;
}
.rotulo { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--suave); }
.chip { display: inline-block; padding: 3px 8px; border-radius: 6px; background: var(--fundo-3); font-size: 12px; font-weight: 600; color: var(--texto-2); }
.chip-vermelho { background: var(--vermelho-claro); color: var(--vermelho); font-size: 13px; font-weight: 700; padding: 5px 10px; }
.nota {
  padding: 16px 20px; border-radius: 12px; background: var(--fundo-2);
  font-size: 15px; color: var(--texto-2); display: flex; gap: 12px; align-items: center;
}
.nota svg { color: var(--vermelho); flex-shrink: 0; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 12px 18px; border-radius: 10px; border: 0;
  background: var(--vermelho); color: var(--sobre-marca); font-size: 15px; font-weight: 700;
  text-decoration: none; cursor: pointer;
}
.botao:hover { background: var(--vermelho-escuro); color: var(--sobre-marca); }

.migalha { font-size: 14px; color: var(--suave); }
.pagina { display: flex; flex-direction: column; gap: 28px; padding-bottom: 72px; }
.cabeca-pagina { padding-top: 48px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.cabeca-pagina h1 { font-size: 40px; font-weight: 800; margin-top: 10px; }
.cabeca-pagina p { font-size: 17px; color: var(--suave); margin-top: 10px; }

.alternador { display: inline-flex; align-self: flex-start; gap: 6px; padding: 6px; border-radius: 12px; background: var(--fundo-2); flex-wrap: wrap; }
.alternador button {
  min-height: 44px; padding: 10px 22px; border-radius: 8px; border: 0; background: transparent;
  color: var(--texto); font-size: 15px; font-weight: 700; cursor: pointer;
}
.alternador button[aria-pressed="true"] { background: var(--vermelho); color: var(--sobre-marca); }

.pilulas { display: flex; gap: 8px; flex-wrap: wrap; }
.pilulas button {
  min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--linha);
  background: var(--superficie); color: var(--texto); font-size: 15px; font-weight: 700; cursor: pointer;
}
.pilulas button[aria-pressed="true"] { background: var(--vermelho); border-color: var(--vermelho); color: var(--sobre-marca); }

.video {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  background: var(--escuro);
}
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-vazio {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  color: var(--rodape-texto); font-size: 15px; font-weight: 600; text-align: center; padding: 16px;
}
.video-play {
  width: 76px; height: 76px; border-radius: 999px; background: var(--vermelho); color: var(--sobre-marca);
  display: flex; align-items: center; justify-content: center;
}

.passos { list-style: none; margin: 0; padding: 0; }
.passos li { display: flex; gap: 16px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--linha-2); }
.numero {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 999px; background: var(--marca-clara); color: var(--marca);
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700;
}
.passos li span:last-child { padding-top: 3px; }

/* ---------- Início: banners ---------- */
.banner {
  min-height: 340px; border-radius: var(--raio); padding: 48px 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.banner-texto { max-width: 560px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.banner-etiqueta { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.banner-titulo { font-size: 40px; font-weight: 800; line-height: 1.08; }
.banner p { font-size: 18px; }
.banner .botao { margin-top: 6px; }
.banner-imagem {
  width: 400px; flex-shrink: 0; aspect-ratio: 400 / 244; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600;
}
.banner-imagem img { width: 100%; height: 100%; object-fit: cover; }
.banner-imagem.vazia { border: 2px dashed currentColor; opacity: 0.8; }

.banner.tema-vermelho { background: var(--vermelho); color: var(--sobre-marca); }
.banner.tema-vermelho p, .banner.tema-vermelho .banner-imagem { color: var(--sobre-marca-suave); }
.banner.tema-vermelho .banner-etiqueta { background: var(--superficie); color: var(--vermelho); }
.banner.tema-vermelho .botao { background: var(--superficie); color: var(--vermelho); }
.banner.tema-vermelho .botao:hover { background: var(--vermelho-claro); }
.banner.tema-escuro { background: var(--escuro); color: var(--sobre-marca); }
.banner.tema-escuro p, .banner.tema-escuro .banner-imagem { color: var(--rodape-texto); }
.banner.tema-escuro .banner-etiqueta { background: var(--vermelho); color: var(--sobre-marca); }
.banner.tema-claro { background: var(--fundo-2); color: var(--texto); }
.banner.tema-claro p { color: var(--texto-2); }
.banner.tema-claro .banner-imagem { color: var(--suave); }
.banner.tema-claro .banner-etiqueta { background: var(--vermelho-claro); color: var(--vermelho); }

.banner-controles { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.pontos { display: flex; gap: 4px; align-items: center; }
.pontos button {
  width: 32px; height: 44px; border: 0; padding: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pontos button::before { content: ''; display: block; width: 10px; height: 10px; border-radius: 999px; background: var(--cinza-500); transition: width 0.2s; }
.pontos button[aria-current="true"]::before { width: 28px; background: var(--vermelho); }
.setas { display: flex; gap: 8px; align-items: center; }
.setas span { font-size: 14px; color: var(--suave); margin-right: 8px; }
.redondo {
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--linha); background: var(--superficie); color: var(--texto);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.redondo:hover { background: var(--fundo-2); }

/* ---------- Início: atendimento e avisos ---------- */
.duas-colunas { display: grid; grid-template-columns: 5fr 7fr; gap: 24px; align-items: start; }
.atendimento { padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.turnos div { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--linha-2); }
.turnos div:last-child { border-bottom: 1px solid var(--linha-2); }
.turnos .rotulo { display: block; border: 0; padding: 0 0 8px; }
.turnos strong { font-weight: 600; text-align: right; }
.turnos .fechado strong { color: var(--vermelho); }
.contatos { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.contatos span { display: flex; align-items: center; gap: 10px; }
.contatos svg { color: var(--vermelho); flex-shrink: 0; }

.avisos { padding: 28px; scroll-margin-top: 110px; }
.avisos .cartao-cabeca { padding-bottom: 8px; }
.aviso { display: flex; gap: 18px; padding: 16px 0; border-top: 1px solid var(--linha-2); }
.aviso-data {
  width: 56px; flex-shrink: 0; align-self: flex-start; display: flex; flex-direction: column; align-items: center;
  padding: 8px 0; border-radius: 10px; background: var(--vermelho-claro); color: var(--vermelho);
}
.aviso-data.destaque { background: var(--vermelho); color: var(--sobre-marca); }
.aviso-data.sem-data { height: 56px; justify-content: center; padding: 0; }
.aviso-data strong { font-family: var(--titulo); font-size: 22px; font-weight: 800; line-height: 1; }
.aviso-data span { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; }
.aviso-corpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.aviso-titulo { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.aviso-titulo strong { font-size: 17px; }
.aviso-corpo p { font-size: 15px; color: var(--suave); }

/* ---------- Início: serviços ---------- */
.servicos { overflow: hidden; scroll-margin-top: 110px; }
.servico, .servicos-cabeca { display: grid; grid-template-columns: 5fr 7fr; gap: 8px 24px; padding: 18px 28px; align-items: center; }
.servicos-cabeca { padding-block: 14px; background: var(--fundo-2); }
.servico { border-top: 1px solid var(--linha-2); }
.servico-nome { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.servico-nome svg { color: var(--vermelho); flex-shrink: 0; }
.servico-como { color: var(--texto-2); }

/* ---------- Início: acesso rápido ---------- */
.tres-colunas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.atalho { padding: 28px; display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--texto); transition: border-color 0.15s; }
.atalho:hover { color: var(--texto); border-color: var(--vermelho-borda); }
.atalho-icone { width: 48px; height: 48px; border-radius: 12px; background: var(--marca-clara); color: var(--marca); display: flex; align-items: center; justify-content: center; }
.atalho strong { font-family: var(--titulo); font-size: 21px; }
.atalho p { font-size: 15px; color: var(--suave); }
.atalho em { font-style: normal; font-size: 15px; font-weight: 700; color: var(--vermelho); margin-top: auto; }

/* ---------- Horários ---------- */
.horarios-corpo { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; }
.turmas { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.turmas .rotulo { padding: 4px 8px 8px; }
.turmas button {
  text-align: left; padding: 14px 16px; border-radius: 10px; border: 1px solid transparent; background: var(--superficie);
  color: var(--texto); cursor: pointer; display: flex; flex-direction: column; gap: 4px;
}
.turmas button:hover { background: var(--fundo-2); }
.turmas button[aria-pressed="true"] { background: var(--vermelho-claro); border-color: var(--vermelho-borda); }
.turmas button strong { font-size: 16px; }
.turmas button span { font-size: 14px; color: var(--suave); }
.grade { overflow: hidden; }
.grade-cabeca { padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--linha); }
.grade-cabeca h2 { font-size: 24px; font-weight: 700; }
.grade-cabeca p { font-size: 15px; color: var(--suave); margin-top: 4px; }
.grade-linha { display: grid; grid-template-columns: 140px repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--linha-2); }
.grade-linha.cabeca { border-top: 0; background: var(--fundo-2); }
.grade-linha.cabeca span { padding: 12px; }
.grade-linha.cabeca span:first-child { padding-left: 16px; }
.grade-aula { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.grade-aula strong { font-size: 15px; }
.grade-aula span, .celula span { font-size: 13px; color: var(--suave); }
.celula-fora { padding: 10px 8px; border-left: 1px solid var(--linha-2); }
.celula { height: 100%; padding: 8px 10px; border-radius: 8px; background: var(--fundo-2); display: flex; flex-direction: column; gap: 2px; }
.celula strong { font-size: 14px; font-weight: 600; }
.intervalo { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--linha-2); background: var(--vermelho-claro); color: var(--vermelho); font-size: 14px; font-weight: 700; }
.intervalo span:first-child { width: 124px; }
.grade-dia { display: none; }
.dias { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 16px; border-bottom: 1px solid var(--linha); }
.dias button { min-height: 44px; border-radius: 8px; border: 1px solid var(--linha); background: var(--superficie); color: var(--texto); font-weight: 700; font-size: 14px; cursor: pointer; }
.dias button[aria-pressed="true"] { background: var(--vermelho); border-color: var(--vermelho); color: var(--sobre-marca); }
.dia-lista { list-style: none; margin: 0; padding: 0; }
.dia-lista li { display: flex; gap: 14px; padding: 14px 16px; border-top: 1px solid var(--linha-2); align-items: center; }
.dia-lista li:first-child { border-top: 0; }
.dia-lista .grade-aula { padding: 0; width: 110px; flex-shrink: 0; }
.dia-lista .celula { flex-grow: 1; }
.dia-lista li.intervalo-dia { background: var(--vermelho-claro); color: var(--vermelho); font-weight: 700; font-size: 14px; }

/* ---------- Tutoriais ---------- */
.tutoriais-corpo { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 24px; align-items: start; }
.lista-tutoriais { display: flex; flex-direction: column; gap: 10px; }
.lista-tutoriais button {
  text-align: left; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--linha); background: var(--superficie);
  cursor: pointer; display: flex; align-items: center; gap: 14px; color: var(--texto);
}
.lista-tutoriais button:hover { border-color: var(--vermelho-borda); }
.lista-tutoriais button[aria-pressed="true"] { background: var(--vermelho-claro); border-color: var(--vermelho-borda); }
.selo {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: var(--fundo-2); color: var(--vermelho);
  display: flex; align-items: center; justify-content: center; font-family: var(--titulo); font-size: 13px; font-weight: 800;
}
[aria-pressed="true"] .selo { background: var(--vermelho); color: var(--sobre-marca); }
.lista-tutoriais .item-texto { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; }
.lista-tutoriais .item-texto strong { font-size: 16px; }
.lista-tutoriais .item-texto span { font-size: 13px; color: var(--suave); }
.lista-tutoriais button > svg { color: var(--cinza-500); flex-shrink: 0; }
.tutorial { padding: 28px; display: flex; flex-direction: column; gap: 22px; scroll-margin-top: 110px; }
.tutorial h2 { font-size: 28px; font-weight: 800; margin-top: 10px; }

/* ---------- Catracas ---------- */
.catracas-topo { padding-top: 48px; display: flex; align-items: center; gap: 20px; }
.catracas-topo h1 { font-size: 40px; font-weight: 800; margin-top: 8px; }
.catracas-topo p { font-size: 17px; color: var(--suave); margin-top: 8px; }
.icone-grande { width: 64px; height: 64px; flex-shrink: 0; border-radius: 16px; background: var(--marca-clara); color: var(--marca); display: flex; align-items: center; justify-content: center; }
.catracas-corpo { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.video-rodape { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: 15px; }
.video-rodape span { color: var(--suave); }
.video-rodape a { font-weight: 700; display: inline-flex; gap: 6px; align-items: center; padding: 10px 0; }
.ativar { padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.ativar h2 { font-size: 22px; font-weight: 700; }
.ativar .passos li:first-child { border-top: 0; padding-top: 0; }
.bot-caixa { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: 12px; background: var(--fundo-2); }
.qrcode {
  width: 104px; height: 104px; flex-shrink: 0; border-radius: 8px; background: var(--superficie); overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 12px; font-weight: 600; color: var(--suave);
}
.qrcode.vazio { border: 2px dashed var(--campo-borda); }
.bot-caixa div { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; min-width: 0; }
.bot-caixa strong { font-size: 15px; overflow-wrap: anywhere; }
.recurso { padding: 24px; border-radius: var(--raio); background: var(--fundo-2); display: flex; flex-direction: column; gap: 10px; }
.recurso svg { color: var(--vermelho); }
.recurso strong { font-family: var(--titulo); font-size: 19px; }
.recurso p { font-size: 15px; color: var(--texto-2); }
.duvidas { overflow: hidden; }
.duvida + .duvida { border-top: 1px solid var(--linha-2); }
.duvida button {
  width: 100%; min-height: 60px; padding: 18px 24px; border: 0; background: var(--superficie); text-align: left; cursor: pointer;
  font-size: 17px; font-weight: 700; color: var(--texto); display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.duvida button span { font-size: 22px; color: var(--vermelho); flex-shrink: 0; }
.duvida p { padding: 0 24px 20px; color: var(--texto-2); }
.duvida p[hidden] { display: none; }

/* ---------- Links, informações e documentos ---------- */
.faixa a { color: var(--sobre-marca); text-decoration: none; }
.faixa a:hover { color: var(--sobre-marca); text-decoration: underline; }
.turnos .hoje strong { color: var(--vermelho); }
.turnos em {
  font-style: normal; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--vermelho); color: var(--sobre-marca); font-size: 12px; font-weight: 700;
}
.contatos a { display: flex; align-items: center; gap: 10px; color: var(--texto); text-decoration: none; }
.contatos a:hover { color: var(--vermelho); }

.informacao { padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.informacao h3 { font-size: 20px; font-weight: 700; }
.informacao ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.informacao li { position: relative; padding-left: 18px; font-size: 15px; color: var(--texto-2); }
.informacao li::before {
  content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 999px; background: var(--vermelho);
}
#informacoes { scroll-margin-top: 110px; }

.subtitulo { font-size: 20px; font-weight: 700; margin: 40px 0 16px; }
.link-util {
  padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  text-decoration: none; color: var(--texto);
}
.link-util:hover { color: var(--texto); border-color: var(--vermelho-borda); }
.link-util .item-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.link-util .item-texto span { font-size: 14px; color: var(--suave); overflow-wrap: anywhere; }
.link-util > svg { color: var(--vermelho); flex-shrink: 0; }

.documento { padding: 28px; display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 110px; }
.documento h2 { font-size: 24px; font-weight: 700; }
.pdf-area { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pdf { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--fundo-2); border: 1px solid var(--linha); }
.pdf iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pdf-vazio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--suave); font-weight: 600; aspect-ratio: 16 / 9; }
.pdf-abrir { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; padding: 10px 0; }

.botao-contorno { background: var(--superficie); color: var(--vermelho); border: 2px solid var(--vermelho); align-self: flex-start; }
.botao-contorno:hover { background: var(--vermelho-claro); color: var(--vermelho-escuro); }
.botoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Início: links no topo ---------- */
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.links-topo { background: var(--fundo-2); border-bottom: 1px solid var(--linha); }
.links-topo-dentro { display: flex; gap: 8px; flex-wrap: wrap; padding-block: 12px; }
.link-topo {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px;
  border-radius: 999px; background: var(--superficie); border: 1px solid var(--linha);
  color: var(--texto); font-size: 15px; font-weight: 700; text-decoration: none;
}
.link-topo svg { color: var(--vermelho); }
.link-topo:hover { border-color: var(--vermelho); color: var(--vermelho); }

/* ---------- Início: horário em destaque ---------- */
.secao-primeira { padding-top: 32px; }
.atendimento-destaque {
  background: var(--vermelho); color: var(--sobre-marca); border-radius: var(--raio); padding: 32px;
  display: flex; flex-direction: column; gap: 24px;
}
.atendimento-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.atendimento-cabeca h2 { font-size: 28px; font-weight: 800; }
.titulo-com-selo { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.selo-agora {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 700; white-space: nowrap;
}
.selo-agora.aberto { background: var(--sucesso-fundo); color: var(--sucesso-texto); }
.selo-agora.fechado { background: var(--marca-escura); color: var(--sobre-marca); }
.selo-agora-ponto { width: 9px; height: 9px; border-radius: 999px; background: currentColor; }
.selo-agora.aberto .selo-agora-ponto { animation: pulso 2s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .selo-agora.aberto .selo-agora-ponto { animation: none; } }
.periodo-excecao { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 8px; background: var(--superficie); color: var(--vermelho); font-size: 13px; font-weight: 700; line-height: 1.35; }
.bolinha-branca { background: var(--superficie); color: var(--vermelho); width: 48px; height: 48px; }
.hoje-resumo { font-size: 18px; color: var(--sobre-marca-suave); }
.hoje-resumo strong { color: var(--sobre-marca); font-size: 20px; }
.dias-atendimento { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.dia-atendimento {
  background: var(--marca-escura); border: 1px solid var(--marca-escura);
  border-radius: 12px; padding: 18px 16px; display: flex; flex-direction: column; gap: 6px;
}
.dia-atendimento span { font-size: 15px; font-weight: 600; color: var(--sobre-marca-suave); display: flex; align-items: center; gap: 8px; }
.dia-atendimento strong { font-family: var(--titulo); font-size: 22px; font-weight: 800; line-height: 1.15; }
.dia-atendimento.hoje { background: var(--superficie); color: var(--texto); border-color: var(--sobre-marca); }
.dia-atendimento.excepcional { border: 2px dashed var(--sobre-marca-suave); }
.dia-atendimento.hoje.excepcional { border-color: var(--marca); }
.dia-nome { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dia-excepcional { font-size: 12px; font-weight: 700; color: var(--sobre-marca-suave); white-space: nowrap; }
.dia-atendimento.hoje .dia-excepcional { color: var(--marca); }
.dia-atendimento.hoje span { color: var(--vermelho); }
.dia-atendimento.hoje strong { color: var(--vermelho); }
.dia-atendimento em {
  font-style: normal; padding: 2px 8px; border-radius: 999px; background: var(--vermelho); color: var(--sobre-marca);
  font-size: 12px; font-weight: 700;
}
.atendimento-rodape { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; color: var(--sobre-marca-suave); align-items: center; }
.atendimento-contatos { display: flex; gap: 8px 20px; flex-wrap: wrap; margin-left: auto; }
.atendimento-contatos a { color: var(--sobre-marca); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.atendimento-contatos a:hover { color: var(--sobre-marca); text-decoration: underline; }

/* ---------- Carregando (enquanto o banco responde) ---------- */
.atendimento-destaque:empty, .mural:empty, #banner:empty, #documento:empty, #tutorial:empty, .lista-tutoriais:empty {
  min-height: 220px; border-radius: var(--raio);
  background: linear-gradient(90deg, var(--cinza-200) 0%, var(--cinza-100) 50%, var(--cinza-200) 100%);
  background-size: 200% 100%; animation: carregando 1.4s ease-in-out infinite;
}
.atendimento-destaque:empty { min-height: 300px; padding: 0; }
.mural:empty { display: block; }
@keyframes carregando { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .atendimento-destaque:empty, .mural:empty, #banner:empty, #documento:empty, #tutorial:empty, .lista-tutoriais:empty { animation: none; }
}

/* ---------- Início: mural de avisos ---------- */
#avisos { scroll-margin-top: 110px; }
.mural { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.aviso-cartao { border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; background: var(--superficie); display: flex; flex-direction: column; }
.aviso-faixa {
  display: flex; align-items: center; gap: 10px; padding: 14px 20px;
  background: var(--vermelho-claro); color: var(--vermelho); font-size: 14px; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
}
.aviso-cartao.destaque { border-color: var(--vermelho); box-shadow: 0 0 0 1px var(--vermelho); }
.aviso-cartao.destaque .aviso-faixa { background: var(--vermelho); color: var(--sobre-marca); }
.aviso-quando { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.aviso-texto { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.aviso-texto h3 {
  font-size: 21px; font-weight: 800; line-height: 1.2;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.aviso-resumo {
  font-size: 16px; color: var(--texto-2); white-space: pre-line;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}
.aviso-meta { display: flex; align-items: center; gap: 8px; color: var(--suave); font-size: 14px; }
.aviso-meta .aviso-quando { margin-left: 0; }
.aviso-acoes { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding-top: 4px; }
.aviso-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; padding: 8px 0; }
.ler-mais {
  display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 8px 0; margin-left: auto;
  border: 0; background: transparent; color: var(--acao); font: inherit; font-weight: 700; cursor: pointer;
}
.ler-mais:hover { color: var(--acao-hover); text-decoration: underline; }
.ler-mais[hidden] { display: none; }

/* O cartaz cabe inteiro num quadro de tamanho fixo; as sobras mostram o próprio cartaz desfocado. */
.aviso-imagem {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0;
  overflow: hidden; background: var(--fundo-2); cursor: zoom-in;
}
.aviso-imagem img { position: absolute; inset: 0; width: 100%; height: 100%; }
.aviso-imagem-fundo { object-fit: cover; filter: blur(18px) saturate(1.1); transform: scale(1.15); opacity: 0.55; }
.aviso-imagem-cartaz { object-fit: contain; }

/* ---------- Aviso em janela (Ler mais / aviso ao entrar) ---------- */
.janela-aviso {
  border: 0; padding: 0; border-radius: var(--raio); background: var(--superficie);
  width: min(720px, calc(100% - 24px)); max-height: calc(100vh - 32px); overflow: hidden;
}
.janela-aviso[open] { display: flex; flex-direction: column; }
.janela-aviso::backdrop { background: var(--veu); }
.aviso-detalhe { overflow-y: auto; }
.aviso-detalhe-fechar { position: absolute; top: 12px; right: 12px; z-index: 2; box-shadow: 0 2px 8px var(--sombra); }
.aviso-detalhe-imagem { display: block; background: var(--fundo-2); cursor: zoom-in; }
.aviso-detalhe-imagem img { width: 100%; max-height: 70vh; object-fit: contain; }
.aviso-detalhe-texto { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.aviso-detalhe-texto h2 { font-size: 26px; font-weight: 800; padding-right: 48px; }
.aviso-detalhe-texto p { font-size: 17px; color: var(--texto-2); white-space: pre-line; }
.aviso-detalhe-imagem + .aviso-detalhe-texto h2 { padding-right: 0; }

/* ---------- Página criada pelo painel ---------- */
#conteudo-pagina { display: flex; flex-direction: column; gap: 24px; }
.pagina-descricao { font-size: 17px; color: var(--texto-2); white-space: pre-line; max-width: 820px; }
.pagina-bloco { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.pagina-bloco h2 { font-size: 22px; font-weight: 700; }
.pagina-bloco p { color: var(--texto-2); white-space: pre-line; }
.pagina-links { display: flex; gap: 12px; flex-wrap: wrap; }
.pagina-links a { gap: 8px; }

/* ---------- Leitor de PDF (PDF.js) ---------- */
.leitor-pdf { display: flex; flex-direction: column; gap: 12px; }
.leitor-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.leitor-zoom { display: flex; align-items: center; gap: 8px; }
.leitor-zoom .redondo span { font-size: 22px; font-weight: 700; line-height: 1; }
.leitor-zoom .redondo:disabled { opacity: 0.35; cursor: default; }
.leitor-nivel { min-width: 48px; text-align: center; font-weight: 700; font-size: 15px; color: var(--texto-2); }
.leitor-estado { font-size: 14px; color: var(--suave); }
.leitor-estado[hidden], .leitor-rolagem[hidden] { display: none; }
.leitor-rolagem {
  overflow: auto; max-height: 80vh; border: 1px solid var(--linha); border-radius: 12px;
  background: var(--fundo-2); -webkit-overflow-scrolling: touch;
}
.leitor-paginas { width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.leitor-folha { display: block; width: 100%; height: auto; background: var(--superficie); box-shadow: 0 1px 4px var(--sombra); }

/* ---------- Rodapé ---------- */
.rodape { background: var(--escuro); color: var(--cinza-200); padding: 48px 0 28px; margin-top: 0; }
.rodape-colunas { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px 40px; font-size: 15px; }
.rodape-colunas strong { display: block; margin-bottom: 10px; }
.rodape-titulo { font-family: var(--titulo); font-size: 20px; }
.rodape-colunas p { color: var(--rodape-texto); line-height: 1.6; }
.rodape a { color: var(--rodape-texto); }
.rodape a:hover { color: var(--sobre-marca); }
.rodape a.rodape-painel { display: block; margin-bottom: 10px; color: var(--cinza-200); font-weight: 700; text-decoration: none; }
.rodape a.rodape-painel:hover { color: var(--sobre-marca); text-decoration: underline; }
.rodape-base { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--rodape-linha); display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; font-size: 13px; color: var(--rodape-texto); }

/* =====================  Tablet  ===================== */
@media (max-width: 1024px) {
  .banner { padding: 40px; }
  .banner-imagem { width: 300px; }
  .banner-titulo { font-size: 34px; }
  .mural { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dia-atendimento strong { font-size: 18px; }
  .duas-colunas, .catracas-corpo { grid-template-columns: minmax(0, 1fr); }
  .horarios-corpo { grid-template-columns: 260px minmax(0, 1fr); }
  .tutoriais-corpo { grid-template-columns: 300px minmax(0, 1fr); }
  .grade-linha { grid-template-columns: 110px repeat(5, minmax(0, 1fr)); }
}

/* Menu vira botão */
@media (max-width: 900px) {
  .menu-botao { display: flex; }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 4px; padding: 12px 16px 20px;
    background: var(--superficie); border-bottom: 1px solid var(--linha); box-shadow: 0 12px 24px var(--sombra);
  }
  .menu a { padding: 14px 16px; font-size: 16px; }
  .menu-aberto .menu { display: flex; }
  .cabecalho-dentro { min-height: 72px; }
  .horarios-corpo, .tutoriais-corpo { grid-template-columns: minmax(0, 1fr); }
  .turmas { flex-direction: row; flex-wrap: wrap; padding: 12px; }
  .turmas .rotulo { width: 100%; padding: 4px 4px 0; }
  .turmas button { flex: 1 1 200px; border-color: var(--linha); }
  .tres-colunas { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .servicos-cabeca { display: none; }
  .servico { grid-template-columns: minmax(0, 1fr); padding: 18px 20px; }
  .servico-nome { grid-column: 1; }
  .servico-como { grid-column: 1 / -1; padding-left: 32px; font-size: 15px; }
}

/* =====================  Celular  ===================== */
@media (max-width: 700px) {
  .faixa-contato { display: none; }
  .faixa-dentro { font-size: 12px; min-height: 30px; }
  .marca-selo { width: 40px; height: 40px; font-size: 19px; }
  .marca-texto strong { font-size: 17px; }
  .secao { padding-top: 40px; }
  .secao-ultima { padding-bottom: 48px; }
  .secao-topo h2 { font-size: 26px; }
  .secao-topo p { font-size: 16px; }
  .cabeca-pagina, .catracas-topo { padding-top: 32px; }
  .cabeca-pagina h1, .catracas-topo h1 { font-size: 30px; }
  .cabeca-pagina p, .catracas-topo p { font-size: 16px; }
  .catracas-topo { align-items: flex-start; }
  .icone-grande { width: 52px; height: 52px; border-radius: 14px; }

  .banner { flex-direction: column; align-items: stretch; padding: 28px 24px; min-height: 0; gap: 24px; }
  .banner-titulo { font-size: 28px; }
  .mural { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .atendimento-destaque { padding: 22px 18px; gap: 18px; }
  .atendimento-cabeca h2 { font-size: 23px; }
  .dias-atendimento { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dia-atendimento { flex-direction: row; justify-content: space-between; align-items: center; padding: 12px 14px; }
  .dia-atendimento strong { font-size: 17px; white-space: nowrap; text-align: right; }
  .dia-atendimento { gap: 12px; }
  .atendimento-contatos { margin-left: 0; }
  .links-topo-dentro {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
    scroll-padding-inline: 16px; overscroll-behavior-x: contain;
  }
  .links-topo-dentro::-webkit-scrollbar { display: none; }
  .link-topo { flex-shrink: 0; scroll-snap-align: start; }
  .links-topo { position: relative; }
  .links-topo::before, .links-topo::after {
    position: absolute; top: 0; bottom: 0; width: 72px; pointer-events: none; opacity: 0; transition: opacity 0.2s;
    display: flex; align-items: center; font-size: 30px; font-weight: 700; color: var(--marca);
  }
  .links-topo::before { content: '‹'; left: 0; padding-left: 6px; background: linear-gradient(to right, var(--fundo-2) 35%, transparent); }
  .links-topo::after { content: '›'; right: 0; justify-content: flex-end; padding-right: 8px; background: linear-gradient(to left, var(--fundo-2) 35%, transparent); }
  .links-topo.mais-esquerda::before, .links-topo.mais-direita::after { opacity: 1; }
  .aviso-detalhe-texto { padding: 20px; }
  .aviso-detalhe-texto h2 { font-size: 22px; }
  .secao-primeira { padding-top: 20px; }
  .banner p { font-size: 16px; }
  .banner-imagem { width: 100%; }
  .banner-imagem.vazia { display: none; }

  .atendimento, .avisos, .ativar, .tutorial { padding: 20px; }
  .aviso { gap: 14px; }
  .atalho { padding: 22px; }

  .grade-semana { display: none; }
  .grade-dia { display: block; }
  .grade-cabeca { padding: 18px 20px; }
  .grade-cabeca .botao { width: 100%; }
  .alternador { display: flex; align-self: stretch; }
  .pagina { gap: 22px; padding-bottom: 48px; }
  .alternador button { flex: 1; padding-inline: 12px; }

  .tutorial h2 { font-size: 23px; }
  .duvida button { padding: 16px 18px; font-size: 16px; }
  .duvida p { padding: 0 18px 18px; }
  .bot-caixa { flex-direction: column; align-items: flex-start; }
  .rodape-colunas { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .informacao, .documento { padding: 20px; }
  .documento h2 { font-size: 20px; }
  .pdf { aspect-ratio: 3 / 4; }
  .subtitulo { margin-top: 32px; }
  .rodape { padding-top: 36px; }
}