@font-face {
  font-family: 'Chewy';
  src: url('assets/fonts/Chewy-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Fredoka';
  src: url('assets/fonts/Fredoka-VariableFont_wdth\,wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
}

@font-face {
  font-family: 'Alfa Slab One';
  src: url('assets/fonts/AlfaSlabOne-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  position: relative;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background-color: rgb(0, 0, 0);
}

/* VARIAVEIS */
:root {
  --pink: #FF197B;
  --pink-secundaria: #FF3C98;
  --yellow-primaria: #FFF701;
  --yellow-secundaria: #FFD800;
  --rosa-base: #ff72af;
  --rosa-bolha: #ff8fc0;

  --espaco-secao: 84px;
  --espaco-secao-mobile: 64px;

  --link-azul: #4C6FD4;
  --link-rosa: #F06BA6;
  --link-amarelo: #F2B705;
  --link-vermelho: #F0483E;

  /* NOVO: largura fluida das seções.
     Mínimo 1130px, cresce até 92% da tela, mas nunca passa de 1400px. */
  --secao-max-width: clamp(1130px, 92vw, 1400px);
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  max-width: 1130px;
  max-height: 750px;
  margin: 0 auto;
  aspect-ratio: 1414 / 750;
  overflow: hidden;
  container-type: inline-size;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  z-index: 0;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.25));
}

.logo-selo {
  position: absolute;
  left: 49.9%;
  top: 34%;
  width: 22.3%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  z-index: 2;
  object-fit: contain;
}

.brand-text {
  position: absolute;
  top: 34%;
  transform: translate(-50%, -50%);
  display: inline-block;
  z-index: 2;
}

.brand-pet {
  left: 23%;
}

.brand-bel {
  left: 77.6%;
}

.camada-tras,
.camada-frente {
  font-family: 'Chewy', system-ui, sans-serif;
  font-size: 19cqw;
  line-height: 1;
  white-space: nowrap;
}

.camada-tras {
  position: absolute;
  inset: 0;
  color: var(--pink);
  transform: translate(0.04em, 0.04em);
  z-index: 0;
}

.camada-frente {
  position: relative;
  color: transparent;
  -webkit-text-stroke: 0.03em #000;
  z-index: 1;
}

@media (max-width: 600px) {
  .camada-tras,
  .camada-frente {
    font-size: 22cqw;
  }
  .tagline {
    font-size: 3vw;
    white-space: normal;
  }

  .logo-selo {
    width: 28%;
  }

  .brand-pet { left: 18%; }
  .brand-bel { left: 82%; }
}

/* ==========================================================================
   LINKS RÁPIDOS
   ========================================================================== */

.links-rapidos {
  position: relative;
  width: 100%;
  max-width: 1130px;
  margin: var(--espaco-secao) auto;
  container-type: inline-size;
  font-family: 'Fredoka', system-ui, sans-serif;
}

@media (max-width: 700px) {
  .links-rapidos {
    margin: var(--espaco-secao-mobile) auto;
    width: calc(100% - 50px);

    .links-rapidos__item {
      border-radius: 28px;

    }
  }
}

.links-rapidos__wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

/* A partir daqui os 4 cards ficam lado a lado, aproveitando o espaço */
@media (min-width: 700px) {
  .links-rapidos__wrap {
    grid-template-columns: repeat(4, 1fr);
    max-width: var(--secao-max-width);
    gap: 20px;
  }

    .links-rapidos__item--avaliacao {
    order: 4;
  }

  .links-rapidos__item--whatsapp {
    order: 3;
  }
  
}

.links-rapidos__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 3 / 4;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  background-color: var(--link-azul);
  border-radius: 26px;
  padding: 18px;
  text-decoration: none;
  box-shadow: 0 6px 0 var(--step-color, rgba(0, 0, 0, 0.25)), 0 9px 16px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;

  /* cor da "aba" da sombra em degrau, ajustada por card via nth-child abaixo */
  --step-color: rgba(0, 0, 0, 0.25);

  /* variável usada pelo título e pela descrição pra calcular posição */
  --titulo-fs: clamp(15px, 5.2cqw, 21px);
}


.links-rapidos__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 var(--step-color, rgba(0, 0, 0, 0.25)), 0 11px 18px rgba(0, 0, 0, 0.3);
}

.links-rapidos__item:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 var(--step-color, rgba(0, 0, 0, 0.25)), 0 5px 10px rgba(0, 0, 0, 0.25);
}

/* Cores alternadas: 1º azul, 2º rosa, 3º amarelo, 4º vermelho (ciclo a cada 4) */
.links-rapidos__item:nth-child(4n+1) { background-color: var(--yellow-primaria); --step-color: #c9c200; }
.links-rapidos__item:nth-child(4n+2) { background-color: var(--pink); --step-color: #c40f5e; }
.links-rapidos__item:nth-child(4n+3) { background-color: var(--link-amarelo); --step-color: #b8890a; }
.links-rapidos__item:nth-child(4n)   { background-color: var(--link-vermelho); --step-color: #b8362d; }

/* Sobrescreve o ciclo de cores pra manter os novos cards no mesmo
   padrão rosa/amarelo dos dois primeiros (avaliação = rosa, em breve = amarelo).
   Precisa de um seletor com especificidade MAIOR que o nth-child acima
   (que conta como 2 classes) — por isso o .links-rapidos__wrap na frente. */
.links-rapidos__wrap .links-rapidos__item--avaliacao { background-color: var(--pink); --step-color: #c40f5e; }
.links-rapidos__wrap .links-rapidos__item--whatsapp  { background-color: var(--yellow-primaria); --step-color: #c9c200; }

/* ---------- Ícone grande de fundo, cortado pela metade na lateral direita ---------- */
.links-rapidos__icone-fundo {
  position: absolute;
  top: 50%;
  right: -35%;
  transform: translateY(-50%);
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: rgba(215, 215, 215, 0.364);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  z-index: 0;
  pointer-events: none;
}

.links-rapidos__item--vip .links-rapidos__icone-fundo {
  -webkit-mask-image: url('assets/imagens/SVG/Pata.svg');
  mask-image: url('assets/imagens/SVG/Pata.svg');
   background-color: var(--yellow-secundaria);
}

.links-rapidos__item--pesquisa .links-rapidos__icone-fundo {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-6.7-4.35-9.3-8.1C1.1 10.5 1.5 7 4.3 5.4 6.6 4.1 9.4 4.8 12 7.4c2.6-2.6 5.4-3.3 7.7-2 2.8 1.6 3.2 5.1 1.6 7.5C18.7 16.65 12 21 12 21z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-6.7-4.35-9.3-8.1C1.1 10.5 1.5 7 4.3 5.4 6.6 4.1 9.4 4.8 12 7.4c2.6-2.6 5.4-3.3 7.7-2 2.8 1.6 3.2 5.1 1.6 7.5C18.7 16.65 12 21 12 21z'/%3E%3C/svg%3E");
}

/* Card "Avalie a Pet Bel" — estrela mascarada no fundo, igual ao
   padrão dos dois cards já existentes */
.links-rapidos__item--avaliacao .links-rapidos__icone-fundo {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 15 9 22 9.3 16.5 14 18 21 12 17.3 6 21 7.5 14 2 9.3 9 9Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 15 9 22 9.3 16.5 14 18 21 12 17.3 6 21 7.5 14 2 9.3 9 9Z'/%3E%3C/svg%3E");
}

/* Card "Em breve" — sem essa regra, o ícone de fundo ficava sem
   mask-image (herdava só o fundo cinza padrão do .links-rapidos__icone-fundo),
   por isso aparecia com uma cor diferente do Canal Pet Bel. Usando a
   mesma pata e a mesma cor (--yellow-secundaria), já que o fundo do
   card também é --yellow-primaria, igual ao Canal Pet Bel. */
.links-rapidos__item--whatsapp .links-rapidos__icone-fundo {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.6 6.32A7.85 7.85 0 0 0 12.02 4c-4.35 0-7.88 3.53-7.88 7.88 0 1.39.36 2.74 1.05 3.93L4 20l4.32-1.13a7.9 7.9 0 0 0 3.7.94h.01c4.35 0 7.88-3.53 7.88-7.88 0-2.1-.82-4.08-2.31-5.56zm-5.58 12.12h-.01a6.55 6.55 0 0 1-3.34-.92l-.24-.14-2.48.65.66-2.42-.16-.25a6.56 6.56 0 0 1-1.01-3.5c0-3.63 2.96-6.58 6.6-6.58a6.55 6.55 0 0 1 4.66 1.93 6.53 6.53 0 0 1 1.93 4.65c0 3.63-2.96 6.58-6.6 6.58zm3.61-4.93c-.2-.1-1.17-.58-1.35-.64-.18-.07-.31-.1-.44.1-.13.2-.5.64-.62.78-.11.13-.23.15-.42.05-.2-.1-.83-.31-1.58-.98-.58-.52-.98-1.16-1.09-1.36-.11-.2-.01-.3.09-.4.09-.1.2-.23.3-.35.1-.11.13-.2.2-.33.07-.13.03-.25-.02-.35-.05-.1-.44-1.06-.6-1.45-.16-.38-.32-.33-.44-.34h-.38c-.13 0-.34.05-.52.25-.18.2-.68.66-.68 1.62 0 .95.7 1.87.79 2 .1.13 1.38 2.11 3.35 2.96.47.2.83.32 1.12.41.47.15.9.13 1.24.08.38-.06 1.17-.48 1.33-.94.16-.46.16-.85.11-.94-.05-.09-.18-.14-.38-.24z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.6 6.32A7.85 7.85 0 0 0 12.02 4c-4.35 0-7.88 3.53-7.88 7.88 0 1.39.36 2.74 1.05 3.93L4 20l4.32-1.13a7.9 7.9 0 0 0 3.7.94h.01c4.35 0 7.88-3.53 7.88-7.88 0-2.1-.82-4.08-2.31-5.56zm-5.58 12.12h-.01a6.55 6.55 0 0 1-3.34-.92l-.24-.14-2.48.65.66-2.42-.16-.25a6.56 6.56 0 0 1-1.01-3.5c0-3.63 2.96-6.58 6.6-6.58a6.55 6.55 0 0 1 4.66 1.93 6.53 6.53 0 0 1 1.93 4.65c0 3.63-2.96 6.58-6.6 6.58zm3.61-4.93c-.2-.1-1.17-.58-1.35-.64-.18-.07-.31-.1-.44.1-.13.2-.5.64-.62.78-.11.13-.23.15-.42.05-.2-.1-.83-.31-1.58-.98-.58-.52-.98-1.16-1.09-1.36-.11-.2-.01-.3.09-.4.09-.1.2-.23.3-.35.1-.11.13-.2.2-.33.07-.13.03-.25-.02-.35-.05-.1-.44-1.06-.6-1.45-.16-.38-.32-.33-.44-.34h-.38c-.13 0-.34.05-.52.25-.18.2-.68.66-.68 1.62 0 .95.7 1.87.79 2 .1.13 1.38 2.11 3.35 2.96.47.2.83.32 1.12.41.47.15.9.13 1.24.08.38-.06 1.17-.48 1.33-.94.16-.46.16-.85.11-.94-.05-.09-.18-.14-.38-.24z'/%3E%3C/svg%3E");
  background-color: var(--yellow-secundaria);

  width: 140%;
  right: -55%;
}

.links-rapidos__titulo {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 50%;
  transform: translateY(-50%); /* centraliza a CAIXA do título no meio do card */
  min-height: calc(var(--titulo-fs) * 2.5); /* reserva espaço pra até 2 linhas */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  font-family: 'Alfa Slab One', system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--titulo-fs);
  line-height: 1.25;
  color: #fff;
  text-shadow: 0.04em 0.04em 0 #000;
  margin: 0;
}

.links-rapidos__desc {
  position: absolute;
  left: 18px;
  right: 18px;
  top: calc(50% + (var(--titulo-fs) * 1.25) + 8px); /* logo abaixo da caixa do título */
  z-index: 1;
  font-weight: 400;
  font-size: clamp(11px, 3.4cqw, 14px);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.9);
}

/* ---------- Cores de texto específicas por card ----------
   Canal Pet Bel (--vip): título e descrição em var(--pink)
   Pesquisa de Satisfação (--pesquisa): título e descrição em var(--yellow-primaria)
   Avalie a Pet Bel (--avaliacao): título e descrição em var(--yellow-primaria)
   Em breve (--novo): título e descrição em var(--pink) */
.links-rapidos__item--vip .links-rapidos__titulo,
.links-rapidos__item--vip .links-rapidos__desc {
  color: var(--pink);
}

.links-rapidos__item--pesquisa .links-rapidos__titulo,
.links-rapidos__item--pesquisa .links-rapidos__desc {
  color: var(--yellow-primaria);
}

.links-rapidos__item--avaliacao .links-rapidos__titulo,
.links-rapidos__item--avaliacao .links-rapidos__desc {
  color: var(--yellow-primaria);
}

.links-rapidos__item--whatsapp .links-rapidos__titulo,
.links-rapidos__item--whatsapp .links-rapidos__desc {
  color: var(--pink);
}

@media (max-width: 480px) {
  .links-rapidos__wrap {
    gap: 12px;
  }

  .links-rapidos__item {
    border-radius: 20px;
    padding: 16px;
  }
}

/* ==========================================================================
                          DIAS PROMOCIONAIS
   Carrossel de imagens: mesmo padrão visual das demais seções (fundo
   amarelo, borda rosa, círculos decorativos). As imagens deslizam de
   acordo com o clique nas setas e podem ser abertas em tela cheia
   (lightbox) ao clicar em qualquer uma delas.
   ========================================================================== */

.dias-promo {
  position: relative;
  width: 100%;
  max-width: 1130px;
  margin: var(--espaco-secao) auto;
  background-color: var(--yellow-primaria);
  overflow: hidden;
  border-radius: 35px;
  border: 4px solid var(--pink);
  padding: 56px 6%;
  container-type: inline-size;
  font-family: 'Fredoka', system-ui, sans-serif;
}

@media (max-width: 700px) {
  .dias-promo {
    margin: var(--espaco-secao-mobile) auto;
    border-radius: 40px;
    width: calc(100% - 32px);
    padding: 40px 0 32px;
  }
}

/* ---------- Círculos decorativos (fundo) ---------- */
.dias-promo__circulos {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.dias-promo__circulo {
  position: absolute;
  border-radius: 50%;
  background-color: var(--yellow-secundaria);
}

.dias-promo__circulo--1 {
  width: 60cqw;
  aspect-ratio: 1 / 1;
  top: -26%;
  left: -16%;
}

.dias-promo__circulo--2 {
  width: 40cqw;
  aspect-ratio: 1 / 1;
  bottom: -20%;
  left: 20%;
}

.dias-promo__circulo--3 {
  width: 34cqw;
  aspect-ratio: 1 / 1;
  top: 4%;
  right: -14%;
}

.dias-promo__circulo--4 {
  width: 22cqw;
  aspect-ratio: 1 / 1;
  bottom: 6%;
  right: 14%;
}

@media (max-width: 700px) {
  .dias-promo__circulo--1 {
    width: 95cqw;
    top: -15%;
    left: -30%;
  }

  .dias-promo__circulo--2 {
    width: 70cqw;
    bottom: -10%;
    left: 10%;
  }

  .dias-promo__circulo--3 {
    width: 60cqw;
    top: 2%;
    right: -22%;
  }

  .dias-promo__circulo--4 {
    width: 40cqw;
    bottom: 18%;
    right: 4%;
  }
}

.dias-promo__wrap {
  position: relative;
  z-index: 2;
  max-width: 1130px;
  margin: 0 auto;
  text-align: center;
}

.dias-promo__titulo {
  font-family: 'Fredoka', system-ui, sans-serif;
  color: var(--pink);
  font-size: clamp(38px, 8cqw, 62px);
  line-height: 1;
  margin-bottom: 10px;
}

@media (max-width: 700px) {
  .dias-promo__titulo {
    padding: 0 6%;
  }
}

.dias-promo__frase {
  margin-bottom: 32px;
}

@media (max-width: 700px) {
  .dias-promo__frase {
    padding: 0 6%;
  }
}

.dias-promo__frase-destaque {
  display: inline;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(15px, 2.6cqw, 20px);
  line-height: 1.9;
  color: #fff;
  background-color: var(--pink);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 3px 12px;
}

/* ---------- Carrossel ---------- */
.dias-promo__carrossel {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dias-promo__janela {
  flex: 1 1 auto;
  overflow: hidden;
}

.dias-promo__pista {
  display: flex;
  list-style: none;
  gap: 20px;
  transition: transform 0.45s ease;
  will-change: transform;
}

.dias-promo__pista li {
  flex: 0 0 auto;
  width: calc((100% - 40px) / 3); /* 3 imagens visíveis no desktop (2 gaps de 20px) */
}

.dias-promo__slide {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 20px;
  border: 3px solid var(--pink);
  cursor: zoom-in;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  background-color: rgba(0, 0, 0, 0.06);
}

/* ---------- Setas de navegação ----------
   Mesma linguagem visual do botão redondo de localização (fundo rosa,
   ícone amarelo, sombra em "degrau"). */
.dias-promo__seta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background-color: var(--pink);
  color: var(--yellow-primaria);
  cursor: pointer;
  box-shadow: 0 6px 0 #c40f5e, 0 9px 16px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dias-promo__seta ion-icon {
  font-size: 22px;
  pointer-events: none;
}

.dias-promo__seta:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 #c40f5e, 0 11px 18px rgba(0, 0, 0, 0.3);
}

.dias-promo__seta:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #c40f5e, 0 5px 10px rgba(0, 0, 0, 0.25);
}

@media (max-width: 700px) {
  .dias-promo__carrossel {
    padding: 0 14px;
    gap: 8px;
  }

  .dias-promo__pista li {
    width: calc((100% - 20px) / 2); /* 2 imagens visíveis no mobile */
  }

  .dias-promo__seta {
    width: 40px;
    height: 40px;
  }

  .dias-promo__seta ion-icon {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .dias-promo__pista li {
    width: 100%; /* 1 imagem por vez em telas bem estreitas */
  }
}

/* ---------- Lightbox (visualização em tela cheia) ---------- */
.dias-promo__lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.88);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
  padding: 24px;
}

.dias-promo__lightbox.is-aberto {
  opacity: 1;
  visibility: visible;
}

.dias-promo__lightbox-img {
  max-width: min(90vw, 900px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.94);
  transition: transform 0.25s ease;
}

.dias-promo__lightbox.is-aberto .dias-promo__lightbox-img {
  transform: scale(1);
}

.dias-promo__lightbox-fechar {
  position: absolute;
  top: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background-color: var(--pink);
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.dias-promo__lightbox-fechar ion-icon {
  font-size: 24px;
  pointer-events: none;
}

.dias-promo__lightbox-fechar:hover {
  background-color: var(--yellow-secundaria);
  color: #1a1a1a;
  transform: rotate(90deg);
}

@media (max-width: 480px) {
  .dias-promo__lightbox-fechar {
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
  }
}


/* ==========================================================================
                          BANHO E TOSA 
   ========================================================================== */

.banho-tosa {
  position: relative;
  width: 100%;
  max-width: 1130px;
  margin: var(--espaco-secao) auto;
  background-color: var(--yellow-primaria);
  overflow: hidden;
  border-radius: 35px;
  border: 4px solid var(--pink);
  padding: 56px 6%;
  container-type: inline-size;
  font-family: 'Fredoka', system-ui, sans-serif;
}

@media (max-width: 700px) {
  .banho-tosa {
    margin: var(--espaco-secao-mobile) auto;
    border-radius: 40px;
    width: calc(100% - 32px);
  }
}

/* ---------- Círculos decorativos (fundo) ---------- */
.banho-tosa__circulos {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.banho-tosa__circulo {
  position: absolute;
  border-radius: 50%;
  background-color: var(--yellow-secundaria);
}

.banho-tosa__circulo--1 {
  width: 60cqw;
  aspect-ratio: 1 / 1;
  top: -26%;
  left: -16%;
}

.banho-tosa__circulo--2 {
  width: 40cqw;
  aspect-ratio: 1 / 1;
  bottom: -20%;
  left: 20%;
}

.banho-tosa__circulo--3 {
  width: 34cqw;
  aspect-ratio: 1 / 1;
  top: 4%;
  right: -14%;
}

.banho-tosa__circulo--4 {
  width: 22cqw;
  aspect-ratio: 1 / 1;
  bottom: 6%;
  right: 14%;
}

@media (max-width: 700px) {
  .banho-tosa__circulo--1 {
    width: 95cqw;
    top: -15%;
    left: -30%;
  }

  .banho-tosa__circulo--2 {
    width: 70cqw;
    bottom: -10%;
    left: 10%;
  }

  .banho-tosa__circulo--3 {
    width: 60cqw;
    top: 2%;
    right: -22%;
  }

  .banho-tosa__circulo--4 {
    width: 40cqw;
    bottom: 18%;
    right: 4%;
  }
}

/* ---------- Bolhas decorativas (fundo) ----------
   Geradas dinamicamente via JS (script.js), que define
   --w, --w-mobile, --top, --left/--right (e as versões
   -mobile de cada posição, quando definidas) em cada elemento.
   Editar/adicionar bolhas = mexer só no array `bolhas` do JS. */
.banho-tosa__bolha {
  position: absolute;
  aspect-ratio: 1 / 1;
  background-color: var(--yellow-secundaria);
  width: var(--w, 30px);
  top: var(--top, 50%);
  left: var(--left, auto);
  right: var(--right, auto);

  -webkit-mask-image: url('assets/imagens/SVG/bolha.svg');
  mask-image: url('assets/imagens/SVG/bolha.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

@media (max-width: 700px) {
  .banho-tosa__bolha {
    width: var(--w-mobile, var(--w, 24px));
    top: var(--top-mobile, var(--top, 50%));
    left: var(--left-mobile, var(--left, auto));
    right: var(--right-mobile, var(--right, auto));
  }
}

.banho-tosa__wrap {
  position: relative;
  z-index: 2;
  max-width: 1130px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 24px;
}

/* ---------- Coluna de texto ---------- */
.banho-tosa__titulo {
  font-family: 'Fredoka', system-ui, sans-serif;
  color: var(--pink);
  font-size: clamp(38px, 8cqw, 62px);
  line-height: 1;
  margin-bottom: 10px;
}

.banho-tosa__frase {
  margin-bottom: 22px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease 0.15s, transform 0.6s ease 0.15s;
}

.banho-tosa__frase.in-view {
  opacity: 1;
  transform: translateY(0);
}

.banho-tosa__frase-destaque {
  display: inline;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(17px, 3cqw, 24px);
  line-height: 1.9;
  color: #fff;
  background-color: var(--pink);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 3px 12px;
}

.banho-tosa__lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.banho-tosa__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: clamp(18px, 2.8cqw, 24px);
  color: #1a1a1a;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.5s ease, transform 0.5s ease, padding-left 0.2s ease;
  cursor: default;
}

.banho-tosa__item::before {
  content: '';
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pink);
  transition: transform 0.2s ease;
}

.banho-tosa__item:hover {
  padding-left: 6px;
}

.banho-tosa__item:hover::before {
  transform: scale(1.35);
}

.banho-tosa__item.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* ---------- Container dos botões de ação ---------- */
.banho-tosa__acoes {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}

/* ---------- Botão redondo de localização ----------
   Mesma linguagem visual do botão "Agende aqui" (fundo rosa,
   ícone amarelo, sombra em "degrau"), só que compacto e circular. */
.banho-tosa__btn-local {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--pink);
  color: var(--yellow-primaria);
  box-shadow: 0 6px 0 #c40f5e, 0 9px 16px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.banho-tosa__btn-local ion-icon {
  font-size: 22px;
  pointer-events: none;
}

.banho-tosa__btn-local:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 #c40f5e, 0 11px 18px rgba(0, 0, 0, 0.3);
}

.banho-tosa__btn-local:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #c40f5e, 0 5px 10px rgba(0, 0, 0, 0.25);
}

/* ---------- Botão "Agende aqui" ----------
   Segue a linguagem visual do selo (fundo rosa, texto amarelo
   com contorno preto, leve giro e sombra em "degrau"). */
.banho-tosa__btn-agendar {
  display: inline-block;
  padding: 14px 34px;
  border-radius: 999px;
  background-color: var(--pink);
  color: var(--yellow-primaria);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(15px, 2.6cqw, 19px);
  text-decoration: none;
  text-shadow: 0.04em 0.04em 0 #000;
  box-shadow: 0 6px 0 #c40f5e, 0 9px 16px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.banho-tosa__btn-agendar:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 #c40f5e, 0 11px 18px rgba(0, 0, 0, 0.3);
}

.banho-tosa__btn-agendar:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #c40f5e, 0 5px 10px rgba(0, 0, 0, 0.25);
}

@media (max-width: 480px) {
  .banho-tosa__acoes {
    justify-content: center;
    margin-top: 22px;
  }

  .banho-tosa__btn-agendar {
    padding: 13px 28px;
  }

  .banho-tosa__btn-local {
    width: 44px;
    height: 44px;
  }
}

/* ---------- Coluna de imagem ---------- */
.banho-tosa__imagem {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 380px;
}

.banho-tosa__foto {
  position: relative;
  z-index: 2;
  width: 94%;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid var(--pink);
}

.banho-tosa__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 1s ease;
}

.banho-tosa__foto img.is-ativo {
  opacity: 1;
  position: relative; /* mantém o fluxo enquanto for a única visível, evita "pulo" no primeiro load */
}

/* ---------- Responsivo ---------- */
@media (max-width: 860px) {
  .banho-tosa__wrap {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .banho-tosa__imagem {
    order: -1;
    min-height: 300px;
    margin-bottom: 8px;
  }

  .banho-tosa {
    padding: 40px 6%;
    padding-bottom: 20px;
  }
}

/* Padding mais fino em telas de celular — precisa vir depois da regra
   de 860px acima pra vencer o cascade (mesma especificidade) */
@media (max-width: 700px) {
  .banho-tosa {
    padding: 28px 18px 14px;
  }
}

@media (max-width: 480px) {
  .banho-tosa__item {
    font-size: 19px;
  }
}

/* ==========================================================================
   CLÍNICA — mesmo padrão do Banho e Tosa, com cores invertidas
   (card rosa / detalhes amarelos) e imagem à esquerda no desktop.
   ========================================================================== */

.clinica {
  position: relative;
  width: 100%;
  max-width: 1130px;
  margin: var(--espaco-secao) auto;
  background-color: var(--yellow-primaria);
  overflow: hidden;
  border-radius: 35px;
  border: 4px solid var(--pink);
  padding: 56px 6%;
  container-type: inline-size;
  font-family: 'Fredoka', system-ui, sans-serif;
}

@media (max-width: 700px) {
  .clinica {
    margin: var(--espaco-secao-mobile) auto;
    border-radius: 40px;
    width: calc(100% - 32px);
  }
}

.clinica__circulos {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.clinica__circulo {
  position: absolute;
  border-radius: 50%;
  background-color: var(--yellow-secundaria);
}

.clinica__circulo--1 { width: 60cqw; aspect-ratio: 1 / 1; top: -26%; right: -16%; }
.clinica__circulo--2 { width: 40cqw; aspect-ratio: 1 / 1; bottom: -20%; right: 20%; }
.clinica__circulo--3 { width: 34cqw; aspect-ratio: 1 / 1; top: 4%; left: -14%; }
.clinica__circulo--4 { width: 22cqw; aspect-ratio: 1 / 1; bottom: 6%; left: 14%; }

@media (max-width: 700px) {
  .clinica__circulo--1 { width: 95cqw; top: -15%; right: -30%; }
  .clinica__circulo--2 { width: 60cqw; bottom: -10%; right: 55%; }
  .clinica__circulo--3 { width: 60cqw; top: 20%; left: -22%; }
  .clinica__circulo--4 { width: 40cqw; bottom: 30%; left: -15%; }
}

/* ---------- Ícone decorativo (SVG mascarado no fundo) ---------- */
.clinica__icone {
  position: absolute;
  width: 30%;
  aspect-ratio: 628 / 633;
  bottom: 6%;
  right: 6%;
  background-color: var(--yellow-secundaria);

  -webkit-mask-image: url('assets/imagens/SVG/clinicavet.svg');
  mask-image: url('assets/imagens/SVG/clinicavet.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

@media (max-width: 700px) {
  .clinica__icone {
    width: 75%;
    bottom: 4%;
    right: 4%;
  }
}

.clinica__wrap {
  position: relative;
  z-index: 2;
  max-width: 1130px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: start;
  gap: 24px;
}

.clinica__texto  { order: 2; }
.clinica__imagem { order: 1; }

.clinica__titulo {
  font-family: 'Fredoka', system-ui, sans-serif;
  color: var(--pink);
  font-size: clamp(38px, 8cqw, 62px);
  line-height: 1;
  margin-bottom: 10px;
}

.clinica__frase {
  margin-bottom: 22px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease 0.15s, transform 0.6s ease 0.15s;
}

.clinica__frase.in-view {
  opacity: 1;
  transform: translateY(0);
}

.clinica__frase-destaque {
  display: inline;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(17px, 3cqw, 24px);
  line-height: 1.9;
  color: white;
  background-color: var(--pink);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 3px 12px;
}

.clinica__lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.clinica__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: clamp(18px, 2.8cqw, 24px);
  color: #000000;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.5s ease, transform 0.5s ease, padding-left 0.2s ease;
  cursor: default;
}

.clinica__item::before {
  content: '';
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pink);
  transition: transform 0.2s ease;
}

.clinica__item:hover { padding-left: 6px; }
.clinica__item:hover::before { transform: scale(1.35); }
.clinica__item.in-view { opacity: 1; transform: translateX(0); }

/* ---------- Coluna de imagem ---------- */
.clinica__imagem {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 380px;
}

.clinica__foto {
  position: relative;
  z-index: 2;
  width: 94%;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid var(--pink);
}

.clinica__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 1s ease;
}

.clinica__foto img.is-ativo {
  opacity: 1;
  position: relative; /* mantém o fluxo enquanto for a única visível, evita "pulo" no primeiro load */
}

/* ---------- Responsivo ---------- */
@media (max-width: 860px) {
  .clinica__wrap {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .clinica__imagem {
    order: -1;
    min-height: 300px;
    margin-bottom: 8px;
  }

  .clinica {
    padding: 40px 6% 20px;
  }
}

/* Padding mais fino em telas de celular — precisa vir depois da regra
   de 860px acima pra vencer o cascade (mesma especificidade) */
@media (max-width: 700px) {
  .clinica {
    padding: 28px 18px 14px;
  }
}

@media (max-width: 480px) {
  .clinica__item { font-size: 19px; }
}

/* ==========================================================================
   PET SHOP — mesmo padrão de Banho e Tosa e Clínica (fundo amarelo,
   borda rosa, círculos decorativos), sem ícone SVG no fundo.
   Layout como Banho e Tosa: texto à esquerda, imagem à direita no desktop.
   ========================================================================== */

.pet-shop {
  position: relative;
  width: 100%;
  max-width: 1130px;
  margin: var(--espaco-secao) auto;
  background-color: var(--yellow-primaria);
  overflow: hidden;
  border-radius: 35px;
  border: 4px solid var(--pink);
  padding: 56px 6%;
  container-type: inline-size;
  font-family: 'Fredoka', system-ui, sans-serif;
}

@media (max-width: 700px) {
  .pet-shop {
    margin: var(--espaco-secao-mobile) auto;
    border-radius: 40px;
    width: calc(100% - 32px);
  }
}

/* ---------- Círculos decorativos (fundo) ---------- */
.pet-shop__circulos {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.pet-shop__circulo {
  position: absolute;
  border-radius: 50%;
  background-color: var(--yellow-secundaria);
}

.pet-shop__circulo--1 {
  width: 60cqw;
  aspect-ratio: 1 / 1;
  top: -26%;
  left: -16%;
}

.pet-shop__circulo--2 {
  width: 40cqw;
  aspect-ratio: 1 / 1;
  bottom: -20%;
  left: 20%;
}

.pet-shop__circulo--3 {
  width: 34cqw;
  aspect-ratio: 1 / 1;
  top: 4%;
  right: -14%;
}

.pet-shop__circulo--4 {
  width: 22cqw;
  aspect-ratio: 1 / 1;
  bottom: 6%;
  right: 14%;
}

@media (max-width: 700px) {
  .pet-shop__circulo--1 {
    width: 95cqw;
    top: -15%;
    left: -30%;
  }

  .pet-shop__circulo--2 {
    width: 70cqw;
    bottom: -10%;
    left: -39%;
  }

  .pet-shop__circulo--3 {
    width: 60cqw;
    top: 2%;
    right: -22%;
  }

  .pet-shop__circulo--4 {
    width: 40cqw;
    bottom: 25%;
    right: -25%;
  }
}

/* ---------- Ícone decorativo (SVG mascarado no fundo) ---------- */
.pet-shop__icone {
  position: absolute;
  width: 30%;
  aspect-ratio: 579 / 585;
  bottom: 6%;
  right: 6%;
  background-color: var(--yellow-secundaria);

  -webkit-mask-image: url('assets/imagens/SVG/petshop.svg');
  mask-image: url('assets/imagens/SVG/petshop.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

@media (max-width: 700px) {
  .pet-shop__icone {
    width: 75%;
    bottom: 4%;
    right: 4%;
  }
}

.pet-shop__wrap {
  position: relative;
  z-index: 2;
  max-width: 1130px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 24px;
}

/* ---------- Coluna de texto ---------- */
.pet-shop__titulo {
  font-family: 'Fredoka', system-ui, sans-serif;
  color: var(--pink);
  font-size: clamp(38px, 8cqw, 62px);
  line-height: 1;
  margin-bottom: 10px;
}

.pet-shop__frase {
  margin-bottom: 22px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease 0.15s, transform 0.6s ease 0.15s;
}

.pet-shop__frase.in-view {
  opacity: 1;
  transform: translateY(0);
}

.pet-shop__frase-destaque {
  display: inline;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(17px, 3cqw, 24px);
  line-height: 1.9;
  color: #fff;
  background-color: var(--pink);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 3px 12px;
}

.pet-shop__lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pet-shop__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: clamp(18px, 2.8cqw, 24px);
  color: #1a1a1a;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.5s ease, transform 0.5s ease, padding-left 0.2s ease;
  cursor: default;
}

.pet-shop__item::before {
  content: '';
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pink);
  transition: transform 0.2s ease;
}

.pet-shop__item:hover {
  padding-left: 6px;
}

.pet-shop__item:hover::before {
  transform: scale(1.35);
}

.pet-shop__item.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* ---------- Coluna de imagem ---------- */
.pet-shop__imagem {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 380px;
}

.pet-shop__foto {
  position: relative;
  z-index: 2;
  width: 94%;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid var(--pink);
}

.pet-shop__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Responsivo ---------- */
@media (max-width: 860px) {
  .pet-shop__wrap {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .pet-shop__imagem {
    order: -1;
    min-height: 300px;
    margin-bottom: 8px;
  }

  .pet-shop {
    padding: 40px 6%;
    padding-bottom: 20px;
  }
}

/* Padding mais fino em telas de celular — precisa vir depois da regra
   de 860px acima pra vencer o cascade (mesma especificidade) */
@media (max-width: 700px) {
  .pet-shop {
    padding: 28px 18px 14px;
  }
}

@media (max-width: 480px) {
  .pet-shop__item {
    font-size: 19px;
  }
}

/* ==========================================================================
   NOSSA HISTÓRIA — mesmo padrão visual das seções acima (fundo amarelo,
   borda rosa, círculos decorativos, coluna de imagem com placeholder).
   Como o texto é bem mais longo que os das outras seções, a coluna de
   texto tem altura fixa (igual à coluna de imagem) e rola internamente,
   mantendo a seção com o MESMO TAMANHO das demais.
   ========================================================================== */

.historia {
  position: relative;
  width: 100%;
  max-width: 1130px;
  margin: var(--espaco-secao) auto;
  background-color: var(--yellow-primaria);
  overflow: hidden;
  border-radius: 35px;
  border: 4px solid var(--pink);
  padding: 56px 6%;
  container-type: inline-size;
  font-family: 'Fredoka', system-ui, sans-serif;
}

@media (max-width: 700px) {
  .historia {
    margin: var(--espaco-secao-mobile) auto;
    border-radius: 40px;
    width: calc(100% - 32px);
  }
}

/* ---------- Círculos decorativos (fundo) ---------- */
.historia__circulos {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.historia__circulo {
  position: absolute;
  border-radius: 50%;
  background-color: var(--yellow-secundaria);
}

.historia__circulo--1 {
  width: 60cqw;
  aspect-ratio: 1 / 1;
  top: -26%;
  left: -16%;
}

.historia__circulo--2 {
  width: 40cqw;
  aspect-ratio: 1 / 1;
  bottom: -20%;
  left: 20%;
}

.historia__circulo--3 {
  width: 34cqw;
  aspect-ratio: 1 / 1;
  top: 4%;
  right: -14%;
}

.historia__circulo--4 {
  width: 22cqw;
  aspect-ratio: 1 / 1;
  bottom: 6%;
  right: 14%;
}

@media (max-width: 700px) {
  .historia__circulo--1 {
    width: 95cqw;
    top: -15%;
    left: -30%;
  }

  .historia__circulo--2 {
    width: 70cqw;
    bottom: -10%;
    left: 10%;
  }

  .historia__circulo--3 {
    width: 60cqw;
    top: 2%;
    right: -22%;
  }

  .historia__circulo--4 {
    width: 40cqw;
    bottom: 18%;
    right: 4%;
  }
}

.historia__wrap {
  position: relative;
  z-index: 2;
  max-width: 1130px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 24px;
}

/* ---------- Coluna de texto ---------- */
.historia__titulo {
  font-family: 'Fredoka', system-ui, sans-serif;
  color: var(--pink);
  font-size: clamp(38px, 8cqw, 62px);
  line-height: 1;
  margin-bottom: 10px;
}

/* .historia__frase cuida do fade-in (mesmo padrão das outras seções) */
.historia__frase {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease 0.15s, transform 0.6s ease 0.15s;
}

.historia__frase.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* .historia__corpo cuida da rolagem interna do texto, mantendo a
   seção com a mesma altura das demais mesmo com um texto bem maior */
.historia__corpo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--pink) rgba(0, 0, 0, 0.12);

  /* leve sombra no topo/base pra indicar que o texto continua.
     --fade-top começa em 0 (sem esmaecer o início do texto) e só
     vira 8px quando o JS detecta que a pessoa rolou pra baixo
     (ver script.js). O esmaecimento de baixo fica sempre fixo. */
  --fade-top: 0px;
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - 8px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - 8px), transparent 100%);
}

.historia__corpo.historia__corpo--rolou {
  --fade-top: 8px;
}

.historia__corpo::-webkit-scrollbar {
  width: 8px;
}

.historia__corpo::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 10px;
}

.historia__corpo::-webkit-scrollbar-thumb {
  background-color: var(--pink);
  border-radius: 10px;
}

.historia__corpo p {
  font-weight: 500;
  font-size: clamp(14px, 2.1cqw, 16px);
  line-height: 1.65;
  color: #1a1a1a;
}

.historia__corpo .historia__assinatura {
  font-weight: 700;
  color: var(--pink);
}

/* ---------- Coluna de imagem ---------- */
.historia__imagem {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 380px;
}

.historia__foto {
  position: relative;
  z-index: 2;
  width: 94%;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid var(--pink);
}


.visually-hidden{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0;
}

.historia__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 1s ease;
}

.historia__foto img.is-ativo {
  opacity: 1;
  position: relative; /* mantém o fluxo enquanto for a única visível, evita "pulo" no primeiro load */
}

/* ---------- Responsivo ---------- */
@media (max-width: 860px) {
  .historia__wrap {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .historia__imagem {
    order: -1;
    min-height: 300px;
    margin-bottom: 8px;
  }

  .historia__corpo {
    max-height: 400px;
  }

  .historia {
    padding: 40px 6%;
    padding-bottom: 20px;
  }
}

/* Padding mais fino em telas de celular — precisa vir depois da regra
   de 860px acima pra vencer o cascade (mesma especificidade) */
@media (max-width: 700px) {
  .historia {
    padding: 28px 18px 14px;
  }
}

@media (max-width: 480px) {
  .historia__corpo {
    max-height: 340px;
  }

  .historia__corpo p {
    font-size: 15px;
  }
}

/* ==========================================================================
   FOOTER — segue a identidade visual do site (fonte Fredoka, paleta
   rosa/amarelo), em versão "escura" pra fechar a página sobre o fundo
   preto do body. Grid com 4 blocos: marca, horário, local e contato.
   ========================================================================== */

.footer {
  position: relative;
  width: 100%;
  max-width: none;           /* remove o limite de 1130px */
  margin: var(--espaco-secao) 0 0;   /* sem auto, já que não precisa mais centralizar */
  padding: 56px 6% 28px;
  background-color: var(--pink);
  border-top: 4px solid var(--yellow-primaria);
  overflow: hidden;
  container-type: inline-size;
  font-family: 'Fredoka', system-ui, sans-serif;
  color: #fff;
}

@media (max-width: 700px) {
  .footer {
    margin-top: var(--espaco-secao-mobile);
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    padding: 40px 18px 20px;
  }
}

/* ---------- Círculos decorativos (fundo) ----------
   Mesmo padrão das seções (banho-tosa, clinica, pet-shop),
   usando --pink-secundaria pra contrastar com o fundo --pink. */
.footer__circulos {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.footer__circulo {
  position: absolute;
  border-radius: 50%;
  background-color: var(--pink-secundaria);
}

.footer__circulo--1 {
  width: 60cqw;
  aspect-ratio: 1 / 1;
  top: -26%;
  left: -16%;
}

.footer__circulo--2 {
  width: 40cqw;
  aspect-ratio: 1 / 1;
  bottom: -20%;
  left: 20%;
}

.footer__circulo--3 {
  width: 34cqw;
  aspect-ratio: 1 / 1;
  top: 4%;
  right: -14%;
}

.footer__circulo--4 {
  width: 22cqw;
  aspect-ratio: 1 / 1;
  bottom: 6%;
  right: 14%;
}

@media (max-width: 700px) {
  .footer__circulo--1 {
    width: 95cqw;
    top: -15%;
    left: -30%;
  }

  .footer__circulo--2 {
    width: 70cqw;
    bottom: -10%;
    left: 10%;
  }

  .footer__circulo--3 {
    width: 60cqw;
    top: 2%;
    right: -22%;
  }

  .footer__circulo--4 {
    width: 40cqw;
    bottom: 18%;
    right: 4%;
  }
}

/* ---------- Recrutamento ---------- */
.footer__recrutamento {
  position: relative;
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.12);
  border: 2px solid var(--yellow-primaria);
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  margin-bottom: 40px;
  backdrop-filter: blur(10px);
}

.footer__recrutamento-titulo {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 5cqw, 28px);
  color: var(--yellow-primaria);
  margin: 0 0 8px;
  line-height: 1.3;
}

.footer__recrutamento-texto {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 18px;
}

.footer__recrutamento-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 999px;
  background-color: var(--yellow-primaria);
  color: #1a1a1a;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 6px 0 #c9a300, 0 9px 16px rgba(0, 0, 0, 0.25);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.footer__recrutamento-btn ion-icon {
  font-size: 18px;
  pointer-events: none;
}

.footer__recrutamento-btn:hover {
  background-color: var(--yellow-secundaria);
  transform: translateY(-3px);
  box-shadow: 0 8px 0 #c9a300, 0 11px 18px rgba(0, 0, 0, 0.3);
}

.footer__recrutamento-btn:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #c9a300, 0 5px 10px rgba(0, 0, 0, 0.25);
}

@media (max-width: 700px) {
  .footer__recrutamento {
    margin-bottom: 32px;
    padding: 24px 18px;
  }

  .footer__recrutamento-btn {
    padding: 11px 24px;
    font-size: 13px;
  }
}

/* Grid fluido: em vez de breakpoints fixos (que deixavam as colunas
   espremidas em larguras "de PC" intermediárias), cada bloco tem uma
   largura mínima e o grid decide sozinho quantas colunas cabem por
   linha, reorganizando tudo automaticamente. */
.footer__wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px 40px;
  margin-bottom: 40px;
}

@media (max-width: 560px) {
  .footer__wrap {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ---------- Marca ----------
   PET (esquerda) — logo (centro) — BEL (direita), igual à composição
   do hero, só que em escala reduzida pra caber no footer. A frase
   fica centralizada logo abaixo dessa linha. */
.footer__brand {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin-bottom: 40px;
}

.footer__brand-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.footer__logo {
  width: 64px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

/* Reaproveita a mesma técnica de camadas do hero (.camada-tras /
   .camada-frente), só que em wrapper relativo (não absoluto) e com
   fonte bem menor. As cores trocam pra funcionar sobre o fundo rosa
   do footer: sombra em amarelo, contorno preto na frente. */
.footer__brand-text {
  position: relative;
  display: inline-block;
  line-height: 1;
}

.footer__brand-text .camada-tras,
.footer__brand-text .camada-frente {
  position: static;
  font-size: clamp(44px, 7cqw, 62px);
  transform: none;
}

.footer__brand-text .camada-tras {
  position: absolute;
  inset: 0;
  color: var(--yellow-primaria);
  transform: translate(0.04em, 0.04em);
}

.footer__brand-text .camada-frente {
  position: relative;
  color: transparent;
  -webkit-text-stroke: 0.035em #000;
}

.footer__tagline {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  max-width: 240px;
  margin: 0;
}

/* ---------- Títulos dos blocos ---------- */
.footer__titulo {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--yellow-primaria);
  font-size: 15px;
  margin-bottom: 14px;
}

/* ---------- Horário ---------- */
.footer__lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer__lista li {
  font-size: 15.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
}

.footer__lista li strong {
  color: #fff;
  font-weight: 700;
  margin-left: 4px;
}

/* ---------- Horário por unidade ----------
   Cada unidade (Fernando Guilhon 1039 / Econômico Jurunas 962) tem
   seu próprio bloco, com o nome da unidade em destaque e, dentro dela,
   um rótulo por serviço (Pet Shop / Clínica / Banho & Tosa) seguido
   da lista de horários daquele serviço (reaproveitando .footer__lista).
   Pra ajustar algum horário, mexa só no <li> correspondente no HTML. */
.footer__horario-unidade {
  margin-bottom: 22px;
}

.footer__horario-unidade:last-child {
  margin-bottom: 0;
}

.footer__horario-nome {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color:var(--yellow-secundaria);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.footer__horario-servico {
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: white;
  margin: 12px 0 6px;
}

.footer__horario-servico:first-of-type {
  margin-top: 0;
}

/* ---------- Local (cards clicáveis com botão "Ver no mapa") ---------- */
.footer__local-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer__local-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  background-color: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  padding: 18px;
}

.footer__local-nome {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.footer__local-endereco {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.footer__local-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 10px 18px;
  border-radius: 999px;
  background-color: var(--yellow-primaria);
  color: #1a1a1a;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 13px;
  text-decoration: none;
  box-shadow: 0 5px 0 #c9a300, 0 8px 14px rgba(0, 0, 0, 0.25);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.footer__local-btn ion-icon {
  font-size: 15px;
}

.footer__local-btn:hover {
  background-color: var(--yellow-secundaria);
  transform: translateY(-3px);
  box-shadow: 0 7px 0 #c9a300, 0 10px 16px rgba(0, 0, 0, 0.3);
}

.footer__local-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #c9a300, 0 4px 8px rgba(0, 0, 0, 0.25);
}

/* ---------- Contato / redes sociais (duas unidades) ---------- */
.footer__unidade {
  margin-bottom: 18px;
}

.footer__unidade:last-child {
  margin-bottom: 0;
}

.footer__unidade-nome {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 10px;
}

.footer__redes {
  display: flex;
  gap: 10px;
}

.footer__rede {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 30%;
  background-color: var(--pink-secundaria);
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.footer__rede ion-icon {
  font-size: 19px;
  pointer-events: none;
}

.footer__rede:hover {
  background-color: var(--yellow-secundaria);
  color: #1a1a1a;
  transform: translateY(-3px);
}

/* ---------- Base do footer ----------
   Mobile (padrão): coluna centralizada — linha de direitos autorais
   no topo, uma linha divisória fina no meio e, por baixo,
   "Desenvolvido por" com o nome em formato de botão/badge.
   Desktop (ver media query mais abaixo): vira uma linha só, com os
   direitos autorais à esquerda e "Desenvolvido por" + botão à
   direita, sem a linha divisória — igual à referência. */
.footer__base {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding-top: 24px;
  font-size: 14px;
   font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.footer__direitos {
  margin: 0;
  line-height: 1.5;
}

/* Linha fina separando "Todos os direitos reservados" de "Desenvolvido por" */
.footer__base-divisor {
  display: block;
  width: 100%;
  max-width: 280px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.3);
}

.footer__dev {
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* ---------- Responsivo (desktop) ----------
   A partir de 700px a base do footer vira uma única linha: direitos
   autorais à esquerda, "Desenvolvido por" + botão à direita (a linha
   divisória alinhada ao centro some, já que os dois blocos ficam
   lado a lado). */

/* @media (min-width: 560px) {
  .footer__base {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: 16px 24px;
  }

  .footer__direitos {
    flex: 1 1 auto;
    min-width: 220px;
  }

  .footer__base-divisor {
    display: none;
  }

  .footer__dev {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
  }
}  */ 

/* Badge/botão com o nome do desenvolvedor, no estilo da referência:
   fundo amarelo, texto escuro, ícone "</>" à esquerda e ícone de
   link externo à direita, com a mesma sombra em "degrau" das CTAs
   do site. */
.footer__dev-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background-color: var(--yellow-primaria);
  color: #1a1a1a;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 13px;
  text-decoration: none;
  box-shadow: 0 5px 0 #c9a300, 0 8px 14px rgba(0, 0, 0, 0.25);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.footer__dev-link ion-icon {
  font-size: 16px;
  pointer-events: none;
}

.footer__dev-link:hover {
  background-color: var(--yellow-secundaria);
  transform: translateY(-3px);
  box-shadow: 0 7px 0 #c9a300, 0 10px 16px rgba(0, 0, 0, 0.3);
}

.footer__dev-link:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #c9a300, 0 4px 8px rgba(0, 0, 0, 0.25);
}

@media (max-width: 560px) {
  .footer__base {
    padding-top: 20px;
  }
}