/* Aonde Levar Meu Pet — estilos base (mobile first)
   Cores tiradas do logo: verde-água, azul-marinho e laranja. */

:root {
  --verde: #19b9ad;
  --verde-escuro: #0b6e67;
  --verde-claro: #e3f6f4;
  --marinho: #0a1836;
  --laranja: #f27420;
  --laranja-escuro: #b4500b;
  --laranja-claro: #fff1e6;
  --texto: #1b2433;
  --texto-suave: #4f5b6b;
  --fundo: #f6f9f8;
  --superficie: #ffffff;
  --borda: #d8e2e0;
  --erro: #b42318;
  --erro-fundo: #fdecea;
  --sucesso: #116b3a;
  --sucesso-fundo: #e5f5ec;
  --aviso: #7a4b00;
  --aviso-fundo: #fff4d6;
  --raio: 14px;
  --raio-pequeno: 8px;
  --sombra: 0 1px 2px rgba(10, 24, 54, .06), 0 6px 20px rgba(10, 24, 54, .06);
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --largura: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fundo);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img { max-width: 100%; height: auto; }

a { color: var(--verde-escuro); text-underline-offset: .15em; }
a:hover { color: var(--marinho); }

h1, h2, h3 { color: var(--marinho); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); }

:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.pular {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--marinho); color: #fff; padding: .6rem 1rem; border-radius: var(--raio-pequeno);
}
.pular:focus { top: 1rem; color: #fff; }

/* ------------------------------------------------------------ Topo */
.topo { background: var(--superficie); border-bottom: 1px solid var(--borda); }
.topo__interno {
  max-width: var(--largura); margin: 0 auto; padding: .6rem 1rem;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.topo__marca { display: block; line-height: 0; }
.topo__marca img { height: 48px; width: auto; }
.topo__regiao {
  display: none; margin: 0; font-size: .9rem; color: var(--texto-suave);
  align-items: center; gap: .35rem;
}
.topo__pino {
  width: .7rem; height: .7rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--laranja); display: inline-block;
}
.topo__conta { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.topo__conta form { margin: 0; }

/* ------------------------------------------------------------ Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: .55rem 1.2rem;
  font: inherit; font-weight: 700; text-decoration: none;
  color: #fff; background: var(--verde-escuro);
  border: 2px solid var(--verde-escuro); border-radius: 999px; cursor: pointer;
}
.botao:hover { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.botao--leve { background: transparent; color: var(--verde-escuro); }
.botao--leve:hover { background: var(--verde-claro); color: var(--marinho); border-color: var(--verde-escuro); }
.botao--pequeno { min-height: 38px; padding: .3rem .9rem; font-size: .95rem; }
.botao--largo { width: 100%; }

.link-botao {
  background: none; border: 0; padding: .3rem; font: inherit; color: var(--verde-escuro);
  text-decoration: underline; cursor: pointer; min-height: 38px;
}
.link-discreto { font-weight: 600; text-decoration: none; }

/* ------------------------------------------------------------ Conteúdo */
.principal { flex: 1; width: 100%; max-width: var(--largura); margin: 0 auto; padding: 1.25rem 1rem 3rem; }

.cartao {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 1.5rem 1.25rem; margin: 0 auto 1.5rem;
}
.cartao--estreito { max-width: 480px; }

.secao { margin: 2rem 0; }
.secao-titulo { display: flex; align-items: flex-start; gap: .6rem; }
.secao-titulo h1, .secao-titulo h2 { flex: 1; }

.introducao { color: var(--texto-suave); }
.texto-centro { text-align: center; }
.opcional { color: var(--texto-suave); font-weight: 400; font-size: .9em; }
.em-breve {
  margin-top: 1.25rem; padding: .9rem 1rem; border-radius: var(--raio-pequeno);
  background: var(--laranja-claro); border-left: 4px solid var(--laranja);
}
.em-breve p { margin: 0; }
.ilustracao { border-radius: 22px; margin-bottom: .5rem; }

/* Destaque da home */
.destaque {
  display: grid; gap: 1.5rem; align-items: center;
  background: linear-gradient(135deg, var(--verde-claro), #fff 60%, var(--laranja-claro));
  border-radius: calc(var(--raio) * 1.5); padding: 2rem 1.25rem; border: 1px solid var(--borda);
}
.destaque h1 span { color: var(--laranja-escuro); }
.destaque__selo {
  display: inline-block; margin: 0 0 .75rem; padding: .2rem .7rem; border-radius: 999px;
  background: var(--marinho); color: #fff; font-size: .85rem; font-weight: 700;
}
.destaque__acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 0; }
.destaque__icone { display: none; justify-self: center; border-radius: 48px; }

.grade-secoes { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; }
.secao-previa {
  background: var(--superficie); border: 1px dashed var(--verde); border-radius: var(--raio);
  padding: 1rem; display: flex; flex-direction: column; gap: .15rem;
}
.secao-previa__titulo { font-weight: 700; color: var(--marinho); }
.secao-previa__sub { font-size: .9rem; color: var(--texto-suave); }

.lista-cidades { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.lista-cidades li { background: var(--superficie); border: 1px solid var(--borda); border-radius: 999px; padding: .25rem .8rem; font-size: .95rem; }
.uf { color: var(--texto-suave); font-size: .8em; font-weight: 700; }

/* ------------------------------------------------------------ Formulários */
.formulario { display: grid; gap: 1rem; margin: 1rem 0; }
.campo { display: grid; gap: .3rem; }
.campo label { font-weight: 600; }
.campo input, .campo select, .campo textarea, .filtros select {
  width: 100%; min-height: 46px; padding: .55rem .8rem;
  font: inherit; color: var(--texto); background: #fff;
  border: 1.5px solid #b9c6c3; border-radius: var(--raio-pequeno);
}
.campo input:focus, .campo select:focus { border-color: var(--verde-escuro); }
.campo input[aria-invalid="true"] { border-color: var(--erro); }
.campo__dica { margin: 0; font-size: .9rem; color: var(--texto-suave); }
.campo__erro { margin: 0; font-size: .92rem; color: var(--erro); font-weight: 600; }

.consentimentos { border: 1px solid var(--borda); border-radius: var(--raio-pequeno); padding: .75rem 1rem 1rem; margin: 0; display: grid; gap: .6rem; }
.consentimentos legend { font-weight: 700; padding: 0 .3rem; color: var(--marinho); }
.caixa { display: flex; gap: .6rem; align-items: flex-start; }
.caixa input { width: 22px; height: 22px; margin-top: .15rem; flex-shrink: 0; accent-color: var(--verde-escuro); }

.links-auxiliares { text-align: center; font-size: .95rem; }

/* Honeypot anti-robô: fora da tela, invisível para pessoas */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------ Avisos */
.avisos { max-width: 720px; margin: 0 auto 1rem; display: grid; gap: .5rem; }
.aviso { margin: 0; padding: .75rem 1rem; border-radius: var(--raio-pequeno); border-left: 4px solid; }
.aviso--sucesso { background: var(--sucesso-fundo); color: var(--sucesso); border-color: var(--sucesso); }
.aviso--erro { background: var(--erro-fundo); color: var(--erro); border-color: var(--erro); }
.aviso--aviso { background: var(--aviso-fundo); color: var(--aviso); border-color: #d99a00; }
.aviso--info { background: var(--verde-claro); color: var(--marinho); border-color: var(--verde-escuro); }

/* ------------------------------------------------------------ Ajuda contextual (?) */
.ajuda { position: relative; flex-shrink: 0; }
.ajuda__botao {
  list-style: none; cursor: pointer; display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--laranja); color: #fff; font-weight: 800; font-size: 1.1rem;
  border: 2px solid var(--laranja-escuro); user-select: none;
}
.ajuda__botao::-webkit-details-marker { display: none; }
.ajuda[open] .ajuda__botao { background: var(--laranja-escuro); }
.ajuda__painel {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 20;
  width: min(320px, calc(100vw - 2rem)); padding: 1rem;
  background: #fff; color: var(--texto); border: 1px solid var(--borda); border-top: 4px solid var(--laranja);
  border-radius: var(--raio-pequeno); box-shadow: 0 10px 30px rgba(10, 24, 54, .18);
  font-size: 1rem; font-weight: 400;
}
.ajuda__painel p { margin: 0 0 .5rem; }
.ajuda__painel p:last-child { margin-bottom: 0; }
.ajuda__titulo { font-weight: 700; color: var(--marinho); }

/* ------------------------------------------------------------ Dados / tabelas */
.dados { display: grid; gap: .5rem; margin: 1rem 0; }
.dados div { display: grid; grid-template-columns: 1fr; padding: .5rem 0; border-bottom: 1px solid var(--borda); }
.dados dt { font-weight: 600; color: var(--texto-suave); font-size: .9rem; }
.dados dd { margin: 0; }

.tabela-rolagem { overflow-x: auto; background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); }
.tabela { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabela th, .tabela td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela th { background: var(--verde-claro); color: var(--marinho); }

.filtros { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0; }
.filtros select { width: auto; min-height: 40px; }

/* ------------------------------------------------------------ Textos legais e erros */
.texto-legal { max-width: 760px; }
.texto-legal h2 { font-size: 1.15rem; margin-top: 1.5rem; }
.versao { color: var(--texto-suave); font-size: .9rem; }
.erro-codigo { font-size: 3.5rem; font-weight: 800; color: var(--laranja); margin: 0; line-height: 1; }

/* ------------------------------------------------------------ Rodapé */
.rodape { background: var(--marinho); color: #d6dde8; margin-top: auto; }
.rodape a { color: #fff; }
.rodape__interno { max-width: var(--largura); margin: 0 auto; padding: 2rem 1rem 1rem; display: grid; gap: 1.25rem; }
.rodape__nome { font-weight: 800; color: #fff; margin: 0 0 .25rem; }
.rodape__marca p { margin-top: 0; font-size: .95rem; }
.rodape__links { display: grid; gap: .4rem; }
.rodape__credito { text-align: center; font-size: .85rem; margin: 0; padding: 1rem; border-top: 1px solid rgba(255, 255, 255, .12); }

/* ------------------------------------------------------------ Painel */
.corpo-painel { background: #eef3f2; }
.painel-topo {
  background: var(--marinho); color: #fff; padding: .6rem 1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem;
}
.painel-topo a { color: #fff; }
.painel-topo__marca { display: flex; align-items: center; gap: .5rem; font-weight: 800; text-decoration: none; }
.painel-topo__marca img { border-radius: 8px; }
.painel-nav { display: flex; flex-wrap: wrap; gap: .25rem; }
.painel-nav a { padding: .3rem .55rem; font-size: .95rem; border-radius: 999px; text-decoration: none; }
.painel-nav a[aria-current="page"], .painel-nav a:hover { background: rgba(255, 255, 255, .14); }
.painel-topo__usuario { margin-left: auto; display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
.painel-topo__usuario form { margin: 0; }
.painel-topo .botao--leve { color: #fff; border-color: rgba(255, 255, 255, .5); }
.painel-topo .botao--leve:hover { background: rgba(255, 255, 255, .12); }
.painel-principal { flex: 1; width: 100%; max-width: var(--largura); margin: 0 auto; padding: 1.5rem 1rem 3rem; }

.indicadores { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.indicador { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem; display: grid; }
.indicador__valor { font-size: 2rem; font-weight: 800; color: var(--verde-escuro); line-height: 1.1; }
.indicador__rotulo { color: var(--texto-suave); font-size: .9rem; }

/* ------------------------------------------------------------ Painel: etapa 2 */
.migalha { margin: 0 0 .75rem; font-size: .95rem; }
.contagem { color: var(--texto-suave); font-size: .9rem; margin: .25rem 0 .75rem; }
.botoes { display: flex; flex-wrap: wrap; gap: .75rem; }
.cartao--formulario { max-width: 680px; margin-left: 0; }
.grupo { border: 0; padding: 0; margin: 0; display: grid; gap: 1rem; }
.grupo legend { font-weight: 700; color: var(--marinho); margin-bottom: .5rem; }
.filtros input[type="search"] { min-height: 40px; padding: .4rem .7rem; font: inherit; border: 1.5px solid #b9c6c3; border-radius: var(--raio-pequeno); flex: 1 1 180px; }
.secao-titulo .botao { align-self: center; }

.selo { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 700; line-height: 1.6; border: 1px solid transparent; }
.selo--rascunho { background: #eef1f5; color: #3d4757; border-color: #cfd6e0; }
.selo--em_revisao { background: var(--aviso-fundo); color: var(--aviso); border-color: #f0d38a; }
.selo--publicado { background: var(--sucesso-fundo); color: var(--sucesso); border-color: #a9dcbd; }
.selo--arquivado { background: #f3f3f3; color: #5d5d5d; border-color: #d9d9d9; }
.selo--tipo { background: var(--verde-claro); color: var(--verde-escuro); border-color: #b5e3de; }
.selo--alerta { background: var(--laranja-claro); color: var(--laranja-escuro); border-color: #f6c79f; }

.botao--sucesso { background: var(--sucesso); border-color: var(--sucesso); }
.botao--perigo { background: var(--erro); border-color: var(--erro); }
.botao--perigo:hover { background: #8a1a12; border-color: #8a1a12; }
.link-botao--perigo { color: var(--erro); }

.acoes-linha { display: flex; gap: .75rem; align-items: center; }
.acoes-linha form { margin: 0; }

.vazio { background: #fff; border: 1px dashed var(--borda); border-radius: var(--raio); padding: 1.5rem; text-align: center; }
.paginacao { display: flex; gap: 1rem; justify-content: center; align-items: center; margin: 1.25rem 0; }

.fila { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.fila__item { background: #fff; border: 1px solid var(--borda); border-left: 4px solid var(--verde); border-radius: var(--raio-pequeno); padding: .8rem 1rem; }
.fila__item--urgente { border-left-color: var(--erro); background: #fffafa; }
.fila__topo { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .35rem; }
.fila__titulo { font-weight: 700; font-size: 1.05rem; color: var(--marinho); }
.fila__meta { margin: .3rem 0 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .88rem; color: var(--texto-suave); }

.revisao { display: grid; gap: 1rem; }
.revisao .cartao { margin: 0; }
.revisao__lateral { display: grid; gap: 1rem; align-content: start; }
.revisao h2 { font-size: 1.15rem; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.checklist li { display: flex; gap: .5rem; align-items: flex-start; }
.checklist input { width: 20px; height: 20px; margin-top: .2rem; accent-color: var(--sucesso); flex-shrink: 0; }
.acoes-moderacao { display: grid; gap: .75rem; }
.acoes-moderacao form { margin: 0; }
.acao-detalhe { border: 1px solid var(--borda); border-radius: var(--raio-pequeno); padding: .5rem .8rem; }
.acao-detalhe summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.acao-detalhe .formulario { margin: .5rem 0 .25rem; }
.campo textarea { width: 100%; padding: .55rem .8rem; font: inherit; border: 1.5px solid #b9c6c3; border-radius: var(--raio-pequeno); resize: vertical; }
.historico { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.historico li { border-left: 3px solid var(--borda); padding-left: .75rem; display: grid; }
.historico p { margin: .2rem 0 0; }

.indicador a { display: grid; text-decoration: none; color: inherit; }
.indicador--destaque { border-color: var(--verde); background: var(--verde-claro); }
.indicadores--compactos .indicador__valor { font-size: 1.5rem; }
.celula-longa { white-space: normal !important; min-width: 220px; max-width: 420px; word-break: break-word; }

/* ------------------------------------------------------------ Público: eventos (etapa 3) */
.topo__regiao { text-decoration: none; color: var(--texto-suave); }
.topo__regiao:hover { color: var(--marinho); }
.topo__menu { display: flex; gap: .25rem; }
.topo__menu a { font-weight: 700; text-decoration: none; padding: .35rem .6rem; border-radius: 999px; }
.topo__menu a[aria-current="page"], .topo__menu a:hover { background: var(--verde-claro); }

.destaque__topo { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.destaque__topo .destaque__selo { margin: 0; }
.destaque__selo a { color: #fff; }
.busca-rapida { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.busca-rapida input { flex: 1 1 220px; min-height: 46px; padding: .5rem .9rem; font: inherit; border: 1.5px solid #b9c6c3; border-radius: 999px; background: #fff; }

.secao__cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: .75rem; flex-wrap: wrap; }
.secao__cabeca h2 { margin: 0; }
.secao__sub { margin: .1rem 0 0; color: var(--texto-suave); font-size: .95rem; }
.link-ver-todos { font-weight: 700; white-space: nowrap; }

.grade-eventos { display: grid; gap: .9rem; grid-template-columns: 1fr; }
.evento-card {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; position: relative;
  border-top: 4px solid var(--verde);
}
.evento-card:hover { box-shadow: var(--sombra); }
.evento-card__data { margin: 0; display: flex; justify-content: space-between; gap: .5rem; font-size: .9rem; color: var(--texto-suave); }
.evento-card__dia { font-weight: 800; color: var(--laranja-escuro); text-transform: capitalize; }
.evento-card__titulo { font-size: 1.1rem; margin: 0; }
.evento-card__titulo a { color: var(--marinho); text-decoration: none; }
.evento-card__titulo a::after { content: ""; position: absolute; inset: 0; }
.evento-card__titulo a:focus-visible { outline: none; }
.evento-card:focus-within { outline: 3px solid var(--laranja); outline-offset: 2px; }
.evento-card__local { margin: 0; color: var(--texto-suave); font-size: .95rem; }
.evento-card__tags { margin: .2rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.evento-card__fonte { margin: auto 0 0; padding-top: .35rem; font-size: .8rem; color: var(--texto-suave); }
.tag { display: inline-block; padding: .1rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--verde-claro); color: var(--verde-escuro); }
.tag--gratis { background: var(--sucesso-fundo); color: var(--sucesso); }
.tag--pago { background: var(--laranja-claro); color: var(--laranja-escuro); }

.vazio--home { margin: 2rem 0; }
.vazio--home h2 { font-size: 1.25rem; }

.local { margin: 2.5rem 0 1rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.25rem; }
.local__titulo { font-size: 1.25rem; }
.local__form { display: grid; gap: .75rem; align-items: end; margin: .5rem 0; }
.local__ou { margin: 0; text-align: center; color: var(--texto-suave); font-weight: 600; }

.migalhas { font-size: .9rem; color: var(--texto-suave); margin: 0 0 1rem; }
.migalhas a { color: var(--texto-suave); }

.filtros-publicos { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); margin: 1rem 0; }
.filtros-publicos summary { cursor: pointer; padding: .8rem 1rem; font-weight: 700; color: var(--marinho); min-height: 44px; }
.filtros-publicos__form { display: grid; gap: .8rem; padding: 0 1rem 1rem; grid-template-columns: 1fr 1fr; }
.filtros-publicos__form .campo--largo, .filtros-publicos__form .botoes { grid-column: 1 / -1; }
.campo input[type="date"], .campo input[type="datetime-local"], .campo input[type="search"] { min-height: 46px; }

.evento { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.25rem; box-shadow: var(--sombra); }
.evento__resumo { font-size: 1.1rem; color: var(--texto); }
.evento__corpo { display: grid; gap: 1.25rem; margin-top: 1rem; }
.evento__info { margin: 0; display: grid; gap: .25rem; }
.evento__info div { display: grid; gap: .1rem; padding: .6rem 0; border-bottom: 1px solid var(--borda); }
.evento__info dt { font-size: .85rem; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .03em; }
.evento__info dd { margin: 0; }
.evento__acoes { display: grid; gap: .6rem; align-content: start; }
.evento__secao { margin-top: 1.5rem; }
.evento__secao h2 { font-size: 1.2rem; }
.evento__fonte { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed var(--borda); font-size: .95rem; }
.evento__fonte p { margin: 0 0 .4rem; }
.texto-corrido { max-width: 70ch; }

/* Formulário largo do painel */
.formulario--largo { max-width: 900px; }
.formulario--largo .cartao { margin: 0; }
.grade-2 { display: grid; gap: 1rem; }
.opcoes-grupo { display: flex; flex-wrap: wrap; gap: .4rem; }
.opcoes-grupo__titulo { width: 100%; margin: 0 0 .1rem; font-weight: 600; }
.pilula { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border: 1.5px solid var(--borda); border-radius: 999px; cursor: pointer; background: #fff; min-height: 40px; }
.pilula:has(input:checked) { border-color: var(--verde-escuro); background: var(--verde-claro); }
.pilula input { accent-color: var(--verde-escuro); width: 18px; height: 18px; }
.botoes--fixos { position: sticky; bottom: 0; background: linear-gradient(transparent, #eef3f2 30%); padding: 1rem 0 .5rem; z-index: 5; }

/* ------------------------------------------------------------ Telas maiores */
@media (min-width: 640px) {
  .topo__regiao { display: inline-flex; }
  .grade-eventos { grid-template-columns: repeat(2, 1fr); }
  .grade-2 { grid-template-columns: 1fr 1fr; }
  .local__form { grid-template-columns: 1fr auto 1fr auto; }
  .filtros-publicos__form { grid-template-columns: repeat(3, 1fr); }
  .topo__marca img { height: 56px; }
  .cartao { padding: 2rem; }
  .grade-secoes { grid-template-columns: repeat(3, 1fr); }
  .dados div { grid-template-columns: 180px 1fr; }
  .rodape__interno { grid-template-columns: 2fr 1fr; }
}

@media (min-width: 960px) {
  .revisao { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); }
}

@media (min-width: 900px) {
  .grade-eventos { grid-template-columns: repeat(3, 1fr); }
  .evento { padding: 2rem; }
  .evento__corpo { grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); }
  .filtros-publicos__form { grid-template-columns: repeat(4, 1fr); }
  .destaque { grid-template-columns: 1.4fr 1fr; padding: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Evita que campos (datas, selects) estourem a largura em telas pequenas */
.campo { min-width: 0; }
.campo input, .campo select, .campo textarea { max-width: 100%; min-width: 0; }

/* ------------------------------------------------------------ Ajuda: etapa 4 */
.ajuda--esquerda .ajuda__painel { right: auto; left: 0; }
.ajuda__fechar {
  margin-top: .5rem; min-height: 40px; padding: .3rem 1rem; font: inherit; font-weight: 700;
  border: 2px solid var(--laranja-escuro); color: var(--laranja-escuro); background: #fff; border-radius: 999px; cursor: pointer;
}
.ajuda__painel--previa { position: static; width: auto; box-shadow: none; }
.lista-ajuda { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.lista-ajuda__item { display: flex; gap: 1rem; justify-content: space-between; align-items: center; background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); padding: .75rem 1rem; }
.lista-ajuda__titulo { margin: 0; font-weight: 700; color: var(--marinho); }
.lista-ajuda__titulo code { font-weight: 400; font-size: .8rem; color: var(--texto-suave); margin-left: .35rem; }
.lista-ajuda__texto { margin: .2rem 0 0; font-size: .9rem; color: var(--texto-suave); }

/* No celular o painel vira uma "gaveta" fixa no rodapé da tela: nunca sai da tela. */
@media (max-width: 639px) {
  .ajuda__painel, .ajuda--esquerda .ajuda__painel {
    position: fixed; left: 1rem; right: 1rem; bottom: 1rem; top: auto; width: auto;
    max-height: 70vh; overflow-y: auto; z-index: 200; box-shadow: 0 -4px 40px rgba(10, 24, 54, .35);
  }
  .ajuda__painel--previa { position: static; box-shadow: none; max-height: none; }
}

/* ------------------------------------------------------------ PWA e instalação: etapa 4 */
.destaque__instalar { margin: .75rem 0 0; }
.link-instalar { font-weight: 700; }
.botao--claro { background: #fff; color: var(--marinho); border-color: #fff; }
.botao--claro:hover { background: var(--verde-claro); color: var(--marinho); border-color: var(--verde-claro); }
.rodape__app { display: flex; gap: 1rem; align-items: center; }
.rodape__app p { margin: 0 0 .5rem; font-size: .95rem; }
.rodape__qr { flex-shrink: 0; display: block; width: 104px; height: 104px; border-radius: 8px; overflow: hidden; background: #fff; }
.rodape__qr svg { display: block; width: 100%; height: 100%; }
.destaque--instalar { align-items: center; }
.instalar__qr { justify-self: center; text-align: center; max-width: 240px; }
.instalar__qr-img { background: #fff; padding: .5rem; border-radius: var(--raio); border: 1px solid var(--borda); }
.instalar__qr-img svg { display: block; width: 100%; height: auto; }
.instalar__plataformas { display: grid; gap: .75rem; }
.instalar__plataforma { margin: 0; padding: 0; }
.instalar__plataforma summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 700; font-size: 1.1rem; color: var(--marinho); min-height: 48px; }
.instalar__plataforma .passos { margin: 0; padding: 0 1.25rem 1.25rem 2.75rem; display: grid; gap: .5rem; }
.instalar__icone { margin-right: .35rem; }
.faq { display: grid; gap: .5rem; margin: 0; }
.faq div { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-pequeno); padding: .75rem 1rem; }
.faq dt { font-weight: 700; color: var(--marinho); }
.faq dd { margin: .2rem 0 0; }
.divulgacao-qr { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.divulgacao-qr li { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem; display: grid; gap: .5rem; justify-items: center; text-align: center; }
.divulgacao-qr img { width: 140px; height: 140px; }
.divulgacao-qr .botoes { justify-content: center; }
@media (display-mode: standalone) { .js-instalar, .destaque__instalar { display: none !important; } }
@media (min-width: 640px) { .rodape__interno { grid-template-columns: 1fr 1fr; } .rodape__marca { grid-column: 1 / -1; } }
@media (min-width: 900px) { .rodape__interno { grid-template-columns: 1.4fr 1.3fr 1fr; } .rodape__marca { grid-column: auto; } }
.rodape .botao--claro { color: var(--marinho); }
.rodape .botao--claro:hover { color: var(--marinho); }
.divulgacao-qr li { min-width: 0; overflow: hidden; }
.divulgacao-qr code { font-size: .75rem; word-break: break-all; color: var(--texto-suave); }

/* ------------------------------------------------------------ Notícias: etapa 5 */
.lista-noticias { display: grid; gap: .8rem; }
.noticia-card { background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--laranja); border-radius: var(--raio-pequeno); padding: .9rem 1.1rem; }
.noticia-card__meta { margin: 0; display: flex; gap: .75rem; font-size: .85rem; color: var(--texto-suave); }
.noticia-card__titulo { margin: .2rem 0; font-size: 1.1rem; }
.noticia-card__titulo a { color: var(--marinho); }
.noticia-card__resumo { margin: .2rem 0; }
.noticia-card__fonte { margin: .3rem 0 0; font-size: .85rem; color: var(--texto-suave); }
@media (min-width: 900px) { .lista-noticias--home { grid-template-columns: repeat(3, 1fr); } }
.cartao h3 { margin-top: 1.5rem; }

/* ------------------------------------------------------------ Área do tutor: etapa 6 */
.titulo-bloco { font-size: 1.15rem; margin-top: 1.5rem; }
.atalhos-conta { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .75rem; }
.atalho {
  display: grid; gap: .1rem; padding: 1rem 1.1rem; text-decoration: none; color: inherit;
  border: 1.5px solid var(--borda); border-left: 5px solid var(--verde); border-radius: var(--raio); background: #fff;
}
.atalho:hover { border-color: var(--verde-escuro); background: var(--verde-claro); color: inherit; }
.atalho__titulo { font-weight: 700; color: var(--marinho); font-size: 1.1rem; }
.atalho__sub { color: var(--texto-suave); font-size: .95rem; }

.grade-pets { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.pet-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; display: grid; gap: .2rem; padding-bottom: .8rem; }
.pet-card__link { display: grid; gap: .5rem; text-decoration: none; color: inherit; }
.pet-card__foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--verde-claro); }
.pet-card__foto--vazia { background: linear-gradient(135deg, var(--verde-claro), var(--laranja-claro)); display: grid; place-items: center; font-size: 3.5rem; font-weight: 800; color: var(--verde-escuro); opacity: .85; }
.pet-card__nome { font-weight: 700; font-size: 1.15rem; color: var(--marinho); padding: 0 .9rem; }
.pet-card__link:hover .pet-card__nome { text-decoration: underline; }
.pet-card__meta { color: var(--texto-suave); font-size: .92rem; padding: 0 .9rem; }

.fotos-pet { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.fotos-pet__item { display: grid; gap: .3rem; align-content: start; justify-items: start; }
.fotos-pet__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raio-pequeno); border: 2px solid var(--borda); }
.fotos-pet__item--principal img { border-color: var(--verde); }

.zona-perigo { border-color: #f1c6c2; }
.zona-perigo h2 { color: var(--erro); font-size: 1.15rem; }

.autorizacoes { list-style: none; margin: .5rem 0 1rem; padding: 0; display: grid; }
.autorizacao { display: grid; gap: .6rem; padding: .9rem 0; border-bottom: 1px solid var(--borda); }
.autorizacao:last-child { border-bottom: 0; }
.autorizacao__texto p { margin: .3rem 0 0; color: var(--texto-suave); font-size: .95rem; }
.autorizacao__acao { margin: 0; }
.opcoes-dados { display: grid; gap: 0; }
.opcoes-dados > div { padding: .9rem 0; border-bottom: 1px solid var(--borda); }
.opcoes-dados > div:last-child { border-bottom: 0; }
.opcoes-dados h3 { font-size: 1.05rem; margin-bottom: .2rem; }
.opcoes-dados p { margin: 0 0 .6rem; }

@media (min-width: 640px) {
  .atalhos-conta { grid-template-columns: 1fr 1fr; }
  .autorizacao { grid-template-columns: 1fr auto; align-items: center; gap: 1.25rem; }
}

/* ------------------------------------------------------------ Pet desaparecido: etapa 7 */
.atalho--alerta { border-left-color: var(--laranja); background: var(--laranja-claro); }
.botao--grande { min-height: 56px; font-size: 1.15rem; }

.grade-desap { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin: 1rem 0; }
.desap-card { background: var(--superficie); border: 1px solid var(--borda); border-top: 4px solid var(--laranja); border-radius: var(--raio); overflow: hidden; padding-bottom: .8rem; display: grid; gap: .15rem; }
.desap-card__link { display: grid; gap: .4rem; text-decoration: none; color: inherit; position: relative; }
.desap-card__foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--laranja-claro); }
.desap-card__foto--vazia { display: grid; place-items: center; font-size: 3.5rem; font-weight: 800; color: var(--laranja-escuro); background: linear-gradient(135deg, var(--laranja-claro), var(--verde-claro)); }
.desap-card__selo { position: absolute; top: .6rem; left: .6rem; }
.desap-card__nome { font-weight: 800; font-size: 1.2rem; color: var(--marinho); padding: 0 .9rem; }
.desap-card__link:hover .desap-card__nome { text-decoration: underline; }
.desap-card__meta { margin: 0; padding: 0 .9rem; font-size: .92rem; color: var(--texto-suave); }

.desap { display: grid; gap: 1.25rem; background: var(--superficie); border: 1px solid var(--borda); border-top: 5px solid var(--laranja); border-radius: var(--raio); padding: 1.25rem; box-shadow: var(--sombra); margin-bottom: 1.25rem; }
.desap--encontrado { border-top-color: var(--verde); }
.desap__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raio-pequeno); display: grid; place-items: center; }
.desap--encontrado .desap__foto { filter: saturate(.85); }
.desap__contato { border: 2px solid var(--verde); }
.desap__rodape { align-items: flex-start; margin-bottom: 1.5rem; }
.dicas-seguranca { background: var(--aviso-fundo); border-color: #f0d38a; }
.dicas-seguranca h2 { font-size: 1.15rem; }
.dicas-seguranca ul { margin: .25rem 0 0; padding-left: 1.2rem; }

.lista-avisos { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 1rem; }
.aviso-tutor h2 { font-size: 1.3rem; margin: 0; }
.aviso-tutor .botoes { align-items: center; }
.aviso-tutor form { margin: 0; }

@media (min-width: 900px) {
  .desap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 2rem; align-items: start; }
}
.aviso-tutor p, .aviso-tutor a { overflow-wrap: anywhere; }

/* ------------------------------------------------------------ Parceiros e banners: etapa 8 */
.pre-linha { white-space: pre-line; }
.lista-simples { margin: .5rem 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.dados--linha div { grid-template-columns: 1fr; }
.selo--parceiro { background: var(--marinho); color: #fff; }
.pilula--ativa { border-color: var(--verde-escuro); background: var(--verde-claro); font-weight: 700; }
.filtros .pilula { text-decoration: none; color: var(--texto); }

.publicidade { margin: 1.25rem auto; text-align: center; max-width: 100%; }
.publicidade a { display: inline-block; max-width: 100%; }
.publicidade img { display: block; max-width: 100%; height: auto; border-radius: 6px; }
.publicidade--bloco { max-width: 300px; }
.publicidade__rotulo { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: .2rem; }
.publicidade--vaga { border: 1.5px dashed var(--borda); border-radius: var(--raio); padding: .9rem 1rem; background: var(--superficie); font-size: .95rem; }
.evento__acoes .publicidade { margin: 0 auto; }

.grade-parceiros { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin: 1rem 0; }
.parceiro-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); }
.parceiro-card--destaque { border-color: var(--laranja); box-shadow: var(--sombra); }
.parceiro-card__link { display: flex; gap: .9rem; align-items: center; padding: .9rem 1rem; text-decoration: none; color: inherit; }
.parceiro-card__link > span:last-child { display: grid; gap: .2rem; justify-items: start; }
.parceiro-card__logo { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; flex-shrink: 0; background: var(--verde-claro); }
.parceiro-card__logo--vazio { display: grid; place-items: center; font-size: 2rem; font-weight: 800; color: var(--verde-escuro); }
.parceiro-card__nome { font-weight: 800; color: var(--marinho); font-size: 1.1rem; }
.parceiro-card__link:hover .parceiro-card__nome { text-decoration: underline; }
.parceiro-card__meta { font-size: .9rem; color: var(--texto-suave); }

.parceiro { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.25rem; box-shadow: var(--sombra); margin-bottom: 1.5rem; }
.parceiro__cabeca { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.parceiro__cabeca > div { flex: 1; min-width: 200px; }
.parceiro__logo { border-radius: 16px; object-fit: cover; }
.promocoes { list-style: none; padding: 0; display: grid; gap: .75rem; }
.promocao { border-left: 4px solid var(--laranja); background: var(--laranja-claro); padding: .7rem .9rem; border-radius: var(--raio-pequeno); }
.promocao p { margin: .3rem 0 0; }

.passos { display: grid; gap: .6rem; padding-left: 1.3rem; }
.grade-planos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.plano { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.25rem; }
.plano--destaque { border: 2px solid var(--laranja); }
.plano__valor { font-size: 1.6rem; font-weight: 800; color: var(--verde-escuro); margin: .2rem 0; }
.plano__valor span { font-size: .95rem; font-weight: 400; color: var(--texto-suave); }
.plano ul { padding-left: 1.1rem; margin: .5rem 0 0; }

.lista-banners { list-style: none; padding: 0; display: grid; gap: 1rem; }
.banner-item { display: grid; gap: .75rem; margin: 0; }
.banner-item img, .banner-previa { max-width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--borda); }
.logo-previa { border-radius: 12px; border: 1px solid var(--borda); object-fit: cover; }
.mensagem-pix { width: 100%; font: inherit; font-size: .92rem; padding: .6rem; border: 1.5px solid #b9c6c3; border-radius: var(--raio-pequeno); margin-bottom: .6rem; background: #fbfdfc; }

.barras { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .3rem; }
.barras li { display: grid; grid-template-columns: 3.2rem 1fr; gap: .15rem .6rem; align-items: center; font-size: .88rem; }
.barras__barra { height: 12px; border-radius: 6px; background: var(--verde); min-width: 3px; width: 0; }
.barras__num { grid-column: 2; color: var(--texto-suave); }
.barras__barra--0 { width: 0%; }
.barras__barra--5 { width: 5%; }
.barras__barra--10 { width: 10%; }
.barras__barra--15 { width: 15%; }
.barras__barra--20 { width: 20%; }
.barras__barra--25 { width: 25%; }
.barras__barra--30 { width: 30%; }
.barras__barra--35 { width: 35%; }
.barras__barra--40 { width: 40%; }
.barras__barra--45 { width: 45%; }
.barras__barra--50 { width: 50%; }
.barras__barra--55 { width: 55%; }
.barras__barra--60 { width: 60%; }
.barras__barra--65 { width: 65%; }
.barras__barra--70 { width: 70%; }
.barras__barra--75 { width: 75%; }
.barras__barra--80 { width: 80%; }
.barras__barra--85 { width: 85%; }
.barras__barra--90 { width: 90%; }
.barras__barra--95 { width: 95%; }
.barras__barra--100 { width: 100%; }

.corpo-recibo { background: #fff; }
.recibo { max-width: 680px; margin: 2rem auto; padding: 2rem; border: 1px solid var(--borda); border-radius: var(--raio); }
.recibo__topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: 2px solid var(--verde); padding-bottom: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.recibo__topo h1 { font-size: 1.4rem; margin: 0; }
.recibo__topo p { margin: 0; color: var(--texto-suave); }
@media print {
  .recibo__acoes { display: none; }
  .recibo { border: 0; margin: 0; }
}

@media (min-width: 640px) {
  .dados--linha div { grid-template-columns: 9rem 1fr; }
  .banner-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}

/* Menu com 4 itens: no celular, desliza na horizontal em vez de estourar a tela */
.topo__menu { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.topo__menu::-webkit-scrollbar { display: none; }
.topo__menu a { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 639px) {
  .topo__menu { order: 3; flex: 1 1 100%; gap: 0; }
  .topo__menu a { padding: .35rem .45rem; font-size: .92rem; }
  /* Menu desliza para o lado: o esmaecido na borda mostra que há mais itens. */
  .topo__menu { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); padding-right: 1.5rem; }
}
.parceiro h2 { margin-top: 1.25rem; }

/* Cadeado discreto: acesso da equipe (ADM e Editor), à esquerda da logo */
.topo__cadeado {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: -.4rem;
  border-radius: 50%; color: var(--texto-suave); opacity: .18; filter: blur(1.2px); text-decoration: none;
  transition: opacity .25s ease, filter .25s ease, background-color .25s ease, color .25s ease;
}
.topo__cadeado:hover, .topo__cadeado:focus-visible { color: var(--verde-escuro); opacity: 1; filter: none; background: var(--verde-claro); }

/* ------------------------------------------------------------ Home: palco de fotos (pegada que revela a próxima cena) */
.palco {
  --palco-tempo: 6.5s;
  position: relative; width: 100%; max-width: 480px; justify-self: center; order: -1;
  border-radius: 28px; isolation: isolate;
  box-shadow: 0 30px 60px -25px rgba(10, 24, 54, .55), 0 0 0 1px rgba(10, 24, 54, .08);
}
.palco::before {
  /* halo colorido que "respira" atrás do palco */
  content: ""; position: absolute; inset: -6px; z-index: -1; border-radius: 34px;
  background: conic-gradient(from 200deg, var(--verde), var(--laranja), #ffc59a, var(--verde));
  filter: blur(26px); opacity: .45; animation: palco-halo 9s ease-in-out infinite alternate;
}
@keyframes palco-halo { from { transform: rotate(-4deg) scale(.96); opacity: .35; } to { transform: rotate(4deg) scale(1.02); opacity: .55; } }

.palco__cena {
  position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; border-radius: 28px;
  background: radial-gradient(120% 90% at 50% 20%, #1d2c4f, var(--marinho) 70%);
  transform: perspective(1000px) rotateX(var(--palco-ry, 0deg)) rotateY(var(--palco-rx, 0deg));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
.palco__slide { position: absolute; inset: 0; margin: 0; visibility: hidden; z-index: 0; }
.palco__slide.is-ativo { visibility: visible; z-index: 2; }
.palco__slide.is-saindo { visibility: visible; z-index: 1; }
.palco__slide picture, .palco__slide img { display: block; width: 100%; height: 100%; }
.palco__slide img { object-fit: cover; object-position: 50% 32%; transform-origin: 50% 40%; }
.palco__slide.is-ativo img { animation: palco-respira calc(var(--palco-tempo) + 2s) ease-out both; }
@keyframes palco-respira { from { transform: scale(1.12) translate3d(0, 1.5%, 0); } to { transform: scale(1.0) translate3d(0, 0, 0); } }

/* A troca: a nova foto entra pela forma de uma pegada que cresce até cobrir tudo. */
@supports ((mask-size: 10%) or (-webkit-mask-size: 10%)) {
  .palco__slide.is-revelando {
    -webkit-mask: url("../img/home/pata.svg") 50% 54% / 0% no-repeat;
    mask: url("../img/home/pata.svg") 50% 54% / 0% no-repeat;
    animation: palco-pegada 1.15s cubic-bezier(.75, 0, .2, 1) both;
  }
}
@keyframes palco-pegada {
  0%   { -webkit-mask-size: 0%; mask-size: 0%; }
  35%  { -webkit-mask-size: 70%; mask-size: 70%; }
  100% { -webkit-mask-size: 700%; mask-size: 700%; }
}

/* Luz que segue o cursor */
.palco__luz {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--palco-x, 70%) var(--palco-y, 25%), rgba(255, 255, 255, .55), transparent 42%);
  opacity: .0; transition: opacity .4s ease;
}
.palco.is-sobre .palco__luz { opacity: 1; }

/* Degradê de leitura + legenda em vidro */
.palco__slide::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 55%; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(6, 14, 32, .78), rgba(6, 14, 32, 0));
}
.palco__legenda { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2; margin: 0; }
.palco__legenda a {
  display: inline-grid; gap: .1rem; padding: .65rem 1rem .7rem; border-radius: 18px; text-decoration: none; color: #fff;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  transition: background-color .2s ease, transform .2s ease;
}
.palco__legenda a:hover, .palco__legenda a:focus-visible { background: rgba(255, 255, 255, .22); transform: translateY(-2px); }
.palco__legenda strong { font-size: 1.15rem; line-height: 1.25; }
.palco__olho { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: #ffd2b0; font-weight: 700; }
.palco__slide.is-ativo .palco__legenda a { animation: palco-legenda .6s .2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes palco-legenda { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.palco__selo {
  position: absolute; top: 2.9rem; right: .9rem; z-index: 4; display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700; color: var(--marinho);
  background: rgba(255, 255, 255, .88); box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.palco__selo svg { color: var(--verde-escuro); }

/* Trilha de progresso (estilo "stories") e pausa */
.palco__controles { position: absolute; top: .8rem; left: .9rem; right: .9rem; z-index: 5; display: flex; align-items: center; gap: .5rem; }
.palco__trilha { flex: 1; display: flex; gap: .35rem; }
.palco__passo {
  flex: 1; position: relative; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
}
.palco__passo::before, .palco__passo i {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px;
}
.palco__passo::before { background: rgba(255, 255, 255, .32); }
.palco__passo i { background: #fff; transform-origin: left; transform: scaleX(0); }
.palco__passo.is-feito i { transform: scaleX(1); }
.palco__passo.is-ativo i { transform: scaleX(1); }
.palco.is-auto .palco__passo.is-ativo i { animation: palco-barra var(--palco-tempo) linear both; }
.palco.is-pausado .palco__passo.is-ativo i { animation-play-state: paused; }
@keyframes palco-barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.palco__passo:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
.palco__pausa {
  width: 30px; height: 30px; display: inline-grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .35); color: #fff; background: rgba(10, 24, 54, .35);
}
.palco__pausa:hover, .palco__pausa:focus-visible { background: rgba(10, 24, 54, .6); }
.palco__ico-tocar, .palco.is-pausado .palco__ico-pausa { display: none; }
.palco.is-pausado .palco__ico-tocar { display: block; }

@media (min-width: 900px) {
  .palco { order: 0; }
  .palco__cena { aspect-ratio: 1 / 1.08; }
}
@media (prefers-reduced-motion: reduce) {
  .palco__cena { transform: none; }
  .palco::before { animation: none; }
}

/* ------------------------------------------------------------ Painel: equipe */
.equipe { margin-bottom: 2rem; }
.equipe h2 { margin-top: 0; }
.equipe__form { display: grid; gap: .75rem; align-items: end; margin: 1rem 0 .25rem; }
.equipe__form .campo { margin: 0; }
.equipe__convite { display: grid; gap: .5rem; }
.equipe__convite p { margin: 0; }
.equipe__tipo { display: flex; gap: .4rem; align-items: center; flex-wrap: nowrap; }
.equipe__tipo select { min-height: 36px; }
.equipe__acoes { flex-wrap: nowrap; gap: .4rem; }
.equipe__tabela td { white-space: nowrap; }
.equipe__acoes form { margin: 0; }
.equipe__sem-acesso td { color: var(--texto-suave); }
.selo-voce { display: inline-block; margin-left: .3rem; padding: 0 .5rem; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--verde-claro); color: var(--verde-escuro); }
@media (min-width: 760px) { .equipe__form { grid-template-columns: 1fr 1.3fr .8fr auto; } }

/* ------------------------------------------------------------ Cidades: capital em destaque */
.lista-cidades li.lista-cidades__capital {
  order: -1; border: 2px solid var(--laranja); background: var(--laranja-claro); font-weight: 800; font-size: 1.02rem; padding: .3rem .9rem;
}
.lista-cidades__capital a { color: var(--marinho); }
.selo-capital {
  display: inline-block; margin-left: .25rem; padding: 0 .45rem; border-radius: 999px; vertical-align: .1em;
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--laranja-escuro);
}

/* ------------------------------------------------------------ Histórias do Meu Pet (etapa 9) */
.grade-historias { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin: 1rem 0; }
.historia-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: calc(var(--raio) * 1.2); overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.historia-card:hover { box-shadow: var(--sombra); transform: translateY(-2px); }
.historia-card__link { display: grid; text-decoration: none; color: inherit; height: 100%; }
.historia-card__foto { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; background: var(--verde-claro); }
.historia-card__foto--vazia { display: grid; place-items: center; color: var(--verde); background: linear-gradient(135deg, var(--verde-claro), var(--laranja-claro)); }
.historia-card__corpo { display: grid; gap: .3rem; padding: .9rem 1rem 1rem; align-content: start; }
.historia-card__pet { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--laranja-escuro); }
.historia-card__titulo { font-weight: 800; color: var(--marinho); font-size: 1.1rem; line-height: 1.3; }
.historia-card__link:hover .historia-card__titulo { text-decoration: underline; }
.historia-card__resumo { color: var(--texto-suave); font-size: .95rem; }
.historia-card__autor { font-size: .85rem; color: var(--texto-suave); font-style: italic; }

.historias-topo { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: .5rem; }
.historias-topo > div { flex: 1 1 320px; }

.historia { max-width: 760px; margin: 0 auto; background: var(--superficie); border: 1px solid var(--borda); border-radius: calc(var(--raio) * 1.5); overflow: hidden; }
.historia__cabeca { display: grid; }
.historia__foto { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; }
.historia__titulo { padding: 1.25rem 1.25rem 0; }
.historia__titulo h1 { margin: .1rem 0; }
.historia__pet { margin: 0; font-size: .85rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--laranja-escuro); }
.historia__autor { margin: .25rem 0 0; color: var(--texto-suave); font-style: italic; }
.historia__texto { padding: 1rem 1.25rem; font-size: 1.12rem; line-height: 1.75; }
.historia__bloco { margin: 0 1.25rem 1rem; padding: 1rem 1.1rem; border-radius: var(--raio); background: var(--fundo); border: 1px solid var(--borda); }
.historia__bloco h2 { margin: 0 0 .35rem; font-size: 1.05rem; color: var(--verde-escuro); }
.historia__bloco p { margin: 0; }
.historia__bloco--dicas { background: var(--laranja-claro); border-color: #f6c79f; }
.historia__bloco--dicas h2 { color: var(--laranja-escuro); }
.historia__acoes { max-width: 760px; margin: 1rem auto; align-items: flex-start; }
.historia-previa { display: block; max-width: 320px; width: 100%; height: auto; border-radius: var(--raio-pequeno); border: 1px solid var(--borda); }

.lista-minhas-historias { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .9rem; }
.minha-historia { display: grid; gap: .4rem; }
.minha-historia__topo { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.minha-historia__titulo { margin: 0; font-size: 1.15rem; }
.minha-historia .botoes form { margin: 0; }
@media (min-width: 640px) { .historia__titulo, .historia__texto { padding-left: 2rem; padding-right: 2rem; } .historia__bloco { margin-left: 2rem; margin-right: 2rem; } }