/* Galera Animal: vinho e rosa das camisas da equipe, fundo quase branco, e as fotos dos clientes
   em molduras com a cor do laço que cada um saiu usando. A moldura colorida é a peça forte; o resto fica quieto. */
:root {
  --cor-marca: #7b1e2e;           /* vinho das camisas */
  --vinho-escuro: #5b1421;
  --cor-rosa: #e9508a;            /* rosa das camisas */
  --rosa-claro: #fde7ef;
  --rosa-fundo: #fff7f9;
  --branco: #fff;
  --tinta: #2a161b;
  --suave: #6d555b;
  --linha: rgba(123, 30, 46, .16);
  --zap: #1a7f45;
  --zap-escuro: #146a39;
  --laco-vermelho: #d7262e;
  --laco-amarelo: #f4c531;
  --laco-laranja: #f07f1e;
  --laco-azul: #2a63d4;
  --laco-rosa: #f06aa4;
  --laco-verde: #8bc34a;
  --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --texto: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --foco: var(--cor-rosa);
  --altura-topo: 96px;
  --largura: 1120px;
  --raio: 16px;
}
body { background: var(--rosa-fundo); color: var(--tinta); font: 400 17px/1.55 var(--texto); }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.02; letter-spacing: -.02em; }
a { text-underline-offset: 3px; }
strong { font-weight: 700; }

/* ---------- faixa de prévia e topo, fixos ---------- */
.fixo { position: sticky; top: 0; z-index: 50; }
.faixa-previa { margin: 0; padding: 6px 12px; text-align: center; font: 600 12px/1.35 var(--texto); background: var(--tinta); color: #fff; }
.topo { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 0 16px; background: rgba(255, 247, 249, .96); border-bottom: 1px solid var(--linha); backdrop-filter: blur(8px); }
.topo__marca { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; font: 800 21px/1 var(--display); letter-spacing: -.02em; color: var(--cor-marca); }
.topo__marca img { width: 42px; height: 42px; border-radius: 50%; }
.topo nav { display: none; gap: 2px; }
.topo nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; font-weight: 600; color: var(--tinta); }
.topo nav a:hover { color: var(--cor-marca); }
.topo__zap { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--zap); color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; }
.topo__zap svg { width: 22px; height: 22px; }
.topo__zap:hover { background: var(--zap-escuro); }
@media (max-width: 479px) { .topo__zap span { display: none; } .topo__zap { padding: 0 11px; } }
@media (min-width: 760px) { .topo nav { display: flex; } .topo { padding: 0 24px; } }

/* ---------- moldura: a cor do laço atrás da foto ---------- */
.moldura { --laco: var(--cor-rosa); position: relative; display: block; margin: 0 10px 10px 0; border-radius: var(--raio); background: var(--branco); }
.moldura::before { content: ""; position: absolute; inset: 0; transform: translate(10px, 10px); border-radius: var(--raio); background: var(--laco); z-index: -1; }
.moldura img { width: 100%; border-radius: var(--raio); object-fit: cover; }
.moldura figcaption { margin-top: 10px; font-size: 14px; color: var(--suave); }
.moldura--vermelho { --laco: var(--laco-vermelho); }
.moldura--rosa { --laco: var(--laco-rosa); }
[data-cor="amarelo"] { --laco: var(--laco-amarelo); }
[data-cor="laranja"] { --laco: var(--laco-laranja); }
[data-cor="azul"] { --laco: var(--laco-azul); }
[data-cor="rosa"] { --laco: var(--laco-rosa); }
[data-cor="verde"] { --laco: var(--laco-verde); }

/* ---------- capa ---------- */
.capa { position: relative; isolation: isolate; overflow: hidden; }
.capa__grade { max-width: var(--largura); margin: 0 auto; padding: 24px 16px 40px; }
.capa__foto { margin-right: 10px; }
.capa__foto img { aspect-ratio: 5 / 4; object-position: 50% 30%; }
.capa__texto { padding-top: 24px; }
.capa__cima { max-width: 38ch; font-weight: 600; font-size: 15px; color: var(--cor-marca); }
.capa h1 { margin-top: 10px; font-size: clamp(2.8rem, 12vw, 5.2rem); color: var(--tinta); }
.capa__lead { margin-top: 14px; max-width: 42ch; font-size: 18px; color: var(--suave); }
.botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.capa__fone { margin-top: 16px; font-size: 15px; color: var(--suave); }
.capa__fone a { font-weight: 700; color: var(--tinta); }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border-radius: 999px; border: 2px solid transparent;
  font: 700 17px/1 var(--texto); text-decoration: none; text-align: center;
}
.botao svg { width: 22px; height: 22px; flex: none; }
.botao--zap { background: var(--zap); color: #fff; border-color: var(--zap); }
.botao--zap:hover { background: var(--zap-escuro); border-color: var(--zap-escuro); }
.botao--linha { color: var(--cor-marca); border-color: var(--cor-marca); }
.botao--linha:hover { background: var(--rosa-claro); }
.botao--vinho { background: var(--cor-marca); color: #fff; border-color: var(--cor-marca); }
.botao--vinho:hover { background: var(--vinho-escuro); border-color: var(--vinho-escuro); }
.botao--linha-vinho { color: var(--cor-marca); border-color: var(--cor-marca); }
.botao--linha-vinho:hover { background: var(--rosa-claro); }
.botao--grande { min-height: 60px; padding: 0 28px; font-size: 19px; }

@media (min-width: 860px) {
  .capa__grade { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; padding: 56px 24px 72px; }
  .capa__foto { order: 2; margin-right: 14px; }
  .capa__foto img { aspect-ratio: 4 / 5; max-height: 600px; object-position: 50% 35%; }
  .capa__texto { padding-top: 0; }
  .capa h1 { font-size: clamp(3.6rem, 6vw, 5.4rem); }
}

/* ---------- blocos ---------- */
.bloco { max-width: var(--largura); margin: 0 auto; padding: 56px 16px; }
.titulo { max-width: 18ch; font-size: clamp(2rem, 7.6vw, 3rem); color: var(--cor-marca); }
.titulo--claro { color: #fff; }
.bloco__intro { margin-top: 12px; max-width: 52ch; font-size: 17px; color: var(--suave); }

/* ---------- banho e tosa ---------- */
.banho { padding-top: 24px; }
.banho__grade { display: grid; gap: 32px; }
.passos { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: passo; display: grid; gap: 18px; max-width: 46ch; }
.passos li { position: relative; padding-left: 52px; counter-increment: passo; }
.passos li::before { content: counter(passo); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--cor-marca); color: #fff; font: 800 18px/38px var(--display); text-align: center; }
.passos strong { display: block; font: 700 19px/1.25 var(--texto); color: var(--tinta); }
.passos span { display: block; margin-top: 3px; color: var(--suave); }
.lista { display: grid; gap: 12px; align-content: start; }
.item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); }
.item__icone { width: 56px; height: 56px; border-radius: 50%; background: var(--rosa-claro) var(--icone) center / 30px no-repeat; }
.item[data-icone="banho"] .item__icone { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b1e2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16v2a6 6 0 0 1-6 6h-4a6 6 0 0 1-6-6v-2z'/%3E%3Cpath d='M6 12V6a2 2 0 0 1 4 0'/%3E%3Ccircle cx='14' cy='5' r='1'/%3E%3Ccircle cx='17' cy='8' r='1'/%3E%3Ccircle cx='18' cy='4' r='1'/%3E%3C/svg%3E"); }
.item[data-icone="tosa"] .item__icone { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b1e2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4L8.1 15.9M14.5 14.5L20 20M8.1 8.1L12 12'/%3E%3C/svg%3E"); }
.item[data-icone="racao"] .item__icone { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b1e2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11h18c0 5-4 9-9 9s-9-4-9-9z'/%3E%3Ccircle cx='8' cy='6.5' r='1'/%3E%3Ccircle cx='12.5' cy='4.5' r='1'/%3E%3Ccircle cx='16' cy='7' r='1'/%3E%3C/svg%3E"); }
.item[data-icone="cuidado"] .item__icone { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b1e2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.5-7 10-7 10z'/%3E%3C/svg%3E"); }
.item h3 { font-size: 1.3rem; letter-spacing: -.01em; }
.item p { margin-top: 4px; font-size: 16px; color: var(--suave); }
.item__link { display: inline-block; margin-top: 8px; padding: 6px 0; font-weight: 700; color: var(--cor-marca); }
@media (min-width: 860px) {
  .banho__grade { grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
  .banho { padding-top: 40px; }
}

/* ---------- galeria ---------- */
.galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; margin-top: 32px; }
.galeria__item { margin: 0 10px 10px 0; }
.galeria__item img { aspect-ratio: 1; }
.galeria__item:hover::before { transform: translate(14px, 14px); }
.galeria__item:focus-visible { outline-offset: 6px; }
.galeria li:last-child { grid-column: span 2; }
.galeria li:last-child img { aspect-ratio: 16 / 11; object-position: 50% 40%; }
.galeria__insta { margin-top: 28px; font-weight: 700; }
.galeria__insta a { color: var(--cor-marca); }
@media (min-width: 700px) {
  .galeria { grid-template-columns: repeat(3, 1fr); gap: 26px 24px; }
  .galeria li:last-child { grid-column: span 1; }
  .galeria li:last-child img { aspect-ratio: 1; }
}

/* ---------- loja ---------- */
.loja { background: var(--rosa-claro); }
.loja__grade { display: grid; gap: 28px; max-width: var(--largura); margin: 0 auto; padding: 56px 16px; }
.loja__nota { margin-top: 18px; padding: 14px 16px; border-left: 4px solid var(--cor-rosa); background: var(--branco); border-radius: 0 var(--raio) var(--raio) 0; font-size: 15px; color: var(--suave); max-width: 46ch; }
.loja .item { border-color: transparent; }
.loja .item__icone { background-color: var(--rosa-claro); }
@media (min-width: 860px) { .loja__grade { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; padding: 72px 24px; } }

/* ---------- equipe ---------- */
.equipe__grade { display: grid; gap: 32px; }
.equipe__foto { margin-right: 10px; }
.equipe__foto img { aspect-ratio: 16 / 9; }
.equipe__texto p { max-width: 48ch; color: var(--suave); }
.equipe__texto .titulo + p { margin-top: 12px; }
.citacao { margin-top: 24px; padding: 20px 22px; border-radius: var(--raio); background: var(--branco); border: 1px solid var(--linha); }
.citacao p { font: italic 400 18px/1.45 var(--texto); color: var(--tinta); max-width: 40ch; }
.citacao footer { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--cor-marca); }
@media (min-width: 860px) {
  .equipe__grade { grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
  .equipe__foto img { aspect-ratio: 16 / 10; }
}

/* ---------- onde fica ---------- */
.onde { padding-top: 0; }
.onde__grade { display: grid; gap: 28px; }
.onde__endereco { margin-top: 14px; font: 700 1.3rem/1.35 var(--texto); }
.onde__cidade { font-weight: 400; color: var(--suave); }
.onde__nota { margin-top: 12px; max-width: 42ch; color: var(--suave); }
.onde__mapa { border-radius: var(--raio); border: 1px solid var(--linha); overflow: hidden; }
.insta { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; margin-top: 28px; padding: 16px; border-radius: var(--raio); background: var(--branco); border: 1px solid var(--linha); }
.insta img { border-radius: 50%; }
.insta h3 { font-size: 1.1rem; }
.insta p { margin-top: 2px; font-size: 15px; color: var(--suave); }
.insta a { font-weight: 700; color: var(--cor-marca); }
@media (min-width: 860px) { .onde__grade { grid-template-columns: 1fr 1.25fr; gap: 48px; align-items: start; } }

/* ---------- chamada final ---------- */
.chamada { background: var(--cor-marca); color: #fff; }
.chamada__caixa { max-width: var(--largura); margin: 0 auto; padding: 56px 16px 64px; }
.chamada p { margin-top: 12px; max-width: 46ch; font-size: 18px; color: rgba(255, 255, 255, .88); }
.chamada strong { color: #fff; white-space: nowrap; }
.chamada .botao { margin-top: 24px; }
@media (min-width: 860px) { .chamada__caixa { padding: 72px 24px 80px; } }

/* ---------- botão flutuante: some enquanto a capa está na tela ---------- */
.wa-flutuante { transition: opacity .25s, transform .25s; }
.na-capa .wa-flutuante { opacity: 0; transform: translateY(12px); pointer-events: none; }

/* ---------- rodapé ---------- */
.rodape { padding: 32px 16px 110px; text-align: center; background: var(--tinta); color: rgba(255, 255, 255, .8); font-size: 15px; }
.rodape__nome { margin-bottom: 8px; font: 800 24px/1 var(--display); letter-spacing: -.02em; color: #fff; }
.rodape p + p { margin-top: 6px; }
.rodape a { display: inline-block; padding: 8px 0; color: #fff; }
.rodape__previa { margin-top: 18px !important; font-size: 13px; color: rgba(255, 255, 255, .6); }

@media (min-width: 860px) {
  .bloco { padding: 80px 24px; }
  .banho { padding-top: 40px; }
  .onde { padding-top: 0; }
}