/* Pet Haus Estética · site v2 · layout fiel a smalldoorvet.com (medidas tiradas da referência em 1440 px),
   identidade do manual da marca (cores, logo, Fraunces + Poppins). */
:root {
  /* cores do manual (referência → Pet Haus) */
  --laranja: #E67E1A;          /* botão laranja da referência #EA7927 */
  --laranja-texto: #A8520A;    /* nome nas avaliações */
  --tinta: #2E150B;            /* texto (referência: preto e azul-ardósia) */
  --grafite: #1F1F1F;
  --creme: #FBF3EA;            /* seções bege #EFE9E0 */
  --creme-hero: #F7E7D8;       /* hero #F4E4D8 (o creme dos posts da Pet Haus) */
  --aviso: #F1E6DA;            /* faixa do topo */
  --cinza-quente: #E9DFD3;     /* serviços #D6D5D8 */
  --cartao: #F3ECE3;           /* cartões de serviço */
  --faixa: #F0E7DC;            /* "na imprensa" #E3E2DD */
  --escuro: #2E150B;           /* faixa final (referência: verde #4B5A3C) */
  --branco: #FFFFFF;
  --f-titulo: "Fraunces", Georgia, serif;           /* referência: Adonis (o fallback dela é a Fraunces) */
  --f-texto: "Poppins", "Segoe UI", Arial, sans-serif; /* referência: Gibson */
  --raio-foto: 16px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--f-texto); font-size: 16px; line-height: 1.5; color: var(--tinta); background: var(--branco); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, .chamada-frase, .cidade-frase, summary { text-wrap: balance; }
p, blockquote, dd { text-wrap: pretty; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.centro { text-align: center; }
:focus-visible { outline: 2px solid var(--laranja); outline-offset: 3px; }

/* botão (referência: 13 px, 700, espaçamento 2 px, caixa-alta, pílula) — texto em tinta por contraste (manual) */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 32px; border-radius: 999px; background: var(--laranja); color: var(--tinta); font: 700 13px/1.5 var(--f-texto); letter-spacing: 2px; text-transform: uppercase; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.btn:hover { background: #F08F33; }
.btn:active { transform: translateY(1px); }

/* sobrelinha (referência: 14 px, 600, espaçamento 5 px) */
.sobrelinha { font: 600 14px/21px var(--f-texto); letter-spacing: 5px; text-transform: uppercase; }
.sobrelinha a { text-underline-offset: 3px; }
.sobrelinha.centro { padding-left: 5px; } /* compensa o espaçamento de 5 px depois da última letra: centro visual = centro da página */

/* rascunho: selos "a confirmar" enquanto faltam dados (tirar a classe is-draft do <html> quando confirmados) */
.rascunho { display: none; }
.is-draft .rascunho { display: inline-block; font: 600 10px/1 var(--f-texto); letter-spacing: .06em; text-transform: uppercase; color: #8A2D25; background: #F3D9D6; border-radius: 4px; padding: 4px 6px; vertical-align: 2px; margin-left: 6px; }

/* 0 · faixa de aviso */
.aviso { background: var(--aviso); min-height: 55px; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 20px; font-size: 14px; text-align: center; flex-wrap: wrap; }
.aviso-link { font: 700 11px/1.4 var(--f-texto); letter-spacing: 2px; text-transform: uppercase; text-underline-offset: 4px; }

/* 1 · cabeçalho (referência: 100 px, logo a 70 px da borda, links 16/600) */
.topo { position: relative; z-index: 20; height: 100px; background: var(--branco); display: flex; align-items: center; padding: 0 70px; gap: 32px; }
.topo-logo img { height: 52px; width: auto; }
.topo-nav { display: flex; align-items: center; gap: 40px; margin: 0 auto; }
.topo-nav > a, .topo-menu > button { white-space: nowrap; font: 600 16px/1.2 var(--f-texto); letter-spacing: .5px; text-decoration: none; color: var(--tinta); background: none; border: 0; padding: 8px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.topo-menu > button svg { width: 10px; height: 6px; transition: transform .2s; }
.topo-menu.aberto > button svg { transform: rotate(180deg); }
.topo-nav > a:hover, .topo-menu > button:hover { color: var(--laranja-texto); }
.topo-acoes { display: flex; align-items: center; gap: 28px; }
.topo-link { font: 600 14px/1.3 var(--f-texto); text-decoration: none; white-space: nowrap; }
.topo-acoes .btn { white-space: nowrap; }
.topo-link:hover { color: var(--laranja-texto); }
.topo-burguer { display: none; }
/* painel de serviços (referência: painel largo com colunas de links 20/400) */
.painel { position: absolute; left: 0; right: 0; top: 100px; background: var(--branco); border-top: 1px solid rgba(46,21,11,.08); box-shadow: 0 24px 40px -24px rgba(46,21,11,.25); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; }
.topo-menu.aberto .painel { opacity: 1; visibility: visible; transform: none; }
.painel-grade { max-width: 1280px; margin: 0 auto; padding: 40px 100px 48px; display: grid; grid-template-columns: repeat(3, 1fr) 1.2fr; gap: 40px; }
.painel-grade a { display: block; font: 400 20px/1.2 var(--f-texto); text-decoration: none; padding: 17px 0; }
.painel-grade a:hover { color: var(--laranja-texto); }
.painel-titulo { font: 600 13px/1 var(--f-texto); letter-spacing: 4px; text-transform: uppercase; opacity: .55; margin-bottom: 6px; }
.painel-cta { background: var(--creme); border-radius: 12px; padding: 20px; display: grid; gap: 12px; align-content: start; }
.painel-cta img { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; }
.painel-cta p { font: 400 20px/1.25 var(--f-titulo); }
.painel-cta .btn { justify-self: start; padding: 0 24px; font-size: 13px; display: inline-flex; }

/* 2 · hero (referência: 682 px, texto 560 px, H1 72/600 → Poppins 64/600 para manter as quebras) */
.hero { position: relative; overflow: hidden; background: var(--creme-hero); margin-bottom: 12px; }
.hero-wrap { min-height: clamp(480px, calc(100vh - 300px), 610px); display: flex; align-items: center; padding-top: 44px; padding-bottom: 88px; }
.hero-texto { position: relative; z-index: 2; width: 580px; display: grid; gap: 18px; }
.hero-texto > p { margin-bottom: 6px; }
.hero-texto .hero-prova { margin-top: -8px; }
.hero h1 { font: 600 56px/1.06 var(--f-texto); letter-spacing: -1px; max-width: 480px; }
.hero-texto > p { font: 300 19px/28px var(--f-texto); letter-spacing: .2px; opacity: .85; }
.hero-ligue { font-size: 14px; line-height: 20px; opacity: .8; }
.hero-ligue a { font-weight: 600; text-decoration: none; }
.hero-foto { position: absolute; top: 0; right: 0; bottom: 0; width: 47%; background: url(../img/hero-pet-sitter.jpg) 50% 22% / cover no-repeat; background-image: image-set(url(../img/hero-pet-sitter.webp) type("image/webp"), url(../img/hero-pet-sitter.jpg) type("image/jpeg")); }
.hero-foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--creme-hero) 0, rgba(247,231,216,0) 18%); }

/* 3 · credibilidade (referência: 64 px de respiro, 3 colunas de 368 px, gap 48) */
.cred { background: var(--branco); }
.cred-grade { padding-top: 64px; padding-bottom: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 48px; align-items: center; }
.cred-titulo { display: grid; gap: 4px; }
.cred h2 { font: 400 38px/1.15 var(--f-titulo); font-variation-settings: "SOFT" 100; color: var(--tinta); }
.cred-selo { display: flex; gap: 20px; align-items: center; }
.cred-icone { flex: 0 0 80px; }
.cred-icone svg, .cred-icone img { width: 80px; height: 80px; }
.cred-selo h3 { font: 600 20px/26px var(--f-texto); margin-bottom: 4px; }
.cred-selo p { font: 300 15px/23.25px var(--f-texto); opacity: .7; }

/* 4 · faixa da cidade (referência: bege, 80 px, frase serifada 24/34 em 550 px) */
.cidade { background: var(--creme); }
.cidade-grade { padding-top: 80px; padding-bottom: 80px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.cidade-frase { font: 400 24px/34px var(--f-titulo); font-variation-settings: "SOFT" 100; max-width: 550px; margin-bottom: 24px; }
.cidade-frase a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cidade-ilustra { width: auto; height: 150px; margin-right: 60px; }

/* 5 · serviços (referência: cinza, 96 px, 4 cartões com gap 24) */
.servicos { background: var(--cinza-quente); }
.servicos .wrap { padding-top: 96px; padding-bottom: 96px; }
.servicos .sobrelinha { margin-bottom: 56px; }
.servicos-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 0; }
.servico { background: var(--cartao); padding: 28px 24px 32px; display: grid; gap: 12px; align-content: start; min-height: 293px; }
.servico-icone { width: 36px; height: 36px; color: var(--tinta); margin-bottom: 14px; }
.servico h3 { font: 600 22px/26.4px var(--f-texto); }
.servico p { font: 300 14px/21.7px var(--f-texto); }

/* 6 · por que (referência: bege, foto 572×381 com raio 16, gap 56 / 80, título 44/600, texto 22/300) */
.porque .wrap { padding-top: 96px; padding-bottom: 96px; }
.porque .sobrelinha { margin-bottom: 64px; }
.porque-lista { display: grid; gap: 80px; margin-bottom: 72px; }
.porque-item { display: grid; grid-template-columns: 572px 1fr; gap: 56px; align-items: center; }
.porque-foto { border-radius: var(--raio-foto); overflow: hidden; aspect-ratio: 572 / 381; background: var(--cinza-quente); }
.porque-foto img { width: 100%; height: 100%; object-fit: cover; }
.porque-texto h2 { font: 600 40px/46px var(--f-texto); letter-spacing: -.5px; margin-bottom: 16px; }
.sem-quebra { white-space: nowrap; }
.porque-texto p { font: 300 22px/33px var(--f-texto); max-width: 572px; }

/* 7 · onde estamos (referência: metade texto, metade mapa, 720 px) */
.onde { display: grid; grid-template-columns: 1fr 1fr; min-height: 720px; background: var(--branco); }
.onde-texto { display: grid; align-content: center; gap: 18px; padding: 0 24px 0 max(40px, calc(100% - 600px)); } /* alinha com a borda do .wrap (1280 − 2×40) em qualquer largura */
.onde-texto h2 { font: 600 44px/50.6px var(--f-texto); letter-spacing: -.5px; }
.onde-texto p { font: 300 18px/28px var(--f-texto); }
.onde-horario { font-size: 16px !important; opacity: .75; }
.onde-mapa iframe { width: 100%; height: 100%; min-height: 720px; border: 0; display: block; filter: saturate(.85); }

/* 8 · avaliações (referência: bege, 3 colunas, estrelas laranja, título 18/600, texto 16/300, nome laranja) */
.avaliacoes { background: var(--creme); }
.avaliacoes .wrap { padding-top: 96px; padding-bottom: 96px; }
.avaliacoes .sobrelinha { margin-bottom: 56px; }
.avaliacoes-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.avaliacao { margin: 0; text-align: center; display: grid; gap: 10px; align-content: start; padding: 0 16px; }
.estrelas { color: var(--laranja); font-size: 19px; letter-spacing: 4px; }
.avaliacao h3 { font: 600 18px/23.4px var(--f-texto); }
.avaliacao blockquote { margin: 0; font: 300 16px/24px var(--f-texto); }
.avaliacao figcaption { font: 400 14px/21px var(--f-texto); color: var(--laranja-texto); margin-top: 6px; }
.pontos { display: none; }

/* 9 · no Instagram (referência: "in the press", faixa clara com logos) */
.insta { background: var(--faixa); }
.insta .wrap { padding-top: 80px; padding-bottom: 80px; }
.insta .sobrelinha { margin-bottom: 40px; }
.insta-grade { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; max-width: 900px; margin: 0 auto; }
.insta-grade img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; transition: transform .25s ease; }
.insta-grade a:hover img { transform: scale(1.03); }

/* 10 · chamada final (referência: faixa verde, serifa 40/46 branca em 620 px) */
.chamada { background: var(--escuro); }
.chamada-wrap { padding-top: 80px; padding-bottom: 80px; display: grid; justify-items: center; gap: 32px; text-align: center; }
.chamada-frase { font: 400 40px/46px var(--f-titulo); font-variation-settings: "SOFT" 100; color: var(--branco); max-width: 620px; }

/* 11 · rodapé (referência: cartão bege com campo de 440 px, colunas de 278 px, títulos 14/700, links 18/300) */
.rodape { background: var(--branco); color: var(--tinta); }
.rodape-wrap { max-width: 1280px; margin: 0 auto; padding: 32px 40px 56px; }
.rodape-cartao { background: var(--creme); border-radius: 8px; padding: 28px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 56px; }
.rodape-cartao p { font: 600 20px/1.3 var(--f-texto); }
.rodape-campo { display: flex; width: 440px; max-width: 100%; height: 60px; background: var(--branco); border: 2px solid var(--tinta); border-radius: 3px; }
.rodape-campo input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0 16px; font: 400 16px var(--f-texto); color: var(--tinta); background: none; }
.rodape-campo input:focus { outline: none; }
.rodape-campo button { width: 56px; border: 0; background: var(--tinta); color: var(--branco); display: grid; place-items: center; cursor: pointer; }
.rodape-campo button svg { width: 16px; height: 16px; }
.rodape-colunas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.rodape-colunas div { display: grid; gap: 0; align-content: start; }
.rodape-colunas h3 { font: 700 14px/21px var(--f-texto); letter-spacing: 5px; text-transform: uppercase; opacity: .6; margin-bottom: 14px; }
.rodape-colunas a, .rodape-colunas p { font: 300 18px/1.4 var(--f-texto); text-decoration: none; padding: 8px 0; }
.rodape-colunas a:hover { color: var(--laranja-texto); }
.rodape-social svg { width: 22px; height: 22px; }
.rodape-base { background: linear-gradient(rgba(46,21,11,.12), rgba(46,21,11,.12)) 40px 0 / calc(100% - 80px) 1px no-repeat; /* linha na largura do conteúdo */ max-width: 1280px; margin: 0 auto; padding: 18px 40px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; opacity: .7; }
.rodape-base a { text-decoration: none; }

.barra-celular { display: none; }
.menu-celular { display: none; }

/* ===== tablet (referência: quebra em 991) ===== */
@media (max-width: 1180px) {
  .topo { padding: 0 32px; gap: 20px; }
  .topo-nav { gap: 24px; }
  .topo-link { display: none; }
  .hero h1 { font-size: 50px; max-width: 430px; }
  .porque-item { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 991px) {
  .wrap { padding-left: 24px; padding-right: 24px; }
  .topo { height: 72px; padding: 0 24px; }
  .topo-logo img { height: 40px; }
  .topo-nav, .topo-link { display: none; }
  .topo-acoes { margin-left: auto; gap: 12px; }
  .topo-acoes .btn { min-height: 40px; padding: 8px 18px; font-size: 12px; }
  .topo-burguer { display: grid; gap: 5px; width: 40px; height: 40px; place-content: center; background: none; border: 0; cursor: pointer; }
  .topo-burguer span { display: block; width: 22px; height: 2px; background: var(--tinta); border-radius: 2px; }
  .menu-celular:not([hidden]) { display: grid; gap: 4px; position: fixed; inset: 72px 0 0; z-index: 30; background: var(--branco); padding: 24px 24px 40px; align-content: start; overflow-y: auto; }
  .menu-celular a { font: 600 24px/1.2 var(--f-texto); text-decoration: none; padding: 14px 0; border-bottom: 1px solid rgba(46,21,11,.08); }
  .menu-celular .btn { margin-top: 24px; border: 0; font-size: 13px; padding: 14px 24px; }
  .menu-celular p { margin-top: 14px; text-align: center; font-size: 14px; }
  .menu-celular p a { font-size: 14px; border: 0; padding: 0; }

  /* hero: texto centralizado em cima, foto embaixo (como a referência no celular) */
  .hero-wrap { min-height: 0; padding-top: 48px; padding-bottom: 32px; justify-content: center; }
  .hero-texto { width: 100%; max-width: 560px; text-align: center; justify-items: center; }
  .hero h1 { font-size: 40px; line-height: 1.08; max-width: none; }
  .so-desktop { display: none; }
  .hero-texto > p { font-size: 18px; line-height: 27px; }
  .hero-acoes { flex-direction: column; gap: 12px; }
  .hero-foto { position: relative; width: 100%; height: 400px; background-position: 50% 20%; }
  .hero-foto::before { background: linear-gradient(180deg, var(--creme-hero) 0, rgba(247,231,216,0) 22%); }

  .cred-grade { grid-template-columns: 1fr; gap: 28px; padding-top: 48px; padding-bottom: 48px; }
  .cred h2 { font-size: 30px; }
  .cidade-grade { flex-direction: column-reverse; text-align: center; padding-top: 56px; padding-bottom: 56px; }
  .cidade-ilustra { margin: 0; height: 120px; }
  .cidade-frase { font-size: 22px; line-height: 31px; }

  /* serviços: carrossel lateral (como a referência) */
  .servicos .wrap { padding: 64px 0; }
  .servicos .sobrelinha { margin-bottom: 32px; }
  .servicos-grade { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding: 0 24px 4px; scroll-padding: 0 24px; margin-bottom: 0; scrollbar-width: none; }
  .servicos-grade::-webkit-scrollbar { display: none; }
  .servico { flex: 0 0 270px; scroll-snap-align: start; min-height: 0; }

  .porque .wrap { padding-top: 64px; padding-bottom: 64px; }
  .porque .sobrelinha { margin-bottom: 36px; }
  .porque-lista { gap: 48px; margin-bottom: 48px; }
  .porque-item { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .porque-texto h2 { font-size: 28px; line-height: 1.2; margin-bottom: 10px; }
  .porque-texto p { font-size: 18px; line-height: 28px; margin: 0 auto; }

  .onde { grid-template-columns: 1fr; min-height: 0; }
  .onde-texto { padding: 48px 24px 32px; text-align: center; }
  .onde-texto h2 { font-size: 32px; line-height: 1.2; }
  .onde-mapa iframe { min-height: 360px; height: 360px; }

  /* avaliações: carrossel com pontos (como a referência) */
  .avaliacoes .wrap { padding: 64px 0; }
  .avaliacoes .sobrelinha { margin-bottom: 32px; padding: 0 24px; }
  .avaliacoes-grade { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; scrollbar-width: none; }
  .avaliacoes-grade::-webkit-scrollbar { display: none; }
  .avaliacao { flex: 0 0 100%; scroll-snap-align: center; padding: 0 28px; }
  .pontos { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
  .pontos i { width: 6px; height: 6px; border-radius: 50%; background: rgba(46,21,11,.25); }
  .pontos i.ativo { background: var(--laranja); }

  .insta .wrap { padding-top: 56px; padding-bottom: 56px; }
  .insta-grade { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .insta-grade a:nth-child(n+4) { display: none; }
  .chamada-wrap { padding-top: 56px; padding-bottom: 56px; gap: 24px; }
  .chamada-frase { font-size: 30px; line-height: 36px; }

  .rodape-wrap { padding: 24px 24px 40px; }
  .rodape-cartao { flex-direction: column; align-items: stretch; padding: 24px 20px; margin-bottom: 40px; }
  .rodape-campo { width: 100%; }
  .rodape-colunas { grid-template-columns: 1fr; gap: 28px; }
  .rodape-base { background-position: 24px 0; background-size: calc(100% - 48px) 1px; padding: 18px 24px 90px; flex-direction: column; align-items: flex-start; gap: 0; }

  .barra-celular { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 25; justify-content: center; align-items: center; min-height: 52px; border-radius: 999px; background: var(--laranja); color: var(--tinta); font: 700 13px var(--f-texto); letter-spacing: 2px; text-transform: uppercase; text-decoration: none; box-shadow: 0 10px 24px -10px rgba(46,21,11,.5); transform: translateY(140%); transition: transform .3s ease; }
  .barra-celular.visivel { transform: none; }
}
/* =====================================================================================================
   BLOCO 1 (16/10/2026) · melhorias da landing page, na mesma linguagem da referência (mesmas fontes, raios,
   sobrelinhas e botões): prova e mini-formulário no topo, botão por serviço, como funciona, planos como
   produto, linhas alternadas, onde estamos com status e atalhos, resumo das avaliações, perguntas.
   ===================================================================================================== */
/* lacuna no meio da frase: some só quando a Pet Haus responder (não depende do is-draft) */
.a-definir { display: inline; font: 500 .8em/1.45 var(--f-texto); color: #8A2D25; background: #F7E1DE; border: 1px dashed #D9A39C; border-radius: 4px; padding: 1px 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.estrelas { color: var(--laranja); letter-spacing: 2px; }

/* --- hero: mini-formulário (1.2) e prova colada no botão (1.1) --- */
/* --- agendamento (16/10/2026): computador = barra logo abaixo do topo; celular = folha em 3 passos --- */
.hero-acoes { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hero-acoes .btn-wa { min-height: 52px; padding: 0 30px; }
.btn-wa { gap: 8px; border: 0; cursor: pointer; min-height: 50px; padding: 0 24px; white-space: nowrap; }
.btn-wa svg { width: 18px; height: 18px; flex: 0 0 18px; }
.agenda { position: relative; z-index: 6; padding: 0 40px; margin-top: -80px; }
.agenda-barra { max-width: 1200px; margin: 0 auto; background: var(--branco); border-radius: 18px; padding: 20px 24px 16px; display: grid; gap: 12px; box-shadow: 0 26px 50px -30px rgba(46,21,11,.5); scroll-margin-top: 120px; }
.agenda-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto; gap: 14px; align-items: end; }
.campo { min-width: 0; }
.campo label { display: block; margin-bottom: 8px; font: 600 11px/1 var(--f-texto); letter-spacing: 2.5px; text-transform: uppercase; opacity: .62; }
.campo select, .campo input { width: 100%; height: 50px; border: 1.5px solid rgba(46,21,11,.2); border-radius: 12px; padding: 0 14px; font: 400 15px var(--f-texto); color: var(--tinta); background-color: var(--branco); -webkit-appearance: none; appearance: none; transition: border-color .15s; }
.campo select { padding-right: 36px; cursor: pointer; background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%232E150B' stroke-width='1.4'/%3E%3C/svg%3E") right 14px center / 10px no-repeat; }
.campo select:invalid, .campo select.vazio { color: rgba(46,21,11,.55); }
.campo select:hover, .campo input:hover { border-color: rgba(46,21,11,.45); }
.campo select:focus, .campo input:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px rgba(230,126,26,.25); }
.chave { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 50px; cursor: pointer; white-space: nowrap; font: 500 14px/1.2 var(--f-texto); user-select: none; }
.chave input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chave i { position: relative; flex: 0 0 42px; width: 42px; height: 24px; border-radius: 999px; background: rgba(46,21,11,.2); transition: background .2s; }
.chave i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--branco); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.chave input:checked + i { background: var(--tinta); }
.chave input:checked + i::after { transform: translateX(18px); }
.chave input:focus-visible + i { outline: 2px solid var(--laranja); outline-offset: 2px; }
.agenda-rodape { display: flex; align-items: flex-end; gap: 16px; }
.agenda-rodape .campo-bairro:not([hidden]) + .agenda-nota { padding-bottom: 15px; }
.agenda-rodape .campo-bairro { flex: 0 0 280px; }
.agenda-rodape .campo-bairro[hidden], .folha .campo-bairro[hidden] { display: none; }
.agenda-nota { margin: 0; font: 300 12.5px/1.45 var(--f-texto); opacity: .75; }
.agenda-rodape .agenda-nota { flex: 1; }

/* folha do celular */
.folha-fundo { position: fixed; inset: 0; z-index: 59; background: rgba(46,21,11,.45); opacity: 0; transition: opacity .25s; }
.folha-fundo.visivel { opacity: 1; }
.folha { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 92vh; overflow-y: auto; background: var(--branco); border-radius: 22px 22px 0 0; padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 14px; transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.folha.visivel { transform: none; }
.folha[hidden], .folha-fundo[hidden], .folha-etapa[hidden] { display: none; }
.folha-alca { width: 40px; height: 4px; border-radius: 4px; background: rgba(46,21,11,.2); justify-self: center; }
.folha-topo { display: flex; align-items: center; justify-content: space-between; }
.folha-topo button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--tinta); display: grid; place-items: center; cursor: pointer; }
.folha-topo button:hover { background: rgba(46,21,11,.07); }
.folha-topo svg { width: 18px; height: 18px; }
.folha-passo { margin: 0; font: 600 11px/1 var(--f-texto); letter-spacing: 2.5px; text-transform: uppercase; opacity: .62; }
.folha-progresso { height: 4px; border-radius: 4px; background: rgba(46,21,11,.1); overflow: hidden; margin-top: -4px; }
.folha-progresso i { display: block; height: 100%; width: 33.4%; background: var(--laranja); border-radius: 4px; transition: width .3s; }
.folha-titulo { margin: 4px 0 0; font: 400 26px/1.2 var(--f-titulo); font-variation-settings: "SOFT" 100; }
.folha-etapa { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }
.ladrilhos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ladrilhos label { position: relative; cursor: pointer; }
.ladrilhos input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ladrilhos span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 64px; padding: 8px; border-radius: 14px; border: 1.5px solid rgba(46,21,11,.2); font: 500 15px/1.2 var(--f-texto); transition: background .15s, border-color .15s, color .15s; }
.ladrilhos input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--creme); }
.ladrilhos input:focus-visible + span { outline: 2px solid var(--laranja); outline-offset: 2px; }
.folha .btn { width: 100%; min-height: 52px; border: 0; cursor: pointer; }
.folha .chave { min-height: 52px; font-size: 15px; }
body.folha-aberta { overflow: hidden; }
.hero-prova { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero-nota { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font: 400 14px/1.3 var(--f-texto); text-decoration: none; }
.hero-nota .estrelas { font-size: 15px; letter-spacing: 2px; }
.hero-nota strong { font-weight: 600; }
.hero-nota:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.hero-ligue a { display: inline-block; padding: 10px 0; }

/* --- serviços: botão por cartão (1.7) --- */
.servico { display: flex; flex-direction: column; gap: 12px; }
.servico p { flex: 1; }
.servico-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font: 600 14px/1.2 var(--f-texto); color: var(--laranja-texto); text-decoration: none; align-self: flex-start; }
.servico-link svg { width: 14px; height: 14px; transition: transform .2s; }
.servico-link:hover svg { transform: translateX(3px); }
.servico-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.porque-texto .servico-link { margin-top: 14px; font-size: 15px; }

/* --- como funciona (1.3) --- */
.como { background: var(--branco); }
.como .wrap { padding-top: 96px; padding-bottom: 96px; }
.como .sobrelinha { margin-bottom: 12px; }
.como-titulo { font: 600 40px/50px var(--f-texto); letter-spacing: -.3px; text-align: center; margin-bottom: 48px; }
.como-passos { list-style: none; margin: 0 0 48px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.como-passos li { background: var(--creme); border-radius: 16px; padding: 32px 28px; display: grid; gap: 10px; align-content: start; }
.como-num { font: 400 48px/1 var(--f-titulo); font-variation-settings: "SOFT" 100; color: var(--laranja); margin-bottom: 8px; }
.como-passos h3 { font: 600 20px/26px var(--f-texto); }
.como-passos p { font: 300 15px/24px var(--f-texto); }

/* --- planos como produto (1.5) --- */
.planos { background: var(--creme); }
.planos-grade { padding-top: 96px; padding-bottom: 96px; display: grid; grid-template-columns: minmax(0, 1fr) 340px 340px; gap: 24px; align-items: stretch; }
.planos-intro { display: grid; gap: 14px; align-content: center; padding-right: 40px; }
.planos-intro h2 { font: 400 48px/56px var(--f-titulo); font-variation-settings: "SOFT" 100; letter-spacing: -1px; }
.planos-intro p:not(.sobrelinha) { font: 300 18px/28px var(--f-texto); max-width: 420px; }
.plano { background: var(--branco); border-radius: 16px; padding: 32px 28px 28px; display: flex; flex-direction: column; gap: 6px; }
.plano-nome { font: 600 12px/1 var(--f-texto); letter-spacing: 3px; text-transform: uppercase; opacity: .7; margin-bottom: 12px; }
.plano-ritmo { font: 300 16px/1.2 var(--f-texto); }
.plano-ritmo strong { font: 400 40px/1.1 var(--f-titulo); font-variation-settings: "SOFT" 100; }
.plano-mes { font: 500 14px/1.4 var(--f-texto); color: var(--laranja-texto); margin-bottom: 18px; }
.plano ul { list-style: none; margin: 0 0 24px; padding: 18px 0 0; border-top: 1px solid rgba(46,21,11,.12); display: grid; gap: 10px; flex: 1; }
.plano li { position: relative; padding-left: 26px; font: 300 15px/22px var(--f-texto); }
.plano li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 11px; height: 6px; border-left: 2px solid var(--laranja); border-bottom: 2px solid var(--laranja); transform: rotate(-45deg); }
.plano .btn { width: 100%; }

/* --- por que: linhas alternadas (1.8) --- */
.porque { background: var(--branco); }
.porque-item:nth-child(even) { grid-template-columns: 1fr 572px; }
.porque-item:nth-child(even) .porque-foto { order: 2; }

/* --- onde estamos: status, horário e atalhos (1.6) --- */
.onde-texto { background: var(--creme-hero); gap: 16px; padding-top: 72px; padding-bottom: 72px; justify-items: start; }
.onde-status { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1.2 var(--f-texto) !important; background: var(--branco); border-radius: 999px; padding: 9px 14px; }
.onde-status[hidden] { display: none; }
.onde-status i { width: 8px; height: 8px; border-radius: 50%; background: #9B9B9B; flex: 0 0 8px; }
.onde-status.aberto i { background: #2E8B57; box-shadow: 0 0 0 4px rgba(46,139,87,.15); }
.onde-status.fechado i { background: #B4442F; }
.onde-horario { display: grid; grid-template-columns: auto auto; gap: 4px 28px; margin: 4px 0 0; font: 300 16px/24px var(--f-texto); }
.onde-horario dt { font-weight: 500; }
.onde-horario dd { margin: 0; }
.onde-atalhos { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.atalho { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--tinta); font: 600 14px/1 var(--f-texto); text-decoration: none; background: transparent; transition: background .2s, color .2s; }
.atalho:hover { background: var(--tinta); color: var(--creme); }
.atalho svg { width: 18px; height: 18px; flex: 0 0 18px; }
.onde-vizinhos { font-size: 14px !important; line-height: 22px !important; opacity: .75; }

/* --- avaliações: resumo da nota --- */
.avaliacoes .sobrelinha { margin-bottom: 14px; }
.avaliacoes-resumo { text-align: center; font: 400 15px/1.5 var(--f-texto); margin-bottom: 48px; }
.avaliacoes-resumo .estrelas { margin-right: 8px; }
.avaliacoes-resumo strong { font-weight: 600; }
.avaliacoes-resumo a { color: var(--laranja-texto); font-weight: 500; text-underline-offset: 3px; display: inline-block; padding: 8px 0; }

/* --- perguntas frequentes (1.4) --- */
.perguntas { background: var(--branco); }
.perguntas-wrap { max-width: 880px; margin: 0 auto; padding: 96px 40px; }
.perguntas .sobrelinha { margin-bottom: 12px; }
.perguntas-titulo { font: 600 40px/50px var(--f-texto); letter-spacing: -.3px; text-align: center; margin-bottom: 40px; }
.perguntas-lista details { border-bottom: 1px solid rgba(46,21,11,.14); }
.perguntas-lista details:first-child { border-top: 1px solid rgba(46,21,11,.14); }
.perguntas-lista summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font: 600 17px/24px var(--f-texto); }
.perguntas-lista summary::-webkit-details-marker { display: none; }
.perguntas-lista summary::after { content: ""; flex: 0 0 10px; width: 10px; height: 10px; border-right: 2px solid var(--laranja); border-bottom: 2px solid var(--laranja); margin-right: 2px; transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
.perguntas-lista details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.perguntas-lista summary:hover { color: var(--laranja-texto); }
.perguntas-lista details > div { padding: 0 40px 22px 0; }
.perguntas-lista details p { font: 300 16px/26px var(--f-texto); margin-bottom: 8px; }

/* --- chamada final com telefone --- */
.chamada-ligue { font: 300 14px/20px var(--f-texto); color: var(--creme); opacity: .85; margin-top: -12px; }
.chamada-ligue a { font-weight: 600; text-decoration: none; display: inline-block; padding: 8px 0; }

/* --- áreas de toque (mínimo ~40 px nos links soltos) --- */
.aviso-link { display: inline-flex; align-items: center; min-height: 40px; }
.sobrelinha a { display: inline-block; padding: 8px 0; }
.rodape-base a { display: inline-block; padding: 12px 0; }

@media (max-width: 1180px) {
  .agenda-campos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agenda-campos .chave { grid-column: 1 / 3; }
  .planos-grade { grid-template-columns: 1fr 1fr; }
  .planos-intro { grid-column: 1 / -1; padding-right: 0; text-align: center; justify-items: center; }
  .planos-intro p:not(.sobrelinha) { max-width: 560px; }
  .porque-item:nth-child(even) { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 991px) {
  .agenda { display: none; }
  .hero-acoes { width: 100%; justify-content: center; }
  .hero-acoes .btn-wa { width: 100%; max-width: 420px; }
  .hero-prova { justify-content: center; gap: 4px 16px; }
  .como .wrap, .perguntas-wrap { padding-top: 64px; padding-bottom: 64px; }
  .perguntas-wrap { padding-left: 24px; padding-right: 24px; }
  .como-titulo, .perguntas-titulo { font-size: 28px; line-height: 36px; margin-bottom: 28px; }
  .como-passos { grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; }
  .como-passos li { padding: 24px 22px; grid-template-columns: 32px 1fr; column-gap: 16px; } /* coluna fixa: títulos dos 3 passos na mesma vertical */
  .como-num { grid-row: span 2; font-size: 40px; margin: 0; text-align: center; }
  .planos-grade { grid-template-columns: 1fr; padding-top: 64px; padding-bottom: 64px; gap: 16px; }
  .planos-intro h2 { font-size: 36px; line-height: 42px; }
  .plano { padding: 26px 22px 22px; }
  .porque-item:nth-child(even) { grid-template-columns: 1fr; }
  .porque-item:nth-child(even) .porque-foto { order: 0; }
  .porque-texto .servico-link { margin: 10px auto 0; }
  .onde-texto { padding: 48px 24px 40px; justify-items: center; }
  .onde-horario { text-align: left; gap: 4px 16px; font-size: 15px; }
  .onde-atalhos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 8px; }
  .atalho { flex-direction: column; justify-content: center; min-height: 68px; padding: 10px 4px; border-radius: 16px; font-size: 12.5px; gap: 6px; white-space: nowrap; }
  .atalho svg { width: 20px; height: 20px; flex-basis: auto; }
  .avaliacoes-resumo { margin-bottom: 28px; padding: 0 24px; }
  .perguntas-lista summary { font-size: 16px; padding: 18px 0; }
  .perguntas-lista details > div { padding-right: 0; }
}

/* celular: separador "·" não fica pendurado no fim da linha; o link desce inteiro */
@media (max-width: 600px) {
  .avaliacoes-resumo .sep, .insta .sobrelinha .sep { display: none; }
  .avaliacoes-resumo a, .insta .sobrelinha a { display: block; }
}

/* notebooks com tela baixa (até 820 px de altura): topo mais compacto para a barra de agendamento caber inteira */
@media (min-width: 992px) and (max-height: 820px) {
  .hero-wrap { padding-top: 32px; padding-bottom: 84px; }
  .hero h1 { font-size: 50px; max-width: 430px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* ============ RESPOSTAS DA DAIANA (29/10/2026): cuidados extras, quem cuida, pagamento ============ */
/* cuidados extras: logo abaixo dos 4 cartões de serviço */
.extras { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; text-align: center; }
.extras-titulo { font: 600 14px/21px var(--f-texto); letter-spacing: 3px; text-transform: uppercase; }
.extras-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.extras-lista li { font: 500 14px/1.2 var(--f-texto); padding: 9px 16px; border-radius: 999px; background: var(--branco); }
.extras-lista .extras-destaque { background: var(--laranja); }
.extras .servico-link { align-self: center; }

/* quem cuida: foto à esquerda, texto da Daiana à direita */
.quem { background: var(--creme); }
.quem-grade { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 72px; align-items: center; padding-top: 96px; padding-bottom: 96px; }
.quem-foto { border-radius: var(--raio-foto); overflow: hidden; aspect-ratio: 630 / 711; background: var(--cinza-quente); }
.quem-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quem-texto { display: grid; gap: 16px; justify-items: start; max-width: 600px; }
.quem-texto h2 { font: 400 48px/1.1 var(--f-titulo); letter-spacing: -.5px; text-wrap: balance; }
.quem-lead { font: 500 22px/1.45 var(--f-texto); text-wrap: balance; }
.quem-texto p { font-weight: 300; font-size: 18px; line-height: 28px; text-wrap: pretty; }
.quem-texto .sobrelinha { font-weight: 600; font-size: 14px; line-height: 21px; }
.quem-texto .quem-lead { font: 500 22px/1.45 var(--f-texto); text-wrap: balance; }
.quem-lista { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.quem-lista li { font: 400 14px/1.2 var(--f-texto); padding: 10px 16px; border-radius: 999px; background: var(--branco); }
.quem-lista strong { font-weight: 600; }
.quem-texto .quem-frase { font: 400 italic 22px/1.4 var(--f-titulo); }
.quem-texto .btn { margin-top: 4px; }

/* onde estamos e rodapé */
.onde-texto .onde-pagamento { font-size: 16px; }
.rodape-obs { font-size: 15px; opacity: .75; }

/* folha do celular: com número ímpar de opções, a última ocupa a linha inteira */
.ladrilhos label:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (max-width: 991px) {
  .extras { margin-top: 24px; padding: 0 24px; flex-direction: column; gap: 12px; }
  .quem-grade { grid-template-columns: 1fr; gap: 28px; padding-top: 64px; padding-bottom: 64px; justify-items: center; text-align: center; }
  .quem-foto { width: min(100%, 360px); }
  .quem-texto { justify-items: center; }
  .quem-texto h2 { font-size: 34px; }
  .quem-texto .quem-lead { font-size: 19px; }
  .quem-lista { justify-content: center; }
}

/* ============ CONHEÇA O ESPAÇO (02/11/2026): fachada, recepção e salão (fotos do Perfil do Google da Pet Haus) ============ */
.espaco { background: var(--branco); }
.espaco .wrap { padding-top: 96px; padding-bottom: 96px; }
.espaco .sobrelinha { margin-bottom: 12px; }
.espaco-titulo { font: 600 40px/46px var(--f-texto); letter-spacing: -.5px; text-align: center; margin-bottom: 48px; text-wrap: balance; }
.espaco-grade { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 24px; align-items: stretch; }
.espaco-item { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.espaco-item picture { display: block; border-radius: var(--raio-foto); overflow: hidden; aspect-ratio: 3 / 4; background: var(--cinza-quente); }
.espaco-largo picture { aspect-ratio: auto; flex: 1 1 0; min-height: 0; } /* acompanha a altura das fotos 3:4 */
.espaco-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.espaco-item figcaption { font: 400 15px/1.4 var(--f-texto); opacity: .8; }
.onde-texto .onde-dica { font-size: 16px; }
.onde-dica a { color: var(--laranja-texto); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 991px) {
  .espaco .wrap { padding-top: 64px; padding-bottom: 64px; }
  .espaco-titulo { font-size: 28px; line-height: 1.2; margin-bottom: 28px; }
  .espaco-grade { grid-template-columns: 1fr 1fr; gap: 16px; }
  .espaco-largo { grid-column: 1 / -1; }
  .espaco-largo picture { flex: none; aspect-ratio: 4 / 3; }
  .espaco-item figcaption { font-size: 14px; }
}

/* ============ LINGUAGEM YARDSTICK (02/11/2026): formas, brinquedos, nuvem, menu em pílula e entradas ============ */
html { scroll-padding-top: 110px; }

/* menu fixo que vira pílula ao rolar */
.topo { position: sticky; top: 0; transition: top .35s ease, margin .35s ease, height .35s ease, border-radius .35s ease, box-shadow .35s ease; }
.rolou .topo { top: 12px; margin: 0 20px; height: 76px; border-radius: 999px; box-shadow: 0 14px 34px -14px rgba(46,21,11,.28); }
.rolou .painel { top: 86px; border-radius: 22px; }

/* faixas com brinquedos */
.faixa-brinquedos { position: relative; overflow: hidden; isolation: isolate; }
.brinquedos { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.brinquedo { position: absolute; display: block; will-change: transform; }
.cidade.faixa-brinquedos { background: var(--escuro); color: var(--creme); }
.cidade .cidade-grade { position: relative; padding-top: 120px; padding-bottom: calc(clamp(80px, 13vw, 190px) + 40px); }
.cidade .cidade-frase { font-size: 34px; line-height: 44px; max-width: 640px; color: var(--creme); }
.cidade .cidade-frase a { color: #F6C08A; }
.cidade .cidade-ilustra { filter: brightness(0) invert(1); opacity: .9; }
.bq-1 { width: 110px; left: 6%; top: 18%; color: var(--creme); }
.bq-2 { width: 64px; left: 42%; top: 10%; color: var(--laranja); }
.bq-3 { width: 90px; left: 58%; top: 52%; color: #F6C08A; }
.bq-4 { width: 70px; left: 84%; top: 14%; color: var(--laranja); }
.bq-5 { width: 72px; left: 26%; top: 62%; color: #F6C08A; }
.bq-6 { width: 58px; left: 74%; top: 70%; color: var(--creme); opacity: .9; }
.bq-7 { width: 58px; left: 10%; top: 46%; color: var(--laranja); }
.bq-8 { width: 96px; left: 80%; top: 52%; color: var(--creme); }
.bq-9 { width: 60px; left: 22%; top: 76%; color: #F6C08A; }
.bq-10 { width: 80px; left: 68%; top: 24%; color: var(--laranja); }

/* borda de nuvem entre as seções */
.nuvem-borda { position: absolute; left: 0; width: 100%; height: clamp(80px, 13vw, 190px); display: block; pointer-events: none; will-change: transform; }
.nuvem-baixo { bottom: -1px; color: var(--cinza-quente); }
.nuvem-cima { top: -1px; color: var(--branco); transform: scaleY(-1); z-index: 1; }
.chamada.faixa-brinquedos .chamada-wrap { position: relative; z-index: 2; padding-top: calc(clamp(80px, 13vw, 190px) + 40px); padding-bottom: 110px; }

/* serviços: a forma colorida com o ícone e o nome, o texto embaixo */
.servico { background: none; padding: 0; min-height: 0; gap: 14px; text-align: center; justify-items: center; }
.servico-forma { position: relative; width: 100%; aspect-ratio: 100 / 90; display: grid; place-content: center; justify-items: center; gap: 10px; isolation: isolate; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.servico-fundo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; transition: transform .6s cubic-bezier(.34,1.56,.64,1); }
.servico-forma .servico-icone { width: 44px; height: 44px; }
.servico-forma h3 { font: 700 22px/1.1 var(--f-texto); letter-spacing: .5px; text-transform: uppercase; max-width: 80%; }
.servico p { padding: 0 8px; }
.servico .servico-link { align-self: center; }
.forma-espuma .servico-fundo { color: #F6C08A; }
.forma-laranja .servico-fundo { color: var(--laranja); }
.forma-cafe .servico-fundo { color: var(--escuro); }
.forma-cafe { color: var(--creme); }
.forma-creme .servico-fundo { color: var(--creme); }
.forma-casa-ajuste { padding-top: 10%; }
.forma-creme { padding-top: 8%; }
.servico:hover .servico-fundo { transform: rotate(-4deg) scale(1.03); }
.servico:hover .servico-forma { transform: translateY(-4px); }

/* planos: o cartão vira uma casinha (a casa do logo como moldura do pedido) */
.plano { position: relative; padding-top: 86px; border-radius: 0 0 16px 16px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 72' preserveAspectRatio='none'%3E%3Cpath d='M0 72 L160 5 Q170 1 180 5 L340 72 Z'/%3E%3C/svg%3E") top / 100% 72px no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - 71px) no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 72' preserveAspectRatio='none'%3E%3Cpath d='M0 72 L160 5 Q170 1 180 5 L340 72 Z'/%3E%3C/svg%3E") top / 100% 72px no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - 71px) no-repeat; }
.plano:first-of-type { background: var(--laranja); }
.plano:first-of-type .plano-mes { color: var(--tinta); }
.plano:first-of-type ul { border-top-color: rgba(46,21,11,.2); }
.plano:first-of-type li::before { border-color: var(--tinta); }
.plano:first-of-type .btn { background: var(--tinta); color: var(--creme); }
.plano:first-of-type .btn:hover { background: #4A2414; }

@media (max-width: 991px) {
  .rolou .topo { top: 8px; margin: 0 10px; height: 64px; }
  .cidade .cidade-grade { padding-top: 80px; }
  .cidade .cidade-frase { font-size: 26px; line-height: 34px; }
  .brinquedo { transform-origin: center; }
  .bq-1 { width: 74px; } .bq-3 { width: 64px; } .bq-8 { width: 70px; } .bq-10 { width: 60px; }
  .bq-2, .bq-6 { display: none; }
  .servico-forma h3 { font-size: 20px; }
  .chamada.faixa-brinquedos .chamada-wrap { padding-bottom: 80px; }
}

/* entradas suaves (só com o JavaScript e sem "reduzir movimento") */
@media (prefers-reduced-motion: no-preference) {
  .anima .revela { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--atraso, 0s); }
  .anima .revela.visivel { opacity: 1; transform: none; }
  .anima .servico.revela .servico-forma { transform: scale(.82) rotate(-6deg); transition: transform .9s cubic-bezier(.34,1.56,.64,1); transition-delay: var(--atraso, 0s); }
  .anima .servico.revela.visivel .servico-forma { transform: none; }
  .anima .hero-texto > * { animation: sobe .9s cubic-bezier(.2,.7,.2,1) both; }
  .anima .hero-texto > *:nth-child(2) { animation-delay: .08s; } .anima .hero-texto > *:nth-child(3) { animation-delay: .16s; } .anima .hero-texto > *:nth-child(4) { animation-delay: .24s; }
  .anima .hero-foto { animation: aproxima 1.6s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes sobe { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes aproxima { from { opacity: .4; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .brinquedo, .nuvem-cima, .nuvem-baixo { transform: none !important; } .topo { transition: none; } }
.plano .btn { padding: 12px 14px; letter-spacing: 1.2px; white-space: nowrap; }
/* celular: brinquedos só nas bordas, longe dos textos */
@media (max-width: 991px) {
  .bq-3, .bq-5, .bq-9, .bq-10 { display: none; }
  .bq-1 { width: 64px; left: 4%; top: 6%; }
  .bq-4 { width: 54px; left: auto; right: 4%; top: 5%; }
  .bq-7 { width: 46px; left: 5%; top: auto; bottom: 18%; }
  .bq-8 { width: 64px; left: auto; right: 5%; top: auto; bottom: 14%; }
}
@media (max-width: 991px) { .chamada .brinquedos { display: none; } }

/* nuvem: altura proporcional à largura (nunca corta o alto das bolhas); no celular fica com 80 px e corta só as laterais */
.nuvem-borda { height: auto; aspect-ratio: 1440 / 200; min-height: 80px; }
.cidade .cidade-grade { padding-bottom: calc(max(80px, 13.9vw) + 24px); }
.chamada.faixa-brinquedos .chamada-wrap { padding-top: calc(max(80px, 13.9vw) + 24px); }
.servicos .wrap { padding-top: 40px; }
@media (max-width: 991px) { .servicos .wrap { padding-top: 32px; } }

/* topo com movimento (estilo yardstick): o texto sobe e some, a foto aproxima e escurece */
.hero-foto::after { content: ""; position: absolute; inset: 0; background: rgba(46,21,11,var(--escurece, 0)); pointer-events: none; }
.hero-texto, .hero-foto { will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .anima .hero-texto > * { animation-fill-mode: backwards; }
  .anima .hero-foto { animation-fill-mode: backwards; }
}
/* computador: brinquedos no vão entre o texto e o logo e nas bordas, longe das palavras */
@media (min-width: 992px) {
  .bq-1 { left: 52%; top: 12%; } .bq-2 { left: 66%; top: 8%; } .bq-3 { left: 57%; top: 56%; }
  .bq-4 { left: 93%; top: 8%; } .bq-5 { left: 71%; top: 62%; } .bq-6 { left: 2%; top: 74%; width: 48px; }
  .bq-7 { left: 8%; top: 50%; } .bq-8 { left: 82%; top: 56%; } .bq-9 { left: 13%; top: 78%; } .bq-10 { left: 88%; top: 34%; width: 64px; }
}
/* brinquedos em duas "faixas" sem texto: acima da frase e espiando atrás da nuvem; giram mais do que andam */
@media (min-width: 992px) {
  .bq-1 { left: 20%; top: 5%; } .bq-2 { left: 47%; top: 6%; } .bq-4 { left: 92%; top: 7%; }
  .bq-3 { left: 57%; top: 66%; } .bq-5 { left: 36%; top: 72%; } .bq-6 { left: 70%; top: 62%; width: 56px; }
}
@media (max-width: 991px) {
  .bq-1 { left: 5%; top: 3%; } .bq-4 { right: 5%; top: 3%; }
}
@media (min-width: 992px) { .bq-1 { top: 2%; width: 92px; } .bq-2 { top: 3%; width: 56px; } .bq-4 { top: 3%; width: 60px; } }
@media (min-width: 992px) { .bq-1 { left: 71%; top: 3%; width: 86px; } .bq-2 { left: 58%; top: 2%; } .bq-4 { left: 94%; top: 4%; width: 54px; } }

/* topo: o escurecido segue o mesmo degradê da borda da foto (some a "quina" ao rolar); a foto aproxima a partir da direita */
.hero-foto { transform-origin: 100% 50%; }
.hero-foto::after { background: linear-gradient(90deg, rgba(46,21,11,0) 0, rgba(46,21,11,var(--escurece, 0)) 22%); }
@media (max-width: 991px) {
  .hero-foto { transform-origin: 50% 100%; }
  .hero-foto::after { background: linear-gradient(180deg, rgba(46,21,11,0) 0, rgba(46,21,11,var(--escurece, 0)) 26%); }
}
.hero-foto::before { z-index: 2; } /* o degradê creme fica por cima do escurecido: a borda esquerda continua da cor do fundo */
.hero-foto::after { z-index: 1; }

/* ============ TELA DE CARREGAMENTO (02/11/2026, referência: yardstick.dog) — v2 ============ */
.loader { display: none; }
.com-loader .loader, .loader.montado { display: flex; flex-direction: column; justify-content: center; gap: var(--l-gap, 28px); position: fixed; inset: 0; z-index: 100; overflow: hidden;
  animation: loader-seguranca .5s ease 5s forwards; } /* se o script falhar, a tela some sozinha */
.loader-fundo { position: absolute; inset: 0; background: var(--laranja); }
.com-loader .loader:not(.montado) { background: var(--laranja); } /* antes de o script montar a grade */
/* trava a rolagem sem a página "pular" quando a barra de rolagem volta */
html.com-loader { overflow: hidden; scrollbar-gutter: stable; }
.loader-linha { position: relative; display: flex; justify-content: center; gap: var(--l-gap, 28px); flex: none; }
.loader-icone { width: var(--l-tam, 64px); height: var(--l-tam, 64px); flex: none; color: var(--tinta); transform: scale(0); backface-visibility: hidden; }
.loader-icone svg, .loader-icone img { width: 100%; height: 100%; display: block; overflow: visible; shape-rendering: geometricPrecision; }
.loader-icone.claro { color: var(--creme); }
.loader-icone.pessego { color: var(--claro, #FBE3C8); }
/* durante e depois da tela, quem anima o topo é o script (as animações CSS do topo não podem recomeçar) */
.com-loader .hero-texto > *, .com-loader .hero-foto, .pos-loader .hero-texto > *, .pos-loader .hero-foto { animation: none !important; }
@keyframes loader-seguranca { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ============ ONDE ESTAMOS · ÓRBITA DO BUSCA E LEVA (02/11/2026) ============ */
.cidade .cidade-grade { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 72px; padding-top: 150px; padding-bottom: calc(max(80px, 13.9vw) + 56px); }
.cidade-sobre { margin: 0 0 20px; font: 600 12px/1.4 var(--f-texto); letter-spacing: 3px; text-transform: uppercase; color: #F6C08A; }
.cidade .cidade-frase { font-size: clamp(30px, 2.5vw, 40px); line-height: 1.24; max-width: 620px; margin-bottom: 20px; }
.cidade-apoio { margin: 0 0 32px; max-width: 500px; font: 300 17px/27px var(--f-texto); color: rgba(251, 243, 234, .78); }

.orbita { --t: clamp(340px, 31vw, 460px); --rf: .49; position: relative; width: var(--t); height: var(--t); flex: none; margin-right: 24px; }
.orbita-aneis { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbita-aneis circle { fill: none; stroke: rgba(251, 243, 234, .26); stroke-width: 2; stroke-dasharray: 1 11; stroke-linecap: round; }
.orbita-aneis .anel-dentro { stroke: rgba(246, 192, 138, .45); stroke-dasharray: 10 12; }
.orbita-giro, .orbita-carro { position: absolute; inset: 0; animation: orbita 60s linear infinite; }
.orbita-ponto { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(calc(var(--t) * var(--rf))) rotate(calc(-1 * var(--a))); }
.orbita-chip { position: absolute; left: 0; top: 0; white-space: nowrap; padding: 9px 16px; border-radius: 999px; background: var(--laranja); color: var(--tinta);
  font: 600 13px/1 var(--f-texto); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); animation: contra 60s linear infinite; }
.orbita-chip.claro { background: var(--creme); }
.orbita-carro { animation-duration: 12s; }
.orbita-carro svg { position: absolute; left: 50%; top: 19%; width: 44px; height: 44px; margin: -22px 0 0 -22px; color: #F6C08A; }
.orbita-centro { position: absolute; left: 50%; top: 50%; width: 36%; transform: translate(-50%, -50%); display: grid; justify-items: center; }
.orbita-disco { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--laranja); box-shadow: 0 18px 50px rgba(0, 0, 0, .3); }
.orbita-disco::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--laranja); animation: pulso 2.8s cubic-bezier(.2, .7, .3, 1) infinite; }
.orbita-disco img { width: 52%; height: auto; }
.orbita-aqui { margin-top: -16px; position: relative; padding: 8px 14px; border-radius: 999px; background: var(--creme); color: var(--tinta); font: 700 11px/1 var(--f-texto); letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); }
@keyframes orbita { to { transform: rotate(360deg); } }
@keyframes contra { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes pulso { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }

/* brinquedos da faixa: no alto, longe do texto e da nuvem */
.cidade .brinquedo.bq-1, .cidade .brinquedo.bq-2, .cidade .brinquedo.bq-4 { right: auto; bottom: auto; display: block; }
.cidade .brinquedo.bq-1 { left: 5%; top: 64px; width: 92px; color: var(--creme); }
.cidade .brinquedo.bq-2 { left: 38%; top: 58px; width: 54px; }
.cidade .brinquedo.bq-4 { left: auto; right: 5%; top: 66px; width: 56px; }

@media (max-width: 991px) {
  .cidade .cidade-grade { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 56px; padding-top: 128px; }
  .cidade-texto { display: grid; justify-items: center; }
  .cidade .cidade-frase { font-size: 28px; line-height: 36px; }
  .cidade-apoio { font-size: 16px; line-height: 25px; }
  .orbita { --t: min(78vw, 360px); --rf: .42; margin: 0; }
  .orbita-aneis .anel-fora { r: 42%; }
  .orbita-aneis .anel-dentro { r: 27%; }
  .orbita-carro svg { top: 23%; width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  .orbita-chip { padding: 8px 12px; font-size: 12px; }
  .orbita-centro { width: 32%; }
  .orbita-aqui { font-size: 10px; letter-spacing: 1px; padding: 7px 11px; }
  .cidade .brinquedo.bq-1 { left: 5%; top: 52px; width: 62px; }
  .cidade .brinquedo.bq-2 { display: none; }
  .cidade .brinquedo.bq-4 { right: 6%; top: 54px; width: 44px; }
}
@media (prefers-reduced-motion: reduce) { .orbita-giro, .orbita-carro, .orbita-chip, .orbita-disco::before { animation: none !important; } .orbita-chip { transform: translate(-50%, -50%); } }

/* ============ SERVIÇOS: ÍCONES SÓLIDOS + CUIDADOS EXTRAS SELECIONÁVEIS (02/11/2026) ============ */
.servico-forma .servico-icone { width: 64px; height: 64px; margin: 0; color: inherit; overflow: visible; transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.servico:hover .servico-icone { transform: rotate(-8deg) scale(1.08); }
@media (max-width: 991px) { .servico-forma .servico-icone { width: 54px; height: 54px; } }

.extras-lista li, .extras-lista .extras-destaque { padding: 0; background: none; }
.extra { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border: 1.5px solid transparent; border-radius: 999px; background: var(--branco); color: var(--tinta);
  font: 500 14px/1.2 var(--f-texto); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .35s cubic-bezier(.34,1.56,.64,1); }
.extras-destaque .extra { background: var(--laranja); }
@media (hover: hover) { .extra:hover { border-color: var(--tinta); } }
.extra:active { transform: scale(.94); }
.extra:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.extra-marca { width: 0; height: 16px; flex: none; opacity: 0; transition: width .25s ease, margin .25s ease, opacity .2s ease; }
.extra[aria-pressed="true"] { background: var(--tinta); color: var(--creme); border-color: var(--tinta); }
.extra[aria-pressed="true"] .extra-marca { width: 16px; margin-right: 8px; opacity: 1; }
.extras-acao { flex-basis: 100%; display: grid; justify-items: center; gap: 6px; margin-top: 4px; }
.extras-dica { margin: 0; font: 300 13px/1.4 var(--f-texto); color: rgba(46, 21, 11, .72); }
.extras-enviar.pronto { padding: 12px 24px; border-radius: 999px; background: var(--laranja); color: var(--tinta); }

/* ============ FORMAS DOS SERVIÇOS POR TEMA (02/11/2026) ============ */
.servico-fundo { overflow: visible; }
.forma-cafe { padding-bottom: 12%; }                 /* conteúdo dentro da cabeça do alfinete */
.forma-cafe h3 { max-width: 70%; }
.forma-creme { padding-top: 14%; }                   /* abaixo do telhado */
.forma-laranja h3, .forma-espuma h3 { max-width: 72%; }
/* cada forma reage do seu jeito ao passar o mouse */
.servico:hover .forma-espuma .servico-fundo { transform: scale(1.05) rotate(3deg); }
.servico:hover .forma-laranja .servico-fundo { transform: rotate(-3deg); }
.servico:hover .forma-cafe .servico-fundo { transform: translateY(-6px); }
.servico:hover .forma-creme .servico-fundo { transform: scale(1.03); }
.forma-creme .servico-icone { width: 80px; height: 80px; margin: -8px 0; } /* a chave é comprida e inclinada: precisa de mais área */
@media (max-width: 991px) { .forma-creme .servico-icone { width: 68px; height: 68px; } }

/* ============ FICHA DE AGENDAMENTO EM 3 PASSOS (02/11/2026) ============ */
.ficha-fundo { position: fixed; inset: 0; z-index: 69; background: rgba(46,21,11,.5); opacity: 0; transition: opacity .25s; }
.ficha-fundo.visivel { opacity: 1; }
.ficha { position: fixed; z-index: 70; left: 50%; top: 50%; width: min(660px, calc(100vw - 32px)); max-height: min(90vh, 880px); display: flex; flex-direction: column;
  background: var(--branco); color: var(--tinta); border-radius: 24px; box-shadow: 0 40px 90px -30px rgba(46,21,11,.6); overflow: hidden;
  opacity: 0; transform: translate(-50%, -47%) scale(.98); transition: opacity .25s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.ficha.visivel { opacity: 1; transform: translate(-50%, -50%); }
.ficha[hidden], .ficha-fundo[hidden], .ficha-etapa[hidden], .ficha [hidden] { display: none !important; }
.ficha .esconde { display: none !important; }
body.ficha-aberta { overflow: hidden; }
.ficha-cabeca { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 0; }
.ficha-cabeca button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--tinta); display: grid; place-items: center; cursor: pointer; }
.ficha-cabeca button:hover { background: rgba(46,21,11,.07); }
.ficha-cabeca svg { width: 18px; height: 18px; }
.ficha-passo { margin: 0; font: 600 11px/1 var(--f-texto); letter-spacing: 2.5px; text-transform: uppercase; opacity: .62; }
.ficha-trilha { list-style: none; margin: 8px 28px 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; counter-reset: passo; }
.ficha-trilha li { font: 600 11.5px/1.2 var(--f-texto); color: rgba(46,21,11,.45); padding-top: 10px; border-top: 4px solid rgba(46,21,11,.1); transition: color .2s, border-color .3s; }
.ficha-trilha li.feito { border-color: var(--laranja); color: rgba(46,21,11,.7); }
.ficha-trilha li.ativo { border-color: var(--laranja); color: var(--tinta); }
.ficha-titulo { margin: 14px 28px 4px; font: 400 28px/1.18 var(--f-titulo); font-variation-settings: "SOFT" 100; }
.ficha-lembrado { margin: 6px 28px 0; padding: 10px 14px; border-radius: 12px; background: var(--creme); font: 400 13px/1.45 var(--f-texto); }
.ficha-esquecer { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; text-decoration: underline; color: var(--tinta); cursor: pointer; }
.ficha-corpo { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 16px 28px 22px; }
.ficha-etapa { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 20px; }
.ficha .campo label em, .grupo-titulo em { font-style: normal; color: var(--laranja-texto, #A8520A); }
.grupo { min-width: 0; }
.grupo-titulo { margin: 0 0 10px; font: 600 11px/1.2 var(--f-texto); letter-spacing: 2.5px; text-transform: uppercase; color: rgba(46,21,11,.62); }
.grupo-titulo small { margin-left: 6px; font-size: 10.5px; letter-spacing: 1px; text-transform: none; font-weight: 400; }
.grupo-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; align-items: start; }
.pilulas { display: flex; flex-wrap: wrap; gap: 8px; }
.pilulas label { position: relative; }
.pilulas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pilulas span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1.5px solid rgba(46,21,11,.2); border-radius: 999px; background: var(--branco);
  font: 500 14px/1.2 var(--f-texto); cursor: pointer; user-select: none; transition: background-color .15s, border-color .15s, color .15s, transform .25s cubic-bezier(.34,1.56,.64,1); }
@media (hover: hover) { .pilulas span:hover { border-color: rgba(46,21,11,.5); } }
.pilulas label:active span { transform: scale(.96); }
.pilulas input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--creme); }
.pilulas input:focus-visible + span { outline: 2px solid var(--laranja); outline-offset: 2px; }
.pilulas input:disabled + span { opacity: .38; cursor: not-allowed; text-decoration: line-through; }
.pilulas-servico { display: grid; grid-template-columns: repeat(4, 1fr); }
.pilulas-servico span { flex-direction: column; justify-content: center; width: 100%; min-height: 96px; border-radius: 18px; padding: 12px 8px; text-align: center; }
.pilulas-servico svg { width: 34px; height: 34px; }
.ficha .campo input, .ficha .campo select { height: 50px; }
.ficha textarea { width: 100%; min-height: 76px; border: 1.5px solid rgba(46,21,11,.2); border-radius: 12px; padding: 12px 14px; font: 400 15px/1.45 var(--f-texto); color: var(--tinta); resize: vertical; }
.ficha textarea:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px rgba(230,126,26,.25); }
.ficha-aviso { margin: -8px 0 0; padding: 10px 14px; border-radius: 12px; background: #FBE3C8; font: 500 13px/1.4 var(--f-texto); }
.ficha-nota { margin: -10px 0 0; font: 300 12.5px/1.45 var(--f-texto); opacity: .75; }
.caixinha { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; font: 400 14px/1.4 var(--f-texto); cursor: pointer; }
.caixinha input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--tinta); }
.ficha-previa { padding: 16px 18px; border-radius: 16px; background: var(--creme); }
.ficha-texto { margin: 0; white-space: pre-wrap; font: 400 13.5px/1.6 var(--f-texto); }
.ficha-erro { margin: 0 28px 10px; padding: 10px 14px; border-radius: 12px; background: #FBE3C8; color: var(--tinta); font: 500 13px/1.4 var(--f-texto); }
.ficha-pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 28px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(46,21,11,.1); }
.ficha-pular { min-height: 44px; border: 0; background: none; padding: 0 4px; font: 500 13.5px/1.2 var(--f-texto); color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; opacity: .78; cursor: pointer; }
.ficha-pe .btn { min-height: 52px; border: 0; padding: 0 30px; cursor: pointer; margin-left: auto; }
@media (max-width: 767px) {
  .ficha { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 94vh; max-height: 94dvh; border-radius: 22px 22px 0 0; opacity: 1; transform: translateY(100%); }
  .ficha.visivel { transform: none; }
  .ficha-trilha, .ficha-titulo, .ficha-lembrado, .ficha-erro { margin-left: 20px; margin-right: 20px; }
  .ficha-titulo { font-size: 24px; }
  .ficha-corpo { padding: 14px 20px 20px; }
  .ficha-pe { padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .ficha-pe .btn { padding: 0 22px; }
  .pilulas-servico { grid-template-columns: 1fr 1fr; }
  .pilulas-servico span { min-height: 84px; }
  .grupo-duplo { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ficha, .ficha-fundo { transition: none; } }

.ficha-privacidade { margin: -6px 0 0; font: 300 12.5px/1.5 var(--f-texto); color: rgba(46, 21, 11, .75); }
.ficha-privacidade a { text-decoration: underline; text-underline-offset: 2px; }

/* ============ POLÍTICA DE PRIVACIDADE (06/11/2026) ============ */
.pagina-politica { background: var(--creme); }
.politica-topo { max-width: 1040px; margin: 0 auto; padding: 24px 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.politica-topo img { display: block; width: 156px; height: auto; }
.politica-voltar { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 500 14px/1.2 var(--f-texto); color: var(--tinta); text-decoration: none; }
.politica-voltar svg { width: 16px; height: 16px; flex: none; }
@media (hover: hover) { .politica-voltar:hover { text-decoration: underline; text-underline-offset: 3px; } }
.politica { max-width: 760px; margin: 40px auto 64px; padding: 48px 56px 56px; background: var(--branco); border-radius: 24px; color: var(--tinta); }
.politica h1 { margin: 0 0 8px; font: 400 44px/1.12 var(--f-titulo); font-variation-settings: "SOFT" 100; }
.politica-data { margin: 0 0 24px; font: 500 13px/1.4 var(--f-texto); color: var(--laranja-texto, #A8520A); }
.politica-resumo { margin: 0 0 12px; font: 400 18px/1.55 var(--f-texto); }
.politica h2 { margin: 36px 0 12px; font: 600 20px/1.3 var(--f-texto); }
.politica p, .politica li { font: 400 15.5px/1.65 var(--f-texto); }
.politica p { margin: 0 0 12px; }
.politica ul { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; }
.politica a { color: var(--laranja-texto, #A8520A); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.politica strong { font-weight: 600; }
.politica-rodape { max-width: 1040px; margin: 0 auto; padding: 0 24px 40px; display: flex; justify-content: space-between; gap: 16px; font: 400 13px/1.4 var(--f-texto); color: var(--tinta); }
.politica-rodape p { margin: 0; }
.politica-rodape a { color: inherit; }
@media (max-width: 767px) {
  .politica { margin: 24px 16px 40px; padding: 32px 22px 36px; border-radius: 20px; }
  .politica h1 { font-size: 34px; }
  .politica-resumo { font-size: 17px; }
  .politica-topo { padding: 16px 16px 0; }
  .politica-rodape { padding: 0 16px 32px; }
}

/* política, versão final: índice, subtítulos e tabelas (no celular cada linha vira um cartão) */
.politica h3 { margin: 20px 0 8px; font: 600 16px/1.35 var(--f-texto); }
.politica-indice { margin: 24px 0 8px; padding: 20px 24px; border-radius: 16px; background: var(--creme); }
.politica-indice p { margin: 0 0 10px; font: 600 11px/1.2 var(--f-texto); letter-spacing: 2.5px; text-transform: uppercase; }
.politica-indice ol { margin: 0; padding-left: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.politica-indice li { font-size: 14px; line-height: 1.45; }
.politica h2 { scroll-margin-top: 16px; }
.politica-tabela { width: 100%; margin: 8px 0 16px; border-collapse: collapse; font: 400 14.5px/1.55 var(--f-texto); }
.politica-tabela th { padding: 10px 14px 10px 0; text-align: left; font: 600 12px/1.3 var(--f-texto); border-bottom: 2px solid var(--tinta); }
.politica-tabela td { padding: 12px 14px 12px 0; vertical-align: top; border-bottom: 1px solid rgba(46, 21, 11, .14); }
@media (max-width: 767px) {
  .politica-indice ol { grid-template-columns: 1fr; }
  .politica-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .politica-tabela, .politica-tabela tbody, .politica-tabela tr, .politica-tabela td { display: block; width: 100%; }
  .politica-tabela tr { padding: 14px 0; border-bottom: 1px solid rgba(46, 21, 11, .14); }
  .politica-tabela td { padding: 0 0 8px; border: 0; }
  .politica-tabela td:last-child { padding-bottom: 0; }
  .politica-tabela td::before { content: attr(data-titulo); display: block; margin-bottom: 2px; font: 600 11.5px/1.3 var(--f-texto); color: rgba(46, 21, 11, .68); }
}

/* ============ LISTAS DE ESCOLHA NO VISUAL DO SITE (06/11/2026) ============ */
.seletor { position: relative; }
.campo .seletor select, .ficha .campo .seletor select { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.seletor-botao { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 50px; padding: 0 14px; border: 1.5px solid rgba(46,21,11,.2); border-radius: 12px;
  background: var(--branco); color: var(--tinta); font: 400 15px var(--f-texto); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.seletor-botao.vazio { color: rgba(46,21,11,.55); }
.seletor-valor { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.seletor-seta { flex: none; width: 10px; height: 6px; color: var(--tinta); transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.seletor-botao[aria-expanded="true"] .seletor-seta { transform: rotate(180deg); }
@media (hover: hover) { .seletor-botao:hover { border-color: rgba(46,21,11,.45); } }
.seletor-botao:focus-visible, .seletor-botao[aria-expanded="true"] { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px rgba(230,126,26,.25); }
.seletor-lista { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 8px); max-height: 300px; margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; list-style: none;
  background: var(--branco); border: 1px solid rgba(46,21,11,.1); border-radius: 16px; box-shadow: 0 22px 44px -16px rgba(46,21,11,.45); transform-origin: 50% 0; animation: seletor-abre .2s cubic-bezier(.2,.8,.2,1); }
.seletor-lista[hidden] { display: none; }
.seletor-lista.para-cima { top: auto; bottom: calc(100% + 8px); transform-origin: 50% 100%; }
.seletor-opcao { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px; border-radius: 10px; color: var(--tinta); font: 500 14.5px/1.2 var(--f-texto); cursor: pointer; }
.seletor-opcao.ativa { background: #FBE3C8; }
.seletor-opcao[aria-selected="true"] { font-weight: 600; }
.seletor-icone { flex: none; display: grid; place-items: center; width: 24px; height: 24px; color: var(--tinta); }
.seletor-icone svg { display: block; width: var(--tam, 20px); height: var(--tam, 20px); overflow: visible; }
.seletor-marca { flex: none; width: 16px; height: 16px; margin-left: auto; color: var(--laranja-texto, #A8520A); opacity: 0; }
.seletor-opcao[aria-selected="true"] .seletor-marca { opacity: 1; }
@keyframes seletor-abre { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
.seletor-lista.para-cima { animation-name: seletor-abre-cima; }
@keyframes seletor-abre-cima { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .seletor-lista { animation: none; } .seletor-seta { transition: none; } }

/* ============ AVALIAÇÕES DO GOOGLE: NOTA EM DESTAQUE + BALÕES (06/11/2026) ============ */
.avaliacoes .wrap { padding-top: 104px; padding-bottom: 112px; }
.avaliacoes-topo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px 48px; margin-bottom: 64px; }
.avaliacoes-nota { display: grid; justify-items: center; gap: 6px; padding-right: 48px; border-right: 1.5px solid rgba(46,21,11,.16); }
.avaliacoes-numero { font: 400 104px/.95 var(--f-titulo); font-variation-settings: "SOFT" 100; letter-spacing: -2px; color: var(--tinta); }
.avaliacoes-nota .estrelas { font-size: 21px; letter-spacing: 2px; color: var(--laranja); }
.avaliacoes .avaliacoes-titulo .sobrelinha { margin: 0 0 10px; padding: 0; text-align: left; }
.avaliacoes-titulo h2 { margin: 0; font: 400 clamp(30px, 3.1vw, 42px)/1.14 var(--f-titulo); font-variation-settings: "SOFT" 100; color: var(--tinta); }
.avaliacoes-conta { margin: 10px 0 0; font: 400 16px/1.5 var(--f-texto); }
.avaliacoes-conta strong { font-weight: 600; }
.avaliacoes-todas { align-self: center; white-space: nowrap; }
.avaliacoes-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; }
.avaliacoes-coluna { display: grid; gap: 28px; min-width: 0; }
.avaliacoes-coluna:nth-child(2) { margin-top: 48px; }
.avaliacoes .avaliacao { --fundo: var(--branco); margin: 0; padding: 0; display: grid; gap: 22px; text-align: left; align-content: start; min-width: 0; }
.avaliacao-balao { position: relative; display: grid; gap: 10px; padding: 28px 28px 30px; border-radius: 24px; background: var(--fundo); color: var(--tinta); transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.avaliacao-balao::after { content: ""; position: absolute; left: 30px; bottom: -13px; width: 28px; height: 14px; background: var(--fundo); clip-path: polygon(0 0, 100% 0, 18% 100%); }
.avaliacoes .avaliacao .estrelas { font-size: 16px; letter-spacing: 2px; color: var(--laranja); }
.avaliacoes .avaliacao h3 { margin: 0; font: 400 23px/1.22 var(--f-titulo); font-variation-settings: "SOFT" 100; }
.avaliacoes .avaliacao blockquote { margin: 0; font: 400 15px/1.6 var(--f-texto); }
.avaliacoes .avaliacao-pessego { --fundo: #F6C08A; }
.avaliacoes .avaliacao-pessego .estrelas, .avaliacoes .avaliacao-laranja .estrelas { color: var(--tinta); }
.avaliacoes .avaliacao-laranja { --fundo: var(--laranja); }
.avaliacoes .avaliacao figcaption { display: flex; align-items: center; gap: 12px; margin: 0; padding-left: 20px; color: var(--tinta); font: 600 14px/1.25 var(--f-texto); }
.avaliacao-inicial { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--escuro); color: var(--creme); font: 400 18px/1 var(--f-titulo); }
.avaliacao-autor small { display: block; margin-top: 2px; font: 400 12px/1.3 var(--f-texto); color: rgba(46,21,11,.68); }
@media (hover: hover) { .avaliacao:hover .avaliacao-balao { transform: translateY(-4px) rotate(-.6deg); } }
.avaliacoes .avaliacao-chamada { gap: 12px; padding: 30px 28px 32px; border-radius: 24px; background: var(--escuro); color: var(--creme); justify-items: start; }
.avaliacao-chamada svg { width: 40px; height: 40px; color: #F6C08A; }
.avaliacoes .avaliacao-chamada h3 { color: var(--creme); font-size: 26px; }
.avaliacao-chamada p { margin: 0 0 8px; font: 300 15px/1.55 var(--f-texto); color: rgba(251,243,234,.85); }
.avaliacoes-grade:focus-visible { outline: 2px solid var(--laranja); outline-offset: 6px; border-radius: 8px; }
.pontos { display: none; }
@media (max-width: 991px) {
  .avaliacoes .wrap { padding: 72px 0 72px; }
  .avaliacoes-topo { grid-template-columns: auto minmax(0, 1fr); gap: 20px 28px; margin-bottom: 40px; padding: 0 24px; }
  .avaliacoes-nota { padding-right: 28px; }
  .avaliacoes-numero { font-size: 76px; }
  .avaliacoes-nota .estrelas { font-size: 15px; letter-spacing: 1px; }
  .avaliacoes-todas { grid-column: 1 / -1; justify-self: start; }
  .avaliacoes-grade { display: flex; gap: 16px; padding: 0 24px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 24px; scrollbar-width: none; align-items: flex-start; }
  .avaliacoes-grade::-webkit-scrollbar { display: none; }
  .avaliacoes-coluna { display: contents; }
  .avaliacoes .avaliacao { flex: 0 0 min(82vw, 360px); scroll-snap-align: start; }
  .avaliacoes .avaliacao-chamada { align-self: stretch; }
  .pontos { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
}
@media (max-width: 480px) {
  .avaliacoes-topo { grid-template-columns: 1fr; justify-items: start; }
  .avaliacoes-nota { display: flex; align-items: center; gap: 14px; padding: 0; border: 0; }
  .avaliacoes-numero { font-size: 64px; }
  .avaliacoes-todas { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { .avaliacao-balao { transition: none; } }

/* ============ COMO FUNCIONA: STEPPER QUE AVANÇA COM A ROLAGEM (06/11/2026) ============ */
.passos { --bola: 60px; list-style: none; margin: 0 0 56px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
.passo { position: relative; min-width: 0; }
.passo-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.passo-bola { position: relative; flex: none; display: grid; place-items: center; width: var(--bola); height: var(--bola); border-radius: 50%; border: 2px solid var(--laranja); background: var(--branco); color: var(--laranja-texto, #A8520A);
  transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.passo-bola > * { grid-area: 1 / 1; }
.passo-num { font: 400 25px/1 var(--f-titulo); font-variation-settings: "SOFT" 100; transition: transform .3s ease, opacity .2s ease; }
.passo-check { width: 26px; height: 26px; opacity: 0; transform: scale(0) rotate(-40deg); transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .15s ease; }
.passo-linha { flex: 1; height: 3px; border-radius: 3px; background: rgba(46,21,11,.14); overflow: hidden; }
.passo-linha i { display: block; width: 100%; height: 100%; background: var(--laranja); border-radius: inherit; transform: scaleX(var(--f, 1)); transform-origin: 0 50%; will-change: transform; }
.passo-texto { padding-right: 20px; transition: opacity .3s ease; }
.passo-texto h3 { margin: 0 0 8px; font: 600 21px/1.25 var(--f-texto); }
.passo-texto p { margin: 0; font: 400 15.5px/1.6 var(--f-texto); }
/* estados (só quando o script assume; sem ele, os três passos ficam legíveis e iguais) */
.passos-vivo .passo-bola { border-color: rgba(46,21,11,.2); color: rgba(46,21,11,.62); }
.passos-vivo .passo-texto { opacity: .6; }
.passos-vivo .passo.atual .passo-bola { border-color: var(--laranja); color: var(--laranja-texto, #A8520A); }
.passos-vivo .passo.atual .passo-bola::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--laranja); animation: passo-pulso 1.8s cubic-bezier(.2,.7,.3,1) infinite; }
.passos-vivo .passo.atual .passo-texto, .passos-vivo .passo.feito .passo-texto { opacity: 1; }
.passos-vivo .passo.feito .passo-bola { background: var(--laranja); border-color: var(--laranja); color: var(--tinta); }
.passos-vivo .passo.feito .passo-num { opacity: 0; transform: scale(.4); }
.passos-vivo .passo.feito .passo-check { opacity: 1; transform: none; }
.passos-completos + .centro .btn { animation: passo-cta .7s cubic-bezier(.34,1.56,.64,1); }
@keyframes passo-pulso { from { transform: scale(1); opacity: .8; } to { transform: scale(1.45); opacity: 0; } }
@keyframes passo-cta { 40% { transform: scale(1.07); } }
@media (max-width: 767px) {
  .passos { --bola: 52px; grid-template-columns: 1fr; margin-bottom: 40px; }
  .passo { display: flex; gap: 18px; padding-bottom: 34px; }
  .passo:last-child { padding-bottom: 0; }
  .passo-topo { margin: 0; flex: none; align-self: flex-start; }
  .passo-num { font-size: 22px; }
  .passo-check { width: 22px; height: 22px; }
  .passo-linha { position: absolute; left: calc(var(--bola) / 2 - 1.5px); top: calc(var(--bola) + 6px); bottom: 6px; width: 3px; height: auto; }
  .passo-linha i { transform: scaleY(var(--f, 1)); transform-origin: 50% 0; }
  .passo-texto { padding: 12px 0 0; min-width: 0; }
  .passo-texto h3 { font-size: 19px; }
  .passo-texto p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .passo-bola, .passo-num, .passo-check, .passo-texto { transition: none; } }

/* ============ POR DENTRO DA PET HAUS: GALERIA QUE EXPANDE (06/11/2026) ============ */
.galeria { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; height: clamp(380px, 36vw, 520px); }
.galeria-item { position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--raio-foto); overflow: hidden; background: var(--cinza-quente); transition: flex-grow .6s cubic-bezier(.22,1,.36,1); }
.galeria-item.ativa { flex-grow: 5; }
.galeria-item button { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
.galeria-item button:focus-visible { outline: 3px solid var(--laranja); outline-offset: -3px; border-radius: inherit; }
.galeria-item picture { display: block; width: 100%; height: 100%; }
.galeria-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22,1,.36,1), filter .4s ease; }
.galeria-item:not(.ativa) img { filter: saturate(.85); }
.galeria-item.ativa img { transform: scale(1.03); }
.galeria-legenda { position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 24px 20px; background: linear-gradient(180deg, rgba(46,21,11,0), rgba(46,21,11,.78)); color: var(--creme); font: 500 16px/1.3 var(--f-texto); white-space: nowrap; opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .3s ease; pointer-events: none; }
.galeria-item.ativa .galeria-legenda { opacity: 1; transform: none; transition: opacity .35s ease .22s, transform .45s cubic-bezier(.22,1,.36,1) .22s; }
@media (max-width: 767px) {
  .galeria { flex-direction: column; height: 620px; gap: 8px; }
  .galeria-legenda { padding: 44px 18px 16px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .galeria-item, .galeria-item img, .galeria-legenda, .galeria-item.ativa .galeria-legenda { transition: none; } .galeria-item.ativa img { transform: none; } }

/* ============ AJUSTES 06/11: COMO FUNCIONA CENTRALIZADO, GALERIA SÓ DO ESPAÇO, RODAPÉ ============ */
.passos { max-width: 1040px; margin-left: auto; margin-right: auto; gap: 0; }
.passo { text-align: center; }
.passo-topo { position: relative; display: block; }
.passo-bola { margin: 0 auto; }
.passo-linha { position: absolute; top: calc(var(--bola) / 2 - 1.5px); left: calc(50% + var(--bola) / 2 + 10px); right: calc(-50% + var(--bola) / 2 + 10px); }
.passo-texto { max-width: 300px; margin: 0 auto; padding: 0 12px; }
@media (max-width: 767px) {
  .passos { max-width: none; }
  .passo { text-align: left; }
  .passo-bola { margin: 0; }
  .passo-topo { position: static; }
  .passo-linha { left: calc(var(--bola) / 2 - 1.5px); right: auto; top: calc(var(--bola) + 6px); }
  .passo-texto { max-width: none; margin: 0; padding: 12px 0 0; }
}

.galeria-item.ativa { flex-grow: 2.4; }
@media (max-width: 767px) { .galeria { height: 470px; } .galeria-item.ativa { flex-grow: 5; } }

.rodape { background: var(--creme); }
.rodape-wrap { max-width: 1280px; padding: 40px 40px 48px; }
.rodape-cartao { margin-bottom: 56px; padding: 26px 28px 26px 36px; border-radius: 24px; background: var(--branco); }
.rodape-chamada p, .rodape-cartao .rodape-chamada p { margin: 0; font: 400 26px/1.2 var(--f-titulo); font-variation-settings: "SOFT" 100; }
.rodape-chamada small { display: block; margin-top: 4px; font: 400 14px/1.4 var(--f-texto); color: rgba(46,21,11,.72); }
.rodape-campo { flex: 0 1 420px; width: auto; height: 56px; padding: 4px; border: 1.5px solid rgba(46,21,11,.25); border-radius: 999px; background: var(--branco); transition: border-color .15s, box-shadow .15s; }
.rodape-campo:focus-within { border-color: var(--tinta); box-shadow: 0 0 0 3px rgba(230,126,26,.25); }
.rodape-campo input { padding: 0 18px; font-size: 15px; }
.rodape-campo button { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--laranja); color: var(--tinta); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
@media (hover: hover) { .rodape-campo button:hover { transform: translateX(2px) scale(1.05); } }
.rodape-colunas { grid-template-columns: minmax(0, 1.45fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, 1.3fr); gap: 32px 36px; }
.rodape-colunas h3 { margin-bottom: 12px; font: 600 11px/1.3 var(--f-texto); letter-spacing: 2.5px; opacity: 1; color: rgba(46,21,11,.68); }
.rodape-colunas a, .rodape-colunas p { padding: 5px 0; font: 400 14.5px/1.45 var(--f-texto); }
.rodape-colunas a { transition: color .15s; }
.rodape-marca .rodape-logo { justify-self: start; padding: 0; }
.rodape-marca img { display: block; width: 148px; height: auto; }
.rodape-marca p { margin: 10px 0 8px; padding: 0; max-width: 250px; color: rgba(46,21,11,.78); }
.rodape-colunas .rodape-social { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-weight: 500; }
.rodape-horario dl { margin: 0; padding: 5px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font: 400 14.5px/1.45 var(--f-texto); }
.rodape-horario dt { font-weight: 500; white-space: nowrap; }
.rodape-horario dd { margin: 0; }
.rodape-colunas .rodape-obs { margin: 8px 0 0; padding: 0; font-size: 13px; opacity: 1; color: rgba(46,21,11,.72); }
.rodape-base p, .rodape-base a { font-size: 13px; }
.rodape-contato a[href^="tel"], .rodape-contato a[data-wa] { white-space: nowrap; }
@media (max-width: 1099px) {
  .rodape-colunas { grid-template-columns: minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, 1.3fr); gap: 32px 24px; }
  .rodape-marca { grid-column: 1 / -1; }
  .rodape-marca p { max-width: 420px; }
}
@media (max-width: 991px) {
  .rodape-wrap { padding-left: 24px; padding-right: 24px; }
  .rodape-cartao { flex-direction: column; align-items: stretch; gap: 18px; }
  .rodape-campo { flex: none; width: 100%; }
  .rodape-colunas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rodape-marca { grid-column: 1 / 3; grid-row: 1; }
  .rodape-horario { grid-column: 3; grid-row: 1; }
}
@media (max-width: 767px) {
  .rodape-wrap { padding: 28px 20px 32px; }
  .rodape-cartao { align-items: stretch; flex-direction: column; gap: 16px; margin-bottom: 36px; padding: 22px 18px; border-radius: 20px; }
  .rodape-chamada p, .rodape-cartao .rodape-chamada p { font-size: 22px; }
  .rodape-campo { flex: none; width: 100%; }
  .rodape-colunas { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .rodape-marca, .rodape-contato, .rodape-horario { grid-column: 1 / -1; grid-row: auto; }
  .rodape-colunas a { min-height: 40px; display: flex; flex-direction: column; justify-content: center; padding: 4px 0; }
  .rodape-colunas .rodape-social { display: inline-flex; flex-direction: row; justify-content: flex-start; }
  .rodape-marca .rodape-logo { min-height: 0; }
  .rodape-base { background-position: 20px 0; background-size: calc(100% - 40px) 1px; padding-left: 20px; padding-right: 20px; }
}

/* ============ PERGUNTAS FREQUENTES ANIMADAS (06/11/2026) ============ */
.perguntas-lista { display: grid; gap: 10px; }
.perguntas-lista details, .perguntas-lista details:first-child { border: 0; border-radius: 20px; background: var(--creme); }
.perguntas-lista details[open] { background: #FBE3C8; }
.perguntas-lista details.fechando { background: var(--creme); }
.perguntas-lista details { transition: background-color .3s ease; }
.anima .perguntas-lista details.revela { transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), background-color .3s ease; transition-delay: var(--atraso, 0s), var(--atraso, 0s), 0s; }
.perguntas-lista summary { padding: 16px 16px 16px 24px; border-radius: 20px; transition: color .15s; }
.perguntas-lista summary:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }
.perguntas-lista summary::after, .perguntas-lista details[open] summary::after { flex: 0 0 40px; width: 40px; height: 40px; margin: 0; border: 0; border-radius: 50%; background-color: var(--branco);
  background-image: linear-gradient(var(--tinta), var(--tinta)), linear-gradient(var(--tinta), var(--tinta)); background-size: 14px 2px, 2px 14px; background-position: center; background-repeat: no-repeat;
  transform: none; transition: transform .5s cubic-bezier(.34,1.56,.64,1), background-color .25s ease; }
.perguntas-lista details[open]:not(.fechando) summary::after { background-color: var(--laranja); transform: rotate(135deg); }
@media (hover: hover) {
  .perguntas-lista details:not([open]) summary:hover::after { transform: rotate(90deg) scale(1.08); }
}
.perguntas-lista details > div { padding: 0 72px 22px 24px; }
.perguntas-lista details p:last-child { margin-bottom: 0; }
@media (hover: none) { .perguntas-lista summary:hover { color: inherit; } }
@media (max-width: 991px) {
  .perguntas-lista summary { padding: 12px 12px 12px 20px; }
  .perguntas-lista details > div { padding: 0 20px 20px; }
}
@media (prefers-reduced-motion: reduce) { .perguntas-lista details, .perguntas-lista summary::after { transition: none !important; } }

/* ============ REVISÃO DO CELULAR (06/11/2026) ============ */
.onde-dica a, .hero-ligue a, .chamada-ligue a, .insta .sobrelinha a { display: inline-block; }
@media (max-width: 991px) {
  /* o iPhone dá zoom sozinho ao focar campos com letra menor que 16 px */
  .campo input, .campo select, .seletor-botao, .ficha textarea, .rodape-campo input { font-size: 16px; }
  .hero-ligue a, .chamada-ligue a, .onde-dica a { padding: 10px 2px; margin: -6px 0; }
  .insta .sobrelinha a { padding: 8px 0; }
  .orbita-aqui { font-size: 11px; }
}