/* Tema Patas — pet shop: alegre, arredondado, bolhas e ondas */
@font-face { font-family: "Fredoka"; src: url("/assets/fontes/fredoka-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
:root {
  --cor: #ff8a3d; --cor-2: #f26b12; --fundo: #fff6ea; --fundo-2: #ffffff; --tinta: #1f3b4d; --texto: #55697a; --linha: #f1e2cf;
  --raio: 28px; --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --titulo: "Fredoka", "Arial Rounded MT Bold", sans-serif;
  --topo-fundo: rgba(255, 246, 234, .92); --rodape-fundo: #1f3b4d; --verde: #2ec4b6;
}
h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; }
h1 span, h1 em { display: block; }
h1 em { font-style: normal; color: var(--cor); position: relative; }
.botao { box-shadow: 0 8px 0 var(--cor-2); transition: transform .15s, box-shadow .15s; }
.botao:hover { transform: translateY(3px); box-shadow: 0 5px 0 var(--cor-2); background: var(--cor); }
.botao-vazado { box-shadow: 0 8px 0 var(--tinta); background: #fff; color: var(--tinta); border-color: var(--tinta); }
.botao-vazado:hover { background: #fff; color: var(--tinta); box-shadow: 0 5px 0 var(--tinta); }
.sobretitulo { font-family: var(--titulo); text-transform: none; letter-spacing: 0; font-size: 1.1rem; color: var(--verde); }
.etiqueta { display: inline-block; background: #fff; border: 2px dashed var(--cor); border-radius: 999px; padding: 8px 16px; font-weight: 700; color: var(--tinta); margin-bottom: 20px; transform: rotate(-2deg); }

.hero { position: relative; overflow: hidden; padding: clamp(36px, 6vw, 80px) 0 clamp(40px, 6vw, 70px); }
.hero-sub { font-size: 1.15rem; max-width: 32em; }
.botoes { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.pata { position: absolute; font-size: 2.4rem; opacity: .25; animation: pular 4s ease-in-out infinite; }
.p1 { left: 4%; top: 16%; } .p2 { left: 46%; bottom: 10%; animation-delay: -1.5s; } .p3 { right: 4%; top: 10%; animation-delay: -3s; }
@keyframes pular { 50% { transform: translateY(-18px) rotate(12deg); } }
.bolha-foto { position: relative; justify-self: center; width: min(470px, 100%); }
.bolha-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 58% 42% 46% 54% / 52% 44% 56% 48%; border: 10px solid #fff; box-shadow: 0 30px 60px -30px rgba(31, 59, 77, .45); animation: morfar 10s ease-in-out infinite; }
.bolha-2 img { animation-delay: -5s; }
@keyframes morfar { 50% { border-radius: 42% 58% 55% 45% / 46% 56% 44% 54%; } }
.bolha-foto::before { content: ""; position: absolute; inset: 8% -6% -6% 8%; background: var(--verde); border-radius: 50% 40% 55% 45%; z-index: -1; opacity: .25; }
.bolha-foto { isolation: isolate; }
.balao { position: absolute; right: 2%; top: 6%; background: var(--tinta); color: #fff; font-family: var(--titulo); padding: 10px 18px; border-radius: 20px 20px 20px 4px; margin: 0; animation: pular 3s ease-in-out infinite; }

.onda { display: block; width: 100%; height: 60px; margin-top: -2px; }
.branca { background: #fff; }
.cartao { border: 2px solid var(--linha); text-align: center; }
.cartao:hover { border-color: var(--cor); transform: translateY(-6px) rotate(-1deg); }
.emoji { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--fundo); font-size: 2.2rem; margin-bottom: 14px; transition: transform .3s; }
.cartao:hover .emoji { animation: balancar .6s; }
@keyframes balancar { 25% { transform: rotate(-14deg) scale(1.1); } 75% { transform: rotate(14deg) scale(1.1); } }

.galeria { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 6px solid var(--fundo); transition: transform .3s, border-color .3s; }
.galeria img:hover { transform: rotate(-6deg) scale(1.08); border-color: var(--cor); }
.depoimento { border: 2px solid var(--linha); background: #fff; }
.mapa { border: 4px solid #fff; box-shadow: 0 20px 40px -24px rgba(31, 59, 77, .4); }
.rodape a:hover { color: var(--cor); }
@media (max-width: 900px) { .galeria { grid-template-columns: repeat(3, 1fr); } }