/* Primo Saúde — sistema visual "Mata e Baía".
 * Baía (tinta), Ipê (acento), Mata (apoio), Névoa (fundo). Tipos: Bricolage Grotesque (títulos)
 * e Atkinson Hyperlegible Next (texto, feita para leitura com baixa visão). */

@font-face { font-family: "Atkinson Next"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.825fabef695f.woff2") format("woff2");
  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; }
@font-face { font-family: "Atkinson Next"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("../fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.290c109915a4.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Next"; font-style: italic; font-display: swap; font-weight: 200 800;
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-italic.740db8084ae9.woff2") format("woff2"); }
@font-face { font-family: "Bricolage"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("../fonts/bricolage-grotesque-latin-wght-normal.ada540c0e24a.woff2") format("woff2");
  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; }
@font-face { font-family: "Bricolage"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("../fonts/bricolage-grotesque-latin-ext-wght-normal.b1ae2c312cfb.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+A720-A7FF; }

:root {
  --baia: #0e3b43;
  --baia-2: #164e57;
  --baia-3: #2b6670;
  --mata: #1e6b52;
  --mata-clara: #dcede5;
  --mare: #5fb3a6;
  --ipe: #f4c430;
  --ipe-forte: #e0ab0b;
  --ipe-clara: #fff4d1;
  --nevoa: #eef4f2;
  --nevoa-2: #e1ebe7;
  --branco: #ffffff;
  --texto: #18343a;
  --texto-suave: #48636a;
  --linha: #cddcd7;
  --erro: #b42318;
  --erro-clara: #fdecea;
  --alerta: #7a5200;

  --f-texto: "Atkinson Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-titulo: "Bricolage", "Atkinson Next", system-ui, sans-serif;

  --r-p: 8px;
  --r-m: 14px;
  --r-g: 26px;
  --sombra: 0 1px 0 rgba(14, 59, 67, .06), 0 10px 30px -18px rgba(14, 59, 67, .35);
  --sombra-forte: 0 24px 60px -28px rgba(14, 59, 67, .55);
  --largura: 1120px;
  --tabbar: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--nevoa);
  padding-bottom: var(--tabbar);
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: var(--baia-2); text-decoration-thickness: .08em; text-underline-offset: .2em; }
a:hover { color: var(--mata); }
:focus-visible { outline: 3px solid var(--ipe-forte); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--ipe); color: var(--baia); }

h1, h2, h3, h4 { font-family: var(--f-titulo); color: var(--baia); line-height: 1.08; letter-spacing: -.02em; font-weight: 700; margin: 0 0 .45em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 5.4vw, 3.3rem); font-weight: 750; }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.05rem); margin-top: 1.6em; }
h3 { font-size: 1.3rem; letter-spacing: -.012em; }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1em; max-width: 68ch; }
small, .suave { color: var(--texto-suave); }
.pequeno { font-size: .95rem; }
strong { font-weight: 700; }
code { font-family: ui-monospace, monospace; font-size: .88em; background: var(--nevoa-2); padding: .05em .35em; border-radius: 5px; }
.pular { position: absolute; left: -999px; top: 0; background: var(--ipe); color: var(--baia); padding: .7rem 1rem; z-index: 50; font-weight: 700; }
.pular:focus { left: 1rem; top: 1rem; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.oculto { display: none !important; }

.icone { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.22em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icone.g { width: 1.6em; height: 1.6em; }

/* ---------- Estrutura ---------- */
.conteudo { width: 100%; max-width: var(--largura); margin: 0 auto; padding-inline: 16px; }
@media (min-width: 720px) { .conteudo { padding-inline: 28px; } }
main.conteudo { padding-block: 1.6rem 4rem; min-height: 62vh; }
.estreito { max-width: 760px; }

.emergencia { background: var(--baia); color: #d7e7e3; font-size: .92rem; }
.emergencia .conteudo { display: flex; gap: .6rem; align-items: center; justify-content: center; padding-block: .45rem; flex-wrap: wrap; text-align: center; }
.emergencia a { color: var(--ipe); font-weight: 700; text-decoration: none; white-space: nowrap; }
.emergencia a:hover { text-decoration: underline; color: var(--ipe); }
.aviso-ambiente { background: var(--ipe-clara); color: #5c4300; font-size: .88rem; text-align: center; padding: .35rem 16px; border-bottom: 1px solid #f0dc94; }

.topo { background: var(--branco); border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 20; }
.topo .conteudo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; }
.marca { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--baia); }
.marca:hover { color: var(--baia); }
.marca svg { width: 40px; height: 40px; flex: none; }
.marca-nome { font-family: var(--f-titulo); font-weight: 800; font-size: 1.42rem; letter-spacing: -.035em; line-height: 1; }
.marca-nome span { display: block; font-family: var(--f-texto); font-weight: 500; font-size: .74rem; letter-spacing: 0; color: var(--texto-suave); margin-top: .2rem; }
.nav { display: none; align-items: center; gap: .2rem; }
.nav a, .nav button.link { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .75rem; border-radius: 999px; text-decoration: none; color: var(--texto); font-size: 1rem; font-weight: 600; }
.nav a:hover, .nav button.link:hover { background: var(--nevoa); color: var(--baia); }
.nav a[aria-current="page"] { background: var(--mata-clara); color: var(--mata); }
.nav form { margin: 0; }
.nav .botao { margin-left: .4rem; }
.topo-movel { display: flex; gap: .4rem; align-items: center; }
@media (min-width: 960px) { .nav { display: flex; } .topo-movel { display: none; } }
.menu-movel summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; border: 1.5px solid var(--linha); color: var(--baia); }
.menu-movel summary::-webkit-details-marker { display: none; }
.menu-movel[open] summary { background: var(--baia); color: var(--branco); border-color: var(--baia); }
.menu-movel .gaveta { position: absolute; left: 0; right: 0; top: 100%; background: var(--branco); border-bottom: 1px solid var(--linha); box-shadow: var(--sombra-forte); padding: .6rem 16px 1rem; display: grid; gap: .1rem; }
.menu-movel .gaveta a, .menu-movel .gaveta button.link { display: flex; align-items: center; gap: .7rem; padding: .85rem .6rem; border-radius: 10px; color: var(--texto); text-decoration: none; font-weight: 600; font-size: 1.05rem; width: 100%; }
.menu-movel .gaveta a:hover { background: var(--nevoa); }
.menu-movel .gaveta form { margin: 0; }

/* Barra inferior do app (celular, usuário logado) */
.tabbar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; background: var(--branco); border-top: 1px solid var(--linha); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 24px -18px rgba(14, 59, 67, .5); }
.tabbar a { display: grid; justify-items: center; gap: .15rem; padding: .55rem .2rem .5rem; font-size: .78rem; font-weight: 700; color: var(--texto-suave); text-decoration: none; }
.tabbar a .icone { width: 1.55rem; height: 1.55rem; }
.tabbar a[aria-current="page"] { color: var(--baia); }
.tabbar a[aria-current="page"] .icone { color: var(--mata); stroke-width: 2.3; }
.tabbar a.agora { color: var(--baia); }
.tabbar a.agora .bolha { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-top: -1.1rem; border-radius: 50%; background: var(--ipe); box-shadow: 0 6px 16px -6px rgba(14, 59, 67, .6); border: 3px solid var(--branco); }
body.com-tabbar { --tabbar: 70px; }
@media (min-width: 960px) { .tabbar { display: none; } body.com-tabbar { --tabbar: 0px; } }

.rodape { background: var(--baia); color: #c9dcd8; margin-top: 2rem; }
.rodape .horizonte-rodape { display: block; width: 100%; height: 70px; margin-top: -1px; color: var(--nevoa); }
.rodape .conteudo { padding-block: 1.5rem 2.6rem; display: grid; gap: 1.6rem; }
@media (min-width: 720px) { .rodape .conteudo { grid-template-columns: 1.3fr 1fr 1fr; } }
.rodape h4 { color: var(--branco); font-size: 1rem; margin-bottom: .6rem; }
.rodape a { color: #e8f1ee; text-decoration: none; }
.rodape a:hover { color: var(--ipe); text-decoration: underline; }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.rodape .marca { color: var(--branco); }
.rodape .marca-nome span { color: #a8c4bf; }
.rodape p { font-size: .95rem; }

/* ---------- Botões ---------- */
.botao, button:not(.link) {
  --cor: var(--baia); --fundo: var(--ipe); --borda: var(--ipe);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 50px; padding: .65rem 1.35rem;
  border: 2px solid var(--borda); border-radius: 999px;
  background: var(--fundo); color: var(--cor);
  font: inherit; font-weight: 750; font-size: 1.04rem; line-height: 1.15; text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, transform .08s;
}
.botao:hover, button:not(.link):hover { --fundo: var(--ipe-forte); --borda: var(--ipe-forte); color: var(--baia); }
.botao:active, button:not(.link):active { transform: translateY(1px); }
.botao.escuro, button.escuro { --fundo: var(--baia); --borda: var(--baia); --cor: var(--branco); }
.botao.escuro:hover, button.escuro:hover { --fundo: var(--baia-2); --borda: var(--baia-2); color: var(--branco); }
.botao.contorno, button.contorno { --fundo: transparent; --borda: var(--baia); --cor: var(--baia); }
.botao.contorno:hover, button.contorno:hover { --fundo: var(--nevoa); --borda: var(--baia); }
.botao.claro, button.claro { --fundo: var(--branco); --borda: var(--linha); --cor: var(--baia); }
.botao.claro:hover, button.claro:hover { --fundo: var(--nevoa); --borda: var(--baia-3); }
.botao.perigo, button.perigo { --fundo: transparent; --borda: var(--erro); --cor: var(--erro); }
.botao.perigo:hover, button.perigo:hover { --fundo: var(--erro-clara); --borda: var(--erro); color: var(--erro); }
.botao.cheio-perigo, button.cheio-perigo { --fundo: var(--erro); --borda: var(--erro); --cor: var(--branco); }
.botao.cheio-perigo:hover, button.cheio-perigo:hover { --fundo: #8f1c13; --borda: #8f1c13; color: var(--branco); }
.botao.p, button.p { min-height: 42px; padding: .4rem 1rem; font-size: .96rem; }
.botao.largo, button.largo { width: 100%; }
button:disabled { opacity: .5; cursor: not-allowed; }
button.link { background: none; border: 0; padding: 0; color: var(--baia-2); font: inherit; text-decoration: underline; cursor: pointer; }
.acoes { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin: 1.2rem 0; }
.acoes form { margin: 0; }

/* ---------- Formulários ---------- */
label { display: block; font-weight: 700; margin-bottom: .3rem; color: var(--baia); }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="date"],
input[type="time"], input[type="number"], input[type="url"], input[type="datetime-local"], input[type="search"], select, textarea {
  width: 100%; min-height: 52px; padding: .7rem .9rem;
  border: 2px solid #a9bfb9; border-radius: 12px; background: var(--branco);
  font: inherit; color: var(--texto);
}
input[type="file"] { width: 100%; padding: 1rem; border: 2px dashed #a9bfb9; border-radius: 14px; background: var(--nevoa); font: inherit; }
textarea { min-height: 7.5rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--baia); outline: 4px solid rgba(244, 196, 48, .55); outline-offset: 0; }
.campo { margin-bottom: 1.15rem; }
.campo .ajuda, .helptext { display: block; font-size: .95rem; color: var(--texto-suave); margin-top: .3rem; }
.campo .ajuda ul { margin: .2rem 0; padding-left: 1.2rem; }
.errorlist { color: var(--erro); font-size: .98rem; font-weight: 600; margin: .35rem 0 0; padding: 0; list-style: none; }
.caixa-check { display: flex; gap: .75rem; align-items: flex-start; font-weight: 500; color: var(--texto); }
.caixa-check input { width: 24px; height: 24px; margin-top: .12rem; flex: none; accent-color: var(--mata); }
.opcoes ul, ul.opcoes, .opcoes > div { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.opcoes label { font-weight: 600; display: flex; gap: .65rem; align-items: center; padding: .85rem 1rem; border: 2px solid var(--linha); border-radius: 14px; background: var(--branco); color: var(--texto); cursor: pointer; }
.opcoes label:has(input:checked) { border-color: var(--mata); background: var(--mata-clara); }
.opcoes input[type="radio"], .opcoes input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--mata); flex: none; }
fieldset { border: 0; padding: 0; margin: 0 0 1.15rem; min-width: 0; }
legend { font-weight: 700; margin-bottom: .45rem; color: var(--baia); padding: 0; }
.form-grade { display: grid; gap: 0 1rem; }
@media (min-width: 640px) { .form-grade.duas { grid-template-columns: 1fr 1fr; } }

/* ---------- Superfícies ---------- */
.painel { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-g); padding: clamp(1.1rem, 3vw, 1.8rem); box-shadow: var(--sombra); }
.painel + .painel { margin-top: 1rem; }
.painel > :last-child { margin-bottom: 0; }
.painel.plano { box-shadow: none; }
.painel.escuro { background: var(--baia); border-color: var(--baia); color: #d7e7e3; }
.painel.escuro h2, .painel.escuro h3 { color: var(--branco); }
.painel.ipe { background: var(--ipe-clara); border-color: #efd88a; }
.painel.mata { background: var(--mata-clara); border-color: #bfdccf; }
.bloco-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 2.2rem 0 .9rem; }
.bloco-titulo h2 { margin: 0; }
.grade { display: grid; gap: 1rem; }
@media (min-width: 720px) {
  .grade.duas { grid-template-columns: repeat(2, 1fr); }
  .grade.tres { grid-template-columns: repeat(3, 1fr); }
  .lateral { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.6rem; align-items: start; }
  .lateral.direita { grid-template-columns: minmax(0, 1fr) 340px; }
}


.lista { list-style: none; padding: 0; margin: 0; }
.lista > li { padding: 1rem 0; border-top: 1px solid var(--nevoa-2); }
.lista > li:first-child { border-top: 0; padding-top: 0; }
.lista > li:last-child { padding-bottom: 0; }
.linha-item { display: flex; align-items: center; gap: .9rem; }
.linha-item .cresce { flex: 1; min-width: 0; }
.linha-item form { margin: 0; }

.selo { display: inline-flex; align-items: center; gap: .35rem; font-size: .86rem; font-weight: 700; padding: .2rem .65rem; border-radius: 999px; background: var(--nevoa-2); color: var(--baia); line-height: 1.4; white-space: nowrap; }
.selo .icone { width: 1rem; height: 1rem; }
.selo.ok { background: var(--mata-clara); color: var(--mata); }
.selo.alerta { background: var(--ipe-clara); color: var(--alerta); }
.selo.erro { background: var(--erro-clara); color: var(--erro); }
.selo.demo { background: #ece6fb; color: #4b2a9a; }
.selo.vivo { background: var(--mata-clara); color: var(--mata); }
.selo.vivo::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: #1f9d55; box-shadow: 0 0 0 0 rgba(31, 157, 85, .6); animation: vivo 2s infinite; }
@keyframes vivo { 70% { box-shadow: 0 0 0 7px rgba(31, 157, 85, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 157, 85, 0); } }
.selos { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .6rem; }

.avatar { --c: var(--mata); display: inline-grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 18px 18px 18px 6px; background: var(--c); color: var(--branco); font-family: var(--f-titulo); font-weight: 750; font-size: 1.15rem; letter-spacing: -.02em; }
.avatar.g { width: 84px; height: 84px; font-size: 1.9rem; border-radius: 28px 28px 28px 10px; }
.avatar.p { width: 40px; height: 40px; font-size: .95rem; border-radius: 14px 14px 14px 5px; }

.mensagens { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .6rem; }
.mensagens li { display: flex; gap: .7rem; align-items: flex-start; padding: .9rem 1.1rem; border-radius: 14px; background: var(--mata-clara); color: var(--mata); font-weight: 600; border: 1px solid #bfdccf; animation: entra .35s ease-out; }
.mensagens li.error { background: var(--erro-clara); color: var(--erro); border-color: #f5c2bd; }
.mensagens li.warning, .mensagens li.info { background: var(--ipe-clara); color: var(--alerta); border-color: #efd88a; }
@keyframes entra { from { opacity: 0; transform: translateY(-6px); } }

.aviso-saude { display: grid; grid-template-columns: auto 1fr; gap: .9rem; padding: 1.1rem 1.2rem; border-radius: var(--r-m); background: var(--erro-clara); border: 1px solid #f5c2bd; color: #6d1710; margin: 1.2rem 0; }
.aviso-saude .icone { width: 1.8rem; height: 1.8rem; color: var(--erro); }
.aviso-saude p { margin: 0 0 .4rem; }
.aviso-saude p:last-child { margin: 0; }
.aviso-saude a { color: var(--erro); font-weight: 700; }
.nota { display: flex; gap: .7rem; padding: .9rem 1rem; border-radius: var(--r-m); background: var(--nevoa); color: var(--texto-suave); font-size: .98rem; }
.nota .icone { color: var(--baia-3); margin-top: .15rem; }

.vazio { text-align: center; padding: 2.4rem 1rem; border: 2px dashed var(--linha); border-radius: var(--r-g); background: rgba(255, 255, 255, .6); }
.vazio .icone { width: 2.6rem; height: 2.6rem; color: var(--baia-3); margin-bottom: .5rem; }
.vazio p { margin-inline: auto; }

details.dobra { border-top: 1px solid var(--nevoa-2); }
details.dobra summary { cursor: pointer; list-style: none; padding: .9rem 0; font-weight: 700; color: var(--baia); display: flex; justify-content: space-between; gap: 1rem; }
details.dobra summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--mata); }
details.dobra[open] summary::after { content: "–"; }
details.dobra summary::-webkit-details-marker { display: none; }
details.dobra > :not(summary) { padding-bottom: 1rem; }

table { width: 100%; border-collapse: collapse; font-size: 1rem; }
th { text-align: left; font-size: .9rem; color: var(--texto-suave); font-weight: 700; padding: .55rem .5rem; border-bottom: 2px solid var(--linha); }
td { padding: .7rem .5rem; border-bottom: 1px solid var(--nevoa-2); vertical-align: top; }
.tabela-rolagem { overflow-x: auto; }

/* ---------- Página inicial ---------- */
.heroi { position: relative; background: var(--branco); overflow: hidden; }
.heroi .conteudo { display: grid; gap: 2rem; padding-block: clamp(2rem, 5vw, 4.2rem) 0; position: relative; z-index: 1; }
@media (min-width: 960px) { .heroi .conteudo { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; } }
.heroi h1 { font-size: clamp(2.6rem, 7.6vw, 5.1rem); line-height: .98; letter-spacing: -.045em; font-weight: 800; max-width: 12ch; margin-bottom: .35em; }
.heroi .lead { font-size: clamp(1.15rem, 2.2vw, 1.35rem); color: var(--texto-suave); max-width: 40ch; }
.heroi .acoes { margin-top: 1.6rem; }
.horizonte { display: block; width: 100%; height: clamp(150px, 22vw, 290px); margin-top: clamp(-10px, -1vw, 0px); }

.agora-cartao { background: var(--baia); color: #d7e7e3; border-radius: 30px 30px 30px 10px; padding: 1.5rem; box-shadow: var(--sombra-forte); position: relative; }
.agora-cartao h2 { color: var(--branco); font-size: 1.45rem; margin: .6rem 0 .3rem; }
.agora-cartao .numero { font-family: var(--f-titulo); font-size: 4.2rem; font-weight: 800; line-height: .9; color: var(--ipe); letter-spacing: -.05em; }
.agora-cartao ul { list-style: none; padding: 0; margin: 1rem 0 1.2rem; display: grid; gap: .65rem; }
.agora-cartao li { display: flex; gap: .7rem; align-items: center; padding: .6rem; border-radius: 14px; background: rgba(255, 255, 255, .07); }
.agora-cartao li strong { color: var(--branco); display: block; }
.agora-cartao li small { color: #a8c4bf; }
.agora-cartao .selo.vivo { background: rgba(220, 237, 229, .14); color: #bfe8d3; }

.secao { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.secao.branca { background: var(--branco); }
.secao-titulo { max-width: 30ch; }
.passos { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.6rem; counter-reset: passo; }
@media (min-width: 820px) { .passos { grid-template-columns: repeat(4, 1fr); } }
.passos li { counter-increment: passo; position: relative; padding-top: 3.6rem; }
.passos li::before { content: counter(passo); position: absolute; top: 0; left: 0; font-family: var(--f-titulo); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--mata); }
.passos li::after { content: ""; position: absolute; top: 1.25rem; left: 2.4rem; right: -.8rem; height: 2px; background: repeating-linear-gradient(90deg, var(--linha) 0 8px, transparent 8px 14px); }
.passos li:last-child::after { display: none; }
@media (max-width: 819px) { .passos li::after { display: none; } }
.passos h3 { margin-bottom: .3rem; }

.publicos { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 820px) { .publicos { grid-template-columns: 1.2fr 1fr 1fr; } }
.publico { border-radius: var(--r-g); padding: 1.6rem; background: var(--branco); border: 1px solid var(--linha); }
.publico.destaque { background: var(--mata); border-color: var(--mata); color: #e3f1eb; }
.publico.destaque h3 { color: var(--branco); }
.publico ul { padding-left: 1.1rem; margin: .4rem 0 1.2rem; }
.publico .icone.g { color: var(--mata); margin-bottom: .6rem; }
.publico.destaque .icone.g { color: var(--ipe); }

.preco-faixa { display: grid; gap: 1.6rem; align-items: center; background: var(--ipe); color: var(--baia); border-radius: 34px 34px 34px 12px; padding: clamp(1.6rem, 4vw, 2.8rem); }
@media (min-width: 820px) { .preco-faixa { grid-template-columns: auto 1fr; } }
.preco-valor { font-family: var(--f-titulo); font-weight: 800; font-size: clamp(3.6rem, 10vw, 6.4rem); line-height: .85; letter-spacing: -.06em; }
.preco-valor small { display: block; font-family: var(--f-texto); font-size: 1.05rem; letter-spacing: 0; color: var(--baia-2); font-weight: 600; margin-top: .6rem; }
.preco-faixa h2 { margin-top: 0; }
.preco-faixa p { color: #2b4a50; }

/* ---------- Painel do usuário ---------- */
.saudacao { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.saudacao h1 { margin: 0; }
.saudacao p { margin: .2rem 0 0; color: var(--texto-suave); }
.atalhos { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
@media (min-width: 820px) { .atalhos { grid-template-columns: repeat(4, 1fr); } }
.atalho { display: grid; gap: .5rem; align-content: start; padding: 1.1rem; min-height: 132px; border-radius: 22px 22px 22px 8px; background: var(--branco); border: 1px solid var(--linha); text-decoration: none; color: var(--texto); }
.atalho:hover { border-color: var(--baia-3); color: var(--texto); box-shadow: var(--sombra); }
.atalho .icone { width: 2rem; height: 2rem; color: var(--mata); }
.atalho strong { font-family: var(--f-titulo); font-size: 1.15rem; color: var(--baia); letter-spacing: -.01em; }
.atalho span { font-size: .95rem; color: var(--texto-suave); line-height: 1.35; }
.atalho.principal { background: var(--ipe); border-color: var(--ipe); }
.atalho.principal .icone { color: var(--baia); }
.atalho.principal span { color: #4a3d0e; }

.destaque-agora { display: grid; gap: 1rem; align-items: center; background: var(--baia); color: #d7e7e3; border-radius: var(--r-g); padding: 1.4rem 1.5rem; margin-bottom: 1.4rem; }
@media (min-width: 720px) { .destaque-agora { grid-template-columns: 1fr auto; } }
.destaque-agora h2 { color: var(--branco); margin: .4rem 0 .2rem; font-size: 1.5rem; }
.destaque-agora p { margin: 0; }
.destaque-agora .selo.vivo { background: rgba(220, 237, 229, .14); color: #bfe8d3; }

.agenda-item { display: grid; grid-template-columns: 4.2rem 1fr; gap: 1rem; align-items: start; }
.data-bloco { text-align: center; border-radius: 16px; background: var(--nevoa); padding: .5rem .2rem .55rem; color: var(--baia); line-height: 1.1; }
.data-bloco b { display: block; font-family: var(--f-titulo); font-size: 1.85rem; font-weight: 800; letter-spacing: -.04em; }
.data-bloco span { font-size: .8rem; font-weight: 700; color: var(--texto-suave); }
.agenda-item h3 { margin: .1rem 0 .2rem; font-size: 1.15rem; }
.agenda-item .meta { color: var(--texto-suave); font-size: .98rem; margin: 0; }

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin-bottom: 1.4rem; }
.numero-cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: 20px; padding: 1rem 1.1rem; }
.numero-cartao b { display: block; font-family: var(--f-titulo); font-size: 2.3rem; font-weight: 800; color: var(--baia); line-height: 1; letter-spacing: -.04em; }
.numero-cartao span { font-size: .95rem; color: var(--texto-suave); }

.interruptor { display: grid; gap: 1rem; align-items: center; border-radius: var(--r-g); padding: 1.3rem 1.4rem; border: 2px solid var(--linha); background: var(--branco); }
@media (min-width: 720px) { .interruptor { grid-template-columns: auto 1fr auto; } }
.interruptor .chave { width: 64px; height: 36px; border-radius: 999px; background: #b9c9c5; position: relative; flex: none; }
.interruptor .chave::after { content: ""; position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%; background: var(--branco); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: left .2s; }
.interruptor.ligado { border-color: var(--mata); background: var(--mata-clara); }
.interruptor.ligado .chave { background: var(--mata); }
.interruptor.ligado .chave::after { left: 32px; }
.interruptor h2 { margin: 0 0 .2rem; font-size: 1.35rem; }
.interruptor p { margin: 0; color: var(--texto-suave); }

/* ---------- Busca e perfil ---------- */
.ficha { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.2rem; border-radius: 22px; background: var(--branco); border: 1px solid var(--linha); }
.ficha + .ficha { margin-top: .8rem; }
.ficha h3 { margin: 0 0 .1rem; font-size: 1.25rem; }
.ficha h3 a { color: var(--baia); text-decoration: none; }
.ficha h3 a:hover { text-decoration: underline; }
.ficha .meta { color: var(--texto-suave); font-size: .98rem; margin: 0; }
.ficha .proximo { display: inline-flex; gap: .45rem; align-items: center; font-weight: 700; color: var(--mata); margin-top: .5rem; }
.ficha .acoes { grid-column: 1 / -1; margin: .4rem 0 0; }
@media (min-width: 720px) { .ficha { grid-template-columns: auto 1fr auto; align-items: center; } .ficha .acoes { grid-column: auto; margin: 0; } }
.filtros { display: grid; gap: .2rem; }
.filtros details summary { display: flex; align-items: center; justify-content: space-between; font-weight: 750; color: var(--baia); cursor: pointer; list-style: none; }
.filtros details summary::-webkit-details-marker { display: none; }
@media (min-width: 720px) { .filtros details summary { pointer-events: none; } .filtros details summary .icone { display: none; } }

.perfil-topo { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; margin-bottom: 1.4rem; }
.perfil-topo h1 { margin: 0 0 .2rem; font-size: clamp(1.9rem, 4.6vw, 2.8rem); }
.perfil-topo .meta { margin: 0; color: var(--texto-suave); }
.dias { display: flex; gap: .5rem; overflow-x: auto; padding: .2rem .1rem .8rem; scroll-snap-type: x mandatory; }
.dias a { scroll-snap-align: start; flex: none; display: grid; justify-items: center; min-width: 4.4rem; padding: .55rem .5rem; border-radius: 16px; border: 2px solid var(--linha); background: var(--branco); text-decoration: none; color: var(--baia); line-height: 1.15; }
.dias a b { font-family: var(--f-titulo); font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.dias a span { font-size: .8rem; font-weight: 700; color: var(--texto-suave); }
.dias a[aria-current="true"] { background: var(--baia); border-color: var(--baia); color: var(--branco); }
.dias a[aria-current="true"] span { color: #a8c4bf; }
.horarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .55rem; }
.horarios a { display: grid; justify-items: center; padding: .7rem .4rem; border-radius: 14px; border: 2px solid var(--mata); color: var(--mata); background: var(--branco); text-decoration: none; font-weight: 800; font-size: 1.12rem; line-height: 1.15; }
.horarios a small { font-size: .78rem; font-weight: 700; color: var(--texto-suave); }
.horarios a:hover { background: var(--mata); color: var(--branco); }
.horarios a:hover small { color: #d8efe5; }
.horarios span.horario-fixo { display: grid; place-items: center; padding: .7rem .4rem; border-radius: 14px; background: var(--nevoa); color: var(--texto-suave); font-weight: 700; }

.resumo { display: grid; gap: .1rem; margin: 0 0 1.2rem; }
.resumo div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--nevoa-2); }
.resumo dt { color: var(--texto-suave); font-weight: 700; }
.resumo dd { margin: 0; font-weight: 600; color: var(--baia); }

/* ---------- Fila ---------- */
.bilhete { position: relative; display: grid; justify-items: center; text-align: center; padding: 2rem 1.2rem 1.6rem; border-radius: 30px; background: var(--branco); border: 1px solid var(--linha); box-shadow: var(--sombra); overflow: hidden; }
.bilhete::before, .bilhete::after { content: ""; position: absolute; top: 58%; width: 26px; height: 26px; border-radius: 50%; background: var(--nevoa); border: 1px solid var(--linha); }
.bilhete::before { left: -14px; }
.bilhete::after { right: -14px; }
.bilhete .anel { width: 168px; height: 168px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, var(--branco) 58%, transparent 59%), conic-gradient(var(--mata) var(--progresso, 25%), var(--nevoa-2) 0); margin-bottom: 1rem; }
.bilhete .anel b { font-family: var(--f-titulo); font-size: 4.2rem; font-weight: 800; color: var(--baia); line-height: 1; letter-spacing: -.05em; }
.bilhete .anel small { display: block; font-size: .85rem; font-weight: 700; color: var(--texto-suave); }
.bilhete h2 { margin: .2rem 0; font-size: 1.5rem; }
.bilhete .serrilha { width: 100%; border-top: 2px dashed var(--linha); margin: 1.2rem 0 1rem; }
.bilhete.vez { background: var(--ipe); border-color: var(--ipe); }
.bilhete.vez h2 { font-size: 1.9rem; }
.bilhete.vez::before, .bilhete.vez::after { background: var(--nevoa); }
.espera-onda { display: flex; gap: .3rem; justify-content: center; margin: .6rem 0; }
.espera-onda i { width: 8px; height: 8px; border-radius: 50%; background: var(--mare); animation: onda 1.4s ease-in-out infinite; }
.espera-onda i:nth-child(2) { animation-delay: .15s; }
.espera-onda i:nth-child(3) { animation-delay: .3s; }
@keyframes onda { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-7px); opacity: 1; } }

/* ---------- Chamada ---------- */
body.modo-chamada { background: #071f24; color: #d7e7e3; }
body.modo-chamada .emergencia, body.modo-chamada .aviso-ambiente, body.modo-chamada .rodape, body.modo-chamada .tabbar { display: none; }
body.modo-chamada .topo { background: #0a2a30; border-color: #133d44; }
body.modo-chamada .marca, body.modo-chamada .marca-nome span { color: #d7e7e3; }
body.modo-chamada .nav a, body.modo-chamada .nav button.link { color: #d7e7e3; }
body.modo-chamada .nav a:hover { background: #133d44; }
body.modo-chamada h1 { color: var(--branco); }
body.modo-chamada main.conteudo { padding-top: 1rem; }
.chamada { display: grid; gap: 1rem; }
.chamada-topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.chamada-topo h1 { font-size: 1.5rem; margin: 0; }
.videos { position: relative; background: #031216; border-radius: 26px; overflow: hidden; aspect-ratio: 3 / 4; max-height: 72vh; width: 100%; box-shadow: 0 30px 80px -30px #000; }
@media (min-width: 720px) { .videos { aspect-ratio: 16 / 9; } }
.videos video { width: 100%; height: 100%; object-fit: cover; background: #031216; display: block; }
.videos #video-local { position: absolute; right: .8rem; bottom: .8rem; width: 28%; max-width: 200px; height: auto; aspect-ratio: 3 / 4; border-radius: 16px; border: 3px solid rgba(255, 255, 255, .85); box-shadow: 0 10px 30px -10px #000; }
.estado-chamada { position: absolute; left: .8rem; top: .8rem; background: rgba(3, 18, 22, .72); color: var(--branco); padding: .35rem .85rem; border-radius: 999px; font-size: .95rem; font-weight: 700; backdrop-filter: blur(6px); }
.controles { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.controles button, .controles .botao { min-width: 64px; }
.controles .claro { --fundo: #133d44; --borda: #1d5059; --cor: #e8f1ee; }
.controles .claro:hover { --fundo: #1d5059; --borda: #2b6670; color: var(--branco); }
.controles .claro[aria-pressed="true"] { --fundo: var(--ipe); --borda: var(--ipe); --cor: var(--baia); }
body.modo-chamada .suave { color: #9dbab5; }

/* ---------- Autenticação ---------- */
.entrada { display: grid; gap: 1.6rem; align-items: start; }
@media (min-width: 960px) { .entrada { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: stretch; } }
.entrada-arte { display: none; position: relative; border-radius: 34px 34px 34px 12px; background: var(--baia); color: #d7e7e3; padding: 2.4rem; overflow: hidden; min-height: 560px; }
@media (min-width: 960px) { .entrada-arte { display: flex; flex-direction: column; } }
.entrada-arte h2 { color: var(--branco); font-size: 2.3rem; margin: 0 0 .6rem; max-width: 14ch; }
.entrada-arte ul { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .8rem; position: relative; z-index: 1; }
.entrada-arte li { display: flex; gap: .7rem; align-items: flex-start; }
.entrada-arte li .icone { color: var(--ipe); margin-top: .2rem; }
.entrada-arte svg.arte { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46%; }
.entrada-form h1 { margin-bottom: .3em; }

/* ---------- Indicadores ---------- */
.barras { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.barras li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .8rem; font-size: .98rem; }
.barras .rotulo { font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barras .valor { font-weight: 800; color: var(--baia); font-variant-numeric: tabular-nums; }
.barras .trilho { grid-column: 1 / -1; height: 10px; border-radius: 999px; background: var(--nevoa-2); overflow: hidden; }
.barras .trilho i { display: block; height: 100%; border-radius: 999px; background: var(--mata); }
.barras li:nth-child(2) .trilho i { background: var(--mare); }
.barras li:nth-child(3) .trilho i { background: var(--ipe-forte); }
.barras li:nth-child(n+4) .trilho i { background: var(--baia-3); }

/* ---------- Páginas de texto ---------- */
.texto-longo h2 { font-size: 1.5rem; }
.texto-longo li { margin-bottom: .35rem; max-width: 68ch; }
.cabecalho-pagina { padding: 1rem 0 .6rem; }
.cabecalho-pagina p { font-size: 1.2rem; color: var(--texto-suave); max-width: 52ch; }
.voltar { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; text-decoration: none; margin-bottom: 1rem; }
main.conteudo.sem-espaco { padding-block: 0; min-height: 0; }
main.conteudo.sem-espaco .mensagens { margin-top: 1rem; }
a.interruptor { text-decoration: none; color: inherit; margin-bottom: 1.4rem; }
a.interruptor:hover { border-color: var(--baia-3); color: inherit; }

/* Ajustes da revisão visual (celular) */
.marca-nome { white-space: nowrap; }
.emergencia .suave { color: #b9d2cd; }
.topo-movel .botao { white-space: nowrap; }
@media (max-width: 520px) {
  .emergencia .suave { display: none; }
  .marca-nome { font-size: 1.25rem; }
  .marca-nome span { display: none; }
  .marca img { width: 34px; height: 34px; }
  .topo .conteudo { min-height: 60px; }
}
.entrada-arte svg.arte { height: 240px; }
@supports selector(:has(*)) {
  .so-clinica { display: none; }
  form:has(input[value="clinica"]:checked) .so-clinica, .so-clinica:has(.errorlist) { display: block; }
}
/* Painéis fixos só em telas largas: no celular cobriam os resultados. */
.pegajoso { position: static; }
@media (min-width: 720px) { .pegajoso { position: sticky; top: 88px; } }
.sem-margem { margin-top: 0 !important; }
.lista.painel { padding: clamp(1.1rem, 3vw, 1.6rem); }
.lista.painel > li:first-child { padding-top: 0; }
.nav a, .nav button.link { white-space: nowrap; padding-inline: .6rem; }
@media (min-width: 960px) and (max-width: 1240px) { .nav .icone { display: none; } }
.selos .selo { white-space: normal; }
@media (max-width: 520px) { .perfil-topo { grid-template-columns: 1fr; } }
.entrada-arte svg.arte { position: relative; display: block; margin: auto -2.4rem -2.4rem; width: calc(100% + 4.8rem); max-width: none; height: 220px; flex: none; padding-top: 1.5rem; }
.grade > .painel + .painel, .grade > * + .painel { margin-top: 0; }