/* Pet Fantasy — transplante estrutural de fuzzball.club
   Medidas: captura em 1920px (design-system.md + secoes/*.md do acervo).
   Cor: papéis da referência trocados pelos tokens da marca (design-tokens.css). */

:root {
  /* marca (design-tokens.css) */
  --pf-orange-logo: #EA4B0B;
  --pf-orange: #F55A18;
  --pf-green: #063525;
  --pf-green-deep: #022D23;
  --pf-white: #FFFFFF;

  /* lavagens derivadas da marca (não medidas — ver README) */
  --wash-green: #E6EFEA;   /* no lugar do Wash Blue  #e9f3ff */
  --wash-cream: #F6F3EE;   /* no lugar do Wash Purple #efe9f3 */
  --wash-orange: #FDEDE4;  /* no lugar do Wash Ember  #f7d1d4 */
  --fog: #F5F5F5;          /* medido na referência */

  /* papéis */
  --bg: var(--pf-white);
  --ink: var(--pf-green);                 /* 13.6:1 sobre branco */
  --ink-80: rgba(6, 53, 37, .8);
  --line: rgba(6, 53, 37, .1);
  --primary: var(--pf-green);
  --on-primary: var(--pf-white);
  --accent: var(--pf-orange);

  /* forma (raios medidos: 28 · 8 · 60 · 50) */
  --r-card: 28px;
  --r-small: 8px;
  --r-pill: 60px;

  --gutter: 60px;
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-in: cubic-bezier(0, 0, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: .004em;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
svg { fill: currentColor; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 12px 18px; background: var(--pf-white); border-radius: var(--r-small); font-weight: 700; }
.pular:focus { top: 16px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------- tipografia (escala medida: 38 · 32 · 24 · 18 · 16 · 14 · 12) ---------- */
.h2 { font-size: 32px; font-weight: 700; line-height: 1.4; letter-spacing: .004em; }
.cabeca { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
.cabeca__sub { max-width: 600px; margin-top: 40px; font-size: 24px; font-weight: 700; line-height: 1.4; color: var(--ink-80); }
.cabeca__sub--p { margin-top: 16px; font-size: 16px; font-weight: 400; }
.cabeca .botao { margin-top: 16px; }

/* rabisco sob o título — na referência é traço amarelo/lilás feito à mão */
.rabisco { display: block; width: 200px; height: 22px; margin-top: 10px; }
.rabisco--laranja { color: var(--accent); opacity: .85; }
.rabisco--verde { color: #B9D3C5; }
.rabisco--branco { color: rgba(255, 255, 255, .85); margin-left: 0; }
.rabisco use { stroke-dasharray: 320; stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease-in) .25s; }
html.motion .revela:not(.visivel) .rabisco use,
html.motion .cabeca.revela:not(.visivel) .rabisco use { stroke-dashoffset: 320; }

/* ---------- botões (medidos: 18px 24px, raio 60, borda 4px, 16px/700) ---------- */
.botao {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 68px;
  padding: 18px 28px;
  border: 4px solid transparent;
  border-radius: var(--r-pill);
  font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: .004em;
  transition: box-shadow .1s, border-color .1s, transform .2s;
}
.botao--primario { background: var(--primary); color: var(--on-primary); }
.botao--primario:hover { border-color: var(--pf-white); box-shadow: 0 0 0 4px var(--accent); }
.botao--claro { background: var(--pf-white); color: var(--pf-green); }
.botao--contorno { border: 2px solid var(--pf-white); color: var(--pf-white); }
.botao--claro:hover, .botao--contorno:hover { box-shadow: 0 0 0 4px var(--accent); }
.botao--largo { width: 100%; }
.seta { width: 20px; height: 12px; flex: none; transition: transform .3s; }
.botao:hover .seta, .link-seta:hover .seta, .cartao:hover .link-seta .seta { transform: translateX(4px); }
.link-seta { display: inline-flex; align-items: center; gap: 14px; font-weight: 700; font-size: 16px; line-height: 1; }
.link-seta:hover { text-decoration: underline; text-underline-offset: .3rem; }
.centro { display: flex; justify-content: center; margin-top: 40px; }

/* ---------- 01 · topo ---------- */
.aviso { height: 41px; display: flex; align-items: center; overflow: hidden; background: var(--wash-green); color: var(--pf-green); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.aviso__trilho { display: flex; width: max-content; animation: corre 40s linear infinite; }
.aviso__trilho span { padding: 11px 48px; white-space: nowrap; }
.aviso__trilho span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 48px; border-radius: 50%; background: var(--accent); vertical-align: middle; transform: translateY(-1px); }
@keyframes corre { to { transform: translateX(-50%); } }

.topo { position: sticky; top: -41px; z-index: 50; }
.cabecalho {
  position: relative;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 110px; padding: 0 32px 0 46px;
  background: var(--pf-green); color: var(--pf-white);
}
.marca { display: inline-flex; align-items: center; gap: 12px; justify-self: start; font-size: 30px; font-weight: 800; letter-spacing: -.01em; }
.marca img { width: 33px; height: 44px; }
.nav { display: flex; gap: 20px; }
.nav__pilula {
  display: inline-flex; align-items: center; gap: 14px;
  height: 46px; padding: 0 16px;
  background: var(--wash-green); color: var(--pf-green);
  border: 2px solid transparent; border-radius: var(--r-small);
  font-size: 16px; font-weight: 700;
  transition: border-color .2s, background .2s;
}
.nav__pilula svg { width: 14px; height: 14px; transition: transform .3s var(--ease-in); }
.nav__pilula[aria-expanded="true"] { background: var(--pf-white); border-color: var(--accent); }
.nav__pilula[aria-expanded="true"] svg { transform: rotate(45deg); }
.nav__pilula:hover { border-color: var(--accent); }
.icones { display: flex; gap: 24px; justify-self: end; }
.icone { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-small); background: var(--wash-green); color: var(--pf-green); border: 2px solid transparent; transition: border-color .2s; }
.icone:hover { border-color: var(--accent); }
.icone svg { width: 24px; height: 24px; }
.icone--menu { display: none; }

.painel { position: absolute; left: 0; right: 0; top: 100%; background: var(--pf-green); color: var(--pf-white); border-top: 1px solid rgba(255,255,255,.12); animation: abre .3s var(--ease-in); }
.painel[hidden] { display: none; }
@keyframes abre { from { opacity: 0; transform: translateY(-8px); } }
.painel__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 419px)) auto; gap: 24px; justify-content: center; padding: 40px var(--gutter) 48px; }
.painel__titulo { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.painel p:not(.painel__titulo) { font-size: 18px; color: rgba(255,255,255,.88); }
.painel__acoes { display: flex; flex-direction: column; gap: 16px; }

/* ---------- 02 · hero (960px a 1920) ---------- */
.hero { position: relative; height: max(640px, min(960px, calc(100svh - 110px))); overflow: hidden; }
.hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero__cartao {
  position: absolute; left: 82px; top: 50%; transform: translateY(-50%);
  width: 530px; padding: 32px 32px 32px;
  background: var(--pf-white); border: 2px solid var(--pf-green); border-radius: 50px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
html.motion .hero__cartao.revela:not(.visivel) { transform: translateY(calc(-50% + 2rem)); }
.hero__selo { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.hero__selo img { width: 17px; height: 22px; }
.hero__titulo { margin-top: 18px; max-width: 465px; font-size: 38px; font-weight: 700; line-height: 1.4; letter-spacing: .004em; }
.hero__cartao .rabisco { width: 300px; height: 30px; margin-top: 4px; }
.hero__sub { margin-top: 28px; max-width: 465px; font-size: 16px; }
.hero__form { width: 100%; margin-top: 32px; display: grid; gap: 17px; }
.campo { width: 100%; height: 66px; padding: 19px 20px; border: 3px solid var(--pf-green); border-radius: var(--r-small); background: var(--pf-white); color: var(--pf-green); font: inherit; font-size: 16px; text-align: center; }
.campo::placeholder { color: rgba(6, 53, 37, .62); }
.campo:focus { outline: none; box-shadow: 0 0 0 4px var(--wash-orange), 0 0 0 6px var(--accent); }

/* ---------- 03 · faixa de marcas (marquee, 176px) ---------- */
.marcas { overflow: hidden; padding: 23px 0; border-bottom: 1px solid var(--line); }
.marcas__trilho { display: flex; width: max-content; animation: corre 50s linear infinite; }
.marcas:hover .marcas__trilho { animation-play-state: paused; }
.marcas__lista { display: flex; align-items: center; height: 130px; }
.marcas__lista li { padding: 0 56px; font-size: 30px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; color: var(--pf-green); position: relative; }
.marcas__lista li::after { content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); transform: translateY(-50%); }
.marcas__lista li:nth-child(3n+2) { font-weight: 600; font-style: italic; }
.marcas__lista li:nth-child(3n) { text-transform: uppercase; font-size: 24px; letter-spacing: .08em; }

/* ---------- seções ---------- */
.secao { padding-left: var(--gutter); padding-right: var(--gutter); }

/* 04 · mídia + texto (1800 × 460, imagem 756) */
.secao--midia { padding-bottom: 64px; padding-top: 0; }
.midia { display: grid; grid-template-columns: 42% 1fr; min-height: 460px; border-radius: var(--r-card); overflow: hidden; background: var(--wash-green); }
.midia__foto { width: 100%; height: 100%; object-fit: cover; }
.midia__texto { display: flex; align-items: center; padding: 60px; }
.midia__texto .h2 { max-width: 924px; }

/* 05 · 2 cards em caixa creme (padding 64) */
.secao--usp { padding-top: 0; padding-bottom: 64px; }
.caixa { position: relative; padding: 64px 60px; border-radius: var(--r-card); }
.caixa--creme { background: var(--wash-cream); }
.pata-solta { position: absolute; width: 110px; height: 110px; color: var(--accent); }
.pata-solta--direita { right: 70px; top: -40px; transform: rotate(18deg); }
.pata-solta--esquerda { left: 0; top: -60px; transform: rotate(-16deg); width: 96px; height: 96px; }
.usp { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 64px; }
.usp__card { padding: 32px; background: var(--pf-white); border: 1px solid var(--line); border-radius: var(--r-card); }
.usp__titulo { display: flex; align-items: center; gap: 16px; font-size: 24px; font-weight: 700; line-height: 1.4; }
.usp__icone { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-small); flex: none; }
.usp__icone svg { width: 32px; height: 32px; }
.usp__icone--laranja { background: var(--wash-orange); color: var(--pf-orange-logo); }
.usp__icone--verde { background: var(--wash-green); color: var(--pf-green); }
.lista-check { display: grid; gap: 16px; margin-top: 28px; }
.lista-check li { display: flex; align-items: center; gap: 16px; font-size: 16px; }
.lista-check svg { width: 28px; height: 28px; padding: 4px; border-radius: 6px; flex: none; color: var(--pf-green); }
.lista-check--laranja svg { background: var(--wash-orange); }
.lista-check--verde svg { background: var(--wash-green); }

/* 06 · 3 passos (padding 64 / 128, cards 584 × 660) */
.secao--passos { padding-top: 64px; padding-bottom: 128px; }
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.cartao { display: flex; flex-direction: column; border-radius: var(--r-card); overflow: hidden; transition: transform .3s; }
.cartao:hover { transform: translateY(-4px); }
.cartao--verde { background: var(--wash-green); }
.cartao--creme { background: var(--wash-cream); height: 100%; }
.cartao__midia { display: block; aspect-ratio: 584 / 526; overflow: hidden; }
.secao--dicas .cartao__midia { aspect-ratio: 1 / 1; }
.cartao__midia img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.cartao:hover .cartao__midia img { transform: scale(1.05); }
.cartao__corpo { display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 28px; }
.cartao__titulo { display: block; font-size: 24px; font-weight: 700; line-height: 1.4; }
.cartao__corpo p { font-size: 16px; }
.cartao__corpo .link-seta { margin-top: 8px; }

/* 07 · categorias (fundo #f5f5f5, cards 432²) */
.secao--categorias { padding-top: 64px; padding-bottom: 64px; background: var(--fog); }
.categorias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 64px; }
.categoria { display: block; transition: transform .3s; }
.categoria:hover { transform: translateY(-.4rem); }
.categoria__midia { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-card); background: var(--fog); }
.categoria__midia img { width: 100%; height: 100%; object-fit: cover; }
.categoria__nome { display: block; margin-top: 16px; font-size: 18px; font-weight: 700; color: var(--pf-green); }

/* 08 · avaliações (faixa creme, 633px) */
.secao--avaliacoes { padding-top: 56px; padding-bottom: 56px; background: var(--wash-cream); }
.avaliacoes { position: relative; }
.nota { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 32px 0 36px; font-size: 16px; }
.nota__pendente { font-size: 14px; color: var(--ink-80); border: 1px dashed var(--ink-80); border-radius: var(--r-small); padding: 2px 10px; }
.estrelas { display: inline-flex; gap: 2px; color: var(--accent); }
.estrelas svg { width: 18px; height: 18px; }
.aval { display: flex; flex-direction: column; gap: 10px; height: auto; padding: 28px; background: var(--pf-white); border-radius: var(--r-card); }
.aval__quem { font-weight: 700; }
.aval__quando { margin-top: auto; padding-top: 8px; font-size: 12px; color: var(--ink-80); }
.setas { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.setas--direita { justify-content: flex-end; }
.seta-btn { display: grid; place-items: center; width: 46px; height: 46px; padding: 12px; background: transparent; border: 0; color: var(--pf-green); }
.seta-btn svg { width: 20px; height: 12px; }
.seta-btn:first-child svg { transform: scaleX(-1); }
.seta-btn.swiper-button-disabled { opacity: .4; cursor: not-allowed; }

/* 09 · dicas (padding-top 88, cards 546 × 692) */
.secao--dicas { padding-top: 88px; padding-bottom: 0; }
.dicas-swiper { margin-top: 40px; }
.dicas-swiper .swiper-slide { height: auto; }

/* 10 · sobre (caixa 1800 × 460, imagem 594) */
.secao--sobre { padding-top: 80px; padding-bottom: 80px; }
.sobre { position: relative; display: grid; grid-template-columns: 1fr 33%; min-height: 460px; border-radius: var(--r-card); background: var(--wash-orange); }
.sobre__texto { display: flex; flex-direction: column; justify-content: center; padding: 60px; }
.sobre__texto .rabisco { margin-top: 6px; }
.sobre__p { max-width: 815px; margin-top: 26px; font-size: 16px; font-style: italic; }
.sobre__texto .link-seta { margin-top: 20px; }
.sobre__midia { border-radius: 0 var(--r-card) var(--r-card) 0; overflow: hidden; }
.sobre__midia img { width: 100%; height: 100%; object-fit: cover; }

/* 11 · feed (408px) */
.secao--feed { padding-top: 0; padding-bottom: 48px; }
.feed { position: relative; }
.feed__item { display: block; aspect-ratio: 1 / 1.2; overflow: hidden; border-radius: 6px; background: var(--fog); }
.feed__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.feed__item:hover img { transform: scale(1.05); }
.feed__seta { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -15px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: #000; }
.feed__seta svg { width: 14px; height: 10px; }
.feed__seta--ant { left: 10px; } .feed__seta--ant svg { transform: scaleX(-1); }
.feed__seta--prox { right: 10px; }

/* ---------- 12 · rodapé ---------- */
.rodape { padding: 48px var(--gutter) 24px; background: var(--wash-cream); }
.rodape__grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.rodape__titulo { font-size: 18px; font-weight: 700; line-height: 1.4; }
.rodape__lista { display: grid; gap: 8px; margin-top: 16px; font-size: 14px; }
.rodape__lista a:hover { text-decoration: underline; text-underline-offset: .3rem; }
.rodape__base { display: grid; justify-items: center; gap: 16px; margin-top: 72px; }
.rodape__redes { display: flex; gap: 20px; }
.rodape__redes svg { width: 22px; height: 22px; transition: transform .2s; }
.rodape__redes a:hover svg { transform: scale(1.07); }
.rodape__pagamento { display: flex; gap: 8px; }
.rodape__pagamento li { padding: 4px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--pf-white); font-size: 12px; font-weight: 700; }
.rodape__copy { font-size: 12px; color: var(--ink-80); }

/* pílula fixa (Mystery Discount na referência) */
.flutuante { position: fixed; left: 16px; bottom: 16px; z-index: 40; display: flex; align-items: center; height: 60px; padding: 0 12px 0 20px; border-radius: var(--r-pill); background: var(--primary); color: var(--on-primary); font-size: 18px; font-weight: 700; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
.flutuante[hidden] { display: none; }
.flutuante button { display: grid; place-items: center; width: 36px; height: 36px; margin-left: 6px; border: 0; background: none; color: inherit; }
.flutuante svg { width: 12px; height: 12px; }

/* ---------- movimento: slideIn medido (600ms, translateY(2rem), cubic-bezier(0,0,.3,1)) ---------- */
html.motion .revela { opacity: .01; transform: translateY(2rem); }
.revela { transition: opacity .6s var(--ease-in), transform .6s var(--ease-in); }
html.motion .revela.visivel { opacity: 1; transform: none; }
html.motion .hero__cartao.revela.visivel { transform: translateY(-50%); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html.motion .revela { opacity: 1; transform: none; }
  html.motion .hero__cartao.revela { transform: translateY(-50%); }
  .aviso__trilho, .marcas__trilho { animation: none; }
}

/* ---------- responsivo (a captura só existe em 1920: abaixo disso é decisão nossa) ---------- */
@media (max-width: 1280px) {
  :root { --gutter: 32px; }
  .nav { gap: 12px; }
  .icones { gap: 12px; }
  .cabecalho { padding: 0 24px; }
  .marca { font-size: 24px; }
  .painel__grade { grid-template-columns: repeat(3, 1fr); }
  .painel__acoes { grid-column: 1 / -1; flex-direction: row; }
}

@media (max-width: 1024px) {
  .cabecalho { grid-template-columns: 1fr auto; height: 80px; }
  .topo { top: -41px; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 8px; padding: 16px 24px 24px; background: var(--pf-green); }
  .nav.aberta { display: flex; }
  .nav__pilula { justify-content: space-between; height: 56px; }
  .icone--menu { display: grid; gap: 5px; align-content: center; }
  .icone--menu span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s; }
  .icone--menu[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .icone--menu[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .painel { position: static; }
  .painel__grade { grid-template-columns: 1fr; padding: 24px; }
  .hero { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .hero__foto { position: relative; height: 72vw; max-height: 560px; object-position: 62% 40%; }
  .hero__cartao { position: relative; left: auto; top: auto; transform: none; width: auto; margin: -64px 24px 0; }
  html.motion .hero__cartao.revela:not(.visivel) { transform: translateY(2rem); }
  html.motion .hero__cartao.revela.visivel { transform: none; }
  .hero { padding-bottom: 24px; }
  .midia { grid-template-columns: 1fr; }
  .midia__foto { aspect-ratio: 16 / 10; height: auto; }
  .midia__texto { padding: 32px; }
  .usp { grid-template-columns: 1fr; }
  .passos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); scrollbar-width: none; }
  .passos > * { scroll-snap-align: start; }
  .categorias { grid-template-columns: repeat(2, 1fr); }
  .sobre { grid-template-columns: 1fr; }
  .sobre__midia { border-radius: 0 0 var(--r-card) var(--r-card); aspect-ratio: 4 / 3; }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .h2 { font-size: 26px; }
  .cabeca__sub { font-size: 19px; margin-top: 24px; }
  .marca { font-size: 21px; }
  .marca img { width: 26px; height: 35px; }
  .icones { gap: 8px; }
  .icone { width: 42px; height: 42px; }
  .icones .icone:first-child { display: none; }
  .hero__cartao { margin: -48px 16px 0; padding: 28px 20px; border-radius: 36px; }
  .hero__titulo { font-size: 30px; }
  .hero__cartao .rabisco { width: 220px; }
  .marcas { padding: 8px 0; }
  .marcas__lista { height: 80px; }
  .marcas__lista li { font-size: 22px; padding: 0 32px; }
  .marcas__lista li:nth-child(3n) { font-size: 18px; }
  .midia__texto { padding: 24px; }
  .midia__texto .h2 { font-size: 21px; }
  .caixa { padding: 48px 20px 40px; }
  .pata-solta--direita { width: 72px; height: 72px; right: 20px; top: -28px; }
  .usp__card { padding: 24px 20px; }
  .usp__titulo { font-size: 21px; }
  .usp { margin-top: 40px; }
  .secao--passos { padding-bottom: 72px; }
  .categorias { gap: 16px; margin-top: 40px; }
  .categoria__nome { font-size: 16px; margin-top: 10px; }
  .cartao__titulo { font-size: 20px; }
  .secao--dicas { padding-top: 64px; }
  .secao--sobre { padding-top: 64px; padding-bottom: 48px; }
  .sobre__texto { padding: 48px 24px 32px; }
  .pata-solta--esquerda { width: 64px; height: 64px; top: -36px; left: 8px; }
  .rodape__grade { grid-template-columns: 1fr; }
  .rodape__base { margin-top: 48px; }
  .flutuante { height: 52px; font-size: 16px; left: 12px; bottom: 12px; }
  .botao { min-height: 60px; }
}