/* I Fórum Catarinense de Comunidades Terapêuticas — estilos do site (sem CDN, CSP sem inline) */

/* ---------- Fonte ---------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/fontes/bricolage-grotesque.woff2") format("woff2-variations"), url("assets/fontes/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800; font-stretch: 75% 100%; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  --g: #007A3D;          /* verde principal (brasão de SC) */
  --g-d: #005C2E;        /* verde escuro */
  --flagred: #ED1C24;    /* vermelho oficial da bandeira (Pantone 485) */
  --err: #C8102E;
  --ink: #1C1B1F;
  --muted: #55595A;
  --bg: #FFFFFF;
  --alt: #F1F6F2;        /* fundo alternado, levemente verde */
  --line: #D6E0D9;       /* linhas decorativas */
  --field: #7B877F;      /* borda de campos: contraste >= 3:1 */
  --link: #007A3D;
  --accent: #005C2E;     /* data grande e números */
  --ic-telhado: #007A3D;
  --ic-ver: #ED1C24;
  --ic-bra: #FFFFFF;
  --ic-bra-borda: #005C2E;
  /* Fonte própria do projeto: Bricolage Grotesque (OFL), hospedada no site, em títulos e números */
  --display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --r: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #EEF2EF;
    --muted: #B3BDB6;
    --bg: #131815;
    --alt: #1A211C;
    --line: #2C3630;
    --field: #75837A;
    --link: #3DD17F;
    --accent: #3DD17F;
    --err: #FF6B7F;
    --ic-telhado: #3DD17F;
    --ic-ver: #E5384F;
    --ic-bra: #FFFFFF;
    --ic-bra-borda: #FFFFFF;
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; font: 1.0625rem/1.6 var(--sans); color: var(--ink); background: var(--bg); -webkit-text-size-adjust: 100%; }
a { color: var(--link); text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0; }
h2 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 24px; }
h3 { font-size: clamp(22px, 2.4vw, 27px); margin-bottom: 10px; }
h4 { font-size: 20px; margin-bottom: 10px; }
p { margin: 0 0 14px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }
.sec { padding: 80px 0; }
.sec--alt { background: var(--alt); }
.note { color: var(--muted); font-size: .9375rem; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; background: #fff; color: #000; padding: 8px; z-index: 9; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }

/* ---------- Ícone (casa + três pessoas), cores por tema ---------- */
.icone { display: block; flex: none; }
.icone__telhado { fill: none; stroke: var(--ic-telhado); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.icone__ver { fill: var(--ic-ver); }
.icone__bra { fill: var(--ic-bra); stroke: var(--ic-bra-borda); stroke-width: 4; }

/* ---------- Botões e links ---------- */
.btn {
  display: inline-block; background: var(--g); color: #fff !important; border: 2px solid var(--g);
  padding: 13px 24px; border-radius: 8px; font: 600 1.0625rem/1.2 var(--sans); text-decoration: none; cursor: pointer;
}
@media (hover: hover) { .btn:hover { background: var(--g-d); border-color: var(--g-d); } }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--link) !important; border-color: var(--link); }
@media (hover: hover) { .btn--ghost:hover { background: var(--g); border-color: var(--g); color: #fff !important; } }
.btn--sm { padding: 7px 14px; font-size: 15px; }
.link-forte { font-weight: 600; }

/* ---------- Cabeçalho ---------- */
.top { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); }
.top__in { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; min-height: 64px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand__txt { display: flex; flex-direction: column; font-size: 15px; line-height: 1.2; font-weight: 600; }
.brand__txt b { color: var(--link); font-weight: 800; }
nav { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
nav a { color: var(--ink); font-size: 15px; text-decoration: none; }
@media (hover: hover) { nav a:not(.btn):hover { color: var(--link); text-decoration: underline; } }

/* ---------- Herói: a data é o destaque ---------- */
.hero { padding: 64px 0 88px; border-bottom: 1px solid var(--line); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(24px, 2.9vw, 36px); max-width: 24ch; margin-bottom: 28px; }
.data { font-family: var(--display); font-weight: 600; color: var(--accent); font-size: clamp(60px, 7.6vw, 108px); line-height: .95; letter-spacing: -.025em; margin: 0 0 22px; }
.data time { display: block; }
@media (min-width: 901px) { .data time { white-space: nowrap; } }
.data__ano { display: block; font-size: .3em; letter-spacing: 0; color: var(--muted); margin-top: .35em; }
.detalhes { font-size: clamp(1.125rem, 1.9vw, 1.375rem); line-height: 1.45; margin-bottom: 30px; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-bottom: 18px; }
.situacao { color: var(--muted); font-size: 15px; margin: 0; }
.situacao span:empty { display: none; }
.hero__icone { width: clamp(150px, 23vw, 300px); height: auto; }

/* ---------- Sobre ---------- */
.sobre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px 48px; }
.sobre .texto { max-width: 64ch; }
.sobre__sub { margin-top: 34px; }
.lead { font-family: var(--display); font-size: clamp(1.25rem, 2.1vw, 1.5625rem); line-height: 1.4; margin-bottom: 20px; }

/* ---------- Passo a passo (linha do dia) ---------- */
.passos { list-style: none; margin: 0; padding: 0; }
.passo { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 22px; padding-bottom: 48px; }
.passo:last-child { padding-bottom: 0; }
.passo::before { content: ""; position: absolute; left: 25px; top: 52px; bottom: 0; width: 2px; background: var(--g); opacity: .45; }
.passo:last-child::before { display: none; }
.passo__n {
  width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--g); background: var(--bg);
  display: grid; place-items: center; font: 600 22px/1 var(--display); color: var(--accent);
}
.passo__corpo { padding-top: 10px; max-width: 900px; }
.passo__corpo > p { max-width: 64ch; }
.dia { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px 40px; margin: 22px 0 36px; }
.dia__local p { max-width: 52ch; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { position: relative; padding: 0 0 14px 30px; }
.checklist li::before {
  content: ""; position: absolute; left: 3px; top: .45em; width: 7px; height: 13px;
  border: solid var(--g); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.map { margin-top: 6px; }
.map iframe { display: block; width: 100%; height: 300px; border: 0; border-radius: var(--r); }
.map__ph {
  min-height: 220px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px;
  padding: 22px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); color: var(--muted); font-size: 15px;
}

/* Programação */
.programacao { border-top: 1px solid var(--line); padding-top: 26px; }
.periodos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 40px; }
.periodo h5 { font: 600 15px/1.3 var(--sans); color: var(--muted); margin: 12px 0 4px; }
.agenda { list-style: none; margin: 0; padding: 0; }
.agenda li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.agenda li:first-child { border-top: 0; }
.agenda .t { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.agenda p { margin: 2px 0 0; color: var(--muted); font-size: .9375rem; }

/* ---------- Formulário ---------- */
fieldset { border: 0; margin: 0 0 30px; padding: 0; min-width: 0; }
legend { font: 600 1.3125rem/1.2 var(--display); padding: 0; margin-bottom: 14px; }
.opcional { font: 400 .9375rem var(--sans); color: var(--muted); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.grid__todo { grid-column: 1 / -1; }
label { display: block; font-weight: 600; font-size: .9375rem; }
input:not([type=checkbox]), select {
  display: block; width: 100%; margin-top: 6px; padding: .75em .8em; font: 400 1.0625rem/1.3 var(--sans);
  border: 1px solid var(--field); border-radius: 8px; background: var(--bg); color: var(--ink);
}
input:focus, select:focus { outline: 3px solid var(--link); outline-offset: 1px; border-color: var(--link); }
.check { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; font-weight: 400; font-size: 1rem; }
.check input { margin-top: 5px; width: 20px; height: 20px; flex: none; accent-color: var(--g); }
.hp { position: absolute; left: -9999px; }
#status { margin-top: 16px; font-weight: 600; }
.ok { color: var(--link); }
.err { color: var(--err); }

/* ---------- Realização ---------- */
.orgs { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; }
.orgs h3 { font: 600 15px/1.3 var(--sans); color: var(--muted); margin-bottom: 16px; }
.logos { list-style: none; padding: 0; margin: 0; display: flex; gap: 20px 32px; align-items: center; flex-wrap: wrap; }
.logos img { display: block; max-width: 100%; height: 44px; width: auto; }
.logos img.tall { height: 96px; }
.txtlogo { font-weight: 800; font-size: 22px; letter-spacing: .02em; color: var(--ink); }
@media (prefers-color-scheme: dark) {
  .logos li:not(.txtlogo) { background: #fff; padding: 10px 12px; border-radius: 8px; }
}

/* ---------- Rodapé ---------- */
.rodape { background: var(--g-d); color: #fff; padding: 40px 0 34px; }
.rodape a { color: #fff; }
.rodape__in { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 1fr; gap: 20px 32px; align-items: start; }
.rodape__nome { font: 600 20px/1.3 var(--display); max-width: 26ch; }
.small { font-size: .9375rem; }
.flagbar { height: 8px; background: linear-gradient(90deg, var(--g) 0 78%, #fff 78% 88%, var(--flagred) 88%); }

/* ---------- Páginas internas (check-in e privacidade) ---------- */
.h1s { font-size: 30px; color: var(--ink); line-height: 1.2; margin-bottom: 16px; }
.h2s { font-size: 22px; margin: 26px 0 8px; }
.vid { width: 100%; max-width: 420px; border-radius: 10px; }
.lista { padding-left: 0; list-style: none; }
.msg { font-weight: 700; font-size: 18px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Painel da equipe ---------- */
.wrap--largo { max-width: 1440px; }
.sec--painel { padding: 36px 0 64px; }
.painel .lote p { margin-top: 0; }
.login p { margin: 14px 0 0; }
.login { margin-top: 24px; }
.painel__cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-bottom: 18px; }
.painel__cab .h1s { margin: 0; }
.painel__acoes, .acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.contadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 0 0 22px; }
.contador { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; background: var(--bg); }
.contador dt { color: var(--muted); font-size: 14px; }
.contador dd { margin: 2px 0 0; font: 600 26px/1.2 var(--display); color: var(--accent); font-variant-numeric: tabular-nums; }
.filtros { display: grid; grid-template-columns: minmax(0, 2fr) minmax(200px, 1fr); gap: 14px 18px; margin-bottom: 16px; }
.lote { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; background: var(--alt); border-radius: var(--r); margin-bottom: 10px; }
.lote__info { margin: 0; font-weight: 600; }
.check--inline { margin: 0; font-size: 15px; }
.painel__status { min-height: 1.6em; margin: 8px 0 12px; font-weight: 600; }
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.tabela { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabela th { text-align: left; font-size: 14px; color: var(--muted); font-weight: 600; background: var(--alt); position: sticky; top: 0; }
.tabela th, .tabela td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tr.sel td { background: color-mix(in srgb, var(--g) 8%, var(--bg)); }
.tabela input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--g); margin-top: 3px; }
.tabela .col-nome { min-width: 230px; }
.tabela .col-nome input { margin: 0 0 6px; padding: 8px 10px; font-size: 15px; }
.tabela .small { font-size: 14px; }
.codigo { font-variant-numeric: tabular-nums; letter-spacing: .04em; font-weight: 600; white-space: nowrap; }
.forte { font-weight: 600; }
.aviso-acess { color: var(--ink); font-weight: 600; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 13px; font-weight: 600; border: 1px solid var(--field); white-space: nowrap; }
.tag--ok { border-color: var(--g); color: var(--link); }
.tag--erro { border-color: var(--err); color: var(--err); }
.btn--presente { background: var(--g); }
.btn--perigo { background: transparent; color: var(--err) !important; border-color: var(--err); }
@media (hover: hover) { .btn--perigo:hover { background: var(--err); border-color: var(--err); color: #fff !important; } }
.tabela .btn--sm { padding: 5px 10px; font-size: 14px; white-space: nowrap; }
@media (max-width: 700px) {
  .painel nav a:not(.btn) { display: inline; }
  .filtros { grid-template-columns: 1fr; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .top { position: static; }
  html { scroll-padding-top: 0; }
  .hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .hero__icone { order: -1; width: 112px; }
  .sobre { grid-template-columns: 1fr; }
  .dia { grid-template-columns: 1fr; }
  .rodape__in { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  nav a:not(.btn) { display: none; }
  .orgs { grid-template-columns: 1fr; }
  .sec { padding: 56px 0; }
  .hero { padding: 36px 0 56px; }
}
@media (max-width: 620px) {
  .grid { grid-template-columns: 1fr; }
  .passo { grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; }
  .passo__n { width: 40px; height: 40px; font-size: 18px; }
  .passo::before { left: 19px; top: 40px; }
  .passo__corpo { padding-top: 5px; }
  .agenda li { display: block; }
  .agenda .t { display: block; font-size: 15px; }
  .agenda .t:empty { display: none; }
}
@media (max-width: 480px) {
  .top a.btn { display: none; }
}
@media (max-width: 420px) {
  .brand__txt { font-size: 13px; }
  .brand .icone { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Login da equipe e peças do painel ---------- */
.emergencia { margin: 18px 0; border-top: 1px solid var(--line); padding-top: 12px; }
.emergencia summary { cursor: pointer; color: var(--muted); font-size: 15px; }
.emergencia label { margin-top: 10px; }
.quem { color: var(--muted); font-size: 14px; }
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.abas button, .ck-modos button {
  font: 600 16px/1.2 var(--sans); background: transparent; color: var(--muted); border: 0;
  border-bottom: 3px solid transparent; padding: 10px 16px; cursor: pointer;
}
.abas button[aria-selected=true], .ck-modos button[aria-selected=true] { color: var(--accent); border-bottom-color: var(--g); }
.novo-usuario { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 12px 14px; align-items: end; margin: 18px 0; }
.senha-temp { border: 2px solid var(--g); border-radius: var(--r); padding: 14px 18px; margin: 10px 0 18px; background: var(--alt); }
.senha-temp p { margin: 0 0 8px; }
.senha-temp__valor { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.senha-temp__valor span { font: 600 24px/1.2 var(--sans); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.tabela select { margin-top: 0; padding: 6px 8px; font-size: 14px; width: auto; }
@media (max-width: 900px) { .novo-usuario { grid-template-columns: 1fr; } }

/* ---------- Check-in (celular primeiro) ---------- */
:root { --ok-bg: #E5F3EA; --ja-bg: #FFF3D1; --ja-borda: #8A5A00; --ja-ink: #5C3D00; --erro-bg: #FCE8EB; }
@media (prefers-color-scheme: dark) { :root { --ok-bg: #12301F; --ja-bg: #3A2E10; --ja-borda: #E0B341; --ja-ink: #F5D98A; --erro-bg: #3A1418; } }
.ck-topo { background: var(--g-d); color: #fff; }
.ck-topo__in { max-width: 560px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 10px; min-height: 52px; }
.ck-topo__marca { font-size: 15px; }
.ck-topo__marca b { font-weight: 800; }
.ck-topo__quem { margin-left: auto; font-size: 14px; opacity: .9; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-topo .btn--ghost { color: #fff !important; border-color: #fff; }
@media (hover: hover) { .ck-topo .btn--ghost:hover { background: rgba(255,255,255,.15); } }
.ck { max-width: 560px; margin: 0 auto; padding: 18px 16px 48px; }
.ck-form label { margin-bottom: 14px; }
.ck-form p { margin: 14px 0 0; }
.ck-grande { width: 100%; padding: 16px 20px; font-size: 18px; text-align: center; }
.ck-placar { margin: 0 0 12px; color: var(--muted); font-size: 16px; }
.ck-placar strong { font: 600 30px/1 var(--display); color: var(--accent); font-variant-numeric: tabular-nums; margin-right: 4px; }
.ck-resultado { border-radius: 14px; border: 3px solid var(--line); padding: 16px 18px; margin-bottom: 16px; min-height: 132px; }
.ck-resultado p { margin: 0; }
.ck-resultado__titulo { font-weight: 700; font-size: 17px; }
.ck-resultado__nome { font: 600 26px/1.2 var(--display); margin-top: 6px !important; overflow-wrap: anywhere; }
.ck-resultado__extra { color: var(--muted); margin-top: 6px !important; }
.ck-resultado--info { background: var(--alt); }
.ck-resultado--info .ck-resultado__nome { font: 400 17px/1.4 var(--sans); }
.ck-resultado--ok { background: var(--ok-bg); border-color: var(--g); }
.ck-resultado--ok .ck-resultado__titulo { color: var(--accent); }
.ck-resultado--ja { background: var(--ja-bg); border-color: var(--ja-borda); }
.ck-resultado--ja .ck-resultado__titulo { color: var(--ja-ink); }
.ck-resultado--erro { background: var(--erro-bg); border-color: var(--err); }
.ck-resultado--erro .ck-resultado__titulo { color: var(--err); }
.ck-alerta { display: inline-block; margin-top: 12px !important; background: #B00020; color: #fff; font-weight: 700; padding: 6px 12px; border-radius: 8px; }
.ck-modos { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.ck-modos button { padding: 12px 6px; font-size: 16px; }
.ck-video { margin: 12px 0; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 1 / 1; }
.ck-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
#modo-camera .note { margin-top: 10px; }
.ck-codigo { font: 600 28px/1.2 var(--sans) !important; letter-spacing: .18em; text-transform: uppercase; text-align: center; }
#form-codigo label { margin-bottom: 12px; }
.ck-lista { list-style: none; margin: 10px 0 0; padding: 0; }
.ck-pessoa {
  display: block; width: 100%; text-align: left; background: var(--bg); color: var(--ink); border: 1px solid var(--field);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; font: 16px/1.4 var(--sans); cursor: pointer;
}
.ck-pessoa strong { display: block; font-size: 17px; }
.ck-pessoa span { display: block; color: var(--muted); font-size: 14px; }
.ck-pessoa .ck-pessoa__ja { color: var(--accent); font-weight: 700; }
.ck-pessoa--presente { border-color: var(--g); }
.ck-historico { margin-top: 30px; border-top: 1px solid var(--line); padding-top: 16px; }
.ck-historico h2 { font-size: 18px; margin-bottom: 8px; }
.ck-hist { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.ck-hist--desfeito span { color: var(--muted); text-decoration: line-through; }

/* =====================================================================
   Movimento (landing page). Só transform e opacity, curvas fortes de saída
   e versão suave para quem pede menos movimento. Sem biblioteca.
   ===================================================================== */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-rapida: 160ms;
}

/* 5. Botões: resposta ao toque */
.btn { transition: transform var(--dur-rapida) var(--ease-out), background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
.btn:active:not(:disabled) { transform: scale(0.97); }

/* 6. Cabeçalho fixo (desktop): fundo translúcido e sombra que aparece com a rolagem */
@media (min-width: 901px) {
  .top { background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
  .top::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none;
    background: linear-gradient(rgba(0, 0, 0, .09), transparent); opacity: 0;
  }
  @supports (animation-timeline: scroll()) {
    .top::after { animation: topo-sombra linear both; animation-timeline: scroll(root); animation-range: 0 80px; }
  }
}
@media (min-width: 901px) and (prefers-color-scheme: dark) { .top::after { background: linear-gradient(rgba(0, 0, 0, .4), transparent); } }
@keyframes topo-sombra { to { opacity: 1; } }

/* 1. Abertura do herói: telhado se desenha, pessoas e textos entram em sequência */
.hero__icone .icone__telhado { stroke-dasharray: 1; stroke-dashoffset: 0; animation: telhado-desenha 600ms var(--ease-out) both; }
.hero__icone .pessoa { transform-box: fill-box; transform-origin: 50% 100%; animation: entra 300ms var(--ease-out) both; }
.hero__icone .pessoa:nth-of-type(1) { animation-delay: 350ms; }
.hero__icone .pessoa:nth-of-type(2) { animation-delay: 410ms; }
.hero__icone .pessoa:nth-of-type(3) { animation-delay: 470ms; }
.hero__txt > * { animation: entra-texto 500ms var(--ease-out) both; }
.hero__txt > :nth-child(2) { animation-delay: 70ms; }
.hero__txt > :nth-child(3) { animation-delay: 140ms; }
.hero__txt > :nth-child(4) { animation-delay: 210ms; }
.hero__txt > :nth-child(5) { animation-delay: 280ms; }
@keyframes telhado-desenha { from { stroke-dashoffset: 1; opacity: 0; } 10% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes entra-texto { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* 2. Passo a passo: a linha verde se preenche com a rolagem; o número acende ao chegar */
.passo__n { transition: background-color 200ms ease, color 200ms ease; }
.passo--ativo .passo__n { background: var(--g); color: #fff; }
@supports (animation-timeline: view()) {
  .passo { view-timeline-name: --passo; }
  .passo::before { background: var(--line); opacity: 1; }
  .passo::after {
    content: ""; position: absolute; left: 25px; top: 52px; bottom: 0; width: 2px; background: var(--g);
    transform-origin: 50% 0; transform: scaleY(0);
    animation: linha-enche linear both; animation-timeline: --passo; animation-range: cover 20% cover 65%;
  }
  .passo:last-child::after { display: none; }
  @media (max-width: 620px) { .passo::after { left: 19px; top: 40px; } }
}
@keyframes linha-enche { to { transform: scaleY(1); } }

/* 3. Confirmação da inscrição */
.confirmacao {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 2px solid var(--g); border-radius: 12px;
  background: var(--ok-bg); color: var(--ink); animation: entra-confirmacao 280ms var(--ease-out) both;
}
.confirmacao__icone { flex: none; width: 36px; height: 36px; }
.confirmacao__icone circle { fill: var(--g); }
.confirmacao__icone path { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: check-desenha 400ms var(--ease-out) 200ms both; }
.confirmacao p { margin: 0; font-weight: 400; }
.confirmacao__titulo { font: 600 20px/1.25 var(--display); color: var(--accent); }
.confirmacao__codigo { font-size: 17px; margin-top: 4px !important; }
.confirmacao__codigo strong { font-size: 22px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
@keyframes entra-confirmacao { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes check-desenha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* 4. Mapa: aparece esmaecendo depois de carregado, sem mudar o tamanho do espaço */
.map__ph { min-height: 300px; }
.map iframe { opacity: 0; transition: opacity 250ms var(--ease-out); }
.map iframe.pronto { opacity: 1; }

/* Menos movimento: sem deslocamentos nem desenhos; só esmaecer, rápido */
@media (prefers-reduced-motion: reduce) {
  .hero__icone .icone__telhado { animation: none; stroke-dashoffset: 0; }
  .hero__icone .pessoa, .hero__txt > *, .confirmacao { animation: esmaece 200ms ease both; animation-delay: 0ms; }
  .confirmacao__icone path { animation: none; stroke-dashoffset: 0; }
  .passo::after { animation: none; transform: none; }
  .btn:active:not(:disabled) { transform: none; }
}
@keyframes esmaece { from { opacity: 0; } to { opacity: 1; } }

/* =====================================================================
   Direção Pôster (só a landing page, body.landing). Blocos de cor:
   topo verde, Sobre em papel, Passo a passo claro, Inscrição verde
   com o formulário em cartão, Realização clara, rodapé verde.
   ===================================================================== */
.landing { --papel: #F3F6F1; --verde-claro: #B9E3C8; --verde-texto: #E3F2E8; }
@media (prefers-color-scheme: dark) { .landing { --papel: var(--alt); } }
.btn { border-radius: 999px; }
.landing h2 { font-size: clamp(34px, 4.8vw, 60px); line-height: 1.04; letter-spacing: -.02em; margin-bottom: 28px; }
.landing .sec { padding: clamp(64px, 8vw, 112px) 0; }

/* Cabeçalho verde */
.landing .top { background: var(--g-d); border-bottom: 0; }
.landing .brand, .landing .brand__txt b, .landing nav a { color: #fff; }
@media (hover: hover) { .landing nav a:not(.btn):hover { color: #fff; } }
.landing .top .icone { --ic-telhado: #fff; --ic-bra: #fff; --ic-bra-borda: #fff; }
.landing .top .btn { background: #fff; border-color: #fff; color: var(--g-d) !important; }
@media (hover: hover) { .landing .top .btn:hover { background: var(--verde-texto); border-color: var(--verde-texto); } }
.landing .top :focus-visible, .landing .hero :focus-visible, .landing #inscricao > .wrap > :not(form) :focus-visible { outline-color: #fff; }
@media (min-width: 901px) { .landing .top { background: var(--g-d); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Topo em cartaz */
.landing .hero { position: relative; overflow: hidden; background: var(--g-d); color: #fff; border-bottom: 0; padding: clamp(40px, 6vw, 88px) 0 clamp(64px, 8vw, 120px); }
.landing .hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: linear-gradient(var(--flagred) 0 33.3%, #fff 33.3% 66.6%, var(--flagred) 66.6%); }
.landing .hero__grid { display: block; }
.landing .hero__txt { position: relative; z-index: 1; max-width: 760px; }
.landing .hero__icone {
  position: absolute; z-index: 0; right: -120px; bottom: -4%; width: min(58vw, 780px); height: auto;
  --ic-telhado: var(--g); --ic-bra: #fff; --ic-bra-borda: #fff;
}
.selo { display: inline-block; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 999px; padding: 5px 14px; font-size: 14px; font-weight: 600; margin: 0 0 22px; color: #fff; }
.landing .hero h1 { color: #fff; font-size: clamp(22px, 2.4vw, 30px); max-width: 26ch; margin-bottom: 20px; }
.landing .data { color: #fff; font-size: clamp(60px, 9.6vw, 136px); line-height: .88; letter-spacing: -.04em; margin-bottom: 26px; }
.landing .data time { white-space: normal; }
.landing .data__ano { color: var(--verde-claro); font-size: .36em; letter-spacing: -.01em; margin-top: .3em; }
.landing .detalhes { color: var(--verde-texto); }
.landing .hero .btn { background: #fff; border-color: #fff; color: var(--g-d) !important; padding: 16px 30px; font-size: 1.125rem; }
@media (hover: hover) { .landing .hero .btn:hover { background: var(--verde-texto); border-color: var(--verde-texto); } }
.landing .hero .link-forte { color: #fff; }
.landing .situacao { color: #CFE8D8; }
.hero__txt > :nth-child(6) { animation-delay: 350ms; }
@media (max-width: 1180px) { .landing .hero__icone { width: 50vw; right: -16vw; } }
@media (max-width: 900px) {
  .landing .hero { padding-bottom: 0; }
  .landing .hero__icone { position: relative; order: 0; display: block; right: auto; bottom: auto; width: 78%; max-width: 400px; margin: 28px -8% -30px auto; }
}

/* Sobre em papel */
.landing #sobre { background: var(--papel); }
.landing .lead { font-size: clamp(1.375rem, 2.5vw, 1.9375rem); line-height: 1.32; }

/* Passo a passo: números maiores */
.landing #passos { background: var(--bg); }
.landing .passo__corpo h3 { font-size: clamp(24px, 2.8vw, 34px); }
@media (min-width: 621px) {
  .landing .passo { grid-template-columns: 64px minmax(0, 1fr); gap: 0 26px; }
  .landing .passo__n { width: 64px; height: 64px; font-size: 28px; border-width: 3px; }
  .landing .passo::before, .landing .passo::after { left: 31px; top: 64px; width: 3px; }
  .landing .passo__corpo { padding-top: 14px; }
}

/* Inscrição: bloco verde com o formulário em cartão */
.landing #inscricao { background: var(--g-d); color: #fff; }
.landing #inscricao .narrow { max-width: 820px; }
.landing #inscricao h2 { color: #fff; }
.landing #inscricao > .wrap > p { color: var(--verde-texto); font-size: 1.125rem; }
.landing #inscricao > .wrap > p strong { color: #fff; }
.landing #form { background: var(--bg); color: var(--ink); border-radius: 24px; padding: clamp(22px, 4vw, 44px); margin-top: 28px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45); }
.landing #realizacao { background: var(--bg); border-top: 1px solid var(--line); }

/* =====================================================================
   Pôster com fotos: a faixa de
   fotos de Florianópolis e os 150 lugares ao vivo na inscrição.
   ===================================================================== */

/* 2. A faixa é da pessoa: arrasta com o dedo (rolagem nativa, com impulso e encaixe em cada foto) ou com o mouse */
.faixa-fotos {
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  scroll-padding-inline: max(20px, calc((100% - 1080px) / 2)); background: var(--papel); padding: 0 0 clamp(48px, 6vw, 88px); cursor: grab;
}
.faixa-fotos::-webkit-scrollbar { display: none; }
.faixa-fotos:focus-visible { outline-offset: -4px; }
.faixa-fotos.arrastando { cursor: grabbing; scroll-snap-type: none; }
.faixa-fotos__trilho { display: flex; gap: 12px; width: max-content; padding-inline: max(20px, calc((100vw - 1080px) / 2)); }
.faixa-fotos img { flex: none; height: clamp(190px, 26vw, 360px); width: auto; object-fit: cover; border-radius: 20px; scroll-snap-align: start; user-select: none; -webkit-user-drag: none; }
.faixa-fotos img:nth-child(4n+1) { aspect-ratio: 4 / 3; }
.faixa-fotos img:nth-child(4n+2) { aspect-ratio: 3 / 4; }
.faixa-fotos img:nth-child(4n+3) { aspect-ratio: 1 / 1; }
.faixa-fotos img:nth-child(4n) { aspect-ratio: 16 / 9; }

.lugares { margin: 28px 0 0; }
.lugares__conta { color: #fff; font-weight: 700; font-size: 1.25rem; margin: 0 0 14px; }
.lugares__grade { display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 6px; max-width: 640px; }
.lugares__grade i { position: relative; display: block; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.lugares__grade i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff; opacity: 0; transition: opacity 260ms ease-out; }
.lugares__grade i.ocupado::after { opacity: 1; }
@media (max-width: 620px) { .lugares__grade { grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 5px; } }

.creditos { grid-column: 1 / -1; font-size: .8125rem; opacity: .85; margin-top: 8px; }

@media (prefers-reduced-motion: reduce) { .lugares__grade i::after { transition: none; } }

/* =====================================================================
   Tipografia do Pôster com a Bricolage Grotesque: títulos pesados e
   apertados, data enorme em peso 800 e largura condensada.
   ===================================================================== */
h1, h2, h3, h4 { font-optical-sizing: auto; }
.landing h2 { font-weight: 800; font-stretch: 92%; letter-spacing: -.02em; line-height: .98; font-size: clamp(40px, 6vw, 80px); }
.landing h3 { font-weight: 700; letter-spacing: -.02em; }
.landing .hero h1 { font-weight: 700; letter-spacing: -.015em; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.12; }
.landing .data { font-weight: 800; font-stretch: 86%; letter-spacing: -.015em; line-height: .86; font-size: clamp(76px, 12vw, 176px); }
.landing .data__ano { font-weight: 600; font-stretch: 90%; letter-spacing: -.02em; }
.landing .lead { font-weight: 500; letter-spacing: -.015em; line-height: 1.28; }
.landing .passo__n { font-weight: 800; }
.landing .rodape__nome { font-weight: 700; letter-spacing: -.01em; }
.landing .brand__txt b { font-family: var(--display); font-weight: 800; }

/* =====================================================================
   Celular: topo enxuto, contagem regressiva em destaque e menu em
   hambúrguer (o botão só aparece com JavaScript; sem ele, nada muda).
   ===================================================================== */
.contagem:not(:empty) { display: flex; align-items: baseline; gap: 10px; color: var(--verde-claro); }
.contagem__num { font: 800 clamp(44px, 6vw, 64px)/.9 var(--display); font-stretch: 86%; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.contagem__rotulo { font: 700 1.125rem/1 var(--display); }

.menu-btn { display: none; }
@media (max-width: 700px) {
  .landing .top--menu .menu-btn { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--g-d); cursor: pointer; }
  .landing .top--menu .top__in { flex-wrap: wrap; gap: 12px; }
  .landing .top--menu .brand { flex: 1 1 0; min-width: 0; }
  .menu-btn__barras { display: grid; gap: 4px; }
  .menu-btn__barras i { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 200ms ease-out, opacity 150ms ease-out; }
  .top--menu.aberto .menu-btn__barras i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .top--menu.aberto .menu-btn__barras i:nth-child(2) { opacity: 0; }
  .top--menu.aberto .menu-btn__barras i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .landing .top--menu nav {
    position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px 20px 22px; background: var(--g-d); box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .55);
    transform-origin: calc(100% - 44px) 0; transform: translateY(-10px) scale(.98); opacity: 0; visibility: hidden;
    transition: transform 260ms var(--ease-out), opacity 180ms ease-out, visibility 0s linear 260ms;
  }
  .landing .top--menu.aberto nav { transform: none; opacity: 1; visibility: visible; transition: transform 260ms var(--ease-out), opacity 180ms ease-out, visibility 0s; }
  .landing .top--menu nav a:not(.btn) { display: block; padding: 14px 0; font: 700 24px/1.1 var(--display); letter-spacing: -.01em; border-bottom: 1px solid rgba(255, 255, 255, .18); text-decoration: none; }
  .landing .top--menu nav a.btn { display: block; margin-top: 18px; padding: 14px 20px; text-align: center; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .menu-btn__barras i { transition: none; } }

/* =====================================================================
   Revisão apple-design (22/10/2026)
   ===================================================================== */
/* 1. Cabeçalho fixo também no celular, para o menu e a inscrição ficarem sempre à mão */
@media (max-width: 900px) {
  .landing .top { position: sticky; top: 0; }
  html:has(body.landing) { scroll-padding-top: 84px; }
}
/* 6. Toque: sem o flash cinza do navegador; a resposta vem do próprio elemento, na hora */
a, button, summary, label { -webkit-tap-highlight-color: transparent; }
.menu-btn { transition: transform var(--dur-rapida) var(--ease-out); }
.menu-btn:active { transform: scale(.92); }
.landing nav a:not(.btn) { transition: opacity 120ms ease-out; }
.landing nav a:not(.btn):active { opacity: .6; }
.link-forte:active, .rodape a:active { opacity: .7; }
@media (prefers-reduced-motion: reduce) {
  .menu-btn:active { transform: none; }
  .landing .top--menu nav, .landing .top--menu.aberto nav { transform: none; }
}
/* 4. Erros no próprio campo */
.campo-erro { display: block; margin-top: 6px; color: var(--err); font-size: .9375rem; font-weight: 600; line-height: 1.35; }
input[aria-invalid=true], select[aria-invalid=true] { border-color: var(--err); box-shadow: inset 0 0 0 1px var(--err); }
.check + .campo-erro { margin: -8px 0 16px 32px; }
/* 10. Onde estou: o item da seção visível fica sublinhado no menu do computador */
@media (min-width: 701px) {
  .landing nav a:not(.btn) { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 8px; transition: text-decoration-color 200ms ease-out; }
  .landing nav a[aria-current="location"] { text-decoration-color: #fff; }
}

/* =====================================================================
   Cores oficiais da bandeira de SC (André, 22/10/2026): verde claro
   Pantone 376 (#A6CE39) como cor principal e vermelho Pantone 485
   (#ED1C24) no logo e na faixa. O verde claro não aguenta texto branco
   (1,8:1), então todo texto sobre ele é verde quase preto (#0E2D1C, 8,3:1)
   e os botões são escuros com texto branco.
   ===================================================================== */
.landing { --lima: #A6CE39; --escuro: #0E2D1C; --verde-escuro: #005C2E; }

/* Cabeçalho */
.landing .top { background: var(--lima); }
.landing .brand, .landing .brand__txt b, .landing nav a { color: var(--escuro); }
@media (hover: hover) { .landing nav a:not(.btn):hover { color: var(--escuro); } }
.landing .top .icone { --ic-telhado: var(--verde-escuro); --ic-bra: #fff; --ic-bra-borda: var(--escuro); }
.landing .top .btn, .landing .hero .btn, .landing #form .btn { background: var(--escuro); border-color: var(--escuro); color: #fff !important; }
@media (hover: hover) { .landing .top .btn:hover, .landing .hero .btn:hover, .landing #form .btn:hover { background: var(--verde-escuro); border-color: var(--verde-escuro); } }
.landing .top :focus-visible, .landing .hero :focus-visible, .landing #inscricao > .wrap > :not(form) :focus-visible, .landing .rodape :focus-visible { outline-color: var(--escuro); }
@media (min-width: 701px) { .landing nav a[aria-current="location"] { text-decoration-color: var(--escuro); } }
@media (max-width: 700px) {
  .landing .top--menu .menu-btn { background: var(--escuro); color: #fff; }
  .landing .top--menu nav { background: var(--lima); box-shadow: 0 24px 40px -24px rgba(14, 45, 28, .45); }
  .landing .top--menu nav a:not(.btn) { border-bottom-color: rgba(14, 45, 28, .2); }
}

/* Topo */
.landing .hero { background: var(--lima); color: var(--escuro); }
.landing .hero h1, .landing .data, .landing .detalhes { color: var(--escuro); }
.landing .data__ano { color: var(--verde-escuro); }
.landing .selo { border-color: rgba(14, 45, 28, .55); color: var(--escuro); }
.landing .hero__icone { --ic-telhado: var(--verde-escuro); --ic-bra: #fff; --ic-bra-borda: var(--escuro); }
.landing .contagem:not(:empty) { color: var(--escuro); }
.landing .contagem__num { color: var(--escuro); }

/* Inscrição */
.landing #inscricao { background: var(--lima); color: var(--escuro); }
.landing #inscricao h2, .landing #inscricao > .wrap > p, .landing #inscricao > .wrap > p strong { color: var(--escuro); }
.landing .lugares__conta { color: var(--escuro); }
.landing .lugares__grade i { background: rgba(14, 45, 28, .14); }
.landing .lugares__grade i::after { background: var(--escuro); }
.landing #form { box-shadow: 0 30px 60px -30px rgba(14, 45, 28, .45); }

/* Rodapé */
.landing .rodape { background: var(--lima); color: var(--escuro); }
.landing .rodape a { color: var(--escuro); }
.landing .flagbar { background: linear-gradient(90deg, var(--flagred) 0 33.3%, #fff 33.3% 66.6%, var(--flagred) 66.6%); }

/* =====================================================================
   Instituições no topo, em pé de igualdade: quatro quadros brancos do
   mesmo tamanho; cada logo é dimensionado pela sua proporção para que
   todos ocupem área parecida. O logo do evento vira marca d'água.
   ===================================================================== */
.hero__inst { position: relative; z-index: 1; animation: entra-texto 500ms var(--ease-out) 380ms both; }
.hero__rotulo { margin: 0 0 10px 4px; font: 700 .875rem/1 var(--display); letter-spacing: .02em; color: var(--escuro); }
.hero__quadros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hero__quadros li { aspect-ratio: 16 / 10; background: #fff; border-radius: 22px; min-width: 0; }
.hero__quadros .q-in { display: grid; place-items: center; width: 100%; height: 100%; padding: 6%; border-radius: inherit; }
/* Logos com link: resposta ao toque e foco visível, sem mudar o tamanho do quadro */
.hero__quadros li:has(a) { transition: transform var(--dur-rapida) var(--ease-out), box-shadow 200ms ease-out; }
.hero__quadros li:has(a:active) { transform: scale(.97); }
@media (hover: hover) { .hero__quadros li:has(a:hover) { box-shadow: 0 10px 24px -14px rgba(14, 45, 28, .55); } }
.landing .hero__quadros a:focus-visible { outline: 3px solid var(--escuro); outline-offset: 3px; }
.logos a { display: block; }
@media (prefers-reduced-motion: reduce) { .hero__quadros li:has(a:active) { transform: none; } }
.hero__quadros img { display: block; height: auto; max-height: 100%; object-fit: contain; }
.q-acomtesc img { width: 90%; }
.q-cruzazul img { width: 64%; }
.q-conen img { width: 54%; }
.q-fecotesc span { font: 800 clamp(1.4rem, 2.1vw, 1.75rem)/1 var(--sans); letter-spacing: .03em; color: #1C1B1F; }
@media (min-width: 901px) {
  .landing .hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center; }
  .landing .hero__txt { max-width: none; }
  .landing .data { font-size: clamp(76px, 9.2vw, 150px); }
  .landing .hero__icone { width: min(42vw, 600px); right: -8vw; bottom: -22%; opacity: .1; --ic-telhado: var(--escuro); --ic-ver: var(--escuro); --ic-bra: var(--escuro); --ic-bra-borda: var(--escuro); }
}
@media (max-width: 900px) {
  .landing .hero { padding-bottom: 56px; }
  .landing .hero__icone { display: none; }
  .hero__inst { margin-top: 32px; }
  .hero__quadros { gap: 10px; }
  .hero__quadros li { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) { .hero__inst { animation: esmaece 200ms ease both; } }

/* ---------- Painel: aba Mensagens ---------- */
textarea {
  display: block; width: 100%; margin-top: 6px; padding: .75em .8em; font: 400 1rem/1.5 var(--sans); resize: vertical;
  border: 1px solid var(--field); border-radius: 8px; background: var(--bg); color: var(--ink);
}
textarea:focus { outline: 3px solid var(--link); outline-offset: 1px; border-color: var(--link); }
.msg-escolha { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 6px 0 18px; }
.msg-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.msg-form { display: grid; gap: 16px; }
.msg-form > p { margin: 0; }
.msg-avisos { margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); }
.msg-avisos legend { font: 600 1rem/1.2 var(--display); padding: 0 6px; margin: 0; }
.msg-aviso { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.msg-aviso:last-child { border-bottom: 0; }
.msg-aviso label { grid-column: 1; }
.msg-aviso .btn { grid-column: 2; grid-row: 1; align-self: end; }
#msg-avisos:empty::before { content: "Nenhum aviso."; color: var(--muted); font-size: .9375rem; }
#msg-avisos + .btn { margin-top: 10px; }
.msg-ajuda summary { cursor: pointer; font-weight: 600; }
.msg-ajuda ul, .msg-fixos ul { margin: 8px 0 0; padding-left: 20px; }
.msg-ajuda code { font-size: .9em; background: var(--alt); padding: 1px 5px; border-radius: 4px; }
.msg-fixos { background: var(--alt); border-radius: var(--r); padding: 12px 16px; font-size: .9375rem; }
.msg-fixos p { margin: 0; }
.msg-previa { position: sticky; top: 16px; }
.msg-previa > p { margin: 0 0 8px; }
.msg-previa__assunto { font-weight: 600; overflow-wrap: anywhere; }
#msg-frame { display: block; width: 100%; height: min(85vh, 1000px); border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
@media (max-width: 1000px) { .msg-grade { grid-template-columns: 1fr; } .msg-previa { position: static; } }