/* manipulação visitas */

.visita {
  text-align: center;
}

.secao-h2 h2 {
  text-align: center;
  padding: 1em 0.1em;
  font-size: 2rem;
  color: var(--text-titulo); /* Cor do título */
  font-weight: 700;
}

/* -------  PARTES QU NÃO SÃO VISIVEIS EM TELAS MAIORES  --------- */
.foto2,
.navbar-logo,
.btn-contato {
  display: none;
}

/* ----- SEÇÃO 01 - CAPA ok ----- */

.secao1 {
  background-color: var(--background-primeira);
}
.capa_foto {
  padding-bottom: 24rem;
  position: relative; /* Para ser referência da posição absoluta */
}
.texto_capa {
  background-color: var(--text-titulo);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 0.5rem;
  margin: 0;
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centraliza no meio exato */
  width: 80%;
  max-width: 600px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  border-radius: 16px;
}
.logo_capa {
  width: 13em;
  max-width: 400px; /* Limita em telas grandes */
  height: auto;
  text-align: center;
  padding: 1em;
}
.aumigo {
  width: 17em;
  max-width: 500px; /* Limita em telas grandes */
  padding: 1em;
}
.texto_capa h2 {
  color: var(--text-branco);
  font-size: 0.9rem;
  text-align: center;
  max-width: 90%; /* Limita a largura do texto */
  padding-inline: 0.1rem; /* Espaço lateral para evitar encostar nas bordas */
}
.texto_capa h2 span {
  color: var(--primeira);
}
.texto_capa h4 {
  color: var(--text-branco);
  font-size: 1rem;
  padding-top: 1em;
}

/* ----- SEÇÃO 02 - DISPONÍVEIS ----- */

.secao2 {
  background-color: var(--background-segunda);
  background-image: url("/assets/img/fundo/fundo_laranja.png");
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5rem 1rem;
}
.disponivel {
  width: 80%;
  max-width: 600px;
  text-align: center;
}

/* ----- SEÇÃO 03 - RAÇAS QUE CRIAMOS ----- */

.secao3,
.secao5,
.secao7 {
  background-image: url("/assets/img/fundo/fundo_textura_pedra.jpg");
}
.secao3 {
  padding: 3rem 0.5rem;
}

.raca-criamos img {
  width: 320px;
  height: 320px;
  object-fit: cover;
  border: 5px solid var(--text-branco);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra suave */
  transition: transform 0.3s ease; /* Animação suave ao passar o mouse */
}
.raca-criamos img:hover {
  transform: scale(1.2); /* Efeito de zoom na imagem ao passar o mouse */
}

.titulo-raca {
  font-size: 1.9rem;
  font-weight: 600;
  padding-top: 1.5em;
  text-align: center;
  color: var(--text-titulo); /* Cor dos nomes das raças */
}
.descricao-raca {
  padding: 2rem;
  background-color: var(--background-quarta);
  text-align: justify;
  border-radius: 16px;
  max-width: 700px;
  margin: 0 auto;
}
.descricao-raca ul {
  list-style-type: "🐾 ";
  padding-left: 1rem;
}
.descricao-raca li {
  margin-bottom: 0.9rem;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--text-cinza);
}

/* ----- SEÇÃO 04 - KIT ENTREGA ----- */

.secao4-kit-entrega {
  background-color: var(--background-primeira);
  padding: 1.2em 0.2em;
}
.secao-h2 .fundo_escuro {
  color: var(--text-branco);
}
.entrega-itens {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* Permite que os itens quebrem linha */
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  padding: 1.5rem 1rem;
}
.item-entrega {
  width: 10em;
  aspect-ratio: 1 / 1;
  background-color: transparent;
  border: 5px solid #e4e4e4;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7px; /* padding dentro da caixa */
  box-sizing: border-box;
  margin: 0 auto 30px auto; /* 👈 centraliza horizontalmente */
  transition: transform 0.2s ease;
}
.item-entrega:hover {
  transform: scale(1.08);
}
@media (hover: hover) and (pointer: fine) {
  .item-entrega:hover {
    transform: scale(1.08);
  }
}
.icone-entrega {
  max-width: 40%;
  height: auto;
  margin-bottom: 10px;
}
.texto-entrega {
  color: var(--text-branco);
  font-size: 1em;
  padding-top: 0.2em;
}

/* ----- SEÇÃO 05 - GALERIA -----*/

.entregue {
  text-align: center;
  padding: 1.5rem;
}
.entregue h2 {
  color: var(--background-primeira);
  font-size: 1.6rem;
}
.entregue h3 {
  color: var(--text-preto);
  font-size: 1.2rem;
}
.box {
  padding-bottom: 5rem;
  margin: 0;
}
.galeria_filhotes {
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* Espaçamento entre as imagens */
  padding: 0 2rem;
  margin: 0;
}
.imagem_galeria {
  position: relative;
  flex: 1;
  transition: all 0.5s ease;
  cursor: pointer;
  overflow: hidden;
}
.imagem_galeria img {
  width: 100%;
  height: 30vh; /* Define uma altura consistente para manter o aspecto visual */
  display: block;
  object-fit: cover;
  object-position: center;
  margin: 0;
  transition: all 0.5s ease;
}
.imagem_galeria.expanded {
  flex: 1; /* aumenta o tamanho */
  transform: scale(
    1.5
  ); /* Aplica um leve zoom no item para dar destaque visual */
  z-index: 1; /* Garante que o item expandido fique sobre os demais, evitando sobreposição estranha */
}

/* ----- SEÇÃO 06 - FAMÍLIA -----*/
.secao6 {
  padding: 2rem 1rem;
  background-color: var(--terceira);
}
.titulo-secao {
  text-align: center;
  font-size: 2rem;
  color: var(--text-branco);
  margin-bottom: 2rem;
}
.galeria-filhotes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  justify-items: center;
}
.card-filhote {
  position: relative;
  width: 100%;
  max-width: 280px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.imagem-filhote {
  width: 100%;
  height: auto;
  display: block;
}
.info-localizacao {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  text-align: center;
  padding: 0.5rem;
  font-size: 1rem;
}

/* ----- SEÇÃO 07 - PARCEIROS -----*/
.secao7 {
  padding: 4rem 1rem;
}

.galeria-parceiros {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  gap: 1.5rem;
  padding: 2rem 1rem;
}
.logo-parceiro {
  max-width: 150px;
  height: auto;
  transition: transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .logo-parceiro:hover {
    transform: scale(1.3);
  }
}

/* ----- SEÇÃO 08 - CONTATO -----*/

.secao8 {
  background-color: var(--background-quinta);
  color: var(--text-branco);
  padding: 3rem 1rem;
  text-align: center;
}

.conteudo-contato {
  font-size: 20px;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* Botão do WhatsApp */
.btn-zap a {
  background-color: #25d366;
  color: white;
  padding: 0.8em 1em;
  border-radius: 8px;
  font-size: 1.1em;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  transition: background-color 0.3s ease;
}
.btn-zap a:hover {
  background-color: #1ebc57;
}

/* Redes Sociais */
.redes-sociais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
  gap: 1.2rem;
  justify-content: center;
  align-items: center;
  max-width: 300px;
  margin: 0 auto;
}

.icone-rede-social {
  width: 60px;
  height: 60px;
  transition: transform 0.3s ease-in-out;
}
.icone-rede-social:hover {
  transform: scale(1.1);
}

/* Informações */
.informacoes-contato ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.informacoes-contato li.telefone {
  font-size: 1.5em;
  color: var(--background-segunda);
  font-weight: bold;
}
.informacoes-contato li.endereco {
  margin-top: 0.2em;
}

/* Contador de visitas */
.contador-visitas {
  margin-top: 1.2rem;
  font-size: 0.9em;
  opacity: 0.7;
}

/* Links */
a:link,
a:visited {
  text-decoration: none;
}

.contador {
  text-align: right;
}

/* style Rodape*/
footer {
  background-color: var(--background-sexta);
}
.rodape-principal {
  color: var(--text-branco);
  text-align: center;
  padding: 30px 30px;
  font-size: 14px;
}