/* ==========================================================================
   Quintal Pet 013 — Design System (fonte única de estilos)
   Todas as páginas do site carregam este arquivo. Editar aqui propaga
   automaticamente para o site inteiro — não existem mais blocos <style>
   duplicados por página. Ver DESIGN_SYSTEM.md para a documentação completa
   de cada token e componente.
   ========================================================================== */

/* ---------------------------------------------------------------------- *
 * 0. Fontes (hospedadas no próprio site desde a DS v18)
 *
 * Caprasimo e Figtree (licença SIL OFL 1.1), só o subconjunto latino, que
 * cobre o português. A Figtree é variável: um arquivo serve 400, 600 e 700.
 * As páginas fazem preload dos dois arquivos; com o arquivo no mesmo
 * servidor, o "optional" quase sempre chega a tempo já na primeira visita
 * (antes, vindo do Google com CSS assíncrono, o visitante novo via a fonte
 * do sistema). Quem nunca troca de fonte no meio da leitura: sem salto.
 * ---------------------------------------------------------------------- */
@font-face{
  font-family:"Caprasimo";font-style:normal;font-weight:400;font-display:optional;
  src:url("/assets/fonts/caprasimo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Figtree";font-style:normal;font-weight:400 700;font-display:optional;
  src:url("/assets/fonts/figtree-latin-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------------------------------------------------------------------- *
 * 1. Tokens
 *
 * Três camadas, de baixo para cima:
 *   --pal-{matiz}-{passo}     paleta: o ÚNICO lugar com valor hex. Nunca use direto num componente.
 *   --color-{papel}           papéis semânticos: é o que os componentes leem (fundo, texto, ação,
 *                             foco...). Trocar a aparência do site é trocar o que o papel aponta.
 *   --qp-* / --z-* / --dur-*  medidas, camadas e movimento.
 * Contrastes de cada par de cor: scripts/contraste.py.
 * ---------------------------------------------------------------------- */
:root{
  /* Paleta (hex só aqui) */
  --pal-sand-100:#f7efdb;       /* fundo */
  --pal-sand-200:#efe4cc;       /* superfície */
  --pal-cream-300:#f5ead8;      /* texto claro sobre verde-escuro */
  --pal-ink-900:#1f2c1a;        /* texto */
  --pal-ink-950:#16260f;        /* base das sombras */
  --pal-green-100:#e4efdf;
  --pal-green-500:#2c7a33;      /* verde de ação */
  --pal-green-600:#236627;
  --pal-green-700:#184a1c;
  --pal-green-800:#1c5220;      /* verde-escuro de texto e links */
  --pal-green-950:#123f18;      /* fundo do rodapé */
  --pal-orange-100:#fce7c4;
  --pal-orange-500:#f2810b;     /* terracota decorativo */
  --pal-ochre-700:#9a4e00;
  --pal-olive-100:#eef3dc;
  --pal-olive-500:#5f6f1c;
  --pal-olive-800:#39421a;
  --pal-white:#fff;
  --pal-whatsapp-500:#25D366;   /* cor de marca de terceiro */
  --pal-whatsapp-900:#08331b;

  /* Papéis — fundo e texto */
  --color-bg:var(--pal-sand-100);
  --color-surface:var(--pal-sand-200);
  --color-text:var(--pal-ink-900);
  --color-ink:var(--pal-ink-950);               /* base das sombras e overlays */

  /* Papéis — ação, foco e texto sobre ação */
  --color-primary:var(--pal-green-500);         /* a cor mais usada: CTAs, links, borda de controle */
  --color-primary-hover:var(--pal-green-600);   /* também o hover de texto sobre superfície */
  --color-primary-active:var(--pal-green-700);
  --color-on-action:var(--pal-white);           /* texto sobre --color-primary */
  --color-focus:var(--color-primary);           /* anel de foco */
  --color-focus-inverse:var(--color-footer-text);/* anel de foco sobre fundo escuro */
  --color-on-dark:var(--pal-white);             /* hover e foco sobre fundo escuro */

  /* Papéis — marca (verde) */
  --color-content-brand:var(--pal-green-800);   /* kicker, link padrão, texto de badge */
  --color-bg-brand-subtle:var(--pal-green-100); /* fundo de badge, ícone e item ativo */

  /* Papéis — terracota (voz 1: destaques pontuais) */
  --color-accent:var(--pal-orange-500);         /* estrelas de avaliação, ícone de chip */
  --color-content-warm:var(--pal-ochre-700);    /* ícone de chip */
  --color-tag-bg:var(--pal-orange-100);
  --color-tag-text:var(--pal-ochre-700);

  /* Papéis — sálvia (voz 2: institucional) */
  --color-bg-sage-subtle:var(--pal-olive-100);
  --color-content-sage:var(--pal-olive-500);
  --color-content-sage-strong:var(--pal-olive-800);

  /* Papéis — rodapé */
  --color-footer-bg:var(--pal-green-950);
  --color-footer-text:var(--pal-cream-300);

  /* Papéis — marcas de terceiros (fora do sistema de propósito) */
  --color-whatsapp:var(--pal-whatsapp-500);
  --color-whatsapp-text:var(--pal-whatsapp-900);

  --color-divider:color-mix(in srgb, var(--color-text) 16%, transparent);

  /* Tipografia */
  --font-heading:"Caprasimo",Georgia,serif;
  --font-body:"Figtree",system-ui,sans-serif;

  /* Tipografia — escala em rem (acompanha a fonte do navegador). Máximo de 12 tamanhos no site. */
  --text-xs:.75rem; --text-s:.875rem; --text-m:1rem; --text-l:1.125rem; --text-xl:1.25rem; --text-2xl:1.5rem;
  --text-h2:clamp(1.75rem,3.8vw,2.625rem);       --text-h2-home:clamp(1.875rem,4.4vw,3.125rem);
  --text-hero:clamp(2.125rem,5vw,3.625rem);      --text-hero-home:clamp(2.375rem,5.6vw,4.625rem);
  --text-lead:clamp(1rem,1.5vw,1.125rem);        --text-h2-prose:clamp(1.375rem,2.6vw,1.75rem);
  --leading-body:1.55;

  /* Espaçamento (raiz de 4,4px: desvio documentado do Base) */
  --space-1:4.4px; --space-2:8.8px; --space-3:13.2px;
  --space-4:17.6px; --space-6:26.4px; --space-8:35.2px;

  /* Raio */
  /* Raio pelo valor. Regra concêntrica: raio externo − padding = raio interno (ajuste o padding, não crie raio novo). */
  --radius-8:8px; --radius-12:12px; --radius-16:16px; --radius-24:24px; --radius-28:28px; --radius-full:999px; --radius-circle:50%;

  /* Sombra */
  --shadow-sm:0 1px 2px color-mix(in srgb, var(--color-ink) 14%, transparent);
  --shadow-md:0 3px 10px color-mix(in srgb, var(--color-ink) 15%, transparent);
  --shadow-lg:0 12px 32px color-mix(in srgb, var(--color-ink) 20%, transparent);
  --shadow-bar:0 10px 30px color-mix(in srgb, var(--color-ink) 18%, transparent);       /* barra inferior */
  --shadow-sheet:0 -12px 40px color-mix(in srgb, var(--color-ink) 25%, transparent);    /* folha "Mais" */
  --shadow-cta:0 2px 8px color-mix(in srgb, var(--color-primary) 28%, transparent);     /* só .btn-primary */
  --shadow-cta-hover:0 5px 16px color-mix(in srgb, var(--color-primary) 36%, transparent);
  --shadow-wa:0 0 0 5px var(--color-bg), 0 8px 20px color-mix(in srgb, var(--color-whatsapp) 45%, transparent); /* só o "Agendar" central */

  /* Camadas (o que cobre o quê). Tudo que é fixo fica entre --z-nav e --z-skip. */
  --z-nav:130;       /* barra do topo e barra inferior */
  --z-consent:140;   /* aviso de cookies, acima das barras */
  --z-skip:300;      /* "Pular para o conteúdo" */

  /* Movimento: curva e duração andam juntas */
  --ease-enter:cubic-bezier(.22,1,.36,1);       /* entradas e deslizes (identidade do site) */
  --ease-playful:cubic-bezier(.34,1.56,.64,1);  /* só momentos de marca (selo dos cards) */
  --dur-fast:.15s; --dur-base:.2s; --dur-mid:.28s; --dur-slow:.36s; --dur-enter:.55s;

  /* Layout */
  --qp-gutter:clamp(20px,5vw,72px);              /* margem lateral da página */
  --qp-stack-heading:clamp(28px,3.5vw,44px);     /* espaço depois de um título de seção */

  /* Shell de app — medidas das duas barras fixas. --qp-appbar-bottom é
     onde a barra do topo termina (distância do topo da tela); o hero e as
     âncoras usam esse valor para nunca nascerem escondidos atrás dela. */
  --qp-safe-t:env(safe-area-inset-top, 0px);
  --qp-safe-b:env(safe-area-inset-bottom, 0px);
  --qp-appbar-bottom:calc(76px + var(--qp-safe-t));
  --qp-tabbar-h:64px;
  --qp-tabbar-space:calc(var(--qp-tabbar-h) + 10px + var(--qp-safe-b));
}
@media (max-width:860px){
  :root{--qp-appbar-bottom:calc(64px + var(--qp-safe-t));}
}

/* ---------------------------------------------------------------------- *
 * 2. Reset e base
 * ---------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-padding-top:calc(var(--qp-appbar-bottom) + 16px);-webkit-tap-highlight-color:transparent;}
@media (max-width:860px){html{scroll-padding-bottom:calc(var(--qp-tabbar-space) + 12px);}}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:var(--text-m);line-height:var(--leading-body);}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:400;line-height:1.12;letter-spacing:-0.015em;margin:0;}
p{margin:0;}
a{color:var(--color-content-brand);text-underline-offset:3px;}
a:hover{color:var(--color-primary-hover);}
img{display:block;max-width:100%;}
figure{margin:0;}
:focus{outline:none;}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;}
::selection{background:color-mix(in srgb, var(--color-accent) 30%, transparent);}
.washed{filter:saturate(1.05) contrast(1.04) brightness(1.01);}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none!important;animation:none!important;}
}

/* ---------------------------------------------------------------------- *
 * 3. Botões, tags
 * ---------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;text-decoration:none;font-family:var(--font-heading);font-weight:400;font-size:var(--text-s);line-height:1.2;color:var(--color-text);background:transparent;border:1px solid transparent;padding:var(--space-2) calc(var(--space-3)*1.2);border-radius:var(--radius-full);}
.btn-primary{background:var(--color-primary);color:var(--color-on-action);}
.btn-primary:hover{background:var(--color-primary-hover);color:var(--color-on-action);}
.btn-primary:active{background:var(--color-primary-active);color:var(--color-on-action);}
.btn-secondary{border-color:var(--color-primary);color:var(--color-text);}
.btn-secondary:hover{background:color-mix(in srgb, var(--color-primary) 10%, transparent);color:var(--color-text);}
.qp-btn-lg{font-size:var(--text-m);padding:15px 30px;}

.tag{display:inline-flex;align-items:center;font-size:var(--text-xs);letter-spacing:0.02em;padding:3px 10px;border-radius:var(--radius-12);}
.tag-accent{background:var(--color-tag-bg);color:var(--color-tag-text);}

/* ---------------------------------------------------------------------- *
 * 4. Navegação — shell de app
 *
 * Duas barras fixas, sempre visíveis, com papéis diferentes:
 *
 *   TOPO (.qp-navbar)  identidade + menu. Logo leva ao início. No desktop
 *                      também leva os links das páginas e o CTA
 *                      "Agendar visita".
 *   BASE (.qp-tabbar)  só no celular/tablet (≤860px). Os destinos
 *                      principais e, no centro, o "Agendar" (WhatsApp),
 *                      na zona que o polegar alcança sem esticar a mão.
 *
 * O que não cabe na base (Recreação, Dúvidas, Cadastro, contato) vive no
 * "Mais" do topo, que abre uma folha que sobe de baixo (.qp-sheet, um
 * <dialog> nativo: foco preso, Esc e fundo escurecido vêm do navegador).
 *
 * As barras não somem ao rolar: a ação principal nunca fica a um gesto
 * de distância. Ao rolar, o topo só ganha sombra (.qp-scrolled).
 *
 * Importante: .qp-navbar (o elemento fixed) nunca leva transform, filter
 * ou backdrop-filter — o vidro fica numa camada decorativa separada
 * (.qp-navbar-glass). Assim nenhum descendente perde a referência do
 * viewport.
 * ---------------------------------------------------------------------- */
.nav-brand{font-family:var(--font-heading);font-weight:400;font-size:var(--text-l);}

.qp-navbar{
  position:fixed;top:calc(12px + var(--qp-safe-t));left:0;right:0;z-index:var(--z-nav);
  width:min(94%,1080px);margin-inline:auto;
  view-transition-name:qp-appbar;
}
.qp-navbar-glass{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:var(--radius-full);
  border:1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  background:color-mix(in srgb, var(--color-bg) 80%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:var(--shadow-md);
  transition:background-color var(--dur-mid) ease, box-shadow var(--dur-mid) ease;
}
.qp-navbar.qp-scrolled .qp-navbar-glass{
  background:color-mix(in srgb, var(--color-bg) 92%, transparent);
  box-shadow:var(--shadow-lg);
}
.qp-navbar-inner{display:flex;align-items:center;gap:var(--space-3);min-height:64px;padding:8px 10px 8px 14px;}

/* Marca: <a href="/"> nas páginas internas; <button> na home, onde o
   toque volta ao topo ou abre o logo em tamanho real (ver home). */
.qp-brand{
  display:inline-flex;align-items:center;gap:10px;margin-right:auto;min-height:44px;
  font-family:var(--font-heading);font-weight:400;font-size:var(--text-l);line-height:1;
  color:var(--color-text);text-decoration:none;
  background:none;border:0;padding:0;cursor:pointer;
}
.qp-brand:hover{color:var(--color-text);}
.qp-brand img{width:42px;height:42px;border-radius:var(--radius-circle);object-fit:cover;}

.qp-navlinks{position:relative;display:flex;gap:2px;align-items:center;}
.qp-navlinks a{position:relative;z-index:1;white-space:nowrap;font-size:var(--text-s);color:var(--color-text);text-decoration:none;padding:10px 14px;border-radius:var(--radius-full);transition:color var(--dur-fast) ease;}
.qp-navlinks a:hover{color:var(--color-primary);}
.qp-navlinks a[aria-current="page"]{color:var(--color-primary);font-weight:700;}

/* Pill que desliza atrás do link em hover/foco e fica parada atrás do
   link ativo. Posição e largura em site.js; a transição é só CSS. */
.qp-nav-highlight{
  position:absolute;top:0;left:0;height:100%;
  border-radius:var(--radius-full);
  background:color-mix(in srgb, var(--color-text) 8%, transparent);
  opacity:0;pointer-events:none;z-index:0;
  transition:transform var(--dur-mid) var(--ease-enter), width var(--dur-mid) var(--ease-enter), opacity var(--dur-base) ease;
}

.qp-navbar-cta{min-height:44px;padding-inline:18px;}
.qp-navbar-cta svg{flex:none;}

.qp-more-btn{
  display:none;place-content:center;flex:none;
  width:44px;height:44px;border-radius:var(--radius-circle);border:0;cursor:pointer;
  background:var(--color-surface);color:var(--color-text);
  transition:background-color var(--dur-base) ease, transform var(--dur-fast) ease;
}
.qp-more-btn:hover{background:color-mix(in srgb, var(--color-text) 10%, transparent);}
.qp-more-btn:active{transform:scale(.92);}

.qp-skip{position:absolute;left:12px;top:-64px;z-index:var(--z-skip);background:var(--color-primary);color:var(--color-on-action);padding:10px 18px;border-radius:var(--radius-full);font-family:var(--font-heading);text-decoration:none;transition:top var(--dur-base) ease;}
.qp-skip:focus{top:12px;color:var(--color-on-action);}

/* Espaço reservado para a barra do topo em todo hero. Seletor composto
   de propósito: .qp-section (declarada depois) redefine padding-block. */
.qp-section.qp-toppad{padding-top:calc(var(--qp-appbar-bottom) + clamp(28px,4vw,56px));}

/* Tablet em pé e desktop estreito: 5 links + CTA não cabem juntos. */
@media (max-width:1100px) and (min-width:861px){
  .qp-navlinks a{padding:10px 10px;font-size:var(--text-s);}
}

/* ---- Barra inferior (≤860px) ---- */
.qp-tabbar{display:none;}

@media (max-width:860px){
  .qp-navbar{top:calc(8px + var(--qp-safe-t));width:calc(100% - 20px);}
  .qp-navbar-inner{min-height:56px;padding:6px 6px 6px 10px;}
  .qp-brand{font-size:var(--text-l);}
  .qp-brand img{width:38px;height:38px;}
  .qp-navlinks,.qp-navbar-cta{display:none;}
  .qp-more-btn{display:grid;}

  .qp-tabbar{
    position:fixed;z-index:var(--z-nav);left:10px;right:10px;bottom:calc(10px + var(--qp-safe-b));
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    height:var(--qp-tabbar-h);padding:0 4px;
    border-radius:var(--radius-28);
    border:1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    background:color-mix(in srgb, var(--color-bg) 88%, transparent);
    -webkit-backdrop-filter:blur(16px) saturate(1.4);
    backdrop-filter:blur(16px) saturate(1.4);
    box-shadow:var(--shadow-bar);
    view-transition-name:qp-tabbar;
  }
  /* o rodapé termina acima da barra, nunca embaixo dela */
  .qp-footer{padding-bottom:var(--qp-tabbar-space);}
}

.qp-tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-width:0;height:100%;padding:6px 0 8px;
  color:color-mix(in srgb, var(--color-text) 70%, transparent);text-decoration:none;
}
.qp-tab:hover{color:var(--color-text);}
.qp-tab-ico{
  display:grid;place-content:center;width:52px;height:30px;border-radius:var(--radius-full);
  transition:background-color var(--dur-base) ease, transform var(--dur-fast) ease;
}
.qp-tab-ico svg{width:22px;height:22px;}
/* exceção ao piso de 12px (documentada em Desvios do Base): 5 rótulos de até 11 caracteres precisam caber em 1/5 da barra a 320px */
.qp-tab-label{font-size:11px;font-weight:600;line-height:1;white-space:nowrap;}
.qp-tab[aria-current="page"]{color:var(--color-primary);}
.qp-tab[aria-current="page"] .qp-tab-ico{background:var(--color-bg-brand-subtle);}
.qp-tab[aria-current="page"] .qp-tab-label{font-weight:700;}
.qp-tab:active .qp-tab-ico{transform:scale(.9);}

/* Ação central: o agendamento pelo WhatsApp, destacado e elevado. O anel
   da cor do fundo separa o círculo da barra sem precisar de borda. */
.qp-tab--cta{color:var(--color-text);}
.qp-tab--cta:hover{color:var(--color-text);}
.qp-tab--cta .qp-tab-ico{
  width:56px;height:56px;margin-top:-28px;border-radius:var(--radius-circle);
  background:var(--color-whatsapp);color:var(--color-whatsapp-text);
  box-shadow:var(--shadow-wa);
}
.qp-tab--cta .qp-tab-ico svg{width:28px;height:28px;}
.qp-tab--cta .qp-tab-label{font-weight:700;}

@media (max-width:360px){
  .qp-tab-label{font-size:10px;}
  .qp-tab-ico{width:44px;}
}

/* ---- Folha "Mais" (<dialog class="qp-sheet">) ---- */
.qp-sheet{
  position:fixed;inset:auto 0 0 0;margin:0 auto;padding:0;border:0;
  width:min(100%,560px);max-width:100%;max-height:none;
  background:transparent;color:var(--color-text);overflow:visible;
}
/* cor literal (= --color-ink a 45%): ::backdrop não herda custom
   properties em navegadores anteriores a 2024 */
.qp-sheet::backdrop{background:rgba(22,38,15,.45);}
.qp-sheet-panel{
  max-height:min(86vh,760px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--color-bg);
  border-radius:var(--radius-28) var(--radius-28) 0 0;
  padding:6px 16px calc(20px + var(--qp-safe-b));
  box-shadow:var(--shadow-sheet);
}
.qp-sheet[open] .qp-sheet-panel{animation:qp-sheet-in var(--dur-slow) var(--ease-enter);}
.qp-sheet[open]::backdrop{animation:qp-fade-in var(--dur-mid) ease;}
.qp-sheet.qp-closing .qp-sheet-panel{animation:qp-sheet-out var(--dur-base) ease forwards;}
.qp-sheet.qp-closing::backdrop{animation:qp-fade-out var(--dur-base) ease forwards;}
@keyframes qp-sheet-in{from{transform:translateY(100%);}to{transform:none;}}
@keyframes qp-sheet-out{from{transform:var(--qp-drag, none);}to{transform:translateY(100%);}}
@keyframes qp-fade-in{from{opacity:0;}to{opacity:1;}}
@keyframes qp-fade-out{from{opacity:1;}to{opacity:0;}}

/* Área de arrasto: puxar a alça ou o título para baixo fecha a folha,
   como numa folha nativa do iOS/Android. */
.qp-sheet-drag{touch-action:none;cursor:grab;padding-bottom:6px;-webkit-user-select:none;user-select:none;}
.qp-sheet-grip{width:40px;height:5px;border-radius:var(--radius-full);margin:6px auto 12px;background:color-mix(in srgb, var(--color-text) 22%, transparent);}
.qp-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 2px;}
.qp-sheet-head h2{font-size:var(--text-2xl);}
.qp-sheet-head p{font-size:var(--text-s);color:color-mix(in srgb, var(--color-text) 66%, transparent);margin-top:4px;}
.qp-sheet-close{
  display:grid;place-content:center;flex:none;width:48px;height:48px;border-radius:var(--radius-circle);
  border:0;cursor:pointer;background:var(--color-surface);color:var(--color-text);
}
.qp-sheet-close:active{transform:scale(.92);}
.qp-sheet-group{margin:18px 4px 8px;font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-content-brand);}
.qp-sheet-list{list-style:none;margin:0;padding:0;background:var(--color-surface);border-radius:var(--radius-16);overflow:hidden;}
.qp-sheet-list li + li{border-top:1px solid var(--color-divider);}
.qp-sheet-list a{
  display:grid;grid-template-columns:40px 1fr 18px;align-items:center;gap:12px;
  min-height:62px;padding:10px 12px 10px 12px;
  color:var(--color-text);text-decoration:none;
  transition:background-color var(--dur-fast) ease;
}
.qp-sheet-list a:hover{color:var(--color-text);background:color-mix(in srgb, var(--color-text) 5%, transparent);}
.qp-sheet-list a:active{background:color-mix(in srgb, var(--color-text) 9%, transparent);}
.qp-sheet-list b{display:block;font-size:var(--text-m);font-weight:700;line-height:1.3;}
.qp-sheet-list small{display:block;margin-top:2px;font-size:var(--text-s);line-height:1.35;color:color-mix(in srgb, var(--color-text) 72%, transparent);}
.qp-sheet-ico{display:grid;place-content:center;width:40px;height:40px;border-radius:var(--radius-12);background:var(--color-bg-brand-subtle);color:var(--color-content-brand);}
.qp-sheet-ico--wa{background:var(--color-whatsapp);color:var(--color-whatsapp-text);}
.qp-sheet-chev{color:color-mix(in srgb, var(--color-text) 58%, transparent);}
html.qp-sheet-open{overflow:hidden;}

/* ---- Transição entre páginas ----
   Navegação entre páginas com fade curto, como a troca de tela de um
   app. As duas barras têm nome próprio e ficam paradas durante a troca.
   Navegadores sem suporte simplesmente trocam de página como sempre. */
@view-transition{navigation:auto;}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--dur-base);}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none;}
}

/* ---------------------------------------------------------------------- *
 * 5. Layout, grid e tipografia de seção
 * ---------------------------------------------------------------------- */
.qp-wrap{max-width:1200px;margin:0 auto;padding-inline:var(--qp-gutter);}
.qp-section{padding-block:clamp(48px,7vw,88px);}
.qp-kicker{display:inline-block;font-size:var(--text-s);letter-spacing:0.14em;text-transform:uppercase;font-weight:700;color:var(--color-content-brand);margin:0 0 var(--space-3);}
.qp-h2{font-family:var(--font-heading);font-weight:400;font-size:var(--text-h2);line-height:1.1;letter-spacing:-0.02em;margin:0;max-width:26ch;}
.qp-lead{font-size:var(--text-lead);line-height:1.7;max-width:72ch;color:color-mix(in srgb, var(--color-text) 90%, transparent);margin:var(--space-4) 0 0;}
.qp-hero-title{font-family:var(--font-heading);font-weight:400;font-size:var(--text-hero);line-height:1.06;letter-spacing:-0.025em;margin:0;}

.qp-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,1.8vw,24px);}
.qp-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px);}
.qp-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,24px);}
/* Três serviços (home): no tablet continuam em três colunas, sem card sozinho na segunda linha. */
@media (min-width:621px) and (max-width:940px){.qp-grid-3.qp-shelf--3{grid-template-columns:repeat(3,1fr);}}
.qp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px);}
.qp-crosslinks{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:640px;}

.qp-hero{display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(32px,5vw,72px);align-items:center;}
.qp-split{display:grid;grid-template-columns:0.95fr 1.05fr;gap:clamp(32px,5vw,80px);align-items:center;}
.qp-cta-row{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6);}

.qp-fig{border-radius:var(--radius-28);overflow:hidden;box-shadow:var(--shadow-lg);}
.qp-fig img{display:block;width:100%;height:100%;object-fit:cover;}
.qp-fig picture{display:block;width:100%;height:100%;}
/* Retrato no desktop, faixa 16:10 no mobile (media query abaixo). Ficava
   inline no HTML, e style inline vence qualquer media query: no celular a
   foto ocupava 419px e empurrava o "Agendar visita" para fora da tela. */
.qp-hero .qp-fig{aspect-ratio:4/5;}
.qp-split .qp-fig{aspect-ratio:5/4;}

@media (max-width:940px){
  .qp-hero{grid-template-columns:1fr;}
  .qp-hero .qp-fig{order:-1;aspect-ratio:16/10;}
  .qp-hero .qp-fig img{object-position:50% 60%;}
  .qp-split{grid-template-columns:1fr;}
  .qp-split .qp-fig{aspect-ratio:16/10;}
  .qp-grid-2,.qp-grid-3,.qp-steps,.qp-crosslinks{grid-template-columns:repeat(2,1fr);}
  .qp-grid-4{grid-template-columns:repeat(2,1fr);}
  .qp-loc{grid-template-columns:1fr;}
}
@media (max-width:620px){
  .qp-grid-2,.qp-grid-3,.qp-steps,.qp-crosslinks{grid-template-columns:1fr;}
  .qp-grid-4{grid-template-columns:1fr;}
}

/* ---------------------------------------------------------------------- *
 * 6. Cards, badges, selos de confiança
 * ---------------------------------------------------------------------- */
.qp-card{display:flex;flex-direction:column;gap:var(--space-2);padding:clamp(20px,2.2vw,28px);background:var(--color-surface);border-radius:var(--radius-28);box-shadow:var(--shadow-sm);}
.qp-card h3{font-family:var(--font-heading);font-weight:400;font-size:var(--text-xl);line-height:1.15;margin:0;}
.qp-card p{font-size:var(--text-m);line-height:1.65;margin:0;color:color-mix(in srgb, var(--color-text) 78%, transparent);}
.qp-cardlink{margin-top:auto;padding-top:4px;font-family:var(--font-heading);font-weight:400;font-size:var(--text-m);color:var(--color-content-brand);text-decoration:none;display:inline-flex;align-items:center;gap:5px;}
.qp-cardlink:hover{color:var(--color-primary-hover);}

/* Card com mídia — a foto fica SEMPRE visível no topo, com o conteúdo e
   as ações logo abaixo (padrão de card de app: Airbnb, iFood). A foto é
   um <img> de verdade: tem alt, carrega sob demanda (loading="lazy") e é
   indexada pelo Google — nada disso era possível com a foto em
   background-image. Quando o título tem link, o card inteiro vira área
   de toque (o ::after do link cobre o card); links no texto e o CTA
   ficam acima dessa camada e continuam clicáveis por conta própria.

     <article class="qp-card qp-card--media">
       <div class="qp-card-media"><img src="…" alt="…" loading="lazy" …></div>
       <div class="qp-card-body">
         <div class="qp-badge">…</div>            (opcional)
         <h3><a href="/pagina/">Título</a></h3>   (link opcional)
         <p>…</p>
         <a class="qp-cardlink" href="…">…</a>    (opcional)
       </div>
     </article>

   Enquadramento: as fotos são retrato e o recorte é paisagem, então cada
   <img> pode trazer object-position inline com o ponto de interesse. */
.qp-card--media{--qp-card-pad:clamp(18px,2vw,24px);position:relative;isolation:isolate;padding:0;gap:0;overflow:hidden;}
.qp-card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--color-bg-sage-subtle);}
.qp-grid-2 .qp-card-media{aspect-ratio:16/10;}
.qp-card-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-enter) var(--ease-enter);}
.qp-card-body{display:flex;flex-direction:column;gap:var(--space-2);flex:1;padding:var(--qp-card-pad);}
/* ícone "encaixado" na borda da foto, com anel da cor do card */
.qp-card--media .qp-badge{position:relative;z-index:2;margin:calc(-26px - var(--qp-card-pad)) 0 var(--space-1);box-shadow:0 0 0 4px var(--color-surface);}
body.qp-home .qp-card--media .qp-badge{margin-top:calc(-29px - var(--qp-card-pad));}
.qp-card--media h3 a{color:inherit;text-decoration:none;}
.qp-card--media h3 a::after{content:"";position:absolute;inset:0;z-index:1;}
.qp-card--media h3 a:focus-visible{outline:none;}
.qp-card--media:has(h3 a:focus-visible){outline:2px solid var(--color-focus);outline-offset:3px;}
.qp-card--media .qp-cardlink,.qp-card--media p a{position:relative;z-index:2;}
.qp-card--media:has(h3 a){cursor:pointer;}
.qp-card--media:has(h3 a):active{transform:scale(.985);}
@media (hover:hover){
  .qp-card--media:hover .qp-card-media img{transform:scale(1.05);}
  .qp-card--media:has(h3 a):hover h3{color:var(--color-primary-hover);}
}

/* Prateleira: no celular, um grupo de cards vira uma fileira com rolagem
   lateral e o próximo card aparecendo pela borda (convite a deslizar). */
@media (max-width:620px){
  .qp-grid-4.qp-shelf,.qp-grid-3.qp-shelf{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;
    gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin-inline:calc(-1 * var(--qp-gutter));
    padding:4px var(--qp-gutter) 18px;
    scroll-padding-inline:var(--qp-gutter);
    scrollbar-width:none;
  }
  .qp-shelf::-webkit-scrollbar{display:none;}
  .qp-shelf > *{scroll-snap-align:start;}
}

.qp-badge{width:52px;height:52px;border-radius:var(--radius-circle);display:grid;place-content:center;background:var(--color-bg-brand-subtle);flex:none;}
.qp-badge svg{color:var(--color-content-brand);}
.qp-badge.sage{background:var(--color-bg-sage-subtle);}
.qp-badge.sage svg{color:var(--color-content-sage);}


.qp-diff{display:flex;gap:var(--space-4);align-items:flex-start;}
.qp-diff h3{font-family:var(--font-heading);font-weight:400;font-size:var(--text-xl);margin:0 0 6px;line-height:1.15;}
.qp-diff p{font-size:var(--text-s);line-height:1.6;margin:0;color:color-mix(in srgb, var(--color-text) 76%, transparent);}

.qp-step h3{font-family:var(--font-heading);font-weight:400;font-size:var(--text-xl);margin:0 0 8px;}
.qp-step p{font-size:var(--text-m);line-height:1.65;margin:0;color:color-mix(in srgb, var(--color-text) 78%, transparent);}
.qp-stepnum{font-family:var(--font-heading);font-size:var(--text-xl);width:52px;height:52px;border-radius:var(--radius-circle);display:grid;place-content:center;background:var(--color-primary);color:var(--color-on-action);margin-bottom:var(--space-3);}

/* ---------------------------------------------------------------------- *
 * 7. Conteúdo institucional (avisos, tabelas, listas)
 * ---------------------------------------------------------------------- */
.qp-aviso{background:var(--color-bg-brand-subtle);border:1px solid color-mix(in srgb, var(--color-content-brand) 30%, transparent);border-radius:var(--radius-16);padding:.9rem 1.1rem;font-size:var(--text-s);line-height:1.6;margin-top:var(--space-4);max-width:72ch;}
/* Variantes por significado (nunca só por cor: cada uma leva ícone). No máximo um
   aviso por seção; aviso estático não usa role="alert". */
.qp-aviso--alerta{display:flex;align-items:flex-start;gap:var(--space-3);background:var(--color-tag-bg);border-color:color-mix(in srgb, var(--color-content-warm) 45%, transparent);}
.qp-aviso-ico{flex:none;margin-top:2px;color:var(--color-content-warm);}
.qp-table{border-collapse:collapse;width:100%;background:var(--color-surface);border-radius:var(--radius-16);overflow:hidden;}
.qp-table th,.qp-table td{border-bottom:1px solid var(--color-divider);padding:.6rem .8rem;text-align:left;font-size:var(--text-s);}
.qp-table th{font-family:var(--font-heading);font-weight:400;color:var(--color-content-brand);}
.qp-table tr:last-child td{border-bottom:0;}
.qp-kv{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.qp-kv li{font-size:var(--text-s);line-height:1.6;}
.qp-bridge{font-size:var(--text-s);color:var(--color-content-sage-strong);font-style:italic;margin-top:var(--space-4);}
.qp-sep{border:none;border-top:1px solid var(--color-divider);margin:0;}

.qp-crosslink{display:block;padding:16px 18px;background:var(--color-surface);border-radius:var(--radius-16);text-decoration:none;box-shadow:var(--shadow-sm);}
.qp-crosslink b{display:block;font-family:var(--font-heading);font-weight:400;font-size:var(--text-l);color:var(--color-text);margin-bottom:4px;}
.qp-crosslink span{font-size:var(--text-s);color:color-mix(in srgb, var(--color-text) 72%, transparent);}

.qp-panel{background:var(--color-bg-sage-subtle);border-radius:var(--radius-28);padding:clamp(32px,4.5vw,64px);text-align:center;}
.qp-loc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;}
.qp-map{border:0;width:100%;aspect-ratio:16/11;border-radius:var(--radius-28);box-shadow:var(--shadow-md);}

/* ---------------------------------------------------------------------- *
 * 8. FAQ
 * ---------------------------------------------------------------------- */
.qp-faq{max-width:820px;margin:0 auto;}
.qp-faq details{border-bottom:1px solid var(--color-divider);}
.qp-faq summary{cursor:pointer;list-style:none;padding:var(--space-4) 0;font-family:var(--font-heading);font-weight:400;font-size:var(--text-xl);line-height:1.3;display:flex;justify-content:space-between;gap:20px;align-items:center;}
.qp-faq summary::-webkit-details-marker{display:none;}
/* Indicadores: "›" leva a outra página, "⌄" abre aqui, "↗" sai do site. O
   "+" laranja tinha 2,31:1 contra o fundo; o chevron usa accent-700 (8,05:1). */
.qp-faq summary::after{content:"";flex:none;width:9px;height:9px;margin:-5px 6px 0 0;border-right:2.5px solid var(--color-content-brand);border-bottom:2.5px solid var(--color-content-brand);transform:rotate(45deg);transition:transform var(--dur-base) ease, margin var(--dur-base) ease;}
.qp-faq details[open] summary::after{transform:rotate(225deg);margin-top:3px;}
.qp-faq details p{margin:0 0 var(--space-4);font-size:var(--text-m);line-height:1.7;color:color-mix(in srgb, var(--color-text) 80%, transparent);max-width:68ch;}
.qp-faq-catlabel{font-family:var(--font-heading);font-weight:400;font-size:var(--text-l);line-height:1.55;letter-spacing:normal;color:var(--color-content-brand);margin:var(--space-6) 0 var(--space-2);}
.qp-faq-catlabel:first-child{margin-top:0;}

/* ---------------------------------------------------------------------- *
 * 9. Depoimentos e carrossel
 * ---------------------------------------------------------------------- */
.qp-quote{padding:clamp(26px,3vw,38px);background:var(--color-surface);border-radius:var(--radius-28);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:var(--space-4);}
.qp-quote blockquote{font-family:var(--font-heading);font-weight:400;font-size:var(--text-xl);line-height:1.4;margin:0;letter-spacing:-0.01em;}
.qp-quote figcaption{font-size:var(--text-s);font-weight:600;color:var(--color-content-sage-strong);}
.qp-quote figcaption a{color:inherit;text-decoration:none;}
.qp-quote figcaption a:hover{text-decoration:underline;}
.qp-quote-author{display:flex;align-items:center;gap:12px;}
.qp-avatar{width:48px;height:48px;border-radius:var(--radius-circle);overflow:hidden;flex:none;box-shadow:var(--shadow-sm);}
.qp-avatar img{width:100%;height:100%;object-fit:cover;}
.qp-stars{color:var(--color-accent);letter-spacing:3px;font-size:var(--text-m);}
.qp-quote-text{overflow:hidden;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;}
.qp-quote-text.qp-expanded{-webkit-line-clamp:unset;display:block;}
.qp-quote-text p{margin:0 0 .6em;}
.qp-quote-text p:last-child{margin-bottom:0;}
.qp-readmore{align-self:flex-start;background:none;border:0;padding:0;margin-top:-6px;font-family:var(--font-body);font-weight:700;font-size:var(--text-s);color:var(--color-content-brand);cursor:pointer;text-decoration:underline;}

.qp-carousel-wrap{position:relative;margin-top:var(--qp-stack-heading);}
.qp-carousel{display:flex;gap:clamp(16px,2vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 20px;-webkit-overflow-scrolling:touch;}
.qp-carousel .qp-quote{scroll-snap-align:start;flex:0 0 clamp(260px,80vw,340px);}
.qp-carousel-nav{display:flex;gap:10px;justify-content:center;margin-top:var(--space-3);}
.qp-carousel-btn{width:40px;height:40px;border-radius:var(--radius-circle);border:1px solid var(--color-divider);background:var(--color-surface);display:grid;place-content:center;cursor:pointer;color:var(--color-text);}
.qp-carousel-btn:hover{background:var(--color-bg-brand-subtle);}
.qp-carousel-btn:disabled{opacity:0.35;cursor:default;}
@media (max-width:620px){.qp-carousel-nav{display:none;}}
/* Legenda do carrossel (DS v22): quantos depoimentos há e de onde vêm. */
.qp-carousel-note{margin:var(--space-3) auto 0;max-width:60ch;text-align:center;font-size:var(--text-s);color:color-mix(in srgb, var(--color-text) 70%, transparent);}

/* ---------------------------------------------------------------------- *
 * 10. Lightbox
 * ---------------------------------------------------------------------- */
/* <dialog class="qp-lightbox">: o navegador prende o foco, fecha com Esc e
   devolve o foco ao botão que abriu. Fechar também por toque no fundo e
   pelo botão visível (.qp-lightbox-close, 48px). Regra para todo modal do
   site: <dialog>, nome acessível, botão "Fechar" e foco de volta. */
.qp-lightbox{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:24px;border:0;background:transparent;color:var(--color-text);cursor:zoom-out;}
.qp-lightbox[open]{display:flex;align-items:center;justify-content:center;}
/* literal: ::backdrop não herda custom properties em navegadores antigos */
.qp-lightbox::backdrop{background:rgba(22,38,15,.84);}
.qp-lightbox img{max-width:min(92vw,560px);max-height:88vh;width:auto;height:auto;border-radius:var(--radius-24);box-shadow:var(--shadow-lg);cursor:default;}
.qp-lightbox-close{position:absolute;top:calc(16px + var(--qp-safe-t));right:16px;display:grid;place-content:center;width:48px;height:48px;border:0;border-radius:var(--radius-circle);background:var(--color-bg);color:var(--color-text);box-shadow:var(--shadow-md);cursor:pointer;}
.qp-lightbox :focus-visible{outline-color:var(--color-on-dark);}

/* ---------------------------------------------------------------------- *
 * 11. Rodapé
 * ---------------------------------------------------------------------- */
.qp-footer{background:var(--color-footer-bg);color:color-mix(in srgb, var(--color-footer-text) 82%, transparent);}
.qp-footer a{color:color-mix(in srgb, var(--color-footer-text) 92%, transparent);text-decoration:none;}
.qp-footer a:hover{color:var(--color-on-dark);}
/* o anel verde padrão some no fundo verde-escuro (2,25:1); no rodapé o anel
   usa a cor clara do texto (mais de 10:1) */
.qp-footer :focus-visible{outline-color:var(--color-focus-inverse);}
.qp-footer-grid{display:flex;flex-wrap:wrap;gap:var(--space-6);justify-content:space-between;align-items:flex-start;}


/* ---------------------------------------------------------------------- *
 * 12. Escala "display" da home
 * A home é a página de maior intenção editorial (flagship): tipografia,
 * espaçamento e componentes ligeiramente maiores que o padrão das páginas
 * internas. Antes esse era um desalinhamento acidental (CSS duplicado
 * divergindo aos poucos) — agora é uma variação intencional de 2 níveis
 * do mesmo sistema, ativada só pela classe .qp-home no <body>.
 * ---------------------------------------------------------------------- */
body.qp-home .qp-section{padding-block:clamp(56px,8vw,104px);}
/* o hero da home continua reservando o espaço da barra do topo */
body.qp-home .qp-section.qp-toppad{padding-top:calc(var(--qp-appbar-bottom) + clamp(28px,4vw,56px));}
body.qp-home .qp-h2{font-size:var(--text-h2-home);line-height:1.08;max-width:20ch;}
body.qp-home .qp-lead{max-width:60ch;}
body.qp-home .qp-hero-title{font-size:var(--text-hero-home);line-height:1.04;}
body.qp-home .qp-card{gap:var(--space-3);padding:clamp(22px,2.4vw,32px);}
body.qp-home .qp-card--media{--qp-card-pad:clamp(20px,2.2vw,28px);padding:0;gap:0;}
body.qp-home .qp-card--media .qp-card-body{gap:var(--space-3);}
body.qp-home .qp-card h3{font-size:var(--text-2xl);}
body.qp-home .qp-badge{width:58px;height:58px;}
body.qp-home .qp-panel{padding:clamp(36px,5vw,72px);}
body.qp-home .qp-carousel-wrap{margin-top:clamp(32px,4vw,52px);}
body.qp-home .qp-faq summary{font-size:var(--text-xl);}

/* ---------------------------------------------------------------------- *
 * 13. Micro-interações
 * Camada puramente aditiva. Duas garantias de segurança:
 *  1. O bloco @media (prefers-reduced-motion:reduce) do §2 usa !important
 *     e desliga tudo daqui para quem pediu menos movimento no sistema.
 *  2. Nada aqui esconde conteúdo sem que exista JS para revelá-lo — o
 *     estado inicial invisível da revelação ao rolar vive atrás de .qp-js,
 *     classe escrita por um script inline no <head>.
 * ---------------------------------------------------------------------- */

/* Botões — resposta tátil. O :active com scale dá a sensação de "afundar"
   que o dedo espera no mobile, e que o site não tinha. */
.btn{transition:background-color var(--dur-base) ease, border-color var(--dur-base) ease, color var(--dur-base) ease, transform var(--dur-fast) ease, box-shadow var(--dur-base) ease;}
.btn-primary{box-shadow:var(--shadow-cta);}
.btn-primary:hover{box-shadow:var(--shadow-cta-hover);}
.btn:active{transform:scale(.97);}

/* Cards — elevação no hover. Sob @media (hover:hover) para não "grudar"
   o estado de hover no toque depois do tap. */
.qp-card,.qp-crosslink{transition:transform var(--dur-mid) var(--ease-enter), box-shadow var(--dur-mid) ease;}
@media (hover:hover){
  .qp-card:hover,.qp-crosslink:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
  .qp-card:hover .qp-cardlink{color:var(--color-primary-hover);}
}
.qp-cardlink{transition:color var(--dur-base) ease;}

/* Fotos — zoom lento dentro do recorte arredondado da figure. */
.qp-fig img{transition:transform var(--dur-enter) var(--ease-enter);}
@media (hover:hover){.qp-fig:hover img{transform:scale(1.04);}}

/* Ícones — reagem junto com o card, reforçando que o bloco é uma unidade
   clicável só. */
.qp-badge,.qp-stepnum{transition:transform var(--dur-mid) var(--ease-playful);}
@media (hover:hover){
  .qp-card:hover .qp-badge{transform:scale(1.08) rotate(-4deg);}
  .qp-step:hover .qp-stepnum{transform:scale(1.06);}
}

/* FAQ — a resposta desliza em vez de aparecer seca. */
.qp-faq summary{transition:color var(--dur-base) ease;}
.qp-faq summary:hover{color:var(--color-primary);}
.qp-faq details[open] > p{animation:qp-faq-open var(--dur-mid) ease both;}
@keyframes qp-faq-open{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

/* Revelação ao rolar. O site.js só marca com .qp-reveal as seções que
   nascem ABAIXO da dobra, então nada que já está na tela no primeiro
   quadro é escondido — sem risco de piscada no topo. */
.qp-js .qp-reveal{opacity:0;transform:translateY(16px);}
.qp-js .qp-reveal.qp-in{opacity:1;transform:none;transition:opacity var(--dur-enter) ease, transform var(--dur-enter) var(--ease-enter);}

/* Links dentro de texto corrido — sublinhados em repouso (só a cor não
   distingue o link do parágrafo) e mais grossos no hover. */
.qp-lead a,.qp-faq p a,.qp-card p a{text-decoration:underline;text-decoration-thickness:1px;transition:text-decoration-thickness var(--dur-fast) ease, color var(--dur-base) ease;}
.qp-lead a:hover,.qp-faq p a:hover,.qp-card p a:hover{text-decoration-thickness:2px;}

/* Alvos de toque no mobile: 44x44 é o mínimo confortável para o dedo
   (WCAG 2.5.5 e Apple HIG). Auditoria encontrou 49 alvos abaixo disso —
   inclusive o "Agendar visita" da navbar, com 36px de altura, que é o
   botão de maior valor do site. */
@media (max-width:860px){
  .qp-cardlink{min-height:44px;align-items:center;}
  .qp-carousel-btn{width:44px;height:44px;}
  .qp-readmore{min-height:44px;display:inline-flex;align-items:center;}
}
@media (max-width:620px){
  .qp-footer-grid a{display:inline-flex;align-items:center;min-height:44px;}
}
/* O display do bloco acima anulava o atributo [hidden]: no celular o "Ler
   mais" aparecia em todos os depoimentos, inclusive nos curtos. */
.qp-readmore[hidden]{display:none;}

/* ---------------------------------------------------------------------- *
 * 14. Utilitário: texto só para leitor de tela
 * ---------------------------------------------------------------------- */
.qp-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;white-space:nowrap;clip-path:inset(50%);border:0;
}

/* ---------------------------------------------------------------------- *
 * 15. Pré-requisitos antes da vaga — divulgação progressiva
 *
 * Fica dentro do painel final de CTA (.qp-panel), entre o texto e o botão
 * do WhatsApp: é o último momento antes de o tutor pedir a vaga, e o erro
 * mais comum nessa hora é chegar à visita sem a carteira de vacinação ou
 * com o antipulgas vencido. O <summary> já diz o essencial fechado
 * ("vacinas, antipulgas e uma conversa sobre o seu pet"); aberto, mostra
 * os detalhes. Conteúdo só com fatos que o site já afirma em outras
 * seções — nada de exigência nova inventada aqui.
 *
 *   <details class="qp-prereq">
 *     <summary>Antes da vaga: …</summary>
 *     <ul><li><svg…/><span>…</span></li>…</ul>
 *     <p>Conferimos tudo pessoalmente na visita…</p>
 *   </details>
 * ---------------------------------------------------------------------- */
.qp-prereq{max-width:560px;margin:var(--space-6) auto 0;text-align:left;background:var(--color-bg);border-radius:var(--radius-16);box-shadow:var(--shadow-sm);}
.qp-prereq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:12px 18px;font-weight:700;font-size:var(--text-m);line-height:1.4;color:var(--color-text);border-radius:var(--radius-16);}
.qp-prereq summary::-webkit-details-marker{display:none;}
.qp-prereq summary::after{content:"";flex:none;width:9px;height:9px;margin:-5px 6px 0 0;border-right:2.5px solid var(--color-content-brand);border-bottom:2.5px solid var(--color-content-brand);transform:rotate(45deg);transition:transform var(--dur-base) ease, margin var(--dur-base) ease;}
.qp-prereq[open] summary::after{transform:rotate(225deg);margin-top:3px;}
.qp-prereq summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;}
.qp-prereq ul{list-style:none;margin:0;padding:2px 18px 4px;display:grid;gap:12px;}
.qp-prereq li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-size:var(--text-s);line-height:1.55;color:color-mix(in srgb, var(--color-text) 88%, transparent);}
.qp-prereq li svg{margin-top:2px;color:var(--color-primary);}
.qp-prereq li b{color:var(--color-text);}
.qp-prereq p{margin:0;padding:12px 18px 16px;font-size:var(--text-s);line-height:1.55;color:color-mix(in srgb, var(--color-text) 72%, transparent);}
.qp-prereq[open] ul{animation:qp-faq-open var(--dur-mid) ease both;}

/* ---------------------------------------------------------------------- *
 * 16. Índice da página ("Nesta página") — só no /informacoes/
 *
 * O /informacoes/ é longo e tinha 9 âncoras dentro da navbar: no desktop
 * a navbar quebrava em duas linhas (133px de altura, cobrindo o título) e
 * era a única página sem os links de Hospedagem, Creche e Transporte. A
 * navbar voltou a ser a mesma do site inteiro; as âncoras vieram para
 * este índice logo abaixo do título. No celular vira uma faixa com
 * rolagem lateral em vez de empilhar 9 linhas.
 * ---------------------------------------------------------------------- */
.qp-toc{margin-top:var(--space-6);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;}
.qp-toc-label{flex:none;white-space:nowrap;font-size:var(--text-s);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-content-brand);margin-right:4px;}
.qp-toc a{flex:none;}
.qp-toc a{display:inline-flex;align-items:center;min-height:48px;padding:8px 14px;border-radius:var(--radius-full);background:var(--color-surface);color:var(--color-text);font-size:var(--text-s);font-weight:600;text-decoration:none;white-space:nowrap;transition:background-color var(--dur-base) ease, color var(--dur-base) ease;}
.qp-toc a:hover{background:var(--color-bg-brand-subtle);color:var(--color-primary-hover);}
.qp-toc a:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;}
@media (max-width:620px){
  .qp-toc{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--qp-gutter));padding-inline:var(--qp-gutter);-webkit-mask-image:linear-gradient(90deg,black 88%,transparent);mask-image:linear-gradient(90deg,black 88%,transparent);}
  .qp-toc::-webkit-scrollbar{display:none;}
  .qp-toc a{min-height:48px;}
}

/* ---------------------------------------------------------------------- *
 * 17. Privacidade — aviso de cookies e página de política
 *
 * O aviso (.qp-consent) é criado pelo site.js só quando o visitante ainda
 * não escolheu. Não é modal: não prende o foco nem tapa o WhatsApp para
 * sempre. "Aceitar" e "Recusar" têm o MESMO peso visual de propósito:
 * recusar tem de ser tão fácil quanto aceitar (LGPD, consentimento livre).
 * No celular fica acima da barra inferior e do círculo do WhatsApp.
 * ---------------------------------------------------------------------- */
.qp-consent{position:fixed;z-index:var(--z-consent);left:12px;right:12px;bottom:calc(12px + var(--qp-safe-b));max-width:640px;margin-inline:auto;display:grid;gap:var(--space-3);padding:16px 18px;background:var(--color-bg);border:1px solid var(--color-divider);border-radius:var(--radius-16);box-shadow:var(--shadow-lg);animation:qp-consent-in var(--dur-slow) var(--ease-enter);}
.qp-consent-title{font-family:var(--font-heading);font-size:var(--text-l);line-height:1.2;margin:0;}
.qp-consent p{margin:0;font-size:var(--text-s);line-height:1.55;}
.qp-consent-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.qp-consent-actions .btn{flex:1 1 140px;min-height:48px;}
@media (max-width:860px){.qp-consent{bottom:calc(var(--qp-tabbar-space) + 36px);}}
@keyframes qp-consent-in{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* Texto corrido longo (política de privacidade) */
.qp-prose > *{max-width:70ch;}
.qp-section.qp-prose{padding-top:0;}
.qp-prose h2{font-size:var(--text-h2-prose);line-height:1.15;margin:var(--space-8) 0 var(--space-3);}
.qp-prose h3{font-size:var(--text-xl);margin:var(--space-6) 0 var(--space-2);}
.qp-prose p,.qp-prose li{font-size:var(--text-m);line-height:1.7;}
.qp-prose p{margin:var(--space-3) 0 0;}
.qp-prose ul{margin:var(--space-3) 0 0;padding-left:1.2em;display:grid;gap:var(--space-2);}
.qp-prose .qp-tablewrap{overflow-x:auto;margin-top:var(--space-4);}
.qp-prose .btn{margin-top:var(--space-3);}

/* ---------------------------------------------------------------------- *
 * 18. Blocos e utilitários extraídos do HTML
 *
 * Antes eram atributos style="" repetidos nas páginas (o rodapé sozinho
 * levava 12 por página). Ficam no fim do arquivo de propósito: têm a mesma
 * especificidade de .qp-h2, .qp-lead etc. e precisam vencer no empate.
 * Estilo inline só sobrevive para dado de uma única foto (object-position).
 * ---------------------------------------------------------------------- */

/* Rodapé — marca, colunas e texto. Cor via --color-footer-text. */
.qp-footer-inner{padding-block:clamp(40px,5vw,64px);}
.qp-footer-about{max-width:32ch;}
.qp-footer-brand{font-size:var(--text-2xl);color:var(--color-footer-text);display:inline-flex;align-items:center;gap:10px;}
.qp-footer-logo{width:44px;height:44px;border-radius:var(--radius-circle);object-fit:cover;}
.qp-footer-title{font-family:var(--font-heading);font-weight:400;font-size:var(--text-m);color:var(--color-footer-text);margin:0 0 var(--space-3);}
.qp-footer-text{margin:var(--space-3) 0 0;font-size:var(--text-s);line-height:1.65;}
.qp-footer-text--flush{margin:0;}
.qp-footer-list{display:flex;flex-direction:column;gap:10px;font-size:var(--text-s);}
.qp-footer-copy{margin:var(--space-8) 0 0;font-size:var(--text-s);opacity:0.75;}

/* Cabeçalho de seção e espaçamentos */
.qp-sechead{text-align:center;margin-bottom:clamp(28px,3vw,44px);}
.qp-mx-auto{margin-inline:auto;}
.qp-center{text-align:center;}
.qp-mt-0{margin-top:0;}
.qp-mt-3{margin-top:var(--space-3);}
.qp-mt-4{margin-top:var(--space-4);}
.qp-mt-6{margin-top:var(--space-6);}
.qp-mb-3{margin-bottom:var(--space-3);}
.qp-mt-sm{margin-top:clamp(24px,3vw,36px);}
.qp-mt-grid{margin-top:clamp(20px,2.4vw,30px);}
.qp-mt-heading{margin-top:var(--qp-stack-heading);}
.qp-mt-heading-lg{margin-top:clamp(32px,4vw,52px);}
.qp-stack-grid{display:grid;gap:clamp(20px,2.4vw,30px);}
.qp-scroll-x{overflow-x:auto;}
.qp-text-s{font-size:var(--text-s);}
.qp-seeall{text-align:center;margin-top:var(--space-6);}
.qp-list-indent{margin-top:var(--space-4);padding-left:1.2em;}
.qp-bg-surface{background:var(--color-surface);}
.qp-section--card{background:var(--color-surface);border-radius:var(--radius-28);}

/* Largura máxima de títulos e blocos */
.qp-mw-17{max-width:17ch;}
.qp-mw-18{max-width:18ch;}
.qp-mw-19{max-width:19ch;}
.qp-mw-20{max-width:20ch;}
.qp-mw-640{max-width:640px;}
.qp-mw-none{max-width:none;}

/* Títulos menores */
.qp-h2--s{font-size:var(--text-2xl);}
.qp-h2--m{font-size:var(--text-2xl);}
.qp-h3-label{font-size:var(--text-xl);color:var(--color-content-brand);margin-bottom:6px;}

/* Linha de botões centralizada (variante de .qp-cta-row) */
.qp-cta-row--center{justify-content:center;}

/* Selo "5,0 · Avaliações verificadas no Google" */
.qp-rating{display:inline-flex;align-items:center;gap:12px;margin-top:var(--space-4);padding:10px 18px;background:var(--color-surface);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);}
.qp-rating-score{font-family:var(--font-heading);font-size:var(--text-l);line-height:1;}
.qp-rating-note{font-size:var(--text-s);font-weight:600;color:color-mix(in srgb, var(--color-text) 70%, transparent);}

/* Fachada do mapa (vira iframe no toque, via site.js) */
.qp-map-facade{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--color-surface);cursor:pointer;text-align:center;padding:24px;}
.qp-map-title{font-family:var(--font-heading);font-size:var(--text-xl);color:var(--color-text);}
.qp-map-sub{font-size:var(--text-s);color:color-mix(in srgb, var(--color-text) 70%, transparent);}

/* ---------------------------------------------------------------------- *
 * 19. Fase 4 — "você está aqui" sem depender de cor, CTAs no celular, paisagem
 * ---------------------------------------------------------------------- */

/* Aba atual: forma (traço mais grosso e pílula atrás) + peso do rótulo, além da cor. */
.qp-tab[aria-current="page"] .qp-tab-ico svg{stroke-width:2.75;}

/* Linha atual da folha "Mais": check no lugar da seta + fundo sutil + título já em negrito. */
.qp-sheet-list a[aria-current="page"]{background:color-mix(in srgb, var(--color-content-brand) 8%, transparent);}
.qp-sheet-list a[aria-current="page"] .qp-sheet-chev{color:var(--color-content-brand);}
.qp-sheet-list a[aria-current="page"] .qp-sheet-chev svg{display:none;}
.qp-sheet-list a[aria-current="page"] .qp-sheet-chev::before{content:"";display:block;width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center/contain no-repeat;}

/* Celular: botões de uma linha de CTA empilham, na mesma largura (alvo grande; o primário vem primeiro). */
@media (max-width:620px){
  .qp-cta-row{flex-direction:column;align-items:stretch;}
  .qp-cta-row .btn{width:100%;}
}

/* Celular na horizontal: a barra inferior come menos da tela curta. */
@media (max-height:420px) and (orientation:landscape) and (max-width:900px){
  :root{--qp-tabbar-h:52px;}
  .qp-tab--cta .qp-tab-ico{margin-top:-16px;}
}

/* Índice da página: o item selecionado não fica colado na borda ao rolar. */
.qp-toc{scroll-padding-inline:var(--qp-gutter);}

/* ---------------------------------------------------------------------- *
 * 20. Conversão na home (DS v19) — prova social no primeiro quadro
 * ---------------------------------------------------------------------- */

/* Selo "5,0 no Google" sobre a foto do hero: a nota aparece antes de rolar
   (no celular, 77% dos visitantes não chegavam aos depoimentos). É link para
   #depoimentos; fica acima do zoom da foto no hover. */
.qp-hero-fig{position:relative;}
.qp-hero-proof{
  position:absolute;left:12px;bottom:12px;z-index:1;
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;
  background:var(--color-bg);color:var(--color-text);text-decoration:none;
  font-size:var(--text-s);font-weight:600;line-height:1;
  border-radius:var(--radius-full);box-shadow:var(--shadow-md);
}
.qp-hero-proof-score{font-family:var(--font-heading);font-weight:400;font-size:var(--text-m);}
.qp-hero-proof .qp-stars{font-size:var(--text-s);letter-spacing:1px;}
.qp-hero-proof:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;}
@media (hover:hover){.qp-hero-proof:hover{background:var(--color-surface);}}