/* Canil 2S Beagle · site.css
   1 tokens · 2 reset · 3 base · 4 layout · 5 componentes · 6 utilitários · 7 media queries */

@view-transition { navigation: auto; }

/* 1. TOKENS ------------------------------------------------------------- */
:root {
  /* Paleta do logo IMG_2099 (L e C medidos, matiz do plano) */
  --cal: oklch(0.965 0.009 115);
  --capim: oklch(0.915 0.022 118);
  --musgo: oklch(0.43 0.055 132);
  --musgo-fundo: oklch(0.26 0.035 135);
  --tinta: oklch(0.48 0.03 132);
  --mostarda: oklch(0.80 0.123 96);
  /* Derivados, mesmo matiz */
  --mostarda-clara: oklch(0.86 0.105 96);
  --mostarda-borda: oklch(0.70 0.11 96);
  --musgo-hover: oklch(0.38 0.05 132);
  --cal-suave: oklch(0.90 0.02 118);
  --linha: oklch(0.83 0.03 124);
  --linha-musgo: oklch(0.55 0.05 132);
  --veu-menu: oklch(0.26 0.035 135 / 0.5);
  --sombra: 0 2px 6px oklch(0.26 0.035 135 / 0.10), 0 22px 44px -18px oklch(0.26 0.035 135 / 0.40);
  --sombra-cabecalho: 0 6px 20px -8px oklch(0.26 0.035 135 / 0.55);

  /* Tipografia */
  --f-display: "Besley", "Rockwell", serif;
  --f-corpo: "Libre Franklin", sans-serif;
  --tam-raca: clamp(3.5rem, 2rem + 8vw, 8rem);
  --tam-raca-longo: clamp(2.75rem, 1rem + 9.4vw, 7rem);
  --tam-h1: clamp(2.5rem, 1.6rem + 4.2vw, 5.25rem);
  --tam-h2: clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem);
  --tam-h3: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
  --tam-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --tam-base: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --tam-desc: 0.9375rem;
  --tam-rotulo: 0.8125rem;
  --tam-menu: clamp(1.35rem, 5vw, 1.8rem);
  --lh-base: 1.65;
  --medida: 66ch;

  /* Espaço, escala de 4pt */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --margem: clamp(var(--space-5), 4vw, var(--space-12));
  --secao: clamp(var(--space-16), 7vw + var(--space-4), var(--space-32));
  --largura: 76rem;
  --altura-cabecalho: 4.5rem;
  --alvo: 2.75rem;
  --trilha: 4rem;
  --marco: 2.75rem;
  --ponto: 0.5rem;
  --ponto-p: 0.375rem;
  --pata: 1.45rem;

  /* Recorte 2S */
  --r-foto: clamp(1.75rem, 3.5vw, 3.5rem);
  --r-canto: 6px;
  --r-botao: 18px;
  --r-botao-canto: 4px;

  /* Movimento */
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
  --ease-out-cubic: cubic-bezier(.33, 1, .68, 1);
  --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
  --dur-toque: 140ms;
  --dur-hover: 150ms;
  --dur-menu: 250ms;
  --dur-ponto: 420ms;
  --dur-reveal: 700ms;
  --dur-sai: 150ms;
  --dur-entra: 210ms;

  /* Camadas */
  --z-cabecalho: 40;
  --z-flutuante: 50;
  --z-menu: 100;
  --z-pular: 1000;
}

/* 2. RESET -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
/* Âncoras param abaixo do cabeçalho sem scroll-padding no html: o scroll-padding fazia o foco no cabeçalho sticky rolar a página */
[id] { scroll-margin-top: calc(var(--altura-cabecalho) + var(--space-6)); }
body { margin: 0; min-height: 100dvh; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

/* 3. BASE --------------------------------------------------------------- */
body {
  background: var(--cal);
  color: var(--musgo-fundo);
  font-family: var(--f-corpo);
  font-size: var(--tam-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.012em; text-wrap: balance; }
h1 { font-size: var(--tam-h1); }
h2 { font-size: var(--tam-h2); }
h3 { font-size: var(--tam-h3); line-height: 1.2; }
p, li, dd { text-wrap: pretty; }
strong { font-weight: 600; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
::selection { background: var(--mostarda); color: var(--musgo-fundo); }
:focus-visible { outline: 3px solid var(--mostarda); outline-offset: 3px; box-shadow: 0 0 0 3px var(--musgo-fundo); }

/* 4. LAYOUT ------------------------------------------------------------- */
.envoltorio { width: 100%; max-width: calc(var(--largura) + 2 * var(--margem)); margin-inline: auto; padding-inline: var(--margem); }
.secao { padding-block: var(--secao); }
.secao--sem-topo { padding-top: 0; }
.secao--capim { background: var(--capim); }
.secao--musgo { background: var(--musgo); color: var(--cal); }
.pilha { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); min-width: 0; }
.pilha > h2 + *, .pilha > h1 + * { margin-top: calc(-1 * var(--space-1)); }
.duas-colunas { display: grid; gap: var(--space-10); align-items: center; }
.duas-colunas > * { min-width: 0; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-2); }

/* 5. COMPONENTES -------------------------------------------------------- */

/* Tipos de texto */
.lead { font-size: var(--tam-lead); line-height: 1.55; max-width: 58ch; }
.texto { max-width: var(--medida); }
.kicker { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--tam-desc); font-weight: 600; color: var(--tinta); letter-spacing: 0.01em; }
.kicker::before { content: ""; width: var(--ponto); height: var(--ponto); border-radius: 50%; background: var(--mostarda); box-shadow: 0 0 0 2px var(--musgo); }
.secao--musgo .kicker { color: var(--cal-suave); }

/* Pular para o conteúdo */
.pular { position: absolute; left: var(--space-4); top: calc(-1 * var(--space-24)); z-index: var(--z-pular); padding: var(--space-3) var(--space-5); background: var(--mostarda); color: var(--musgo-fundo); font-weight: 600; border-radius: var(--r-botao) var(--r-botao-canto); }
.pular:focus { top: var(--space-4); }

/* Cabeçalho: sem backdrop-filter, filter, transform, will-change ou animation em nenhum estado (bug 1) */
.cabecalho { position: sticky; top: 0; z-index: var(--z-cabecalho); background: var(--musgo); color: var(--cal); transition: box-shadow var(--dur-hover) ease; view-transition-name: cabecalho; }
.cabecalho.rolado { box-shadow: var(--sombra-cabecalho); }
.cabecalho__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: var(--altura-cabecalho); max-width: calc(var(--largura) + 2 * var(--margem)); margin-inline: auto; padding-inline: var(--margem); }
.marca { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--alvo); text-decoration: none; border-radius: var(--r-canto); }
.marca__mono { height: 2.75rem; width: auto; }
.marca__nome { height: 2.25rem; width: auto; }
.nav { display: none; }
.nav__link { position: relative; display: inline-flex; align-items: center; min-height: var(--alvo); padding-inline: var(--space-2); font-weight: 500; font-size: 1rem; text-decoration: none; white-space: nowrap; color: var(--cal); border-radius: var(--r-canto); }
.nav__link::after { content: ""; position: absolute; left: 50%; bottom: var(--space-1); width: var(--ponto-p); height: var(--ponto-p); margin-left: calc(var(--ponto-p) / -2); border-radius: 50%; background: var(--mostarda); opacity: 0; transition: opacity var(--dur-hover) ease; }
.nav__link[aria-current="page"]::after { opacity: 1; }
.menu-botao { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin-right: calc(-1 * var(--space-2)); color: var(--cal); border-radius: var(--r-botao) var(--r-botao-canto); }

/* Menu fullscreen (fora do cabeçalho no DOM) */
.menu-full { position: fixed; inset: 0; z-index: var(--z-menu); display: flex; flex-direction: column; gap: var(--space-8); padding: 0 var(--margem) var(--space-10); background: var(--musgo); color: var(--cal); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0; transition: opacity var(--dur-sai) ease-in, visibility 0s linear var(--dur-sai); }
.menu-full.aberto, html:not(.js) .menu-full:target { visibility: visible; opacity: 1; transition: opacity var(--dur-menu) var(--ease-out-quint); }
.menu-full__barra { display: flex; align-items: center; justify-content: space-between; min-height: var(--altura-cabecalho); }
.menu-fechar { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin-right: calc(-1 * var(--space-2)); color: var(--cal); border-radius: var(--r-botao) var(--r-botao-canto); }
.menu-full__nav { display: flex; flex-direction: column; }
.menu-full__link { display: flex; align-items: center; min-height: 3.25rem; padding-block: var(--space-2); font-family: var(--f-display); font-weight: 600; font-size: var(--tam-menu); line-height: 1.2; text-decoration: none; color: var(--cal); border-bottom: 1px solid var(--linha-musgo); }
.menu-full__link[aria-current="page"] { color: var(--mostarda); }
.menu-full__wa { align-self: flex-start; }
.js .menu-full__link, .js .menu-full__wa { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-menu) var(--ease-out-quint), transform var(--dur-menu) var(--ease-out-quint); }
.js .menu-full.aberto .menu-full__link, .js .menu-full.aberto .menu-full__wa { opacity: 1; transform: none; }
.js .menu-full.aberto .menu-full__link:nth-child(2) { transition-delay: 40ms; }
.js .menu-full.aberto .menu-full__link:nth-child(3) { transition-delay: 80ms; }
.js .menu-full.aberto .menu-full__link:nth-child(4) { transition-delay: 120ms; }
.js .menu-full.aberto .menu-full__link:nth-child(5) { transition-delay: 160ms; }
.js .menu-full.aberto .menu-full__link:nth-child(6) { transition-delay: 200ms; }
.js .menu-full.aberto .menu-full__wa { transition-delay: 220ms; }
html.menu-aberto { overflow: hidden; }

/* Botões: recorte 2S 18px / 4px */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 3rem; padding: var(--space-3) var(--space-6); border: 1px solid transparent; border-radius: var(--r-botao) var(--r-botao-canto); font-family: var(--f-corpo); font-weight: 600; font-size: 1rem; line-height: 1.25; text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease, transform var(--dur-toque) var(--ease-out-cubic); }
.botao:active { transform: translateY(1px) scale(0.985); }
.botao .icone { flex: none; }
.botao--wa { background: var(--mostarda); color: var(--musgo-fundo); border-color: var(--mostarda-borda); }
.secao--musgo .botao--wa, .hero-inicio__painel .botao--wa, .menu-full .botao--wa, .painel-contato .botao--wa { border-color: var(--mostarda); }
.botao--musgo { background: var(--musgo); color: var(--cal); }
.botao--cabecalho { min-height: var(--alvo); padding-inline: var(--space-5); background: var(--mostarda); color: var(--musgo-fundo); white-space: nowrap; }

/* Link com seta SVG */
.link-seta { display: inline-block; padding-block: var(--space-3); line-height: 1.4; font-weight: 600; color: var(--musgo); text-decoration: underline; text-decoration-color: var(--linha); text-underline-offset: 0.3em; border-radius: var(--r-canto); transition: text-decoration-color var(--dur-hover) ease; }
.link-seta .icone { display: inline-block; margin-left: var(--space-2); vertical-align: -0.2em; transition: transform var(--dur-hover) var(--ease-out-cubic); }
.secao--musgo .link-seta, .hero-inicio__painel .link-seta, .link-seta--claro { color: var(--cal); text-decoration-color: var(--linha-musgo); }

/* Fotos: recorte 2S, cantos grandes opostos */
.foto { position: relative; overflow: hidden; background: var(--capim); border-radius: var(--r-foto) var(--r-canto); transition: transform 320ms var(--ease-out-quint), box-shadow 320ms var(--ease-out-quint); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto--hero { aspect-ratio: 16 / 9; border-radius: 0; }
.foto--16x9 { aspect-ratio: 16 / 9; }
.foto--21x9 { aspect-ratio: 16 / 10; }
.foto--3x2 { aspect-ratio: 3 / 2; }
.foto--4x3 { aspect-ratio: 4 / 3; }
.foto--4x5 { aspect-ratio: 4 / 5; }
.foto--3x4 { aspect-ratio: 3 / 4; }
.foto--1x1 { aspect-ratio: 1 / 1; }
.foto--espera { display: grid; place-items: center; background: var(--capim); border: 1px solid var(--linha); }
.foto__espera { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-6); text-align: center; color: var(--tinta); font-weight: 500; }
.secao--capim .foto--espera { background: var(--cal); }

/* Divisor de faro */
.faro { color: var(--mostarda); padding-block: var(--space-8); }
.faro svg { fill: currentColor; width: 8rem; height: auto; }

/* Hero do início */
.hero-inicio { display: grid; background: var(--musgo); }
.hero-inicio__painel { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); margin: calc(-1 * var(--space-12)) var(--space-3) 0; padding: var(--space-8) var(--space-6) var(--space-10); background: var(--musgo); color: var(--cal); border-radius: var(--r-foto) var(--r-canto) 0 0; }
.hero-inicio__painel h1 { max-width: 21ch; }
.hero-inicio__painel h1 strong { color: var(--mostarda); }
.hero-inicio__painel .lead { color: var(--cal-suave); }
.hero-inicio__kicker { position: relative; margin-bottom: calc(-1 * var(--space-2)); padding-left: calc(var(--ponto) + var(--space-3)); font-size: var(--tam-desc); font-weight: 600; letter-spacing: 0.01em; color: var(--cal-suave); }
.hero-inicio__kicker::before { content: ""; position: absolute; left: 0; top: 0.55em; width: var(--ponto); height: var(--ponto); border-radius: 50%; background: var(--mostarda); box-shadow: 0 0 0 2px var(--musgo); }
.hero-inicio__kicker strong { color: var(--mostarda); font-weight: 700; }
.hero-inicio__nota { font-size: var(--tam-desc); color: var(--cal-suave); }

/* Duas raças */
.racas__titulo { max-width: 20ch; margin-bottom: var(--space-12); }
.racas__grade { display: grid; gap: var(--space-16); }
.raca-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.raca-card__foto { display: block; width: 100%; margin-bottom: var(--space-3); }
.raca-card p { max-width: 48ch; }
.racas__duvida { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid var(--linha); }
.racas__duvida p { max-width: 52ch; }

/* Ficha */
.painel-ficha { width: 100%; padding: var(--space-4) var(--space-6) var(--space-6); background: var(--capim); border-radius: var(--r-foto) var(--r-canto); }
.ficha { width: 100%; }
.ficha__linha { display: grid; gap: var(--space-1); padding-block: var(--space-4); border-top: 1px solid var(--linha); }
.ficha__linha:first-child { border-top: 0; }
.ficha dt { font-size: var(--tam-rotulo); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--tinta); }
.ficha dd { max-width: 60ch; }
.ficha--sobre-capim .ficha__linha { border-top-color: var(--linha); }

/* Rastro de faro (efeito assinatura) */
.rastro__lista { counter-reset: none; }
.rastro__parada, .rastro__fim, .rastro__origem { display: grid; grid-template-columns: var(--trilha) minmax(0, 1fr); column-gap: var(--space-4); }
.rastro__trilha { position: relative; color: var(--mostarda); }
.rastro__marco { position: relative; z-index: 1; display: grid; place-items: center; width: var(--marco); height: var(--marco); margin-inline: auto; border-radius: 50%; background: var(--mostarda); color: var(--musgo-fundo); font-family: var(--f-display); font-weight: 700; font-size: 1.125rem; line-height: 1; }
.rastro__pontos { position: absolute; inset: calc(var(--marco) + var(--space-2)) 0 var(--space-1) 0; }
.rastro__ponto { position: absolute; width: var(--pata); height: var(--pata); margin: calc(var(--pata) / -2) 0 0 calc(var(--pata) / -2); fill: currentColor; color: var(--mostarda); }
.rastro__texto { min-width: 0; padding-top: var(--space-2); padding-bottom: var(--space-12); }
.rastro__texto p { max-width: 58ch; }
.rastro__titulo { font-family: var(--f-display); font-weight: 600; font-size: var(--tam-h3); line-height: 1.2; }
.rastro--completo .rastro__titulo { margin-bottom: var(--space-2); }
.rastro--completo .rastro__texto p:not(.rastro__titulo) { color: var(--cal-suave); }
.rastro__porta { position: relative; z-index: 1; display: block; width: auto; height: 5.5rem; margin-inline: auto; color: var(--mostarda); }
.rastro__parada--porta .rastro__texto { padding-top: var(--space-8); }
.rastro__origem-marca { position: relative; z-index: 1; width: auto; height: var(--marco); margin-inline: auto; }
.rastro__origem .rastro__texto { padding-top: var(--space-3); }
.rastro__origem-rotulo { font-size: var(--tam-desc); font-weight: 600; letter-spacing: 0.01em; color: var(--cal-suave); }
.rastro--curto .rastro__origem { min-height: 6.5rem; }
.rastro__fim .rastro__texto { padding-bottom: 0; padding-top: var(--space-2); }
.rastro--curto .rastro__parada { min-height: 6.5rem; }
.rastro--curto .rastro__texto { padding-bottom: var(--space-8); }
.rastro--curto .rastro__fim .rastro__texto { padding-top: var(--space-2); }
.rastro--estatico { --marco: 1.125rem; --trilha: 2.25rem; margin-block: var(--space-2); }
.rastro--estatico .rastro__marco { box-shadow: 0 0 0 3px var(--musgo); }
.rastro--estatico .rastro__texto { padding-top: 0; padding-bottom: var(--space-8); }
.rastro--estatico .rastro__parada:last-child .rastro__texto { padding-bottom: 0; }
.rastro--estatico .rastro__ponto { color: var(--musgo); --pata: 1rem; }
.rastro--estatico .rastro__texto p { max-width: 48ch; }
.rastro--grande { --marco: 2.75rem; --trilha: 4rem; margin-block: 0; }
.rastro--grande .rastro__marco { box-shadow: none; }
.rastro--grande .rastro__texto { padding-top: var(--space-1); padding-bottom: var(--space-16); }
.rastro__nome { margin-bottom: var(--space-1); font-family: var(--f-display); font-weight: 600; font-size: var(--tam-h3); line-height: 1.2; }
.heranca__grade { align-items: start; }
/* Acende com a rolagem: só com JS confirmado. Sem JS nasce todo aceso. */
.js .rastro--acende .rastro__ponto { opacity: 0.22; transform: scale(0.5); transition: opacity var(--dur-ponto) var(--ease-out-cubic), transform var(--dur-ponto) var(--ease-out-quint); }
.js .rastro--acende .rastro__marco, .js .rastro--acende .rastro__origem-marca { opacity: 0.4; transform: scale(0.82); transition: opacity var(--dur-ponto) var(--ease-out-cubic), transform var(--dur-ponto) var(--ease-out-quint); }
/* A porta acende por último e cresce mais que os pontos */
.js .rastro--acende .rastro__porta { opacity: 0.3; transform: scale(0.55); transform-origin: 50% 100%; transition: opacity var(--dur-ponto) var(--ease-out-cubic), transform var(--dur-reveal) var(--ease-out-quint); }
.js .rastro--acende .aceso { opacity: 1; transform: none; }

/* Capítulo Musgo (início) */
.capitulo__grade { display: grid; gap: var(--space-12); }
.capitulo__texto .lead { color: var(--cal-suave); }
.capitulo__foto { margin: var(--space-6) 0 0; max-width: 22rem; }
.capitulo__foto figcaption { margin-top: var(--space-3); font-size: 0.875rem; color: var(--cal-suave); }
.contador { display: none; }
.contador__num { font-family: var(--f-display); font-weight: 800; font-size: clamp(5.5rem, 3rem + 5vw, 8rem); line-height: 0.9; letter-spacing: -0.03em; color: var(--mostarda); font-variant-numeric: tabular-nums; }
.contador__de { font-family: var(--f-display); font-weight: 600; font-size: var(--tam-h3); color: var(--cal-suave); }

/* Origem */
.origem .texto { color: var(--musgo-fundo); }

/* CTA final e faixa */
.secao--musgo .lead { color: var(--cal-suave); }
.cta-faixa__grade { display: grid; gap: var(--space-6); }
.cta-faixa h2 { max-width: 22ch; }

/* O canil */
.abertura { padding-block: var(--space-12) var(--secao); }
.abertura__texto { margin-bottom: var(--space-10); }
.abertura__texto h1 { max-width: 18ch; }
.depoimento-elen blockquote p { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.3rem, 1.05rem + 1.1vw, 2rem); line-height: 1.35; letter-spacing: -0.005em; max-width: 34ch; }
.depoimento-elen figcaption { margin-top: var(--space-6); font-weight: 600; color: var(--tinta); }
.historia--sem-foto .depoimento-elen blockquote p { font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.75rem); line-height: 1.3; max-width: 36ch; }
.historia--sem-foto .depoimento-elen figcaption { margin-top: var(--space-8); font-size: var(--tam-lead); }
.valores h2, .rotina > .envoltorio > h2 { margin-bottom: var(--space-12); }
.valores__grade { display: grid; gap: var(--space-10); }
.valor { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--linha); }
.valor p { max-width: 48ch; color: var(--musgo-fundo); }
.zigue { display: grid; gap: var(--space-8); align-items: center; }
.zigue + .zigue { margin-top: var(--space-16); }
.zigue > * { min-width: 0; }
.zigue__texto h3 + p { margin-top: calc(-1 * var(--space-2)); }
.zigue__texto p + h3 { margin-top: var(--space-4); }
.zigue__texto p { max-width: 48ch; }

/* Raça */
.hero-raca { padding-block: var(--space-10) var(--secao); }
.raca-nome { font-weight: 800; font-size: var(--tam-raca); line-height: 0.95; letter-spacing: -0.03em; margin-block: var(--space-3) var(--space-8); }
.raca-nome--longo { font-size: var(--tam-raca-longo); }
.hero-raca__grade { display: grid; gap: var(--space-10); }
.hero-raca__grade > * { min-width: 0; }
.pelagens__cabeca { margin-bottom: var(--space-12); }
.mosaico { display: grid; gap: var(--space-10); }
.mosaico > * { min-width: 0; }
.pelagem h3 { margin-bottom: var(--space-2); }
.pelagem p { color: var(--musgo-fundo); max-width: 48ch; }
.pelagem--grande figcaption { margin-top: var(--space-5); }
.mosaico__menores { display: grid; gap: var(--space-6); }
.pelagem--menor { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.pelagem--menor .foto { border-radius: var(--space-6) var(--r-canto); }
.para-familia__topo { margin-bottom: var(--space-12); }
.para-familia__topo h2 { max-width: 14ch; }
.listas { display: grid; gap: var(--space-10); }
.lista-franca h3 { margin-bottom: var(--space-5); }
.lista-franca li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-3); border-top: 1px solid var(--linha); }
.lista-franca li .icone { margin-top: 0.2em; color: var(--musgo); }
.lista-franca--calma li .icone { color: var(--tinta); }
.para-familia__final { margin-top: var(--space-12); max-width: 52ch; }

/* Filhotes e entrega */
.abertura--lado { padding-block: var(--space-12) var(--secao); }
.caminho .rastro { max-width: 52rem; }
.caminho .capitulo__texto h2 { max-width: 14ch; }
.detalhes__grade { display: grid; gap: var(--space-12); }
.detalhes__grade > * { min-width: 0; }
.detalhes__fotos { display: grid; gap: var(--space-6); }
.detalhes__foto-2 { width: 72%; justify-self: end; }
.detalhes__lista { display: grid; gap: var(--space-8); }
.detalhe { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--linha); }
.detalhe p { max-width: 56ch; }
.ninhadas__painel { display: grid; gap: var(--space-2); padding: var(--space-6) var(--space-6) var(--space-10); background: var(--capim); border-radius: var(--r-foto) var(--r-canto); }
.ninhadas__painel .faro { padding-block: var(--space-2) var(--space-4); }
.faq__lista { width: 100%; border-bottom: 1px solid var(--linha); }
.faq__coluna > * { max-width: 46rem; }
.faq__coluna h2 { margin-bottom: var(--space-10); }
.ficha-raca__titulo { margin-bottom: var(--space-10); }
.ficha--regua dd { font-size: var(--tam-lead); line-height: 1.55; max-width: 62ch; }
.faq__item { border-top: 1px solid var(--linha); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 3.5rem; padding-block: var(--space-4); cursor: pointer; list-style: none; border-radius: var(--r-canto); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem); line-height: 1.3; }
.faq__item summary .icone { flex: none; color: var(--musgo); transition: transform var(--dur-menu) var(--ease-out-cubic); }
.faq__item[open] summary .icone { transform: rotate(45deg); }
.faq__resposta { padding-bottom: var(--space-6); }
.faq__resposta p { max-width: 60ch; }

/* Contato */
.contato-topo { padding-block: var(--space-12) var(--secao); }
.contato-topo .duas-colunas { align-items: start; }
.passos { display: grid; gap: 0; width: 100%; margin-top: var(--space-6); }
.passo { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-6); border-top: 1px solid var(--linha); }
.passo__num { font-family: var(--f-display); font-weight: 800; font-size: 2.25rem; line-height: 1; color: var(--musgo); }
.passo h3 { margin-bottom: var(--space-2); }
.passo p { max-width: 50ch; }
.painel-contato { display: grid; gap: var(--space-10); padding: var(--space-8) var(--space-6) var(--space-10); background: var(--musgo); color: var(--cal); border-radius: var(--r-foto) var(--r-canto); }
.canal { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.canal h3 { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--tam-h3); }
.canal p { color: var(--cal-suave); }
.canal--principal { gap: var(--space-4); }
.canal--principal h3 { font-size: var(--tam-h2); }
.canal__quem { display: flex; flex-direction: column; gap: var(--space-2); }
.canal .canal__numero { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1.15; color: var(--mostarda); }
.canais { display: grid; gap: var(--space-8); }
.canais .canal { padding-top: var(--space-6); border-top: 1px solid var(--linha-musgo); }
.nota-contato { margin-top: var(--space-6); font-size: var(--tam-desc); color: var(--tinta); max-width: 60ch; }

/* Famílias */
.relatos { display: grid; gap: var(--space-12); }
.relato p { font-family: var(--f-display); font-weight: 600; font-size: var(--tam-h3); line-height: 1.35; }
.relato footer { margin-top: var(--space-4); font-size: var(--tam-desc); color: var(--tinta); }

/* Rodapé */
.rodape { padding-bottom: var(--space-24); background: var(--musgo-fundo); color: var(--cal); }
.faro--rodape { padding-block: var(--space-10) var(--space-8); }
.rodape__grade { display: grid; gap: var(--space-10); }
.rodape__logo { width: 9rem; height: auto; margin-bottom: var(--space-5); }
.rodape__marca p { max-width: 46ch; color: var(--cal-suave); }
.rodape__marca p + p { margin-top: var(--space-3); }
.rodape__contatos, .rodape__nav ul { display: grid; gap: 0; }
.rodape a { display: inline-block; padding-block: var(--space-3); line-height: 1.4; color: var(--cal); text-decoration-color: var(--linha-musgo); }
.rodape__base { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--linha-musgo); font-size: var(--tam-desc); color: var(--cal-suave); }

/* WhatsApp flutuante */
.wa-flutuante { position: fixed; right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); z-index: var(--z-flutuante); display: grid; place-items: center; width: 3.5rem; height: 3.5rem; background: var(--mostarda); color: var(--musgo-fundo); border: 1px solid var(--mostarda-borda); border-radius: var(--r-botao) var(--r-botao-canto); box-shadow: var(--sombra); transition: transform var(--dur-toque) var(--ease-out-cubic), background-color var(--dur-hover) ease; }
.wa-flutuante .icone { width: 1.625rem; height: 1.625rem; }
.wa-flutuante:active { transform: scale(0.95); }

/* Reveal: conteúdo nasce visível; só se oculta com a classe js confirmada */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-reveal) var(--ease-out-quint), transform var(--dur-reveal) var(--ease-out-quint); }
.js .reveal.visivel { opacity: 1; transform: none; }
.js .reveal[data-atraso="1"] { transition-delay: 90ms; }
.js .reveal[data-atraso="2"] { transition-delay: 180ms; }

/* View Transitions entre páginas */
::view-transition-old(root) { animation: var(--dur-sai) ease-in both vt-sai; }
::view-transition-new(root) { animation: var(--dur-entra) ease-out both vt-entra; }
::view-transition-group(cabecalho) { animation: none; z-index: 100; }
::view-transition-old(cabecalho), ::view-transition-new(cabecalho) { animation: none; }
@keyframes vt-sai { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; } }

/* 6. UTILITÁRIOS -------------------------------------------------------- */
.sem-quebra { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 7. MEDIA QUERIES ------------------------------------------------------ */
@media (min-width: 700px) {
  .ficha__linha { grid-template-columns: 13.5rem minmax(0, 1fr); gap: var(--space-6); align-items: baseline; }
  .valores__grade { grid-template-columns: 1fr 1fr; column-gap: var(--space-12); }
  .listas { grid-template-columns: 1fr 1fr; column-gap: var(--space-12); }
  .pelagem--menor { grid-template-columns: 10rem minmax(0, 1fr); }
  .canais { grid-template-columns: 1fr 1fr; column-gap: var(--space-10); }
  .rodape__grade { grid-template-columns: 1.3fr 1fr 1fr; }
  .painel-ficha { padding: var(--space-6) var(--space-10) var(--space-8); }
  .hero-inicio__painel { margin-inline: var(--space-6); padding: var(--space-10) var(--space-10) var(--space-12); }
  :root { --trilha: 5rem; }
  .ficha--regua .ficha__linha { grid-template-columns: 12rem minmax(0, 1fr); gap: 0; padding-block: 0; border-top: 0; align-items: stretch; }
  .ficha--regua dt { padding: var(--space-6) var(--space-8) var(--space-6) 0; border-right: 1px solid var(--linha); }
  .ficha--regua dd { padding: var(--space-5) 0 var(--space-5) var(--space-10); }
  .ficha--regua .ficha__linha + .ficha__linha dd { border-top: 1px solid var(--linha); }
}

@media (min-width: 900px) {
  .duas-colunas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); }
  .duas-colunas--foto-esq { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .duas-colunas--largo-esq { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .duas-colunas--titulo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .duas-colunas--titulo-foto { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

  .contador { position: sticky; top: calc(var(--altura-cabecalho) + var(--space-10)); display: flex; flex-direction: column; gap: var(--space-2); align-self: start; }
  .so-celular { display: none; }

  .racas__grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-16); align-items: start; }
  .raca-card--desce { margin-top: var(--space-24); }

  .capitulo__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--space-16); align-items: start; }
  .capitulo__texto { position: sticky; top: calc(var(--altura-cabecalho) + var(--space-10)); }
  .capitulo__grade--caminho { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }

  .foto--21x9 { aspect-ratio: 21 / 9; }
  .zigue { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); }
  .zigue--inverso { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .zigue--inverso > .foto { order: 2; }

  .hero-raca__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; }
  .hero-raca__texto { padding-bottom: var(--space-4); }
  .mosaico { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--space-16); align-items: start; }
  .mosaico__menores { gap: var(--space-8); padding-top: var(--space-4); }
  .pelagem--menor { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-8); }

  .detalhes__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--space-16); align-items: start; }
  .detalhes__foto-2 { margin-top: calc(-1 * var(--space-16)); }
  .ninhadas__painel { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); padding: var(--space-12); }
  .ninhadas__painel .faro { padding-top: var(--space-4); }

  .painel-contato { padding: var(--space-12); }
  .canal--principal { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-6) var(--space-10); }
  .contato-topo .foto { position: sticky; top: calc(var(--altura-cabecalho) + var(--space-8)); }
  .relatos { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1080px) {
  .nav { display: flex; align-items: center; gap: var(--space-4); }
  .menu-botao { display: none; }
  .menu-full { display: none; }
}

@media (min-width: 1200px) {
  /* A foto do topo é vertical, com mãe e filha no centro. Em tela larga, ocupando a largura toda, cortava as cabeças e o painel cobria a filha.
     Por isso a foto fica só à direita (62%) e o painel encosta nela pela esquerda, sobre o musgo. */
  .hero-inicio { grid-template: 1fr / 1fr; min-height: min(calc(100dvh - var(--altura-cabecalho)), 56rem, 56vw); }
  .hero-inicio > * { grid-area: 1 / 1; }
  .foto--hero { aspect-ratio: auto; height: 100%; width: 62%; justify-self: end; }
  .foto--hero img { position: absolute; inset: 0; }
  .hero-inicio__painel { align-self: end; justify-self: start; width: min(40rem, 50%); margin: var(--space-10) 0 var(--space-10) max(var(--margem), calc((100vw - var(--largura)) / 2)); padding: var(--space-8) var(--space-10); gap: var(--space-4); border-radius: var(--r-foto) var(--r-canto); box-shadow: var(--sombra); }
  .hero-inicio__painel h1 { font-size: clamp(2.5rem, 1.2rem + 2.6vw, 3.75rem); }
}

@media (min-width: 1280px) {
  .nav { gap: var(--space-6); }
}

@media (hover: hover) and (pointer: fine) {
  .nav__link:hover::after { opacity: 1; }
  .botao--wa:hover, .botao--cabecalho:hover { background: var(--mostarda-clara); }
  .botao--musgo:hover { background: var(--musgo-hover); }
  .link-seta:hover { text-decoration-color: currentColor; }
  .wa-flutuante:hover { background: var(--mostarda-clara); }
  .faq__item summary:hover h3 { color: var(--musgo); }
  .rodape a:hover { text-decoration-color: currentColor; }
  .encosta:hover .foto { box-shadow: var(--sombra); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .link-seta:hover .icone { transform: translateX(3px); }
  .wa-flutuante:hover { transform: translateY(-2px); }
  /* O cão que encosta */
  .encosta:hover .foto { transform: rotate(-1.2deg) translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  .js .reveal { transform: none; transition: opacity 300ms linear; }
  .js .rastro--acende .rastro__ponto, .js .rastro--acende .rastro__marco, .js .rastro--acende .rastro__porta, .js .rastro--acende .rastro__origem-marca { opacity: 1; transform: none; transition: none; }
  .js .menu-full__link, .js .menu-full__wa { transform: none; transition: opacity var(--dur-menu) linear; }
  .foto, .botao, .wa-flutuante, .link-seta .icone, .faq__item summary .icone { transition-property: opacity, background-color, box-shadow; }
  .botao:active, .wa-flutuante:active { transform: none; }
}