:root {
  --roxo-900: #2f1b69;
  --roxo-700: #5b35b5;
  --roxo-600: #7047c7;
  --roxo-100: #eee8ff;
  --roxo-50: #f8f5ff;
  --laranja: #f28c45;
  --laranja-claro: #fff1e7;
  --vermelho: #d94b5b;
  --texto: #282334;
  --cinza: #6f687a;
  --borda: #e6e0ee;
  --branco: #ffffff;
  --sombra: 0 12px 35px rgba(47, 27, 105, 0.1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--texto);
  background: #fbfaff;
  line-height: 1.6;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
}
button,
input,
select,
textarea {
  font: inherit;
}
.container {
  width: 90%;
  max-width: 1180px;
  margin: auto;
}

.cabecalho {
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 10;
}
.cabecalho-conteudo {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--roxo-900);
  font-size: 1.25rem;
  font-weight: 800;
}
.logo-icone,
.logo strong {
  color: var(--laranja);
}
.menu {
  display: flex;
  align-items: center;
  gap: 26px;
}
.menu a {
  color: #514a5c;
  font-weight: 700;
  font-size: 0.94rem;
}
.menu a:hover,
.menu a.ativo {
  color: var(--roxo-600);
}
.acoes-menu {
  display: flex;
  align-items: center;
  gap: 12px;
}

.botao,
button.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  border-radius: 10px;
  padding: 12px 20px;
  background: var(--roxo-600);
  color: white;
  font-weight: 700;
  transition: 0.2s;
}
.botao:hover {
  background: var(--roxo-900);
  transform: translateY(-2px);
}
.botao-secundario {
  background: white;
  color: var(--roxo-600);
  border: 2px solid var(--roxo-600);
}
.botao-secundario:hover {
  color: white;
}
.botao-alerta {
  background: var(--laranja);
}
.botao-alerta:hover {
  background: #d96f26;
}
.link {
  color: var(--roxo-600);
  font-weight: 700;
}
.largura-total {
  width: 100%;
}

.hero {
  background: linear-gradient(135deg, var(--roxo-50), #fff8f2);
  padding: 88px 0;
  overflow: hidden;
}
.hero-conteudo {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 60px;
}
.etiqueta {
  display: inline-block;
  color: var(--roxo-600);
  background: var(--roxo-100);
  padding: 7px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.hero h1 {
  color: var(--roxo-900);
  font-size: clamp(2.5rem, 5vw, 4.3rem);
  line-height: 1.05;
  margin: 18px 0 22px;
}
.hero h1 span {
  color: var(--laranja);
}
.hero p {
  color: var(--cinza);
  font-size: 1.12rem;
  max-width: 620px;
}
.grupo-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}
.pet-ilustracao {
  width: 360px;
  height: 360px;
  margin: auto;
  border-radius: 50%;
  background: var(--roxo-100);
  display: grid;
  place-items: center;
  font-size: 10rem;
  position: relative;
}
.pet-ilustracao::after {
  content: "❤ Pet encontrado!";
  position: absolute;
  bottom: 18px;
  left: -30px;
  background: white;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: var(--sombra);
  color: var(--roxo-900);
}

.faixa {
  background: var(--roxo-700);
  color: white;
}
.faixa-conteudo {
  padding: 23px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  gap: 20px;
}
.faixa strong {
  display: block;
  font-size: 1.12rem;
}
.faixa span {
  color: #ded3ff;
  font-size: 0.9rem;
}
.secao {
  padding: 82px 0;
}
.secao-suave {
  background: var(--roxo-50);
}
.titulo-secao {
  max-width: 680px;
  text-align: center;
  margin: 0 auto 42px;
}
.titulo-secao h2 {
  color: var(--roxo-900);
  font-size: clamp(2rem, 4vw, 2.7rem);
  margin: 8px 0;
}
.titulo-secao p {
  color: var(--cinza);
}

.grade-pets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.card-pet {
  background: white;
  border: 1px solid var(--borda);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(47, 27, 105, 0.05);
}
.card-pet:hover {
  box-shadow: var(--sombra);
  transform: translateY(-4px);
  transition: 0.2s;
}
.foto-pet {
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 0;
  max-height: none;
  background: var(--roxo-100);
  display: grid;
  place-items: center;
  font-size: 7rem;
  position: relative;
  overflow: hidden;
}
.foto-pet img,
.perfil-foto img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
}
.foto-pet img {
  object-fit: contain;
  object-position: center;
  background: var(--roxo-100);
}
.status {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--vermelho);
  color: white;
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 0.7rem;
  font-weight: 800;
}
.card-conteudo {
  padding: 20px;
}
.card-conteudo h3 {
  color: var(--roxo-900);
  font-size: 1.45rem;
}
.card-conteudo p {
  color: var(--cinza);
  margin-top: 8px;
  font-size: 0.92rem;
}
.card-conteudo p strong {
  color: var(--texto);
}
.card-conteudo .tipo {
  color: var(--roxo-600);
  font-weight: 700;
}
.card-conteudo .link {
  display: inline-block;
  margin-top: 16px;
}
.centralizado {
  text-align: center;
  margin-top: 34px;
}
.passos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.passo {
  text-align: center;
  background: white;
  border: 1px solid var(--borda);
  padding: 28px 20px;
  border-radius: 16px;
}
.passo-icone {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  background: var(--roxo-100);
  border-radius: 50%;
  margin: 0 auto 16px;
  font-size: 2rem;
}
.passo h3 {
  color: var(--roxo-900);
}
.passo p {
  color: var(--cinza);
  font-size: 0.92rem;
  margin-top: 8px;
}
.qr-bloco {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: 70px;
}
.qr-exemplo {
  background: white;
  border-radius: 24px;
  padding: 42px;
  text-align: center;
  box-shadow: var(--sombra);
}
.qr {
  font-size: 8rem;
  color: var(--roxo-900);
  line-height: 1;
}
.qr-bloco h2 {
  color: var(--roxo-900);
  font-size: 2.5rem;
  margin: 12px 0;
}
.qr-bloco p {
  color: var(--cinza);
  margin-bottom: 12px;
}
.chamada {
  background: linear-gradient(
    135deg,
    var(--roxo-700),
    var(--roxo-900)
  );
  color: white;
  text-align: center;
  padding: 65px 0;
}
.chamada h2 {
  font-size: 2.3rem;
}
.chamada p {
  color: #ded3ff;
  margin: 10px 0 24px;
}

.cabecalho-pagina {
  background: linear-gradient(135deg, var(--roxo-50), #fff8f2);
  padding: 55px 0;
  text-align: center;
}
.cabecalho-pagina h1 {
  color: var(--roxo-900);
  font-size: 2.7rem;
}
.cabecalho-pagina p {
  color: var(--cinza);
  max-width: 650px;
  margin: 8px auto 0;
}
.area-formulario {
  padding: 55px 0 80px;
}
.formulario-card {
  max-width: 760px;
  margin: auto;
  background: white;
  border: 1px solid var(--borda);
  border-radius: 18px;
  padding: 34px;
  box-shadow: var(--sombra);
}
.formulario-card.pequeno {
  max-width: 480px;
}
.formulario-card h2 {
  color: var(--roxo-900);
  margin-bottom: 4px;
}
.texto-apoio {
  color: var(--cinza);
  margin-bottom: 24px;
}
.grade-formulario {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.campo-completo {
  grid-column: 1/-1;
}
.campo label {
  font-weight: 700;
  color: #443d50;
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  border: 1px solid #d8d0e1;
  border-radius: 9px;
  padding: 12px 13px;
  background: #fdfcff;
  color: var(--texto);
}
.campo-checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: var(--roxo-50);
  border-radius: 10px;
}

.campo-checkbox input {
  width: auto;
  margin-top: 5px;
}

.campo-checkbox label {
  cursor: pointer;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: 3px solid #e6dcff;
  border-color: var(--roxo-600);
}
.campo textarea {
  min-height: 110px;
  resize: vertical;
}
.ajuda {
  color: var(--cinza);
  font-size: 0.8rem;
}
.formulario-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 25px;
}
.separador {
  border: 0;
  border-top: 1px solid var(--borda);
  margin: 25px 0;
}
.aviso {
  background: var(--laranja-claro);
  border-left: 4px solid var(--laranja);
  padding: 14px;
  border-radius: 7px;
  color: #77431d;
  margin-bottom: 22px;
}

.filtros {
  background: white;
  border: 1px solid var(--borda);
  padding: 18px;
  border-radius: 14px;
  margin-bottom: 30px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 12px;
}
.filtros input,
.filtros select {
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 11px;
}
.perfil {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 42px;
  align-items: start;
}
.perfil-foto {
  background: var(--roxo-100);
  min-height: 410px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 11rem;
  position: relative;
}
.perfil-info {
  background: white;
  border: 1px solid var(--borda);
  border-radius: 18px;
  padding: 32px;
}
.perfil-info h1 {
  color: var(--roxo-900);
  font-size: 2.6rem;
}
.perfil-info .subtitulo {
  color: var(--roxo-600);
  font-weight: 700;
}
.dados {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 25px 0;
}
.dado {
  background: var(--roxo-50);
  border-radius: 10px;
  padding: 13px;
}
.dado strong {
  display: block;
  color: var(--roxo-900);
  font-size: 0.82rem;
}
.alerta-detalhe {
  background: #fff4ed;
  border: 1px solid #ffd5b8;
  border-radius: 12px;
  padding: 18px;
  margin: 20px 0;
}
.contato-tutor {
  background: var(--roxo-900);
  color: white;
  border-radius: 12px;
  padding: 20px;
}
.contato-tutor p {
  color: #ded3ff;
}
.perfil-foto {
  overflow: hidden;
}

.perfil-info h2 {
  margin-top: 22px;
}

.estado-vazio {
  grid-column: 1 / -1;
  padding: 30px;
  color: var(--cinza);
  background: var(--roxo-50);
  border: 1px dashed var(--borda);
  border-radius: 14px;
  text-align: center;
}

button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.rodape {
  background: #211443;
  color: white;
  padding-top: 48px;
}
.rodape-conteudo {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 38px;
}
.rodape p,
.rodape a {
  color: #cfc5e4;
}
.links-rodape {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.links-rodape h3 {
  margin-bottom: 8px;
}
.copyright {
  border-top: 1px solid #44356a;
  padding: 18px;
  text-align: center;
  font-size: 0.85rem;
}

@media (max-width: 900px) {
  .cabecalho-conteudo {
    flex-wrap: wrap;
    padding: 14px 0;
  }
  .menu {
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 22px;
  }
  .hero-conteudo,
  .qr-bloco,
  .perfil {
    grid-template-columns: 1fr;
  }
  .hero {
    padding: 65px 0;
  }
  .pet-ilustracao {
    width: 300px;
    height: 300px;
    font-size: 8rem;
  }
  .grade-pets {
    grid-template-columns: repeat(2, 1fr);
  }
  .passos {
    grid-template-columns: repeat(2, 1fr);
  }
  .perfil-foto {
    min-height: 330px;
  }
  .filtros {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .acoes-menu .botao {
    padding: 9px 12px;
  }
  .menu {
    font-size: 0.85rem;
  }
  .hero-conteudo {
    gap: 38px;
  }
  .hero h1 {
    font-size: 2.55rem;
  }
  .pet-ilustracao {
    width: 240px;
    height: 240px;
    font-size: 6.8rem;
  }
  .pet-ilustracao::after {
    left: 0;
  }
  .faixa-conteudo,
  .grade-pets,
  .passos,
  .grade-formulario,
  .dados,
  .rodape-conteudo,
  .filtros {
    grid-template-columns: 1fr;
  }
  .secao {
    padding: 60px 0;
  }
  .formulario-card {
    padding: 24px 18px;
  }
  .formulario-acoes {
    flex-direction: column-reverse;
  }
  .formulario-acoes .botao {
    width: 100%;
  }
  .cabecalho-pagina h1 {
    font-size: 2.1rem;
  }
  .perfil-foto {
    min-height: 260px;
    font-size: 8rem;
  }
}

.mensagem-formulario {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  font-weight: 600;
}
.mensagem-formulario.erro {
  color: #8f1d1d;
  background: #ffe5e5;
  border: 1px solid #f3b5b5;
}
.mensagem-formulario.sucesso {
  color: #176338;
  background: #e0f7e9;
  border: 1px solid #a8dfbd;
}
.usuario-logado {
  font-weight: 600;
  color: #334155;
}
.botao-sair {
  border: 0;
  cursor: pointer;
  font: inherit;
}

.acoes-card {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.botao-pequeno {
  padding: 9px 13px;
  font-size: 0.86rem;
}

.botao-perigo {
  background: var(--vermelho);
}

.botao-perigo:hover {
  background: #b93646;
}

.foto-edicao {
  width: 100%;
  max-width: 560px;
  margin: 0 auto 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.foto-edicao img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 4px solid var(--roxo-100);
  border-radius: 14px;
}

.perfil-galeria {
  min-width: 0;
}

.perfil-miniaturas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.miniatura {
  padding: 0;
  overflow: hidden;
  border: 3px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}

.miniatura.ativa {
  border-color: var(--roxo-600);
}

.miniatura img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}