/* =============================================================
   LOVE PET — Base: reset, elementos, acessibilidade e utilitários
   ============================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* compensa o cabeçalho fixo ao pular para uma âncora */
  scroll-padding-top: 6.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--fonte-texto);
  font-size: var(--txt-base);
  font-weight: var(--peso-regular);
  line-height: var(--altura-texto);
  color: var(--texto);
  background-color: var(--fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* trava definitiva contra rolagem horizontal */
  overflow-x: clip;
  min-height: 100%;
}

/* Textura de papel bem discreta — dá personalidade sem poluir */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background-image: radial-gradient(
    rgba(70, 144, 246, 0.09) 1px,
    transparent 1px
  );
  background-size: 22px 22px;
}

/* Hierarquia tipográfica da marca:
   h1/h2 na display (Vanilla Extract) para o impacto do cartaz;
   h3/h4 na Gotham pesada, que lê melhor em bloco pequeno. */
h1,
h2 {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  line-height: var(--altura-titulo);
  letter-spacing: var(--tracking-titulo);
  color: var(--azul-900);
  text-wrap: balance;
}

h3,
h4 {
  font-family: var(--fonte-display);
  font-weight: var(--peso-black);
  line-height: var(--altura-display);
  letter-spacing: var(--tracking-display);
  color: var(--azul-900);
  text-wrap: balance;
}

h1 {
  font-size: var(--titulo-xl);
}
h2 {
  font-size: var(--titulo-lg);
}
h3 {
  font-size: var(--titulo-sm);
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  /* evita salto de layout enquanto carrega */
  background-color: var(--nuvem-200);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

address {
  font-style: normal;
}

strong,
b {
  font-weight: var(--peso-bold);
}

::selection {
  background-color: var(--rosa-200);
  color: var(--azul-900);
}

/* ---------- Foco visível e consistente ---------- */
:focus-visible {
  outline: none;
  box-shadow: var(--anel-foco);
  border-radius: var(--raio-sm);
}

/* ---------- Utilitários ---------- */

.container {
  width: min(100% - (var(--gutter) * 2), var(--largura-max));
  margin-inline: auto;
}

.container--estreito {
  width: min(100% - (var(--gutter) * 2), 900px);
  margin-inline: auto;
}

/* Conteúdo só para leitores de tela */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Link "pular para o conteúdo" */
.pular-link {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -150%;
  z-index: 200;
  padding: var(--esp-3) var(--esp-5);
  background-color: var(--azul-700);
  color: var(--branco);
  border-radius: 0 0 var(--raio-md) var(--raio-md);
  font-weight: var(--peso-bold);
  transition: translate var(--transicao);
}

.pular-link:focus-visible {
  translate: -50% 0;
}

.destaque {
  color: var(--rosa-600);
}

.destaque-azul {
  color: var(--azul-700);
}

/* Sublinhado orgânico desenhado atrás da palavra */
.sublinhado {
  position: relative;
  white-space: nowrap;
}

.sublinhado::after {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  bottom: 0.02em;
  height: 0.34em;
  z-index: -1;
  background-color: var(--amarelo-300);
  border-radius: var(--raio-pill);
  transform: rotate(-1.1deg);
}

/* Linha de chamada acima do título — a marca só tem duas fontes,
   então ela é a display da marca em rosa, não uma terceira família. */
.sobretitulo {
  font-family: var(--fonte-display);
  font-weight: var(--peso-black);
  font-size: 0.42em;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rosa-600);
}

.no-scroll {
  overflow: hidden;
}