/* Pet América — home. Só lê tokens.css: nenhum literal de cor, raio ou duração.
   Dial: variância 6 (assimetria de peso, foto que sangra), motion 2 (uma entrada, nada mais), densidade 3 (arejado).
   Cor 60/30/10: neutros quentes carregam a página; o verde vira botão e link, o vermelho só a loja; o único bloco cheio é o de diagnóstico e o rodapé.
   Reusa de components.css: .btn .link-arrow .panel--dark .index-list .editorial .status. */

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero { overflow-x: clip; padding-block: clamp(var(--spacing-32), 2rem + 3vw, var(--spacing-72)) var(--section-y); }
.hero__grid { display: grid; gap: var(--spacing-48) var(--spacing-64); align-items: end; }
.hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-24); animation: h-rise var(--dur-reveal) var(--ease-enter) both; }
.hero h1 { font-size: var(--text-display); max-width: 13ch; }
.hero .lead { max-width: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-16) var(--spacing-32); margin-top: var(--spacing-8); }
/* telefone de emergência: texto, não segundo botão. Vermelho de alerta só aqui. */
.hero__phone { display: inline-flex; flex-wrap: wrap; gap: var(--spacing-8); min-height: var(--control-height); align-items: center; color: var(--text-strong); font-weight: var(--weight-announce); text-decoration: none; }
.hero__phone .mono { color: var(--emergencia); }
.hero__phone:hover .mono { text-decoration: underline; text-underline-offset: 0.2em; }
/* a foto sangra pela borda direita da janela, a esquerda mantém o raio de imagem (13) */
.hero__media { margin: 0 calc(var(--gutter) * -1) 0 0; animation: h-fade var(--dur-hero) var(--ease-signature) both; animation-delay: var(--dur-stagger-block); }
.hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-image) 0 0 var(--radius-image); }
@keyframes h-rise { from { opacity: 0; transform: translateY(var(--spacing-12)); } }
@keyframes h-fade { from { opacity: 0; } }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 5fr 7fr; }
  .hero__media { margin-right: calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2 + var(--gutter))); }
  .hero__media img { aspect-ratio: 1 / 1; }
}

/* ── Dois cuidados: 7/5, a loja desce (peso desigual, mesmo sistema) ── */
.worlds { display: grid; gap: var(--spacing-64) var(--spacing-64); }
.world { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-16); }
.world__img { margin: 0 0 var(--spacing-8); width: 100%; }
.world__img img { width: 100%; height: auto; object-fit: cover; border-radius: var(--radius-image); }
.world h2 { font-size: var(--text-h2); }
.world p { max-width: 44ch; }
.world__cta { margin-top: var(--spacing-8); min-height: var(--control-height); font-size: var(--font-size-18); }
.world--clinica .world__img img { aspect-ratio: 6 / 5; }
.world--loja .world__img img { aspect-ratio: 1 / 1; }
@media (min-width: 900px) {
  .worlds { grid-template-columns: 7fr 5fr; align-items: start; }
  .world--loja { margin-top: var(--spacing-128); }
}

/* ── Especialidades ─────────────────────────────────────────────────── */
.spec__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-24); }
.spec__intro h2 { font-size: var(--text-h1); max-width: 14ch; }
.spec__list { margin-top: var(--spacing-8); }
@media (min-width: 900px) {
  .spec__intro { position: sticky; top: calc(var(--header-h) + var(--spacing-32)); }
}
@media (min-width: 1200px) {
  .spec__list { column-count: 2; column-gap: var(--spacing-32); }
  .spec__list li { break-inside: avoid; }
  .editorial:has(.spec__list) { grid-template-columns: 4fr 8fr; }
}

/* ── Diagnóstico em breve ───────────────────────────────────────────── */
.diag { --panel-pad: 0; display: grid; overflow: hidden; }
.diag__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-24); padding: clamp(var(--spacing-32), 1rem + 4vw, var(--spacing-72)); }
.diag h2 { font-size: var(--text-h2); max-width: 20ch; }
.diag p { max-width: 42ch; }
.diag__media { margin: 0; min-height: 240px; }
.diag__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .diag { grid-template-columns: 7fr 5fr; } }

/* ── História: só tipografia ────────────────────────────────────────── */
.story__title { font-size: var(--text-display); max-width: 16ch; }
.story__text { gap: var(--spacing-24); align-self: end; }
.story__text .lead { max-width: 44ch; }

/* ── Loja ───────────────────────────────────────────────────────────── */
.shop__head { display: grid; gap: var(--spacing-16) var(--spacing-64); margin-bottom: var(--spacing-48); align-items: end; }
.shop__head h2 { font-size: var(--text-h1); max-width: 14ch; }
.shop__head p { max-width: 46ch; }
@media (min-width: 900px) { .shop__head { grid-template-columns: 6fr 5fr; } }
.products { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-32) var(--spacing-16); margin: 0 0 var(--spacing-48); padding: 0; list-style: none; }
@media (min-width: 900px) { .products { grid-template-columns: repeat(4, 1fr); gap: var(--spacing-32) var(--spacing-24); } .prod:nth-child(even) { margin-top: var(--spacing-32); } }
.prod { position: relative; display: flex; flex-direction: column; gap: var(--spacing-4); }
.prod__img { display: grid; place-items: center; margin-bottom: var(--spacing-12); border-radius: var(--radius-image); background: var(--n-0); overflow: hidden; }
.prod__img img { width: 100%; height: auto; mix-blend-mode: multiply; transition: transform var(--dur-state) var(--ease-signature); }
.prod:hover .prod__img img, .prod:focus-within .prod__img img { transform: scale(1.04); }
.prod__brand { color: var(--text-muted); font-size: var(--font-size-13); }
.prod__name { font-size: var(--font-size-16); font-weight: var(--weight-emphasize); line-height: 1.35; letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prod__link { color: var(--text-strong); text-decoration: none; }
.prod__link::before { content: ""; position: absolute; inset: 0; }
.prod__link:hover { color: var(--acento); }
.prod__price { margin-top: var(--spacing-4); color: var(--acento); font-size: var(--font-size-18); font-weight: var(--weight-announce); }

/* ── Banho e tosa ───────────────────────────────────────────────────── */
.beauty { display: grid; gap: var(--spacing-32) var(--spacing-64); align-items: end; }
.beauty__media { margin: 0; }
.beauty__media img { width: 100%; height: auto; border-radius: var(--radius-image); }
.beauty__text h2 { font-size: var(--text-h1); }
.beauty__text > p:not(.small) { max-width: 40ch; }
@media (min-width: 900px) { .beauty { grid-template-columns: 7fr 4fr; } }

/* ── FAQ: linhas com fio, sem caixas ────────────────────────────────── */
.faq__list { border-top: 1px solid var(--border-strong); }
.faq__list details { border-bottom: 1px solid var(--border); }
.faq__list summary { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16); min-height: var(--control-height); padding-block: var(--spacing-20); color: var(--text-strong); font-size: var(--font-size-20); font-weight: var(--weight-emphasize); line-height: 1.3; letter-spacing: var(--track-heading); cursor: pointer; list-style: none; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: ""; flex: none; width: 14px; height: 14px; color: var(--acento); background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform var(--dur-state) var(--ease-transform); }
.faq__list details[open] summary::after { transform: rotate(45deg); }
.faq__list details p { padding-bottom: var(--spacing-24); max-width: 60ch; }

/* ── Como chegar ────────────────────────────────────────────────────── */
.visit__title { font-size: var(--text-h1); max-width: 18ch; margin-bottom: var(--spacing-48); }
.visit { display: grid; gap: var(--spacing-48) var(--spacing-64); }
.map { position: relative; display: grid; place-items: center; min-height: 320px; overflow: hidden; border-radius: var(--radius-image); background: var(--bg-panel); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__ask { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-16); max-width: 36ch; padding: var(--spacing-24); text-align: center; }
.visit__units { display: flex; flex-direction: column; }
.site-unit { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-8); padding-block: var(--spacing-24); border-bottom: 1px solid var(--border); }
.site-unit:first-child { padding-top: 0; }
.site-unit:last-child { border-bottom: 0; }
.site-unit h3 { font-size: var(--text-title); }
.site-unit address { font-style: normal; color: var(--text-strong); }
.site-unit .cluster { margin-top: var(--spacing-8); }
@media (min-width: 900px) { .visit { grid-template-columns: 7fr 5fr; } .map { min-height: 100%; } }
html:not(.js) [data-map-load] { display: none; }