/* Puppy's Medicina Veterinária — só o que é deste site (designer-1376, 15/11/2026).
   Tese: "a placa da rua". O arco azul do totem da fachada vira o recorte das fotos; a patinha em contorno
   do logo vira o grafismo; o tipo é o do logo (nome em peso forte, linha de apoio leve e minúscula). */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-VF-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --arco: 999px 999px var(--raio) var(--raio);
  --patinha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23B9DCA2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='50' r='7'/%3E%3Ccircle cx='33' cy='29' r='7.5'/%3E%3Ccircle cx='55' cy='21' r='7.5'/%3E%3Ccircle cx='75' cy='33' r='7'/%3E%3Cpath d='M52 88C31 75 28 53 42 49c8-2 12 3 12 8 2-7 10-12 18-6 12 9-2 28-20 37Z'/%3E%3C/svg%3E");
}

/* Tipo do logo: nome forte, apoio leve em minúsculas espaçadas ("medicina veterinária"). */
h1, h2, h3 { font-weight: 800; letter-spacing: -.03em; }
.sobretitulo { font-weight: 500; text-transform: lowercase; letter-spacing: .12em; font-size: var(--t-base); }
.topo__marca { font-weight: 800; letter-spacing: -.02em; color: var(--cor-acento); }
@media (max-width: 767px) { .topo__marca { font-size: var(--t-base); max-width: 9.5rem; line-height: 1.1; } }

/* Hero: a foto da fachada dentro do arco do totem, com o verde do logo por trás. */
.hero-1 h1 { font-size: clamp(3rem, 1.1rem + 6.6vw, 7.25rem); line-height: .98; }
.hero-1 .grade { align-items: center; }
.hero-1__texto { padding-bottom: 0; }
.hero-1__foto { grid-column: 8 / -1; margin-right: 0; border-radius: var(--arco); box-shadow: -1.25rem 1.25rem 0 var(--verde); }
@media (max-width: 767px) { .hero-1__foto { margin-left: 1.25rem; box-shadow: -1.25rem 1.25rem 0 var(--verde); } }

/* Serviços: faixa verde-clara das artes; número grande como na placa. */
.servicos-1 { background: var(--cor-fundo-alt); }
.servicos-1__lista li { grid-template-columns: 5rem 1fr; align-items: baseline; }
.servicos-1__n { font: 800 var(--t-lg)/1 var(--fonte-titulo); letter-spacing: -.03em; }
.servicos-1__lista h3 { font-size: var(--t-lg); }
.servicos-1__lista li:last-child { border-bottom: 1px solid var(--cor-linha); }

/* Momento tipográfico: a frase da clínica sobre o azul, com a patinha do logo em contorno. */
.sobre-2 { overflow: hidden; }
.sobre-2::after { content: ""; position: absolute; right: -4rem; bottom: -5rem; width: min(40vw, 34rem); aspect-ratio: 1; background: var(--patinha) center / contain no-repeat; opacity: .28; transform: rotate(-14deg); pointer-events: none; }
.sobre-2__grade { position: relative; z-index: 1; }
@media (max-width: 767px) { .sobre-2 { padding-bottom: 11rem; } .sobre-2::after { width: 12rem; right: -2rem; bottom: -2.5rem; } }
.sobre-2__frase { font-weight: 800; letter-spacing: -.035em; color: var(--verde); max-width: 14ch; }
.sobre-2__assinatura .moldura { background: #fff; }

/* Momento de destaque: fotos em arco e as orientações da clínica correndo na horizontal. */
/* O trilho alinha com o .conteiner nas duas pontas (o kit usa o recuo final como margem do fim da seção fixa),
   e o encaixe da rolagem lateral respeita o mesmo recuo. */
.cuidados .trilho { align-items: stretch; --recuo: max(var(--margem), (100% - var(--largura)) / 2); padding-inline: var(--recuo); scroll-padding-inline: var(--recuo); }
.cuidados .moldura { border-radius: var(--arco); }
.cuidado { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-4); border-radius: var(--raio); background: var(--cor-superficie); border: 1px solid var(--cor-linha); }
.cuidado h3 { font-size: var(--t-lg); line-height: 1.05; margin-bottom: var(--e-1); }
.cuidado ul { list-style: none; margin: 0; padding: 0; }
.cuidado li { padding-block: .7rem; border-top: 1px solid var(--cor-linha); }
.cuidado--verde { background: var(--cor-fundo-alt); border-color: transparent; }
.cuidado--azul { background: var(--cor-texto); color: var(--cor-fundo); border-color: transparent; --cor-linha: color-mix(in srgb, var(--cor-fundo) 24%, transparent); }
.cuidado--azul .sobretitulo { color: var(--verde); }
/* Seção fixa (≥ 900 px): cabe inteira na tela, abaixo do topo fixo, também em notebook de 768 px de altura. */
@media (min-width: 900px) {
  .cuidados { padding-block: 6.5rem 3rem; }
  .cuidados .galeria-1__cabeca { margin-bottom: var(--e-4); }
  .cuidados .trilho { height: min(32rem, calc(100svh - 20rem)); padding-bottom: 0; }
  .cuidados .trilho > * { flex: 0 0 auto; height: 100%; aspect-ratio: 4 / 5; }
  /* Cartão de texto: largura de leitura e altura do próprio conteúdo, alternando em cima e embaixo entre as fotos. */
  .cuidados .trilho > .cuidado { aspect-ratio: auto; width: 36rem; height: auto; max-height: 100%; padding: var(--e-3); align-self: flex-start; }
  .cuidados .trilho > .cuidado--verde, .cuidados .trilho > .cuidado--azul { align-self: flex-end; }
}

/* Fechamento: a patinha volta, discreta, sobre o azul do nome. */
.chamada-1 { position: relative; overflow: hidden; }
.chamada-1::after { content: ""; position: absolute; left: -3rem; top: -3rem; width: 16rem; aspect-ratio: 1; background: var(--patinha) center / contain no-repeat; opacity: .22; transform: rotate(18deg); pointer-events: none; }
.chamada-1__grade { position: relative; z-index: 1; }