/* =============================================================
   LOVE PET — Seções
   Escrito mobile-first: o layout base é o do celular e cresce
   com min-width. Nada aqui é apenas "desktop encolhido".
   ============================================================= */

/* ============================================================
   CABEÇALHO
   ============================================================ */

.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-cabecalho);
  padding: var(--esp-3) 0;
  transition: padding var(--transicao-suave);
}

.cabecalho__barra {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  padding: 0.55rem 0.65rem 0.55rem 0.85rem;
  background-color: rgba(246, 249, 254, 0.84);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(15, 44, 87, 0.08);
  border-radius: var(--raio-pill);
  box-shadow: var(--sombra-sm);
  transition: box-shadow var(--transicao-suave),
    background-color var(--transicao-suave), border-color var(--transicao);
}

.cabecalho.rolado {
  padding: var(--esp-2) 0;
}

.cabecalho.rolado .cabecalho__barra {
  background-color: rgba(246, 249, 254, 0.96);
  box-shadow: var(--sombra-md);
  border-color: rgba(15, 44, 87, 0.12);
}

/* ---------- Logo ---------- */

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  padding: 0.15rem;
  border-radius: var(--raio-pill);
}

.logo__emblema {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--nuvem-300);
  box-shadow: 0 0 0 2px var(--branco), var(--sombra-xs);
  transition: rotate var(--mola), scale var(--mola);
}

.logo__emblema img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logo:hover .logo__emblema {
  rotate: -7deg;
  scale: 1.06;
}

.logo__texto {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo__nome {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: 1.35rem;
  letter-spacing: 0.005em;
  color: var(--azul-700);
}

.logo__nome span {
  color: var(--rosa-600);
}

.logo__sub {
  font-size: 0.6875rem;
  font-weight: var(--peso-bold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta-45);
  margin-top: 0.22rem;
}

.logo--claro .logo__nome {
  color: var(--branco);
}

.logo--claro .logo__nome span {
  color: var(--amarelo-500);
}

.logo--claro .logo__sub {
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- Navegação ---------- */

.nav {
  display: none;
}

.nav__lista {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav__link {
  position: relative;
  display: block;
  padding: 0.55rem 0.85rem;
  font-family: var(--fonte-display);
  font-weight: var(--peso-bold);
  font-size: var(--txt-sm);
  color: var(--azul-800);
  border-radius: var(--raio-pill);
  transition: color var(--transicao), background-color var(--transicao);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.3rem;
  translate: -50% 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--rosa-500);
  opacity: 0;
  scale: 0.4;
  transition: opacity var(--transicao), scale var(--mola);
}

.nav__link:hover {
  color: var(--rosa-700);
  background-color: var(--nuvem-100);
}

.nav__link:hover::after,
.nav__link[aria-current="true"]::after {
  opacity: 1;
  scale: 1;
}

.nav__link[aria-current="true"] {
  color: var(--rosa-700);
}

.cabecalho__acoes {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

.cabecalho__cta {
  display: none;
}

/* ---------- Botão do menu (hambúrguer animado) ---------- */

.menu-botao {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: var(--raio-pill);
  background-color: var(--azul-700);
  color: var(--branco);
  transition: background-color var(--transicao), rotate var(--mola);
}

.menu-botao:hover {
  background-color: var(--azul-800);
}

.menu-botao__linhas {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 20px;
}

.menu-botao__linhas span {
  display: block;
  height: 2.5px;
  border-radius: 2px;
  background-color: currentColor;
  transition: translate var(--transicao), rotate var(--transicao),
    opacity var(--transicao-rapida), width var(--transicao);
}

.menu-botao__linhas span:nth-child(2) {
  width: 70%;
}

.menu-botao[aria-expanded="true"] .menu-botao__linhas span:nth-child(1) {
  translate: 0 7.5px;
  rotate: 45deg;
}

.menu-botao[aria-expanded="true"] .menu-botao__linhas span:nth-child(2) {
  opacity: 0;
  width: 0;
}

.menu-botao[aria-expanded="true"] .menu-botao__linhas span:nth-child(3) {
  translate: 0 -7.5px;
  rotate: -45deg;
}

/* ---------- Menu mobile (painel completo) ---------- */

.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  padding: 5.75rem var(--gutter) calc(var(--esp-6) + env(safe-area-inset-bottom));
  background-color: var(--nuvem-50);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  translate: 0 -12px;
  transition: opacity var(--transicao), translate var(--transicao-suave),
    visibility var(--transicao);
}

.menu-mobile.aberto {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

.menu-mobile__decor {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.menu-mobile__lista {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--borda);
}

.menu-mobile__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: 1.05rem 0.25rem;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: clamp(1.375rem, 1.1rem + 2.2vw, 1.9375rem);
  letter-spacing: var(--tracking-titulo);
  color: var(--azul-900);
  border-bottom: 1px solid var(--borda);
  transition: color var(--transicao), padding-left var(--transicao);
}

.menu-mobile__link svg {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--rosa-500);
  opacity: 0;
  translate: -8px 0;
  transition: opacity var(--transicao), translate var(--mola);
}

.menu-mobile__link:hover,
.menu-mobile__link:focus-visible {
  color: var(--rosa-700);
  padding-left: 0.6rem;
}

.menu-mobile__link:hover svg,
.menu-mobile__link:focus-visible svg {
  opacity: 1;
  translate: 0 0;
}

.menu-mobile__rodape {
  margin-top: auto;
  padding-top: var(--esp-6);
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

.menu-mobile__contatos {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

.menu-mobile__contato {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  font-weight: var(--peso-semi);
  color: var(--texto-suave);
}

.menu-mobile__contato svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--azul-500);
  flex: none;
}

.menu-mobile__contato strong {
  color: var(--azul-900);
}

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

.hero {
  position: relative;
  padding-top: calc(6.5rem + var(--esp-6));
  padding-bottom: var(--esp-8);
  overflow: hidden;
  isolation: isolate;
}

.hero__fundo {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(
      120% 90% at 88% 8%,
      var(--rosa-100) 0%,
      transparent 55%
    ),
    radial-gradient(90% 70% at 4% 92%, var(--azul-50) 0%, transparent 60%);
}

.hero__blob-1 {
  width: min(52vw, 420px);
  aspect-ratio: 1;
  top: -8%;
  right: -14%;
  background-color: var(--amarelo-100);
  border-radius: var(--blob-b);
  opacity: 0.75;
}

.hero__blob-2 {
  width: min(40vw, 300px);
  aspect-ratio: 1;
  bottom: 4%;
  left: -18%;
  background-color: var(--azul-100);
  opacity: 0.6;
}

.hero__grade {
  display: grid;
  gap: var(--esp-7);
}

/* ---------- Coluna de texto ---------- */

.hero__conteudo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-5);
}

.hero__titulo {
  font-size: var(--titulo-xl);
  max-width: 20ch;
}

.hero__titulo .sobretitulo {
  display: block;
  margin-bottom: 0.35em;
}

.hero__texto {
  font-size: var(--txt-md);
  color: var(--texto-suave);
  max-width: 44ch;
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  width: 100%;
}

.hero__acoes .btn {
  flex: 1 1 15rem;
}

.hero__provas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  padding-top: var(--esp-2);
}

/* ---------- Composição de fotos ---------- */

.hero__composicao {
  position: relative;
  /* garante espaço para as fotos flutuantes sem cortar nada */
  padding-bottom: 3.5rem;
  padding-right: 2rem;
}

.hero__foto-principal {
  width: min(100%, 26rem);
  aspect-ratio: 4 / 5;
  margin-inline: auto;
  border-radius: 46% 46% 46% 46% / 36% 36% 36% 36%;
  animation: hero-flutua 9s ease-in-out infinite;
}

.hero__foto-secundaria {
  position: absolute;
  right: 0;
  bottom: 1.5rem;
  width: clamp(7rem, 26vw, 10.5rem);
  aspect-ratio: 1;
  animation: hero-flutua 7.5s ease-in-out 0.6s infinite;
}

.hero__foto-terciaria {
  position: absolute;
  left: 0;
  top: 8%;
  width: clamp(5.5rem, 20vw, 8rem);
  aspect-ratio: 1;
  animation: hero-flutua 8.5s ease-in-out 1.2s infinite;
}

/* Adesivo giratório no canto da foto principal */
.hero__adesivo {
  position: absolute;
  right: 4%;
  top: 2%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(5rem, 17vw, 6.75rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--rosa-600);
  color: var(--branco);
  text-align: center;
  font-family: var(--fonte-display);
  font-weight: var(--peso-black);
  font-size: var(--txt-sm);
  line-height: 1.15;
  box-shadow: var(--sombra-rosa);
  rotate: -9deg;
}

.hero__adesivo span {
  display: block;
  padding: 0.4rem;
}

.hero__adesivo em {
  display: block;
  font-style: normal;
  font-size: 1.5em;
  color: var(--amarelo-500);
}

/* Faíscas — usadas com moderação (apenas 2) */
.hero__faisca {
  position: absolute;
  z-index: 2;
  color: var(--amarelo-500);
  animation: brilha 3.4s ease-in-out infinite;
}

.hero__faisca svg {
  width: 100%;
  height: 100%;
}

.hero__faisca--1 {
  width: 2rem;
  left: 6%;
  bottom: 22%;
}

.hero__faisca--2 {
  width: 1.4rem;
  right: 22%;
  bottom: 6%;
  animation-delay: 1.3s;
  color: var(--rosa-500);
}

@keyframes hero-flutua {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -12px;
  }
}

@keyframes brilha {
  0%,
  100% {
    opacity: 0.35;
    scale: 0.85;
  }
  50% {
    opacity: 1;
    scale: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__foto-principal,
  .hero__foto-secundaria,
  .hero__foto-terciaria,
  .hero__faisca {
    animation: none;
  }
}

/* ---------- Faixa marquee logo abaixo do hero ---------- */

.faixa-servicos {
  position: relative;
  z-index: var(--z-conteudo);
  margin-top: calc(var(--esp-6) * -1 + 1rem);
  padding-block: var(--esp-6);
  overflow: hidden;
}

/* ============================================================
   SERVIÇOS
   ============================================================ */

.servicos__grade {
  display: grid;
  gap: var(--esp-5);
}

.servico__beneficios {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  margin-top: var(--esp-1);
}

.servico__beneficio {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: var(--txt-sm);
  font-weight: var(--peso-semi);
  color: var(--azul-700);
}

.servico__beneficio svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  margin-top: 0.18rem;
  color: var(--azul-400);
}

.servicos__nota {
  margin-top: var(--esp-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-5);
  background-color: var(--azul-50);
  border: 2px dashed var(--azul-200);
  border-radius: var(--raio-xl);
}

.servicos__nota p {
  max-width: 52ch;
  color: var(--azul-800);
  font-weight: var(--peso-medio);
}

.servicos__nota strong {
  color: var(--azul-900);
}

/* ============================================================
   DIFERENCIAIS
   ============================================================ */

.diferenciais {
  position: relative;
  /* azul mais vivo que o azul-900 dos passos: sem isso as duas
     seções escuras coladas viram um bloco só */
  background-image: linear-gradient(170deg, var(--azul-600), var(--azul-800));
  background-color: var(--azul-700);
  color: var(--nuvem-100);
  overflow: hidden;
}

.diferenciais__topo,
.diferenciais__base {
  position: absolute;
  left: 0;
  right: 0;
  color: var(--fundo);
}

.diferenciais__topo {
  top: -1px;
}

.diferenciais__base {
  bottom: -1px;
  rotate: 180deg;
  color: var(--fundo-alt);
}

.diferenciais__interior {
  position: relative;
  z-index: var(--z-conteudo);
  padding-block: calc(var(--secao-y) + 2rem);
}

.diferenciais__grade {
  display: grid;
  gap: var(--esp-6);
}

.diferencial {
  position: relative;
  padding-left: var(--esp-6);
}

.diferencial::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 3px;
  border-radius: var(--raio-pill);
  background: linear-gradient(
    to bottom,
    var(--amarelo-500),
    rgba(255, 219, 90, 0)
  );
}

.diferencial__numero {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: var(--txt-base);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--tracking-selo);
  color: var(--amarelo-500);
  margin-bottom: var(--esp-2);
}

/* h3 nasce azul-900 e sumia dentro do bloco escuro */
.diferenciais h3 {
  color: var(--branco);
}

.diferencial__titulo {
  font-size: var(--txt-xl);
  color: var(--branco);
  margin-bottom: var(--esp-2);
}

.diferencial__texto {
  color: rgba(255, 255, 255, 0.82);
}

.diferenciais__destaque {
  margin-top: var(--esp-8);
  display: grid;
  gap: var(--esp-6);
  align-items: center;
  padding: var(--esp-6);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--raio-2xl);
}

.diferenciais__destaque-foto {
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 3 / 2;
  margin-inline: auto;
  border-radius: var(--raio-xl);
  overflow: hidden;
  box-shadow: var(--sombra-lg);
}

.diferenciais__destaque-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.diferenciais__destaque-texto h3 {
  margin-bottom: var(--esp-3);
}

.diferenciais__destaque-texto p {
  color: rgba(255, 255, 255, 0.84);
  margin-bottom: var(--esp-5);
}

/* ============================================================
   GALERIA (mosaico dinâmico)
   ============================================================ */

.galeria__mosaico {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-3);
}

.galeria__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--raio-lg);
  background-color: var(--nuvem-200);
  box-shadow: var(--sombra-sm);
  cursor: zoom-in;
  transition: translate var(--transicao-suave), box-shadow var(--transicao-suave);
}

.galeria__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--transicao-suave);
}

.galeria__item:hover,
.galeria__item:focus-visible {
  translate: 0 -4px;
  box-shadow: var(--sombra-lg);
}

.galeria__item:hover img {
  scale: 1.06;
}

.galeria__legenda {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 0.9rem 0.85rem;
  font-family: var(--fonte-display);
  font-weight: var(--peso-bold);
  font-size: var(--txt-sm);
  color: var(--branco);
  background: linear-gradient(
    to top,
    rgba(15, 44, 87, 0.86),
    rgba(15, 44, 87, 0)
  );
  opacity: 0;
  translate: 0 8px;
  transition: opacity var(--transicao), translate var(--transicao-suave);
}

.galeria__item:hover .galeria__legenda,
.galeria__item:focus-visible .galeria__legenda {
  opacity: 1;
  translate: 0 0;
}

/* proporções variadas para o mosaico não parecer grade de quadradinhos */
.galeria__item--alto {
  grid-row: span 2;
  aspect-ratio: 4 / 5;
}
.galeria__item--quadrado {
  aspect-ratio: 1;
}
.galeria__item--largo {
  grid-column: span 2;
  aspect-ratio: 3 / 2;
}
.galeria__item--retrato {
  aspect-ratio: 4 / 5;
}

/* Azulejo final que leva para o Instagram */
.galeria__item--convite {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--esp-3);
  padding: var(--esp-5);
  aspect-ratio: 1;
  cursor: pointer;
  background: linear-gradient(140deg, var(--azul-600), var(--azul-800));
  color: var(--branco);
  text-align: left;
}

.galeria__item--convite strong {
  font-family: var(--fonte-display);
  font-size: var(--txt-lg);
  font-weight: var(--peso-black);
  line-height: 1.15;
}

.galeria__item--convite span {
  font-size: var(--txt-sm);
  color: rgba(255, 255, 255, 0.78);
}

.galeria__item--convite svg {
  width: 1.8rem;
  height: 1.8rem;
  color: var(--amarelo-500);
}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background-color: rgba(15, 44, 87, 0.9);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transicao), visibility var(--transicao);
}

.lightbox.aberto {
  opacity: 1;
  visibility: visible;
}

.lightbox__figura {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  max-width: min(100%, 46rem);
  max-height: 100%;
  scale: 0.96;
  transition: scale var(--mola);
}

.lightbox.aberto .lightbox__figura {
  scale: 1;
}

.lightbox__figura img {
  width: 100%;
  max-height: 74vh;
  object-fit: contain;
  border-radius: var(--raio-lg);
  background-color: var(--azul-900);
}

.lightbox__figura figcaption {
  color: var(--nuvem-100);
  font-weight: var(--peso-semi);
  text-align: center;
}

.lightbox__fechar {
  position: absolute;
  top: var(--gutter);
  right: var(--gutter);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.14);
  color: var(--branco);
  transition: background-color var(--transicao), rotate var(--mola);
}

.lightbox__fechar:hover {
  background-color: var(--rosa-600);
  rotate: 90deg;
}

.lightbox__fechar svg {
  width: 1.4rem;
  height: 1.4rem;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.14);
  color: var(--branco);
  transition: background-color var(--transicao);
}

.lightbox__nav:hover {
  background-color: var(--rosa-600);
}

.lightbox__nav svg {
  width: 1.5rem;
  height: 1.5rem;
}

.lightbox__nav--anterior {
  left: var(--gutter);
}
.lightbox__nav--proximo {
  right: var(--gutter);
}

/* ============================================================
   DEPOIMENTOS
   ============================================================ */

.depoimentos__aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  margin-bottom: var(--esp-6);
  padding: var(--esp-4) var(--esp-5);
  background-color: var(--amarelo-100);
  border: 1px solid var(--amarelo-300);
  border-radius: var(--raio-lg);
  color: var(--amarelo-800);
  font-size: var(--txt-sm);
  font-weight: var(--peso-semi);
}

.depoimentos__aviso svg {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  margin-top: 0.1rem;
  color: var(--amarelo-600);
}

.depoimentos__grade {
  display: grid;
  gap: var(--esp-5);
}

.depoimento {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  padding: var(--esp-6) var(--esp-5) var(--esp-5);
  background-color: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-xl);
  box-shadow: var(--sombra-sm);
  transition: translate var(--transicao-suave), box-shadow var(--transicao-suave);
}

.depoimento:hover {
  translate: 0 -5px;
  box-shadow: var(--sombra-md);
}

.depoimento__aspas {
  position: absolute;
  top: -0.4rem;
  right: var(--esp-5);
  font-family: var(--fonte-titulo);
  font-size: 5rem;
  font-weight: var(--peso-titulo);
  line-height: 1;
  color: var(--azul-100);
  user-select: none;
}

.depoimento__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
}

.depoimento__estrelas {
  display: flex;
  gap: 0.15rem;
  /* o amarelo da marca não se vê sobre branco: usa o degrau escuro */
  color: var(--amarelo-600);
}

.depoimento__estrelas svg {
  width: 1.15rem;
  height: 1.15rem;
}

.depoimento__texto {
  position: relative;
  font-size: var(--txt-md);
  color: var(--texto);
}

.depoimento__autor {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin-top: auto;
  padding-top: var(--esp-2);
}

.depoimento__inicial {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  flex: none;
  border-radius: 50%;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--txt-md);
  color: var(--branco);
  background-color: var(--azul-600);
}

.depoimento:nth-child(2) .depoimento__inicial {
  background-color: var(--rosa-600);
}
.depoimento:nth-child(3) .depoimento__inicial {
  background-color: var(--amarelo-500);
  color: var(--azul-900);
}

.depoimento__nome {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.depoimento__nome strong {
  font-family: var(--fonte-display);
  color: var(--azul-900);
}

.depoimento__nome span {
  font-size: var(--txt-sm);
  color: var(--tinta-45);
}

/* ============================================================
   INSTAGRAM
   ============================================================ */

.instagram {
  position: relative;
  background-color: var(--rosa-50);
  overflow: hidden;
}

.instagram__cabecalho {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  align-items: flex-start;
  margin-bottom: var(--esp-6);
}

.instagram__perfil {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
}

.instagram__avatar {
  width: 4.25rem;
  height: 4.25rem;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--nuvem-300);
  padding: 3px;
  background-image: linear-gradient(
    45deg,
    var(--amarelo-500),
    var(--rosa-500),
    var(--azul-500)
  );
}

.instagram__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--azul-50);
}

.instagram__arroba {
  font-family: var(--fonte-titulo);
  font-size: var(--txt-xl);
  font-weight: var(--peso-titulo);
  color: var(--azul-800);
  letter-spacing: 0.005em;
}

.instagram__perfil p {
  color: var(--texto-suave);
  font-size: var(--txt-sm);
}

.instagram__grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-3);
}

.instagram__post {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--raio-md);
  background-color: var(--nuvem-200);
  box-shadow: var(--sombra-xs);
}

.instagram__post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--transicao-suave);
}

.instagram__post::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(15, 44, 87, 0);
  transition: background-color var(--transicao);
}

.instagram__post:hover img {
  scale: 1.07;
}

.instagram__post:hover::after {
  background-color: rgba(15, 44, 87, 0.35);
}

.instagram__post-icone {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: var(--branco);
  opacity: 0;
  scale: 0.7;
  transition: opacity var(--transicao), scale var(--mola);
}

.instagram__post-icone svg {
  width: 2rem;
  height: 2rem;
}

.instagram__post:hover .instagram__post-icone,
.instagram__post:focus-visible .instagram__post-icone {
  opacity: 1;
  scale: 1;
}

.instagram__rodape {
  margin-top: var(--esp-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-4);
}

/* ============================================================
   CONTATO
   ============================================================ */

.contato {
  position: relative;
  background-color: var(--fundo-alt);
  overflow: hidden;
}

.contato__grade {
  display: grid;
  gap: var(--esp-7);
  align-items: start;
}

.contato__info {
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
}

.contato__lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

.contato__item {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-4);
}

.contato__item-conteudo {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.contato__rotulo {
  font-size: var(--txt-sm);
  font-weight: var(--peso-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-selo);
  color: var(--texto-suave);
}

.contato__valor {
  font-family: var(--fonte-display);
  font-size: var(--txt-lg);
  font-weight: var(--peso-bold);
  color: var(--azul-900);
  /* nunca deixa telefone/endereço longo estourar */
  overflow-wrap: anywhere;
}

a.contato__valor {
  transition: color var(--transicao);
}

a.contato__valor:hover {
  color: var(--rosa-700);
}

.contato__nota {
  font-size: var(--txt-sm);
  color: var(--texto-suave);
}

.contato__mapa {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio-xl);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-sm);
  aspect-ratio: 16 / 10;
  background-color: var(--nuvem-200);
}

.contato__mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: saturate(0.92);
}

.contato__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
}

.contato__acoes .btn {
  flex: 1 1 13rem;
}

/* ---------- Formulário ---------- */

.form-agenda {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  padding: var(--esp-5);
  background-color: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2xl);
  box-shadow: var(--sombra-md);
}

.form-agenda__cabecalho {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  margin-bottom: var(--esp-1);
}

.form-agenda__titulo {
  font-size: var(--titulo-sm);
}

.form-agenda__sub {
  color: var(--texto-suave);
  font-size: var(--txt-sm);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.campo__rotulo {
  font-size: var(--txt-sm);
  font-weight: var(--peso-bold);
  color: var(--azul-900);
}

.campo__rotulo span {
  color: var(--tinta-45);
  font-weight: var(--peso-medio);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  font-size: var(--txt-base);
  font-family: var(--fonte-texto);
  color: var(--texto);
  background-color: var(--nuvem-50);
  border: 2px solid var(--nuvem-200);
  border-radius: var(--raio-md);
  transition: border-color var(--transicao), background-color var(--transicao);
}

.campo textarea {
  resize: vertical;
  min-height: 5.5rem;
}

.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c5c52' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1.1rem;
  padding-right: 2.6rem;
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover {
  border-color: var(--azul-200);
}

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  border-color: var(--azul-400);
  background-color: var(--branco);
  box-shadow: 0 0 0 4px var(--azul-50);
}

.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"] {
  border-color: var(--erro);
}

.campo__erro {
  font-size: var(--txt-sm);
  font-weight: var(--peso-semi);
  color: var(--erro);
  min-height: 0;
}

.form-agenda__dupla {
  display: grid;
  gap: var(--esp-4);
}

.form-agenda__aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  font-size: var(--txt-sm);
  color: var(--texto-suave);
}

.form-agenda__aviso svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  margin-top: 0.2rem;
  color: var(--azul-400);
}

.form-agenda__retorno {
  font-weight: var(--peso-bold);
  text-align: center;
  min-height: 1.5rem;
}

.form-agenda__retorno.sucesso {
  color: var(--azul-600);
}

.form-agenda__retorno.falha {
  color: var(--erro);
}

/* ============================================================
   RODAPÉ
   ============================================================ */

.rodape {
  position: relative;
  background-color: var(--azul-900);
  color: rgba(255, 255, 255, 0.8);
  padding-top: var(--esp-8);
  overflow: hidden;
}

.rodape__grade {
  display: grid;
  gap: var(--esp-7);
  padding-bottom: var(--esp-7);
}

.rodape__marca {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  align-items: flex-start;
}

.rodape__frase {
  max-width: 34ch;
}

.rodape__sociais {
  display: flex;
  gap: var(--esp-3);
}

.rodape__social {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--raio-md);
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--branco);
  transition: background-color var(--transicao), translate var(--mola);
}

.rodape__social:hover {
  background-color: var(--rosa-600);
  translate: 0 -4px;
}

.rodape__social svg {
  width: 1.35rem;
  height: 1.35rem;
}

.rodape__coluna h3 {
  font-family: var(--fonte-display);
  font-size: var(--txt-base);
  font-weight: var(--peso-black);
  text-transform: uppercase;
  letter-spacing: var(--tracking-selo);
  color: var(--amarelo-500);
  margin-bottom: var(--esp-4);
}

.rodape__lista {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.rodape__lista a,
.rodape__lista span {
  transition: color var(--transicao), translate var(--transicao);
  display: inline-block;
  overflow-wrap: anywhere;
}

.rodape__lista a:hover {
  color: var(--branco);
  translate: 4px 0;
}

.rodape__horarios {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.rodape__horario {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-4);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.rodape__horario strong {
  color: var(--branco);
  font-weight: var(--peso-semi);
}

.rodape__base {
  padding-block: var(--esp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  align-items: center;
  justify-content: space-between;
  font-size: var(--txt-sm);
}

.rodape__base p {
  margin: 0;
}

/* ============================================================
   BOTÃO FLUTUANTE DO WHATSAPP
   ============================================================ */

.whats-flutuante {
  position: fixed;
  right: max(var(--esp-4), env(safe-area-inset-right));
  bottom: max(var(--esp-4), env(safe-area-inset-bottom));
  z-index: var(--z-flutuante);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem;
  background-color: var(--acao-escura);
  color: var(--branco);
  border-radius: var(--raio-pill);
  box-shadow: var(--sombra-azul);
  transition: translate var(--mola), opacity var(--transicao),
    visibility var(--transicao), background-color var(--transicao),
    padding var(--transicao);
}

.whats-flutuante svg {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
}

.whats-flutuante__rotulo {
  font-family: var(--fonte-display);
  font-weight: var(--peso-bold);
  font-size: var(--txt-sm);
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width var(--transicao-suave), opacity var(--transicao),
    padding var(--transicao);
}

.whats-flutuante:hover {
  background-color: var(--azul-700);
  translate: 0 -3px;
}

.whats-flutuante:hover .whats-flutuante__rotulo,
.whats-flutuante:focus-visible .whats-flutuante__rotulo {
  max-width: 12rem;
  opacity: 1;
  padding-right: 0.4rem;
}

/* Some quando a seção de contato está na tela: não cobre o formulário */
.whats-flutuante.recolhido {
  opacity: 0;
  visibility: hidden;
  translate: 0 1.5rem;
}

/* Pulso discreto, só uma vez a cada ciclo longo */
.whats-flutuante__pulso {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: pulso-whats 3.6s ease-out infinite;
  pointer-events: none;
}

@keyframes pulso-whats {
  0% {
    box-shadow: 0 0 0 0 rgba(70, 144, 246, 0.55);
  }
  60%,
  100% {
    box-shadow: 0 0 0 14px rgba(70, 144, 246, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .whats-flutuante__pulso {
    animation: none;
  }
}

/* ============================================================
   PONTOS DE QUEBRA
   ============================================================ */

/* ---------- Celular grande ---------- */
@media (min-width: 30rem) {
  .form-agenda__dupla {
    grid-template-columns: 1fr 1fr;
  }

  .galeria__mosaico {
    grid-template-columns: repeat(3, 1fr);
  }

  .instagram__grade {
    grid-template-columns: repeat(3, 1fr);
  }

  .form-agenda {
    padding: var(--esp-6);
  }
}

/* ---------- Tablet ---------- */
@media (min-width: 48rem) {
  .servicos__grade {
    grid-template-columns: repeat(2, 1fr);
  }

  .diferenciais__grade {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--esp-7) var(--esp-6);
  }

  .depoimentos__grade {
    grid-template-columns: repeat(2, 1fr);
  }

  .diferenciais__destaque {
    grid-template-columns: 20rem 1fr;
    padding: var(--esp-7);
  }

  .rodape__grade {
    grid-template-columns: repeat(2, 1fr);
  }

  .instagram__cabecalho {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ---------- Notebook: aparece a navegação horizontal ---------- */
@media (min-width: 62rem) {
  .nav {
    display: block;
  }

  .cabecalho__cta {
    display: inline-flex;
  }

  .menu-botao {
    display: none;
  }

  .menu-mobile {
    display: none;
  }

  .hero {
    padding-top: calc(7rem + var(--esp-7));
    padding-bottom: var(--esp-9);
  }

  .hero__grade {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: var(--esp-6);
  }

  .hero__composicao {
    padding-bottom: 0;
    padding-right: 0;
  }

  .hero__foto-principal {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  .hero__foto-secundaria {
    right: -2.5rem;
    bottom: 2rem;
  }

  .hero__foto-terciaria {
    left: -3rem;
    top: 6%;
  }

  .servicos__grade {
    grid-template-columns: repeat(3, 1fr);
  }

  .depoimentos__grade {
    grid-template-columns: repeat(3, 1fr);
  }

  .galeria__mosaico {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--esp-4);
  }

  .instagram__grade {
    grid-template-columns: repeat(6, 1fr);
  }

  .contato__grade {
    grid-template-columns: 1fr 1fr;
    gap: var(--esp-8);
  }

  .rodape__grade {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  }

  .diferenciais__grade {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Monitor grande ---------- */
@media (min-width: 90rem) {
  :root {
    --largura-max: 1280px;
  }

  .hero__grade {
    gap: var(--esp-8);
  }
}