/* =====================================================================
   Zelo - Vida Animal
   Estilos do site. Fiel ao layout original (Poppins, laranja #EE5B2C).
   ===================================================================== */

:root{
  --laranja:#ee5b2c;
  --laranja-escuro:#b83f17;
  --preto:#1a1a1a;
  --texto:#1d1e20;
  --branco:#fff;
  --cinza-escuro:#595858;
  --cinza-galeria:#ebebeb;
  --cinza-servicos:#f0f0f0;
  --cinza-equipe:#ededed;
  --pessego:#ffe6dd;
  --pessego-claro:#ffede4;
  --azul-contato:#373b96;
  --largura:1224px;
  --fonte:'Poppins',sans-serif;
}

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

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

body{
  margin:0;
  font-family:var(--fonte);
  font-size:18px;
  font-weight:400;
  line-height:1.6;
  color:var(--texto);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,h4,h5,h6{margin:0;font-weight:500;line-height:1.24}
h1{font-size:88px}
h2{font-size:64px}
h3{font-size:48px}
h4{font-size:40px}
h5{font-size:32px}
h6{font-size:24px}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.conteudo{
  width:100%;
  max-width:var(--largura);
  margin:0 auto;
  padding:0 16px;
}

/* ------------------------------------------------------------------ */
/* Botões                                                             */
/* ------------------------------------------------------------------ */
.botao{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:var(--fonte);
  font-size:16px;
  font-weight:700;
  line-height:normal;
  text-decoration:none;
  padding:14px 40px;
  border:0 solid transparent;
  border-radius:999px;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}

/* WHATSAPP do cabeçalho */
.botao--cabecalho{
  font-size:15px;
  font-weight:500;
  border-radius:7px;
  background:var(--laranja-escuro);
  color:var(--branco);
}
.botao--cabecalho:hover{background:var(--texto)}

/* AGENDAR CONSULTA (hero) */
.botao--contorno{
  background:var(--branco);
  color:var(--laranja);
  border:3px solid var(--laranja);
}
.botao--contorno:hover{background:var(--branco);border-color:transparent}

/* CONHECER */
.botao--laranja{background:var(--laranja);color:var(--branco)}
.botao--laranja:hover{background:var(--texto)}

/* 016 3461.4007 - WHATSAPP (card laranja) */
.botao--preto{
  background:#000;
  color:var(--branco);
  font-size:22px;
  border:2px solid var(--branco);
  border-radius:9px;
}
.botao--preto:hover{background:var(--texto);border-color:#000}

/* CONHEÇA NOSSOS PROFISSIONAIS */
.botao--equipe{
  font-family:'Roboto',sans-serif;
  font-size:18px;
  background:var(--laranja);
  color:var(--branco);
  border:3px solid var(--branco);
  border-radius:6px;
}
.botao--equipe:hover{background:var(--preto);border-color:var(--branco)}

/* ------------------------------------------------------------------ */
/* Cabeçalho                                                          */
/* ------------------------------------------------------------------ */
.cabecalho{background:var(--branco)}

.cabecalho__interno{
  max-width:1240px;
  margin:0 auto;
  padding:24px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:63px;
}

.cabecalho__logo{display:block;flex:0 0 auto}
.cabecalho__logo img{width:264px;height:auto}

.menu{display:flex;align-items:center;gap:63px;margin-left:auto}

.menu ul{
  display:flex;
  align-items:center;
  gap:40px;
  list-style:none;
  margin:0;
  padding:0;
}

.menu ul a{
  font-size:16px;
  font-weight:400;
  line-height:1.6;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--preto);
  white-space:nowrap;
}
.menu ul a:hover,.menu ul a.ativo{opacity:.7}

.hamburguer{
  display:none;
  width:32px;
  height:24px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  position:relative;
}
.hamburguer span{
  display:block;
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:var(--preto);
  transition:transform .25s ease,opacity .25s ease;
}
.hamburguer span:nth-child(1){top:2px}
.hamburguer span:nth-child(2){top:11px}
.hamburguer span:nth-child(3){top:20px}
.hamburguer[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.hamburguer[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguer[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ------------------------------------------------------------------ */
/* Seções                                                             */
/* ------------------------------------------------------------------ */
.secao{padding:30px 0}
.secao--branca{background:var(--branco)}
.secao--pessego{background:var(--pessego)}
.secao--pessego-claro{background:var(--pessego-claro)}
.secao--galeria{background:var(--cinza-galeria)}
.secao--servicos{background:var(--cinza-servicos)}
.secao--equipe{background:var(--cinza-equipe)}
.secao--laranja{background:var(--laranja);color:var(--branco)}

/* Faixa "ATENDIMENTO 24H" */
.faixa{
  background:var(--laranja);
  padding:16px 0;
  text-align:center;
}
.faixa h6{
  font-size:24px;
  font-weight:700;
  color:var(--branco);
}

/* Cabeçalho das páginas internas */
.titulo-pagina{
  background:var(--laranja);
  padding:80px 0;
  text-align:center;
}
.titulo-pagina--azul{background:var(--azul-contato)}
.titulo-pagina h1{color:var(--branco);font-weight:700}

/* ------------------------------------------------------------------ */
/* Home — hero                                                        */
/* ------------------------------------------------------------------ */
.hero{
  position:relative;
  min-height:523px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:64px 0;
  background:var(--branco) center/cover no-repeat;
  text-align:center;
  overflow:hidden;
}
.hero__interno{
  position:relative;
  width:100%;
  max-width:var(--largura);
  margin:0 auto;
  padding:0 16px;
}
.hero h1{
  font-size:64px;
  line-height:1.3;
  font-weight:700;
  color:var(--branco);
  margin-bottom:24px;
}
.hero p{
  max-width:776px;
  margin:0 auto 40px;
  font-size:18px;
  line-height:1.6;
  color:var(--branco);
}

/* ------------------------------------------------------------------ */
/* Home — nosso espaço                                                */
/* ------------------------------------------------------------------ */
.espaco__grade{
  display:grid;
  grid-template-columns:606fr 562fr;
  gap:56px;
  align-items:start;
}

.espaco__imagem{
  width:100%;
  height:384px;
  object-fit:cover;
  border-radius:0;
  margin-bottom:64px;
}

.espaco__cabecalho{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
  margin-bottom:24px;
}
.espaco__cabecalho h5{
  font-size:32px;
  font-weight:700;
  color:var(--laranja);
}
.espaco__texto{
  max-width:557px;
  font-size:20px;
  line-height:1.3;
}
.espaco__texto p{margin-bottom:1.3em}

/* Card laranja */
.card{
  background:var(--laranja);
  border:1px solid var(--branco);
  border-radius:12px;
  padding:54px 59px;
  color:var(--branco);
}
.card h5{font-size:32px;font-weight:700;margin-bottom:18px}
.card__texto{font-size:22px;line-height:1.3;margin-bottom:32px}
.card .botao--preto{width:100%;margin-bottom:36px}
.card__endereco{font-size:22px;line-height:1.3;margin-bottom:16px}
.card__mapa{
  width:100%;
  aspect-ratio:454/278;
  border:0;
  display:block;
}

/* ------------------------------------------------------------------ */
/* Home — profissionais em destaque                                    */
/* ------------------------------------------------------------------ */
.destaques{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px 37px;
}
.destaque__imagem{
  width:100%;
  height:440px;
  object-fit:cover;
  margin-bottom:40px;
}
.destaque h5{
  font-size:32px;
  font-weight:700;
  color:var(--branco);
  margin-bottom:14px;
}
.destaque p{
  max-width:503px;
  font-size:18px;
  line-height:1.6;
  color:var(--branco);
}

.destaques__rodape{
  display:flex;
  align-items:center;
  gap:41px;
  margin-top:56px;
}
.destaques__linha{
  flex:1;
  height:1px;
  background:var(--branco);
  border:0;
  margin:0;
}

/* ------------------------------------------------------------------ */
/* Blog                                                               */
/* ------------------------------------------------------------------ */
.blog-lista{padding:60px 0}
.blog-lista--escura{background:var(--cinza-escuro)}
.blog-lista--escura .blog-item h3,
.blog-lista--escura .blog-item time{color:var(--branco)}

.blog-lista__grade{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:32px;
}

.blog-item{text-decoration:none;display:block}
.blog-item__capa{
  width:100%;
  aspect-ratio:1224/333;
  max-height:333px;
  object-fit:contain;
  object-position:left center;
  margin-bottom:20px;
}
.blog-item h3{
  font-size:26px;
  font-weight:700;
  line-height:1.3;
  margin-bottom:6px;
}
.blog-item time{font-size:16px;line-height:1.3}
.blog-item:hover h3{text-decoration:underline}

.blog-vazio{font-size:18px}

/* Post */
.post-cabecalho{
  background:var(--pessego-claro);
  padding:45px 30px;
  text-align:center;
}
.post-cabecalho__interno{max-width:954px;margin:0 auto}
.post-cabecalho h1{font-size:48px;font-weight:700;margin-bottom:16px}
.post-cabecalho__meta{font-size:16px;margin-bottom:16px}
.post-cabecalho__resumo{font-size:18px;line-height:1.6}

.post{padding:40px 0 64px;background:var(--branco)}
.post__capa{
  width:100%;
  max-width:812px;
  height:344px;
  object-fit:cover;
  margin:0 auto 48px;
}
.post__corpo{max-width:1224px;margin:0 auto}
.post__corpo p{font-size:18px;line-height:1.6;margin-bottom:1.6em}
.post__linha{
  border:0;
  border-top:2px dotted var(--texto);
  margin:56px 0 0;
}
.post__voltar{
  display:inline-block;
  margin-top:32px;
  font-size:16px;
  font-weight:700;
  color:var(--laranja);
  text-decoration:none;
}
.post__voltar:hover{text-decoration:underline}

/* ------------------------------------------------------------------ */
/* Sobre                                                              */
/* ------------------------------------------------------------------ */
.sobre-intro{padding:56px 0;text-align:center;background:var(--branco)}
.sobre-intro h6{font-size:24px;line-height:1.24}

.galeria{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 24px;
  align-items:start;
}
.galeria img{width:100%;height:auto;object-fit:cover}
.galeria__coluna{display:flex;flex-direction:column;gap:16px}

/* Recortes iguais aos do site original */
.galeria__coluna:first-child img:nth-child(1){aspect-ratio:606/472}
.galeria__coluna:first-child img:nth-child(2){aspect-ratio:606/560}
.galeria__coluna:last-child  img:nth-child(1){aspect-ratio:606/344}
.galeria__coluna:last-child  img:nth-child(2){aspect-ratio:606/688}

/* ------------------------------------------------------------------ */
/* Serviços                                                           */
/* ------------------------------------------------------------------ */
.servicos-listas{
  display:grid;
  grid-template-columns:297fr 352fr 359fr;
  gap:24px 51px;
  align-items:start;
  padding:56px 0;
}
.servicos-listas p{font-size:18px;line-height:1.6}
.servicos-listas img{width:100%;height:239px;object-fit:cover}

.bloco-servico{padding:80px 0}
.bloco-servico__grade{
  display:grid;
  grid-template-columns:606fr 503fr;
  gap:24px 115px;
  align-items:center;
}
.bloco-servico__grade--invertida{grid-template-columns:503fr 606fr}
.bloco-servico__imagem{width:100%;height:544px;object-fit:cover}
.bloco-servico h3{
  font-size:48px;
  font-weight:700;
  color:var(--laranja);
  margin-bottom:22px;
}
.bloco-servico__texto{max-width:458px;font-size:18px;line-height:1.6}

/* ------------------------------------------------------------------ */
/* Profissionais                                                      */
/* ------------------------------------------------------------------ */
.prof-intro{
  max-width:634px;
  margin:0 auto 56px;
  text-align:center;
  font-size:18px;
  line-height:1.6;
  color:#000;
}

.prof-destaques{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.prof-destaque__imagem{
  width:100%;
  height:464px;
  object-fit:cover;
}
.prof-destaque__caixa{
  background:var(--branco);
  margin:0 33px;
  padding:40px;
  position:relative;
  top:-24px;
}
.prof-destaque__caixa h6{
  font-size:20px;
  font-weight:700;
  color:#000;
  margin-bottom:18px;
}
.prof-destaque__caixa p{font-size:18px;line-height:1.6;color:#000}

.equipe{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:56px 12px;
}
.equipe__imagem{
  width:100%;
  height:280px;
  object-fit:cover;
  margin-bottom:40px;
}
.equipe h6{
  font-size:20px;
  font-weight:700;
  line-height:1.3;
  color:#000;
  margin-bottom:14px;
}
.equipe p{font-size:16px;line-height:1.3;color:#000;margin-bottom:0}
.equipe__texto p+p{margin-top:.6em}
.equipe__cargo{text-decoration:underline}

/* ------------------------------------------------------------------ */
/* Contato                                                            */
/* ------------------------------------------------------------------ */
.contato{
  padding:56px 0;
  background:var(--branco);
}
.contato__grade{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px 12px;
  align-items:start;
}
.contato__bloco{margin-bottom:44px}
.contato__bloco h6{
  font-size:20px;
  font-weight:700;
  line-height:1.3;
  color:#000;
  margin-bottom:4px;
}
.contato__bloco p{color:#000}
.contato__bloco a{color:#000;text-decoration:none}
.contato__mapa{
  width:100%;
  max-width:480px;
  aspect-ratio:480/320;
  border:0;
  display:block;
}

/* Formulário */
.formulario{display:flex;flex-direction:column;gap:22px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{
  font-size:16px;
  font-weight:400;
  color:var(--preto);
}
.campo input,.campo textarea{
  font-family:var(--fonte);
  font-size:16px;
  color:var(--preto);
  background:#f1f1f1;
  border:1px solid var(--preto);
  border-radius:0;
  padding:12px 14px;
  width:100%;
}
.campo textarea{min-height:120px;resize:vertical}
.campo input:focus,.campo textarea:focus{outline:2px solid var(--laranja);outline-offset:1px}
.campo__erro{font-size:14px;color:#b00020}

.formulario .botao{
  align-self:flex-start;
  background:var(--laranja);
  color:var(--branco);
  border:0;
}
.formulario .botao:hover{background:var(--laranja-escuro)}

.aviso{
  padding:14px 18px;
  border-radius:6px;
  font-size:16px;
  margin-bottom:24px;
}
.aviso--ok{background:#e6f6ec;color:#0b6b34}
.aviso--erro{background:#fdecef;color:#b00020}

/* ------------------------------------------------------------------ */
/* Rodapé                                                             */
/* ------------------------------------------------------------------ */
.rodape{background:var(--branco);padding:80px 0}
.rodape__interno{
  display:grid;
  grid-template-columns:288px 281px 1fr;
  gap:24px;
  align-items:start;
}
.rodape__titulo{
  font-size:20px;
  font-weight:700;
  line-height:1.3;
  color:#000;
  margin-bottom:4px;
}
.rodape p{color:#000;font-size:18px;line-height:1.6}
.rodape a{color:#000;text-decoration:none}
.rodape a:hover{text-decoration:underline}
.rodape__social{display:flex;gap:32px;align-items:center}
.rodape__social a{color:#000;display:block}
.rodape__social svg{width:32px;height:32px}
.rodape__social a:hover{color:#3a3a3a}

/* ------------------------------------------------------------------ */
/* Página /links                                                      */
/* ------------------------------------------------------------------ */
.links{
  min-height:100vh;
  background:var(--branco);
  padding:64px 16px;
  display:flex;
  justify-content:center;
}
.links__interno{width:100%;max-width:400px;text-align:center}
.links__logo{width:189px;margin:0 auto 56px}
.links .botao{width:100%;margin-bottom:24px;font-size:18px}
.links__horario{font-size:16px;line-height:1.3;margin:40px 0 24px}
.links__endereco{font-size:18px;line-height:1.6;color:var(--laranja-escuro)}

/* ------------------------------------------------------------------ */
/* Responsivo                                                         */
/* ------------------------------------------------------------------ */
@media (max-width:1100px){
  .cabecalho__interno{gap:24px}
  .menu{gap:24px}
  .menu ul{gap:20px}
  .espaco__grade{gap:32px}
  .card{padding:40px}
  .bloco-servico__grade,
  .bloco-servico__grade--invertida{gap:24px 48px}
}

@media (max-width:920px){
  h1{font-size:50px}
  h3{font-size:38px}
  h5{font-size:28px}

  .cabecalho__interno{
    padding:36px 16px;
    flex-wrap:wrap;
    gap:16px;
  }
  .cabecalho__logo img{width:191px}
  .hamburguer{display:block}

  .menu{
    display:none;
    width:100%;
    flex-direction:column;
    gap:24px;
    margin:0;
    padding-top:8px;
  }
  .menu.aberto{display:flex}
  .menu ul{
    flex-direction:column;
    gap:11px;
    width:100%;
    text-align:center;
  }
  .menu ul a{display:block;padding:4px 0}
  .menu .botao{width:100%}

  .titulo-pagina{padding:56px 16px}

  .hero{min-height:549px;padding:56px 16px}
  .hero h1{font-size:50px;line-height:.97}
  .hero p{font-size:20px;line-height:1.3;margin-bottom:40px}

  .secao{padding:56px 0}

  .espaco__grade{grid-template-columns:1fr;gap:56px}
  .espaco__imagem{height:auto;aspect-ratio:328/318;margin-bottom:40px}
  .espaco__cabecalho{flex-direction:column;text-align:center;gap:16px}
  .espaco__cabecalho h5{font-size:34px}
  .espaco__texto{max-width:none;text-align:center;font-size:18px}
  .card{padding:32px 24px;text-align:center}
  .card__texto,.card__endereco{font-size:18px}
  .card .botao--preto{font-size:18px;padding:14px 20px}

  .destaques{grid-template-columns:1fr;gap:56px}
  .destaque__imagem{height:auto;aspect-ratio:328/243;margin-bottom:24px}
  .destaque{text-align:center}
  .destaque p{max-width:none}
  .destaques__rodape{flex-direction:column;gap:24px;margin-top:40px}
  .destaques__rodape .botao{width:100%}
  .destaques__linha{width:100%;flex:none}

  .galeria{grid-template-columns:1fr;gap:16px}
  .galeria__coluna{gap:16px}

  .servicos-listas{grid-template-columns:1fr;gap:32px;padding:56px 0}
  .servicos-listas img{height:auto;aspect-ratio:359/239}

  .bloco-servico{padding:56px 0}
  .bloco-servico__grade,
  .bloco-servico__grade--invertida{grid-template-columns:1fr;gap:32px}
  .bloco-servico__grade--invertida .bloco-servico__imagem{order:-1}
  .bloco-servico__imagem{height:auto;aspect-ratio:606/544}
  .bloco-servico__texto{max-width:none}

  .prof-intro{font-size:14px;line-height:1.3;margin-bottom:40px}
  .prof-destaques{grid-template-columns:1fr;gap:40px}
  .prof-destaque__imagem{height:auto;aspect-ratio:328/251}
  .prof-destaque__caixa{margin:0;padding:24px;top:0}

  .equipe{grid-template-columns:1fr;gap:48px}
  .equipe__imagem{height:auto;aspect-ratio:328/230;margin-bottom:24px}

  .contato__grade{grid-template-columns:1fr;gap:40px}
  .contato__mapa{max-width:none}
  .formulario .botao{align-self:stretch}

  .post-cabecalho{padding:16px}
  .post-cabecalho h1{font-size:38px}
  .post__capa{height:auto;aspect-ratio:328/320;margin-bottom:32px}
  .post__corpo p{font-size:16px;line-height:1.3}

  .blog-lista{padding:40px 0}
  .blog-item__capa{aspect-ratio:328/139}

  .rodape{padding:40px 0}
  .rodape__interno{grid-template-columns:1fr;gap:32px;text-align:center}
  .rodape__social{justify-content:center}
}

@media (max-width:520px){
  .hero h1{font-size:38px}
  .titulo-pagina h1{font-size:40px}
  .faixa h6{font-size:20px}
  .card h5{font-size:24px}
  .botao{padding:14px 24px}
}