/* Pet América — componentes compartilhados por TODAS as páginas.
   Regra: cor vem de --acento (mundo), raio de --radius-* por profundidade, tempo de --dur-*.
   Nenhum literal de cor/raio/duração aqui. Transição sempre nomeia a propriedade. */

/* ── Skip link ──────────────────────────────────────────────────────── */
.skip-link { position: absolute; left: var(--spacing-16); top: var(--spacing-8); z-index: var(--z-skip); padding: var(--spacing-12) var(--spacing-20); border-radius: var(--radius-full); background: var(--n-900); color: var(--n-0); font-weight: var(--weight-announce); text-decoration: none; transform: translateY(-200%); transition: transform var(--dur-micro) var(--ease-enter); }
.skip-link:focus { transform: none; color: var(--n-0); outline-color: var(--n-0); }

/* ── Botões ─────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--acento); --btn-fg: var(--acento-contraste); --btn-bd: var(--btn-bg);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-10);
  min-height: var(--control-height); padding: 0 var(--spacing-24);
  border: var(--stroke-medium) solid var(--btn-bd); border-radius: var(--radius-control);
  background: var(--btn-bg); color: var(--btn-fg);
  font: var(--weight-announce) var(--font-size-16)/1 var(--sans);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-signature), border-color var(--dur-micro) var(--ease-signature), color var(--dur-micro) var(--ease-signature), transform var(--dur-micro) var(--ease-signature);
}
.btn:hover { --btn-bg: var(--btn-bg-hover, var(--acento-forte)); --btn-bd: var(--btn-bd-hover, var(--btn-bg)); color: var(--btn-fg-hover, var(--btn-fg)); text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn i { font-size: var(--icon-inline); line-height: 1; }
.btn--lg { min-height: var(--control-height-lg); padding-inline: var(--spacing-28); font-size: var(--font-size-18); }
.btn--block { width: 100%; }
/* secundário: contorno do mundo */
.btn--secondary { --btn-bg: transparent; --btn-fg: var(--acento); --btn-bd: var(--acento); --btn-bg-hover: var(--acento-suave); --btn-bd-hover: var(--acento-forte); --btn-fg-hover: var(--acento-forte); }
/* emergência: único uso do vermelho de alerta em ação */
.btn--emergency { --btn-bg: transparent; --btn-fg: var(--emergencia); --btn-bd: var(--emergencia); --btn-bg-hover: var(--emergencia); --btn-bd-hover: var(--emergencia); --btn-fg-hover: var(--n-0); }
/* sobre fundo escuro */
.btn--light { --btn-bg: var(--n-0); --btn-fg: var(--verde-900); --btn-bg-hover: var(--verde-100); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: var(--n-0); --btn-bd: var(--on-dark-border); --btn-bg-hover: transparent; --btn-bd-hover: var(--n-0); }

/* terciário: link com seta que desliza */
.link-arrow { display: inline-flex; align-items: center; gap: var(--spacing-8); font-weight: var(--weight-announce); text-decoration: none; }
.link-arrow i { transition: transform var(--dur-state) var(--ease-signature); }
.link-arrow:hover i { transform: translateX(5px); }

/* ── Header ─────────────────────────────────────────────────────────── */
/* Quatro links, um telefone, um botão. O header é sempre do mundo clínica (CTA verde); a loja ganha o logo vermelho via data-mundo. */
.site-header {
  --acento: var(--verde-700); --acento-forte: var(--verde-800); --acento-suave: var(--verde-50); --acento-marca: var(--verde-600);
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--material-thick); -webkit-backdrop-filter: var(--material-thick-backdrop); backdrop-filter: var(--material-thick-backdrop);
  box-shadow: inset 0 -1px 0 transparent; transition: box-shadow var(--dur-state) var(--ease-signature);
}
.site-header[data-scrolled] { box-shadow: inset 0 -1px 0 var(--material-separator); }
.site-header__bar { display: flex; align-items: center; gap: var(--spacing-12); min-height: var(--header-h-mobile); }
.brand { display: flex; flex: none; margin-right: auto; border-radius: var(--radius-control); }
.brand img { height: 30px; width: auto; }
/* logo por mundo: vermelho na loja/estética, verde no resto (sem JS, sem layout shift) */
.brand__img--vermelho { display: none; }
html[data-mundo="loja"] .brand__img--verde, body[data-mundo="loja"] .brand__img--verde { display: none; }
html[data-mundo="loja"] .brand__img--vermelho, body[data-mundo="loja"] .brand__img--vermelho { display: block; }
.site-header__actions { display: flex; align-items: center; gap: var(--spacing-8); }
.site-header__cta { display: none; }

.header-emergency { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-8); min-width: var(--control-height); min-height: var(--control-height); padding: 0 var(--spacing-8); border-radius: var(--radius-control); color: var(--emergencia); font-size: var(--font-size-14); font-weight: var(--weight-announce); text-decoration: none; }
.header-emergency:hover { color: var(--emergencia); background: color-mix(in srgb, var(--emergencia) 8%, transparent); }
.header-emergency i { font-size: var(--font-size-24); line-height: 1; }
.header-emergency__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.header-emergency__num { display: none; }

.nav-toggle { display: none; min-width: var(--control-height); min-height: var(--control-height); place-items: center; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-strong); font-size: var(--font-size-28); line-height: 1; }
.js .nav-toggle { display: grid; }
.nav-toggle .ri-close-line, .nav-toggle[aria-expanded="true"] .ri-menu-line { display: none; }
.nav-toggle[aria-expanded="true"] .ri-close-line { display: block; }

/* Nav: painel de tela cheia no mobile (colapsa só com JS; sem JS fica empilhado e visível) */
.nav { flex-basis: 100%; order: 10; display: flex; flex-direction: column; gap: var(--spacing-32); padding: var(--spacing-8) 0 var(--spacing-24); }
.js .nav { position: fixed; inset: var(--header-h-mobile) 0 0 0; z-index: var(--z-header); overflow-y: auto; padding: var(--spacing-24) var(--gutter) var(--spacing-32); background: var(--bg-app); opacity: 0; visibility: hidden; transform: translateY(calc(var(--spacing-8) * -1)); transition: opacity var(--dur-state) var(--ease-enter), transform var(--dur-state) var(--ease-enter), visibility var(--dur-state) linear; }
.js .nav[data-open] { opacity: 1; visibility: visible; transform: none; }
.site-header:has(.nav[data-open]) { z-index: var(--z-menu); background: var(--bg-app); -webkit-backdrop-filter: none; backdrop-filter: none; }

.nav__list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.nav__link { position: relative; display: flex; align-items: center; min-height: var(--control-height); padding-block: var(--spacing-12); border-bottom: 1px solid var(--border); color: var(--text-strong); font-size: var(--font-size-28); font-weight: var(--weight-display); letter-spacing: var(--track-heading); text-decoration: none; }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--acento); }
.nav__mobile-actions { display: grid; gap: var(--spacing-12); }

@media (min-width: 640px) {
  .site-header__cta { display: inline-flex; }
  .brand img { height: 34px; }
}
@media (min-width: 960px) {
  .site-header__bar { min-height: var(--header-h); gap: var(--spacing-48); }
  .nav-toggle, .js .nav-toggle { display: none; }
  .nav, .js .nav { position: static; flex: 1 1 auto; order: 1; flex-direction: row; align-items: center; gap: 0; padding: 0; overflow: visible; background: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .brand { margin-right: 0; }
  .nav__mobile-actions { display: none; }
  .nav__list { flex-direction: row; align-items: center; gap: var(--spacing-32); }
  .nav__link { min-height: var(--control-height); padding-block: 0; border-bottom: 0; font-size: var(--font-size-16); font-weight: var(--weight-emphasize); letter-spacing: 0; white-space: nowrap; }
  /* sublinhado que cresce da esquerda: só transform */
  .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; border-radius: var(--radius-full); background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-state) var(--ease-signature); }
  .nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .site-header__actions { order: 2; margin-left: auto; gap: var(--spacing-16); }
  .header-emergency__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .header-emergency { padding: 0 var(--spacing-12); }
  .header-emergency i { display: none; }
}
@media (min-width: 1200px) {
  .header-emergency__num { display: inline; }
}

/* ── Card, painel, ícone ────────────────────────────────────────────── */
/* Card em repouso: só borda. Hover: sobe 2px e a sombra entra por opacidade (sem animar box-shadow). */
.card { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--spacing-12); padding: var(--card-pad); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg); }
.card > img, .card__media { border-radius: var(--radius-card-inner); }
.card__media { overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card--link { transition: transform var(--dur-state) var(--ease-signature); }
.card--link::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--shadow-sm); opacity: 0; transition: opacity var(--dur-state) var(--ease-signature); }
.card--link:hover, .card--link:focus-within { transform: translateY(-2px); }
.card--link:hover::after, .card--link:focus-within::after { opacity: 1; }
/* link esticado: o título é o alvo, o card inteiro clica */
.card__link { color: inherit; text-decoration: none; }
.card__link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.panel { --panel-pad: var(--spacing-32); padding: var(--panel-pad); border-radius: var(--radius-panel); background: var(--bg-panel); }
.panel--dark { background: var(--verde-900); color: var(--verde-100); }
.panel--dark :where(h1, h2, h3, h4) { color: var(--n-0); }
.on-dark, [data-tone="dark"] { color: var(--verde-100); }
.on-dark a:not(.btn), [data-tone="dark"] a:not(.btn) { color: inherit; }

/* ícone solto ao lado do texto; nunca dentro de círculo em cima do título */
.icon-chip { display: inline-flex; flex: none; color: var(--acento-marca); font-size: var(--font-size-28); line-height: 1; }

/* ── Chips / tabs (filtros) ─────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: var(--spacing-8); }
.chip, .tab { position: relative; display: inline-flex; align-items: center; gap: var(--spacing-8); min-height: 36px; padding: 0 var(--spacing-16); border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: transparent; color: var(--text-strong); font-size: var(--font-size-14); font-weight: var(--weight-emphasize); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-signature), color var(--dur-micro) var(--ease-signature), border-color var(--dur-micro) var(--ease-signature); }
.chip::before, .tab::before { content: ""; position: absolute; inset: -4px 0; } /* alvo de toque 44px sem inchar o visual */
.chip:hover, .tab:hover { border-color: var(--acento); color: var(--acento); }
.chip[aria-pressed="true"], .tab[aria-selected="true"], .chip.is-active { background: var(--acento); border-color: var(--acento); color: var(--acento-contraste); }
.tabs { display: flex; flex-wrap: wrap; gap: var(--spacing-8); }

/* ── Selos ──────────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: var(--spacing-8); min-height: 32px; padding: 0 var(--spacing-12); border-radius: var(--radius-full); background: var(--acento-suave); color: var(--acento); font-size: var(--font-size-14); font-weight: var(--weight-announce); line-height: 1; }
.badge--soon { background: var(--alerta); color: var(--n-900); }
/* "aberto agora": ponto com pulso em loop (único keyframe autônomo do site) */
.status-open::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--sucesso); box-shadow: 0 0 0 0 color-mix(in srgb, var(--sucesso) 50%, transparent); animation: pulso var(--dur-loop) var(--ease-signature) infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sucesso) 50%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }

/* ── Cabeçalho de página padrão ─────────────────────────────────────── */
/* breadcrumb → H1 → lead → 1 CTA, foto à direita (7/5) ou em cima no mobile.
   Fundo neutro quente com um fio embaixo; o mundo aparece só no acento (link, botão). */
.page-header { background: var(--bg-app); box-shadow: inset 0 -1px 0 var(--border); padding-block: clamp(var(--spacing-32), 2rem + 3vw, var(--spacing-72)); }
.page-header__grid { display: grid; gap: var(--spacing-32) var(--spacing-64); align-items: center; }
.page-header__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-24); }
.page-header__text h1 { font-size: var(--text-display); }
.page-header__media { position: relative; order: -1; margin: 0; }
.page-header__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-image); }
.page-header__media .badge { position: absolute; left: var(--spacing-16); top: var(--spacing-16); background: var(--n-0); box-shadow: var(--shadow-sm); }
@media (min-width: 900px) {
  .page-header__grid { grid-template-columns: 7fr 5fr; }
  .page-header__media { order: 0; }
  .page-header__media img { aspect-ratio: 5 / 4; }
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--spacing-4) var(--spacing-8); margin: 0; padding: 0; list-style: none; font-size: var(--font-size-14); color: var(--text-muted); }
.breadcrumb li + li::before { content: "/" / ""; margin-right: var(--spacing-8); color: var(--border-strong); }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--acento); }
.breadcrumb [aria-current] { color: var(--text-strong); }
/* rótulo em caixa alta: uso RARO (no máximo 1-2 no site inteiro). Hierarquia nasce de tipo e espaço. */
.eyebrow { font-size: var(--font-size-13); font-weight: var(--weight-announce); line-height: 1.2; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--acento); }

/* Trecho corrido com rosto humano: título grande à esquerda, texto na coluna direita (usa em qualquer página) */
.editorial { display: grid; gap: var(--spacing-24) var(--spacing-64); }
@media (min-width: 900px) { .editorial { grid-template-columns: 5fr 6fr; align-items: start; } .editorial--flip { grid-template-columns: 6fr 5fr; } }
/* foto grande com legenda em mono (dado exato: endereço, ano) */
.figure { margin: 0; }
.figure img { width: 100%; height: auto; border-radius: var(--radius-image); }
.figure figcaption { margin-top: var(--spacing-12); color: var(--text-muted); font-size: var(--font-size-14); line-height: 1.4; }
/* linha de lista com fio: nome à esquerda, seta que desliza à direita */
.index-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-strong); }
.index-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16); min-height: var(--control-height); padding-block: var(--spacing-12); border-bottom: 1px solid var(--border); color: var(--text-strong); font-size: var(--font-size-20); font-weight: var(--weight-emphasize); letter-spacing: var(--track-heading); text-decoration: none; }
.index-list a i { color: var(--text-muted); transition: transform var(--dur-state) var(--ease-signature), color var(--dur-state) var(--ease-signature); }
.index-list a:hover { color: var(--acento); }
.index-list a:hover i { color: var(--acento); transform: translateX(5px); }
/* "aberto agora": ponto de status + texto, sem pílula */
.status { display: inline-flex; align-items: center; gap: var(--spacing-8); color: var(--text-strong); font-size: var(--font-size-14); font-weight: var(--weight-emphasize); }

/* ── Rodapé ─────────────────────────────────────────────────────────── */
/* Fechamento escuro (o único bloco de cor cheia da página). Assinatura: o logotipo gigante, cortado pela borda inferior. */
.site-footer { position: relative; overflow: hidden; background: var(--verde-900); color: var(--verde-100); font-size: var(--font-size-16); line-height: 1.6; }
.site-footer a { color: inherit; text-decoration-color: transparent; }
.site-footer a:hover { color: var(--n-0); text-decoration-color: currentColor; }
.site-footer :focus-visible { outline-color: var(--n-0); }
.site-footer__inner { display: flex; flex-direction: column; gap: var(--spacing-64); padding-block: var(--spacing-96) var(--spacing-32); }
.site-footer__brand p { max-width: 24ch; color: var(--n-0); font-size: var(--text-h2); font-weight: var(--weight-display); line-height: var(--leading-heading); letter-spacing: var(--track-heading); text-wrap: balance; }
.site-footer__cols { display: grid; gap: var(--spacing-48) var(--spacing-32); grid-template-columns: 1fr 1fr; }
.site-footer__col h2 { margin-bottom: var(--spacing-12); color: var(--verde-200); font-size: var(--font-size-14); font-weight: var(--weight-announce); letter-spacing: 0; }
.site-footer__col ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.site-footer__col li a { display: inline-block; padding-block: var(--spacing-4); }
.site-footer__col--wide { grid-column: 1 / -1; }
.unit { display: flex; flex-direction: column; gap: var(--spacing-2); margin: 0 0 var(--spacing-20); font-style: normal; }
.unit strong { color: var(--n-0); font-weight: var(--weight-announce); }
.unit__hours { color: var(--verde-200); font-size: var(--font-size-14); }
.contact-list { display: flex; flex-direction: column; gap: var(--spacing-4); margin: 0; padding: 0; list-style: none; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--spacing-8) var(--spacing-24); padding-top: var(--spacing-24); box-shadow: inset 0 1px 0 var(--on-dark-line); color: var(--verde-200); font-size: var(--font-size-14); }
.site-footer__legal p { max-width: 72ch; }
.site-footer__mark { display: block; overflow: hidden; width: calc(100% - var(--gutter) * 2); max-width: 1180px; aspect-ratio: 293 / 34; margin: 0 auto; opacity: 0.1; pointer-events: none; user-select: none; }
.site-footer__mark img { width: 100%; height: auto; }
.link-button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: transparent; cursor: pointer; }
.link-button:hover { color: var(--n-0); text-decoration-color: currentColor; }
@media (min-width: 900px) {
  .site-footer__cols { grid-template-columns: 1fr 1fr 1fr 1.8fr; }
  .site-footer__col--wide { grid-column: auto; }
}

/* ── Flutuantes: WhatsApp e barra de cookies ────────────────────────── */
.wa-float { position: fixed; right: var(--spacing-16); bottom: calc(var(--spacing-16) + var(--cookie-h, 0px)); z-index: var(--z-float); display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--whatsapp); color: var(--verde-900); font-size: var(--font-size-28); line-height: 1; text-decoration: none; box-shadow: var(--shadow-md); transition: transform var(--dur-state) var(--ease-signature); }
.wa-float:hover { color: var(--verde-900); transform: scale(1.06); }
.wa-float:focus-visible { outline-color: var(--verde-900); outline-offset: 4px; }
@media (min-width: 900px) { .wa-float { right: var(--spacing-24); bottom: calc(var(--spacing-24) + var(--cookie-h, 0px)); } }

/* Barra discreta no rodapé, nunca bloqueia o conteúdo (SPEC §2/§7.6) */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-cookie); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-12) var(--spacing-24); min-height: 64px; padding: var(--spacing-12) var(--gutter); background: var(--n-0); box-shadow: inset 0 1px 0 var(--border), var(--shadow-lg); font-size: var(--font-size-14); line-height: 1.5; transform: translateY(0); transition: transform var(--dur-state) var(--ease-enter); }
.cookie-bar[data-leaving] { transform: translateY(100%); }
.cookie-bar p { flex: 1 1 320px; max-width: 72ch; }
.cookie-bar .btn { --acento: var(--verde-700); --acento-forte: var(--verde-800); --acento-suave: var(--verde-50); }
body.has-cookie-bar { padding-bottom: var(--cookie-h, 0px); }