/* =============================================================================
   Meu Amigo pra Vida — sistema visual
   Paleta oficial (PDF da marca): laranja #FA560A · azul #005FFF · rosa #FF60D8 ·
   amarelo #FFCF00 · preto · branco.
   Superfícies com texto usam os tons "tinta" (laranja #D64000, rosa #D11FA0), que
   aceitam texto branco com contraste AA. Os tons vivos ficam para detalhes.
   ============================================================================= */

@font-face { font-family: "Poppins"; src: url("../fonts/poppins-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-bold.woff") format("woff"); font-weight: 700 900; font-display: swap; }

:root {
  --laranja-vivo: #FA560A;
  --laranja: #D64000;
  --laranja-escuro: #B33500;
  --laranja-texto: #C23C00;
  --azul: #005FFF;
  --azul-escuro: #0046CC;
  --rosa-vivo: #FF60D8;
  --rosa: #D11FA0;
  --rosa-escuro: #A8127F;
  --rosa-claro: #FFB3EC;
  --amarelo: #FFCF00;
  --amarelo-claro: #FFE780;
  --preto: #111111;
  --branco: #FFFFFF;
  --creme: #FFF7EC;
  --creme-2: #FFEFD9;
  --cinza: #5C5A57;
  --cinza-claro: #E9E3DA;
  --verde: #12A150;
  --vermelho: #D92D20;

  --bg: var(--creme);
  --text: var(--preto);
  --muted: var(--cinza);
  --surface: var(--branco);
  --line: rgba(17, 17, 17, .12);

  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  /* Direção "lambe-lambe de bairro": cor chapada, recorte e tipografia grande.
     Sem contorno preto e sem sombra dura: superfícies se separam pela cor. */
  --line-strong: #8C847B;
  --shadow-pop: 0 1px 0 rgba(17, 17, 17, .05), 0 14px 34px -22px rgba(17, 17, 17, .45);
  --shadow-pop-sm: 0 1px 0 rgba(17, 17, 17, .05), 0 8px 20px -14px rgba(17, 17, 17, .4);
  --shadow-soft: 0 18px 40px -18px rgba(17, 17, 17, .35);
  --font-display: "Poppins", system-ui, sans-serif;
  --font-body: "Poppins", system-ui, sans-serif;
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(64px, 10vw, 128px);

  --fs-hero: clamp(2.5rem, 5.2vw, 4.4rem);
  --fs-h1: clamp(2.2rem, 5.2vw, 4rem);
  --fs-h2: clamp(1.9rem, 4.2vw, 3.2rem);
  --fs-h3: clamp(1.25rem, 2.2vw, 1.6rem);
  --fs-body: clamp(1rem, 1.05vw, 1.0625rem);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.05; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; font-family: var(--font-display); }
p { margin: 0 0 1em; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--amarelo); color: var(--preto); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 1000; background: var(--preto); color: var(--branco); padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 700; transition: top .2s; }
.skip-link:focus { top: 12px; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container-narrow { width: min(100% - 2 * var(--gutter), 820px); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }
.center { text-align: center; }
.stack > * + * { margin-top: var(--stack, 1rem); }
.hidden { display: none !important; }

/* ---------- Tipografia de destaque ---------- */
.display { font-size: var(--fs-hero); font-weight: 900; line-height: .95; letter-spacing: -.04em; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--muted); max-width: 60ch; }
.center .lead, .lead.center { margin-inline: auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .7em;
  font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: inherit; margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: 3px; background: var(--eyebrow-c, var(--laranja)); flex: none; }
.hl { display: inline-block; padding: 0 .2em; border-radius: .18em; line-height: 1.1; white-space: nowrap; }
.hl-azul { background: var(--azul); color: var(--branco); }
.hl-rosa { background: var(--rosa); color: var(--branco); }
.hl-amarelo { background: var(--amarelo); color: var(--preto); }
.hl-laranja { background: var(--laranja); color: var(--branco); }
.hl-branco { background: var(--branco); color: var(--preto); }
.section-head { max-width: 760px; margin: 0 0 clamp(36px, 5vw, 56px); }
.section-head .lead { margin-inline: auto; }

/* ---------- Botões ---------- */
.btn {
  --btn-bg: var(--preto); --btn-fg: var(--branco);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: .8em 1.6em; border-radius: 999px;
  border: 0; background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 700; font-size: 1rem; line-height: 1.1; text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease-out), background-color .2s, color .2s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(17,17,17,.55); }
.btn:active { transform: scale(.97); box-shadow: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn .icon { width: 1.25em; height: 1.25em; flex: none; }
.btn-laranja { --btn-bg: var(--laranja); --btn-fg: var(--branco); }
.btn-laranja:hover { --btn-bg: var(--preto); --btn-fg: var(--branco); }
.btn-amarelo:hover, .btn-rosa:hover, .btn-branco:hover { --btn-bg: var(--preto); --btn-fg: var(--branco); }
.btn-azul:hover { --btn-bg: var(--azul-escuro); }
.btn-azul { --btn-bg: var(--azul); --btn-fg: var(--branco); }
.btn-rosa { --btn-bg: var(--rosa); --btn-fg: var(--branco); }
.btn-amarelo { --btn-bg: var(--amarelo); --btn-fg: var(--preto); }
.btn-branco { --btn-bg: var(--branco); --btn-fg: var(--preto); }
.btn-preto { --btn-bg: var(--preto); --btn-fg: var(--branco); }
.btn-ghost { --btn-bg: transparent; --btn-fg: currentColor; box-shadow: inset 0 0 0 2px currentColor; }
.btn-ghost:hover { box-shadow: inset 0 0 0 2px currentColor; background: rgba(17,17,17,.06); }
.btn-sm { min-height: 44px; padding: .5em 1.15em; font-size: .9rem; }
.btn-block { width: 100%; }
.btn .arrow { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--branco); color: var(--preto); transition: transform .3s var(--ease-bounce); }
.btn:hover .arrow { transform: translateX(4px); }
.link { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.link:hover { color: var(--laranja-texto); }

/* ---------- Chips / pílulas ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .4em; padding: .35em .95em; border-radius: 999px;
  font-weight: 700; font-size: .85rem; line-height: 1.3; border: 2px solid transparent; white-space: nowrap;
}
.chip-laranja { background: var(--laranja); color: var(--branco); }
.chip-azul { background: var(--azul); color: var(--branco); }
.chip-rosa { background: var(--rosa); color: var(--branco); }
.chip-amarelo { background: var(--amarelo); color: var(--preto); }
.chip-preto { background: var(--preto); color: var(--branco); }
.chip-outline { border-color: var(--preto); background: var(--branco); }
.chip-soft { background: var(--creme-2); color: var(--preto); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Adesivos decorativos ---------- */
.sticker { position: absolute; pointer-events: none; z-index: 1; }
.sticker svg { width: 100%; height: 100%; overflow: visible; }
.spin-slow { animation: spin 18s linear infinite; }
.float { animation: float 6s ease-in-out infinite; }
.float-2 { animation: float 7.5s ease-in-out infinite reverse; }
.wobble { animation: wobble 4s ease-in-out infinite; }
.draw path { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: draw 2.4s var(--ease-out) forwards .3s; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(4deg); } }
@keyframes wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop-in { 0% { opacity: 0; transform: scale(.6) rotate(-8deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }

/* ---------- Revelação ao rolar (entrada e saída) ---------- */
[data-reveal] { opacity: 0; transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--delay, 0s); will-change: transform, opacity; }
[data-reveal="up"] { transform: translateY(32px); }
[data-reveal="down"] { transform: translateY(-24px); }
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="pop"] { transform: translateY(16px); }
[data-reveal="pet"] { transform: translateY(70%) scale(.85); transition-timing-function: var(--ease-out), var(--ease-bounce); transition-duration: .7s, 1.1s; }
[data-reveal].is-visible { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------- Cabeçalho ---------- */
.site-header { position: sticky; top: 0; z-index: 100; padding-block: 12px; transition: padding .3s, background-color .3s, box-shadow .3s; }
.site-header.is-scrolled { background: rgba(255, 247, 236, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); padding-block: 8px; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand img { width: clamp(118px, 13vw, 150px); height: auto; transition: transform .4s var(--ease-bounce); }
.brand:hover img { transform: scale(1.03); }
.brand .meu { font-weight: 900; font-size: .78rem; background: var(--amarelo); border: 2px solid var(--line-strong); border-radius: 999px; padding: .05em .55em; transform: rotate(-10deg) translate(10px, -14px); }
.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a { position: relative; padding: .55em .9em; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .95rem; transition: background-color .2s, color .2s; }
.main-nav a:hover { background: var(--branco); }
.main-nav a[aria-current="page"] { background: var(--preto); color: var(--branco); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.user-menu { position: relative; }
.user-btn { display: inline-flex; align-items: center; gap: .5em; border: 2px solid var(--line-strong); background: var(--branco); border-radius: 999px; padding: 4px 12px 4px 4px; cursor: pointer; font-weight: 700; font-size: .9rem; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--amarelo); display: grid; place-items: center; font-weight: 800; overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.badge-dot { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--laranja); color: var(--branco); font-size: .72rem; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--creme); }
.dropdown { position: absolute; right: 0; top: calc(100% + 10px); min-width: 240px; background: var(--branco); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 8px; display: none; z-index: 120; }
.dropdown.open { display: block; animation: pop-in .25s var(--ease-bounce); transform-origin: top right; }
.dropdown a, .dropdown button { display: flex; align-items: center; gap: .6em; width: 100%; text-align: left; padding: .65em .9em; border-radius: 12px; text-decoration: none; font-weight: 600; border: 0; background: none; cursor: pointer; font-size: .95rem; }
.dropdown a:hover, .dropdown button:hover { background: var(--creme); }
.dropdown hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.nav-toggle { display: none; width: 48px; height: 48px; border-radius: 50%; background: var(--amarelo); cursor: pointer; box-shadow: var(--shadow-pop-sm); }
.nav-toggle span { display: block; width: 20px; height: 3px; background: var(--preto); margin: 4px auto; border-radius: 3px; transition: transform .3s; }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1100px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed; inset: 0 0 0 auto; width: min(86vw, 380px); z-index: 110;
    flex-direction: column; align-items: stretch; gap: 6px; padding: 96px 24px 24px;
    background: var(--laranja); 
    transform: translateX(105%); transition: transform .45s var(--ease-out); overflow-y: auto;
  }
  .main-nav a { font-size: 1.35rem; font-weight: 800; color: var(--preto); padding: .5em .8em; }
  .main-nav a:hover, .main-nav a[aria-current="page"] { background: var(--preto); color: var(--branco); }
  .nav-open .main-nav { transform: none; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(17,17,17,.4); z-index: 105; opacity: 0; pointer-events: none; transition: opacity .3s; }
  .nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  .nav-toggle { position: relative; z-index: 115; }
  .header-actions .btn-entrar { display: none; }
}
@media (min-width: 1101px) { .nav-backdrop, .main-nav .mobile-only { display: none; } }

/* ---------- Herói (página inicial) ---------- */
.hero { position: relative; padding-top: 8px; }
.hero-stage {
  --hero-fg: var(--branco);
  position: relative; overflow: hidden; border-radius: var(--radius-xl);
  background: var(--hero-bg, var(--laranja)); color: var(--hero-fg);
  min-height: clamp(560px, calc(100vh - 130px), 780px);
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: stretch;
  transition: background-color .9s var(--ease-out), color .6s;
  isolation: isolate;
}
.hero-stage[data-theme="azul"] { --hero-bg: var(--azul); --hero-fg: var(--branco); }
.hero-stage[data-theme="rosa"] { --hero-bg: var(--rosa); }
.hero-stage[data-theme="preto"] { --hero-bg: var(--preto); }
.hero-copy { padding: clamp(28px, min(4.2vw, 6vh), 60px) clamp(28px, 5vw, 64px); padding-bottom: clamp(64px, min(6vw, 9vh), 84px); position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; }
.hero-copy .eyebrow { --eyebrow-c: currentColor; }
.hero-copy .display { margin-bottom: .3em; font-size: clamp(2.6rem, min(5.4vw, 8.6vh), 4.4rem); line-height: .92; letter-spacing: -.045em; max-width: 13ch; }
.hero-copy .lead { color: inherit; margin-bottom: 1.6rem; max-width: 46ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-alt { margin: 1.1rem 0 0; font-size: .95rem; font-weight: 600; }
.hero-alt a { font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hero-visual { position: relative; min-height: 520px; z-index: 1; overflow: hidden; }
.hero-giant {
  position: absolute; left: 0; top: 46%; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-weight: 900; font-size: clamp(7rem, 17vw, 15rem); line-height: .8; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 2px var(--hero-fg); opacity: .3; white-space: nowrap;
  transform: translate(calc(var(--px, 0px) * -1.4), calc(-50% + var(--py, 0px) * -1.4));
  transition: transform .4s var(--ease-out);
}
.hero-loop { position: absolute; width: clamp(150px, 18vw, 240px); right: 6%; top: 8%; z-index: 1; color: var(--amarelo); transform: translate(calc(var(--px, 0px) * .8), calc(var(--py, 0px) * .8)); transition: transform .5s var(--ease-out), color .6s; }
.hero-stage[data-theme="laranja"] .hero-loop { color: var(--amarelo); }
.hero-loop path { stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 1.6s var(--ease-out) forwards .4s; }
.hero-pets { position: absolute; inset: 0; transform: translate(var(--px, 0px), var(--py, 0px)); transition: transform .5s var(--ease-out); }
.hero-pet {
  position: absolute; bottom: 0; left: 4%; width: 92%; height: 88%; max-width: none; object-fit: contain; object-position: center bottom; z-index: 2;
  transform: translate(0, 40%) scale(.92); opacity: 0;
  filter: drop-shadow(0 30px 30px rgba(0,0,0,.22));
  transition: transform .9s var(--ease-out), opacity .45s var(--ease-out);
}
.hero-pet.is-active { transform: translate(0, 0) scale(1); opacity: 1; }
.hero-pet.is-leaving { transform: translate(-25%, 6%) scale(.94); opacity: 0; transition: transform .6s var(--ease-out), opacity .4s ease-in; }
.hero-pet.hero-pet-wide { bottom: 3%; }
.hero-name { position: absolute; z-index: 4; left: 6%; bottom: 16%; background: var(--branco); color: var(--preto); border-radius: 20px 20px 20px 4px; padding: 10px 16px; font-weight: 800; box-shadow: var(--shadow-pop); font-size: 1rem; line-height: 1.25; max-width: 230px; transition: opacity .35s, transform .5s var(--ease-out); }
.hero-name small { display: block; font-weight: 600; color: var(--cinza); font-size: .8rem; margin-top: 2px; }
.hero-name.swap { opacity: 0; transform: translateY(8px); }
.hero-dots { position: absolute; left: clamp(28px, 5vw, 64px); bottom: 26px; display: flex; gap: 10px; z-index: 5; }
.hero-dots button { width: 44px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; color: inherit; display: grid; place-items: center; }
.hero-dots button::before { content: ""; display: block; width: 12px; height: 4px; border-radius: 4px; background: currentColor; opacity: .4; transition: width .4s var(--ease-out), opacity .3s; }
.hero-dots button[aria-current="true"]::before { width: 36px; opacity: 1; }

/* Busca rápida dentro do herói */
.quick-search { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; background: var(--branco); color: var(--preto); border-radius: 22px; padding: 6px; max-width: 620px; box-shadow: 0 20px 40px -24px rgba(17,17,17,.55); }
.quick-search .seg { border: 0; background: var(--creme); grid-column: 1 / -1; justify-self: start; }
.quick-search .select { min-height: 48px; border: 0; background-color: var(--creme); border-radius: 16px; font-size: .95rem; font-weight: 600; padding-left: 14px; padding-right: 36px; background-position: right 12px center; }
.quick-search .btn { min-height: 48px; border-radius: 16px; }
@media (max-width: 640px) { .quick-search { grid-template-columns: 1fr 1fr; } .quick-search .btn { grid-column: 1 / -1; } }

@media (max-width: 860px) {
  .hero-stage { grid-template-columns: 1fr; min-height: auto; border-radius: var(--radius-lg); }
  .hero-copy { padding-bottom: 12px; }
  .hero-visual { min-height: 420px; }
  .hero-dots { left: 50%; transform: translateX(-50%); bottom: 14px; }
  .hero-name { left: 4%; bottom: 14%; font-size: .9rem; max-width: 190px; }
  .hero-giant { top: 50%; }
}

/* ---------- Faixa animada (marquee) ---------- */
.ribbon { position: relative; z-index: 6; margin-block: clamp(32px, 6vw, 64px); }
.ribbon-track { overflow: hidden; background: var(--preto); color: var(--branco);  padding-block: 14px; transform: rotate(-2deg) scale(1.03); }
.ribbon-track.alt { background: var(--rosa); color: var(--branco); transform: rotate(1.5deg) scale(1.03); margin-top: -18px; }
.ribbon-inner { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.ribbon-track.alt .ribbon-inner { animation-direction: reverse; animation-duration: 38s; }
.ribbon-item { display: inline-flex; align-items: center; gap: 18px; padding-inline: 18px; font-size: clamp(1.3rem, 2.6vw, 2.2rem); font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; }
.ribbon-item svg { width: 1.1em; height: 1.1em; flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Cards genéricos ---------- */
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.card-pad { padding: clamp(20px, 3vw, 32px); }
.grid { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Passos "como funciona" */
.step { position: relative; border-radius: var(--radius-lg); padding: clamp(28px, 3.4vw, 40px); overflow: hidden; min-height: 320px; display: flex; flex-direction: column; box-shadow: var(--shadow-pop); transition: transform .4s var(--ease-bounce); }
.step:hover { transform: translateY(-6px); }
.step-num { font-size: 4.5rem; font-weight: 900; line-height: 1; opacity: .9; margin-bottom: auto; }
.step h3 { font-size: 1.6rem; margin-top: 1.2rem; }
.step p { margin-bottom: 1.2rem; }
.step .link { margin-top: auto; }
.step-laranja { background: var(--laranja); color: var(--branco); }
.step-azul { background: var(--azul); color: var(--branco); }
.step-rosa { background: var(--rosa); color: var(--branco); }
.step-amarelo { background: var(--amarelo); color: var(--preto); }
.step .sticker { width: 120px; height: 120px; right: -20px; top: -20px; opacity: .9; }

/* ---------- Card de animal ---------- */
.pets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: clamp(18px, 2.4vw, 28px); }
.pet-card { position: relative; display: flex; flex-direction: column; text-decoration: none; background: var(--branco); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-pop); transition: transform .45s var(--ease-bounce), box-shadow .45s var(--ease-bounce); }
.pet-card:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -24px rgba(17,17,17,.55); }
.pet-photo { position: relative; aspect-ratio: 4 / 5; background: var(--card-bg, var(--amarelo)); overflow: hidden; }
.pet-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.pet-photo img.cutout { object-fit: contain; object-position: bottom; inset: auto 0 0 0; height: 94%; }
.pet-card:hover .pet-photo img { transform: scale(1.06); }
.pet-card:nth-child(4n+1) { --card-bg: var(--amarelo); }
.pet-card:nth-child(4n+2) { --card-bg: var(--rosa); }
.pet-card:nth-child(4n+3) { --card-bg: var(--azul); }
.pet-card:nth-child(4n+4) { --card-bg: var(--laranja); }
.pet-badges { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: flex-start; z-index: 2; gap: 8px; }

.fav-btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--branco); display: grid; place-items: center; cursor: pointer; transition: transform .3s var(--ease-bounce); flex: none; }
.fav-btn:hover { transform: scale(1.12); }
.fav-btn svg { width: 22px; height: 22px; }
.fav-btn[aria-pressed="true"] { background: var(--rosa); }
.fav-btn[aria-pressed="true"] svg path { fill: var(--preto); }
.pet-info { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pet-name { font-size: 1.5rem; font-weight: 900; letter-spacing: -.03em; margin: 0; line-height: 1.1; }
.pet-meta { color: var(--muted); font-size: .9rem; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.pet-meta span { display: inline-flex; align-items: center; gap: 4px; }
.pet-meta svg { width: 16px; height: 16px; }
.pet-traits { margin-top: auto; padding-top: 10px; }
.status-ribbon { position: absolute; bottom: 16px; left: -6px; z-index: 2; padding: 6px 16px 6px 20px; background: var(--preto); color: var(--branco); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; border-radius: 0 999px 999px 0; }

/* Esqueleto de carregamento */
.skeleton { position: relative; overflow: hidden; background: var(--cinza-claro); border-radius: var(--radius-lg); min-height: 420px; border: 3px solid transparent; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* Estado vazio */
.empty { text-align: center; padding: clamp(36px, 6vw, 64px) 24px; border-radius: var(--radius-lg); background: var(--branco); }
.empty .empty-art.is-loop { width: 150px; height: 92px; border-radius: 0; background: none; box-shadow: none; animation: none; color: var(--laranja); }
.empty .empty-art.is-loop svg { width: 100%; height: 100%; }
.empty .empty-art { width: 140px; height: 140px; margin: 0 auto 16px; border-radius: 50%; background: var(--amarelo); display: grid; place-items: center; animation: float 6s ease-in-out infinite; }
.empty .empty-art svg { width: 70px; height: 70px; }
.empty h3 { font-size: 1.5rem; }
.empty p { color: var(--muted); max-width: 46ch; margin-inline: auto; }

/* ---------- Números do impacto ---------- */
.impact { background: var(--azul); color: var(--branco); border-radius: var(--radius-xl); padding: clamp(36px, 6vw, 72px); position: relative; overflow: hidden; }
.impact .grid { position: relative; z-index: 2; }
.stat { text-align: center; }
.stat-num { font-size: clamp(2.8rem, 6vw, 4.6rem); font-weight: 900; letter-spacing: -.05em; line-height: 1; display: block; }
.stat-label { font-weight: 600; opacity: .9; }

/* ---------- Blog ---------- */
.post-card { display: flex; flex-direction: column; text-decoration: none; background: var(--branco); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-pop); transition: transform .4s var(--ease-bounce); height: 100%; }
.post-card:hover { transform: translateY(-6px); }
.post-cover { aspect-ratio: 16 / 10; background: var(--post-bg, var(--laranja)); position: relative; overflow: hidden; display: grid; place-items: center; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-cover img.post-pet { position: absolute; bottom: 0; right: 8%; width: auto; height: 92%; object-fit: contain; object-position: bottom; transition: transform .7s var(--ease-out); filter: drop-shadow(0 16px 18px rgba(0,0,0,.2)); }
.post-card:hover .post-pet { transform: translateY(-6px) scale(1.04); }
.post-cover .post-art { width: 46%; color: rgba(255,255,255,.95); transition: transform .6s var(--ease-bounce); }
.post-card:hover .post-art { transform: scale(1.06); }
.post-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-body h3 { font-size: 1.3rem; margin: 0; }
.post-body p { color: var(--muted); margin: 0; font-size: .95rem; }
.post-foot { margin-top: auto; padding-top: 10px; font-size: .85rem; color: var(--muted); display: flex; gap: 12px; align-items: center; }
.cat-laranja { --post-bg: var(--laranja); }
.cat-azul { --post-bg: var(--azul); }
.cat-rosa { --post-bg: var(--rosa); }
.cat-amarelo { --post-bg: var(--amarelo); }
.cat-amarelo .post-art, .cat-rosa .post-art { color: rgba(17,17,17,.85); }

/* Conteúdo em markdown */
.prose { font-size: 1.08rem; line-height: 1.75; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 2em 0 .6em; }
.prose h3 { font-size: 1.3rem; margin: 1.6em 0 .5em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--laranja); font-weight: 800; }
.prose blockquote { margin: 1.6em 0; padding: 20px 24px; border-radius: var(--radius); background: var(--amarelo); font-weight: 600; }
.prose blockquote p:last-child { margin: 0; }
.prose a { font-weight: 700; color: var(--azul); }
.prose strong { font-weight: 800; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95rem; display: block; overflow-x: auto; }
.prose th, .prose td { border: 2px solid var(--line-strong); padding: 10px 12px; text-align: left; vertical-align: top; }
.prose th { background: var(--preto); color: var(--branco); }
.prose hr { border: 0; border-top: 3px dashed var(--line); margin: 2em 0; }

/* ---------- Organizações / parceiros ---------- */
.org-card { display: flex; flex-direction: column; gap: 14px; text-decoration: none; background: var(--branco); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-pop); transition: transform .4s var(--ease-bounce); }
.org-card:hover { transform: translateY(-6px); }
.org-head { display: flex; align-items: center; gap: 14px; }
.org-logo { width: 68px; height: 68px; border-radius: 20px; background: var(--amarelo); display: grid; place-items: center; font-weight: 900; font-size: 1.6rem; overflow: hidden; flex: none; }
.org-logo img { width: 100%; height: 100%; object-fit: cover; }
.org-name { font-weight: 800; font-size: 1.2rem; line-height: 1.2; margin: 0; }
.org-place { color: var(--muted); font-size: .9rem; }
.pix-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 16px; background: var(--creme); border: 2px dashed var(--preto); }
.pix-box code { font-family: inherit; font-weight: 700; word-break: break-all; flex: 1; min-width: 0; }
.partner-strip { display: flex; gap: 16px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.partner-strip .ribbon-inner { gap: 16px; animation-duration: 40s; }
.partner-pill { display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px 10px 10px; background: var(--branco); border-radius: 999px; font-weight: 800; white-space: nowrap; text-decoration: none; }
.partner-pill .org-logo { width: 44px; height: 44px; border-radius: 50%; font-size: 1rem; border-width: 2px; }

/* ---------- Eventos ---------- */
.event-card { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: start; background: var(--branco); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-pop); text-decoration: none; transition: transform .4s var(--ease-bounce); }
.event-card:hover { transform: translateY(-5px); }
.event-date { border-radius: 20px; background: var(--rosa); color: var(--branco); text-align: center; padding: 10px 6px; line-height: 1.05; }
.event-date strong { display: block; font-size: 2.2rem; font-weight: 900; }
.event-date span { font-weight: 800; text-transform: uppercase; font-size: .8rem; letter-spacing: .08em; }
.event-card h3 { font-size: 1.25rem; margin: 6px 0; }
.event-card p { margin: 0; color: var(--muted); font-size: .95rem; }

/* ---------- Cartazes: bloco de cor + animal recortado ----------
   .poster > .poster-bg (cor e palavra gigante, recortados na moldura)
           + .poster-copy (texto branco)
           + .poster-art (animal que ocupa a altura toda e sai pela borda de cima).
   A palavra gigante, num tom mais fundo da mesma cor, preenche o fundo atrás do
   animal, então o bloco nunca fica vazio. */
.poster {
  --pc: var(--laranja); --pc-deep: var(--laranja-escuro); --pop: clamp(28px, 4.4vw, 64px); --r: var(--radius-xl);
  position: relative; isolation: isolate; color: var(--branco);
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: stretch;
  border-radius: var(--r); margin-top: var(--pop);
}
.poster.azul { --pc: var(--azul); --pc-deep: #0047D1; }
.poster.rosa { --pc: var(--rosa); --pc-deep: var(--rosa-escuro); }
.poster.preto { --pc: var(--preto); --pc-deep: #262626; }
.poster-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; background: var(--pc); transition: clip-path 1.1s var(--ease-out), background-color .6s; clip-path: inset(0 0 0 0 round var(--r)); }
html:not(.no-js) .poster[data-poster]:not(.is-in) .poster-bg { clip-path: inset(100% 0 0 0 round var(--r)); }
.poster-word {
  position: absolute; left: -.04em; bottom: -.2em; white-space: nowrap; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-weight: 900; font-size: clamp(7rem, 19vw, 17rem); line-height: .8; letter-spacing: -.065em;
  color: var(--pc-deep); transition: color .6s;
  transform: translate3d(calc(var(--sx, 0) * 1px - var(--dx, 0px) * .6), 0, 0); will-change: transform;
}
.poster-loop { position: absolute; top: clamp(16px, 3vw, 34px); right: clamp(16px, 3vw, 40px); width: clamp(110px, 12vw, 170px); color: var(--amarelo); }
.poster-copy { position: relative; z-index: 2; align-self: center; padding: clamp(32px, 5.5vw, 72px); }
.poster-copy .eyebrow { --eyebrow-c: var(--amarelo); }
.poster-copy h1 { font-size: var(--fs-h1); max-width: 15ch; }
.poster-copy h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); max-width: 15ch; }
.poster-copy p { max-width: 44ch; }
.poster-copy .lead { color: inherit; }
.poster-copy .btn { margin-top: .6rem; }
.poster-copy .hero-ctas { margin-top: 1.4rem; }
.poster-copy .hero-ctas .btn { margin-top: 0; }
.poster-copy .big { font-size: clamp(2.6rem, 6.4vw, 5.2rem); font-weight: 900; line-height: .92; letter-spacing: -.05em; max-width: 11ch; }
.poster-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 10px; }
.poster-list li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; line-height: 1.4; }
.poster-list li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--amarelo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
/* O animal: altura total + a parte que sai pela borda de cima. Recortado só embaixo. */
.poster-art { position: relative; z-index: 1; pointer-events: none; min-height: 100%; clip-path: inset(calc(-1 * var(--pop) - 80px) -60px 0 -60px round 0 0 var(--r) 0); }
.poster-pet {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: calc(100% + var(--pop)); max-width: none;
  object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .25));
  transform: translate3d(var(--dx, 0px), calc(var(--sy, 0) * 1px + var(--dy, 0px)), 0);
  transition: opacity .5s, transform .2s linear; will-change: transform;
}
html:not(.no-js) .poster[data-poster]:not(.is-in) .poster-pet { transform: translate3d(0, 60%, 0); }
.poster[data-poster].is-in .poster-pet { transition: opacity .5s, transform 1.1s var(--ease-out) .25s; }
.poster[data-poster].is-settled .poster-pet { transition: opacity .5s, transform .25s linear; }
.poster-pet.is-swapping { opacity: 0; }
.poster-tag {
  position: absolute; z-index: 3; left: -6%; bottom: 18%; margin: 0; max-width: 230px;
  background: var(--branco); color: var(--preto); border-radius: 20px 20px 20px 4px; padding: 11px 16px;
  font-weight: 800; font-size: .95rem; line-height: 1.25; box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .45);
  transform: translate3d(calc(var(--dx, 0px) * .35), calc(var(--dy, 0px) * .35), 0) rotate(-3deg);
  transition: transform .4s var(--ease-out), opacity .5s;
}
.poster-tag small { display: block; margin-top: 2px; font-weight: 600; font-size: .78rem; color: var(--cinza); }
html:not(.no-js) .poster[data-poster]:not(.is-in) .poster-tag { opacity: 0; transform: translateY(14px) rotate(-3deg); }
.poster[data-poster].is-in .poster-tag { transition: transform .8s var(--ease-out) .7s, opacity .5s .7s; }

/* Cartaz sem animal (página de uma organização) */
.poster-solo { grid-template-columns: 1fr; margin-top: 12px; }
.poster-solo .poster-copy h1 { max-width: 20ch; }

/* Duas chamadas lado a lado */
.cta-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 28px); padding-top: var(--pop, 48px); }
.cta-split .poster { margin-top: 0; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); --r: var(--radius-lg); }
.cta-split .poster-copy h2 { font-size: clamp(1.8rem, 2.7vw, 2.35rem); max-width: 12ch; }
.cta-split .poster-copy p { max-width: 30ch; font-size: .97rem; }
.cta-split .poster-pet { left: -16%; width: 116%; object-position: right bottom; }
.cta-split .poster-copy { padding: clamp(28px, 3.6vw, 48px); padding-right: 0; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; }
.cta-split .poster-copy .btn { margin-top: auto; }
.cta-split .poster-copy p:last-of-type { margin-bottom: 1.6rem; }
.cta-split .poster-word { font-size: clamp(6rem, 13vw, 12rem); }

/* Bloco só de imagem (ex.: missão em Sobre) */
.poster-media { grid-template-columns: 1fr; min-height: 420px; }
.poster-media .poster-art { clip-path: inset(calc(-1 * var(--pop) - 80px) -60px 0 -60px round 0 0 var(--r) var(--r)); }
.poster-media .poster-tag { left: 7%; bottom: auto; top: 12%; }

/* Painel lateral das telas de conta (vertical) */
.poster-v { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); margin-top: 0; --pop: 0px; position: sticky; top: 96px; align-self: start; min-height: min(700px, calc(100vh - 120px)); }
.poster-v .poster-copy { align-self: start; padding-bottom: 0; }
.poster-v .poster-copy h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); max-width: 14ch; }
.poster-v .poster-art { min-height: 260px; clip-path: inset(-80px -60px 0 -60px round 0 0 var(--r) var(--r)); }
.poster-v .poster-pet { height: 100%; width: 92%; left: auto; right: 0; object-position: right bottom; }
.poster-v .poster-tag { left: clamp(20px, 4vw, 48px); bottom: 14%; }
.poster-v .poster-word { bottom: -.16em; font-size: clamp(6rem, 12vw, 11rem); }

@media (max-width: 1100px) and (min-width: 861px) {
  .cta-split .poster { grid-template-columns: 1fr; }
  .cta-split .poster-copy { padding-right: clamp(28px, 3.6vw, 48px); }
  .cta-split .poster-art { height: 260px; min-height: 0; clip-path: inset(-80px -60px 0 -60px round 0 0 var(--r) var(--r)); }
  .cta-split .poster-pet { height: 100%; }
}
@media (max-width: 860px) {
  .cta-split { grid-template-columns: 1fr; gap: 20px; padding-top: 0; }
  .poster, .cta-split .poster { grid-template-columns: 1fr; --pop: 0px; margin-top: 12px; }
  .poster-copy, .cta-split .poster-copy { padding: 30px 22px 6px; }
  .cta-split .poster-copy .btn { margin-top: .4rem; }
  .poster-art, .cta-split .poster-art { height: clamp(230px, 64vw, 330px); min-height: 0; clip-path: inset(-80px -60px 0 -60px round 0 0 var(--r) var(--r)); }
  .poster-pet { height: 100%; }
  .poster-word, .cta-split .poster-word { font-size: clamp(6rem, 34vw, 12rem); }
  .poster-tag { left: 16px; bottom: 16px; max-width: 190px; font-size: .86rem; padding: 9px 13px; }
  .poster-media { min-height: 0; }
  .poster-media .poster-tag { top: 16px; bottom: auto; }
  .poster .poster-loop { display: none; }
  .cta-split .poster-art { height: clamp(270px, 82vw, 350px); margin-top: -36px; }
  .cta-split .poster-pet { left: 30%; width: 70%; object-position: center bottom; }
}

/* ---------- Filtros ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px; background: var(--branco); border-radius: var(--radius); box-shadow: var(--shadow-pop-sm); margin-bottom: 28px; }
.filters .search { flex: 1 1 240px; }
.seg { display: inline-flex; border: 2px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: var(--creme); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { padding: .5em 1em; cursor: pointer; font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; gap: .3em; transition: background-color .2s; user-select: none; }
.seg input:checked + label { background: var(--preto); color: var(--branco); }
.seg input:focus-visible + label { outline: 3px solid var(--azul); outline-offset: -3px; }

/* ---------- Formulários ---------- */
.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-row-3 { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 640px) { .form-row, .form-row-3 { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field > label, .field > .label { font-weight: 700; font-size: .95rem; }
.field .hint { font-size: .85rem; color: var(--muted); }
.req { color: var(--laranja-texto); }
.input, .select, .textarea {
  width: 100%; min-height: 52px; padding: .8em 1em; border-radius: 16px; border: 2px solid var(--line-strong);
  background: var(--branco); outline: none; transition: box-shadow .2s, border-color .2s; font-size: 1rem;
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.input:focus, .select:focus, .textarea:focus { box-shadow: 0 0 0 4px rgba(0, 95, 255, .25); border-color: var(--azul); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--vermelho); box-shadow: 0 0 0 4px rgba(217, 45, 32, .15); }
.field-error { color: var(--vermelho); font-size: .85rem; font-weight: 600; min-height: 0; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: .95rem; line-height: 1.45; }
.check input { appearance: none; width: 24px; height: 24px; flex: none; margin-top: 1px; border: 2px solid var(--line-strong); border-radius: 8px; background: var(--branco); display: grid; place-items: center; cursor: pointer; transition: background-color .2s; }
.check input::after { content: ""; width: 6px; height: 11px; border: solid var(--preto); border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0); margin-top: -2px; transition: transform .2s var(--ease-bounce); }
.check input:checked { background: var(--amarelo); }
.check input:checked::after { transform: rotate(45deg) scale(1); }
.check input[type="radio"] { border-radius: 50%; }
.check input[type="radio"]::after { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--preto); transform: scale(0); margin: 0; }
.check input[type="radio"]:checked::after { transform: scale(1); }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; }
.choice label { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 16px 12px; border: 2px solid var(--line-strong); border-radius: 18px; background: var(--branco); cursor: pointer; font-weight: 700; transition: transform .25s var(--ease-bounce), background-color .2s, box-shadow .2s; }
.choice label:hover { transform: translateY(-3px); }
.choice input:checked + label { background: var(--amarelo); box-shadow: var(--shadow-pop-sm); }
.choice input:focus-visible + label { outline: 3px solid var(--azul); outline-offset: 2px; }
.choice label .emoji { font-size: 1.8rem; line-height: 1; }
.choice label .emoji:empty { display: none; }
.choice label small { font-weight: 500; color: var(--muted); font-size: .8rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 800; font-size: 1.05rem; margin-bottom: 10px; padding: 0; }
.password-wrap { position: relative; }
.password-wrap .input { padding-right: 56px; }
.password-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; cursor: pointer; border-radius: 10px; display: grid; place-items: center; }
.password-toggle:hover { background: var(--creme); }
.strength { height: 6px; border-radius: 6px; background: var(--cinza-claro); overflow: hidden; }
.strength span { display: block; height: 100%; width: 0; transition: width .3s, background-color .3s; }

/* Card de autenticação */
.auth-wrap { min-height: calc(100vh - 120px); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; padding-block: 24px 64px; }
.auth-wrap > * { min-width: 0; }
.auth-card { background: var(--branco); border-radius: var(--radius-xl); padding: clamp(24px, 4vw, 48px); box-shadow: var(--shadow-pop); align-self: start; }
.auth-card h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .9rem; font-weight: 600; margin: 4px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 2px; background: var(--line); }
.google-btn { --btn-bg: var(--branco); --btn-fg: var(--preto); box-shadow: inset 0 0 0 2px var(--line-strong); }
.google-btn:hover { --btn-bg: var(--creme); --btn-fg: var(--preto); }
@media (max-width: 900px) { .auth-wrap { grid-template-columns: 1fr; } .auth-wrap .poster-v { position: relative; top: 0; min-height: 0; order: -1; } .auth-wrap .poster-v .poster-list { display: none; } .auth-wrap .poster-v .poster-art { height: 210px; min-height: 0; } }

/* Abas */
.tabs { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--creme); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 1 0 auto; border: 0; background: transparent; border-radius: 999px; padding: .65em 1.2em; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s; }
.tab[aria-selected="true"] { background: var(--preto); color: var(--branco); }
.tab:hover:not([aria-selected="true"]) { background: var(--branco); }

/* Painel (área logada) */
.dash { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; padding-block: 24px 80px; }
.dash-nav { position: sticky; top: 92px; display: grid; gap: 4px; background: var(--branco); border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow-pop-sm); }
.dash-nav a { display: flex; align-items: center; gap: 10px; padding: .7em .9em; border-radius: 14px; text-decoration: none; font-weight: 700; font-size: .95rem; }
.dash-nav a:hover { background: var(--creme); }
.dash-nav a[aria-current="page"] { background: var(--amarelo); }
.dash-nav a .count { margin-left: auto; background: var(--laranja); color: var(--branco); border-radius: 999px; padding: 0 8px; font-size: .78rem; }
.dash-main { min-width: 0; }
.dash-section + .dash-section { margin-top: 28px; }
.dash-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.dash-title h1, .dash-title h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); }
@media (max-width: 900px) { .dash { grid-template-columns: 1fr; } .dash-nav { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; border-radius: 999px; padding: 6px; } .dash-nav a { border-radius: 999px; } }

.list { display: grid; gap: 12px; }
.list-item { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; background: var(--branco); border: 2px solid var(--line-strong); border-radius: 20px; padding: 14px 16px; }
.list-item .thumb { width: 64px; height: 64px; border-radius: 16px; overflow: hidden; background: var(--amarelo); border: 2px solid var(--line-strong); display: grid; place-items: center; font-weight: 900; }
.list-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.list-item h3 { font-size: 1.1rem; margin: 0 0 2px; }
.list-item p { margin: 0; color: var(--muted); font-size: .9rem; }
.list-item .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .list-item { grid-template-columns: auto 1fr; } .list-item .actions { grid-column: 1 / -1; justify-content: flex-start; } }

.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .8rem; padding: .25em .75em; border-radius: 999px; border: 2px solid var(--line-strong); background: var(--branco); white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--st, var(--cinza)); }
.st-ok { --st: var(--verde); }
.st-wait { --st: var(--amarelo); }
.st-info { --st: var(--azul); }
.st-bad { --st: var(--vermelho); }
.st-pink { --st: var(--rosa); }

.notice { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; border: 2px solid var(--line-strong); background: var(--amarelo-claro); font-size: .95rem; }
.notice.info { background: #DCE8FF; }
.notice.ok { background: #D7F5E2; }
.notice.bad { background: #FFE0DC; }
.notice svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.notice p { margin: 0; }

/* Timeline do pedido */
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.timeline li { position: relative; padding: 0 0 20px 32px; }
.timeline li::before { content: ""; position: absolute; left: 7px; top: 22px; bottom: 0; width: 3px; background: var(--cinza-claro); }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ""; position: absolute; left: 0; top: 4px; width: 17px; height: 17px; border-radius: 50%; background: var(--amarelo); }
.timeline time { display: block; font-size: .8rem; color: var(--muted); }

/* Chat */
.chat { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; padding: 16px; background: var(--creme); border-radius: 18px; border: 2px solid var(--line-strong); }
.msg { max-width: 78%; padding: 10px 14px; border-radius: 18px; background: var(--branco); border: 2px solid var(--line-strong); font-size: .95rem; white-space: pre-wrap; word-break: break-word; }
.msg.me { align-self: flex-end; background: var(--azul); color: var(--branco); border-bottom-right-radius: 4px; }
.msg:not(.me) { border-bottom-left-radius: 4px; }
.msg time { display: block; font-size: .72rem; opacity: .7; margin-top: 4px; }

/* Detalhe do animal */
.pet-detail { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 56px); align-items: start; padding-block: 24px 64px; }
.gallery-main { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-xl); overflow: hidden; background: var(--amarelo); box-shadow: var(--shadow-pop); }
.gallery-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .5s, transform .8s var(--ease-out); }
.gallery-main img.is-active { opacity: 1; transform: none; }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; padding: 4px; }
.gallery-thumbs button { width: 76px; height: 92px; flex: none; border-radius: 14px; overflow: hidden; border: 2px solid var(--line-strong); padding: 0; cursor: pointer; opacity: .6; transition: opacity .2s, transform .3s var(--ease-bounce); background: var(--cinza-claro); }
.gallery-thumbs button[aria-current="true"] { opacity: 1; transform: translateY(-3px); box-shadow: var(--shadow-pop-sm); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
.fact { padding: 12px 14px; border-radius: 16px; border: 2px solid var(--line-strong); background: var(--branco); }
.fact small { display: block; color: var(--muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.fact strong { font-size: 1.05rem; }
.health { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.health span { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; }
.health svg { width: 22px; height: 22px; flex: none; }
.sticky-cta { position: sticky; top: 96px; }
@media (max-width: 900px) { .pet-detail { grid-template-columns: 1fr; } .sticky-cta { position: static; } }

/* Editor de foto (enquadramento padronizado) */
.cropper { position: relative; width: 100%; max-width: 360px; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 20px 20px; touch-action: none; cursor: grab; margin-inline: auto; }
.cropper:active { cursor: grabbing; }
.cropper img { position: absolute; left: 0; top: 0; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; transform-origin: 0 0; }
.cropper .guide { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px); background-size: 33.33% 33.33%; border-radius: inherit; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.photo-tile { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; border: 2px solid var(--line-strong); overflow: hidden; background: var(--cinza-claro); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile .tile-actions { position: absolute; inset: auto 6px 6px 6px; display: flex; gap: 6px; justify-content: space-between; }
.photo-tile .tile-actions button { border: 2px solid var(--line-strong); background: var(--branco); border-radius: 999px; font-size: .75rem; font-weight: 700; padding: 4px 8px; cursor: pointer; }
.photo-tile .cover-tag { position: absolute; top: 6px; left: 6px; }
.photo-add { display: grid; place-items: center; text-align: center; gap: 4px; aspect-ratio: 4 / 5; border-radius: 18px; border: 3px dashed var(--preto); background: var(--branco); cursor: pointer; font-weight: 700; font-size: .9rem; padding: 8px; transition: background-color .2s; }
.photo-add:hover { background: var(--amarelo-claro); }
.photo-add input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: rgba(17, 17, 17, .55); opacity: 0; pointer-events: none; transition: opacity .25s; }
.modal.open { opacity: 1; pointer-events: auto; }
.modal-box { width: min(100%, 560px); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--branco); border-radius: var(--radius-lg); box-shadow: 0 30px 60px -30px rgba(17,17,17,.6); padding: clamp(20px, 3vw, 32px); transform: translateY(30px) scale(.96); transition: transform .4s var(--ease-bounce); }
.modal.open .modal-box { transform: none; }
.modal-box.wide { width: min(100%, 860px); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.modal-head h2 { font-size: 1.6rem; margin: 0; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--branco); cursor: pointer; display: grid; place-items: center; flex: none; transition: transform .25s var(--ease-bounce); }
.icon-btn:hover { background: var(--creme); }
.icon-btn svg { width: 20px; height: 20px; }

/* Toasts */
.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 400; display: grid; gap: 10px; width: min(92vw, 440px); }
.toast { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 18px; background: var(--branco); box-shadow: var(--shadow-pop-sm); font-weight: 600; animation: toast-in .45s var(--ease-bounce); }
.toast.ok { background: #D7F5E2; }
.toast.bad { background: #FFE0DC; }
.toast.leaving { animation: toast-out .3s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(30px) scale(.9); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(20px); } }


/* ---------- Rodapé ---------- */
.site-footer { position: relative; background: var(--preto); color: var(--branco); margin-top: calc(var(--section-y) + 120px); padding: clamp(52px, 7vw, 88px) 0 24px; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
/* Cachorro que espia por cima da borda do rodapé */
.footer-peek { position: absolute; right: clamp(24px, 9vw, 140px); bottom: 100%; width: clamp(150px, 16vw, 210px); height: clamp(120px, 12vw, 160px); overflow: hidden; pointer-events: none; }
.footer-peek img { width: 100%; height: auto; transform: translateY(100%); transition: transform 1s var(--ease-out) .15s; }
.site-footer.is-in .footer-peek img { transform: translateY(8%); }
.footer-cta { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; padding-bottom: clamp(36px, 5vw, 56px); margin-bottom: clamp(36px, 5vw, 56px); border-bottom: 1px solid rgba(255, 255, 255, .16); }
.footer-cta h2 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); max-width: 17ch; margin: 0; }
.footer-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.site-footer .btn-ghost { --btn-fg: var(--branco); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.site-footer .btn-ghost:hover { background: var(--branco); --btn-fg: var(--preto); color: var(--preto); box-shadow: none; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer-grid h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--amarelo); margin-bottom: 1.1em; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer-grid nav a { display: inline-block; padding: 5px 0; text-decoration: none; color: rgba(255, 255, 255, .82); background: linear-gradient(var(--amarelo), var(--amarelo)) left bottom / 0 2px no-repeat; transition: color .2s, background-size .35s var(--ease-out); }
.footer-grid nav a:hover, .footer-grid nav a:focus-visible { color: var(--branco); background-size: 100% 2px; }
.footer-brand img { width: 170px; margin-bottom: 18px; }
.footer-brand p { color: rgba(255, 255, 255, .78); max-width: 36ch; }
.footer-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(36px, 5vw, 56px); }
.footer-info p { margin: 0; padding: 18px 20px; border-radius: var(--radius); background: #1E1E1E; color: rgba(255, 255, 255, .78); font-size: .9rem; line-height: 1.5; }
.footer-info strong { display: block; color: var(--branco); margin-bottom: 4px; }
.footer-mark { margin: clamp(40px, 6vw, 72px) 0 0; overflow: hidden; padding-top: .04em; text-align: center; white-space: nowrap; font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 9.9vw, 10.2rem); line-height: .86; letter-spacing: -.06em; color: var(--laranja-vivo); padding-bottom: .16em; margin-bottom: -.1em; }
.footer-mark span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 35ms); }
.site-footer.is-in .footer-mark span { transform: none; }
.no-js .footer-mark span { transform: none; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .85rem; color: rgba(255, 255, 255, .72); }
.footer-bottom a { text-decoration: none; color: inherit; }
.footer-bottom a:hover { color: var(--branco); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.to-top { font-weight: 700; color: var(--branco) !important; }
.socials { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.socials a:not(.footer-contact) { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--branco); color: var(--preto); transition: background-color .2s, transform .3s var(--ease-out); }
.socials a:not(.footer-contact):hover { background: var(--amarelo); transform: translateY(-2px); }
.socials svg { width: 20px; height: 20px; }
.footer-contact { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; color: var(--branco); }
.footer-contact:hover { color: var(--amarelo); }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } .footer-info { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .footer-cta-actions .btn { flex: 1 1 100%; } .footer-bottom { flex-direction: column; align-items: flex-start; } .footer-peek { right: 20px; } }

/* ---------- Utilitários ---------- */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.flex { display: flex; } .wrap { flex-wrap: wrap; } .gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.bold { font-weight: 700; }
.bg-laranja { background: var(--laranja); color: var(--branco); }
.bg-azul { background: var(--azul); color: var(--branco); }
.bg-rosa { background: var(--rosa); color: var(--branco); }
.bg-amarelo { background: var(--amarelo); color: var(--preto); }
.bg-branco { background: var(--branco); }
.bg-preto { background: var(--preto); color: var(--branco); }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; display: inline-block; vertical-align: middle; }
.loading-page { display: grid; place-items: center; min-height: 50vh; }

/* ---------- Acessibilidade: menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .footer-mark span, .footer-peek img { transform: none !important; transition: none !important; }
  .poster-bg, .poster-pet, .poster-tag, .poster-word { transition: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .ribbon-inner { animation: none; }
}
@media print { .site-header, .site-footer, .ribbon, .sticker, .toasts { display: none !important; } body { background: #fff; } }

/* Card inteiro clicável mantendo botões internos acessíveis */
.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.pet-card:focus-within { outline: 3px solid var(--azul); outline-offset: 4px; }
.pet-card .stretched:focus-visible { outline: none; }

.hero-word { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; display: inline; padding: 0 .18em; line-height: 1.18; }

/* Barra de progresso de formulários em etapas */
.steps-bar { height: 12px; border-radius: 999px; background: var(--branco); border: 2px solid var(--line-strong); overflow: hidden; }
.steps-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--laranja), var(--rosa)); transition: width .6s var(--ease-out); }
input[type="range"] { accent-color: var(--laranja); width: 100%; }
input[type="file"] { max-width: 100%; }
details > summary { list-style-position: inside; }

/* =============================================================================
   Componentes da direção "lambe-lambe de bairro"
   ============================================================================= */

/* Laço da marca (o mesmo traço amarelo das peças do PDF) */
.loop { display: block; overflow: visible; }
.loop path { fill: none; stroke: currentColor; stroke-width: 16; stroke-linecap: round; }
.loop.draw-on-view path { stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.6s var(--ease-out); }
.loop.draw-on-view.is-visible path { stroke-dashoffset: 0; }

/* Títulos que entram palavra por palavra */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
[data-split] .w > span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 55ms + var(--delay, 0s)); }
[data-split].is-split-in .w > span { transform: none; }
.no-js [data-split] .w > span { transform: none; }

/* Como ajudar: lista editorial em linhas */
.help-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--preto); }
.help-row {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1.15fr) minmax(0, 1fr) 60px; gap: clamp(16px, 2.4vw, 32px); align-items: center;
  padding: clamp(22px, 3vw, 36px) clamp(10px, 2vw, 28px); border-bottom: 2px solid var(--preto);
  text-decoration: none; color: var(--preto); isolation: isolate; overflow: hidden;
}
.help-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--row-c, var(--amarelo)); transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease-out); }
.help-row:hover::before, .help-row:focus-visible::before { transform: scaleY(1); }
.help-row:focus-visible { outline-offset: -4px; }
.help-row[data-c="azul"] { --row-c: var(--azul); }
.help-row:is([data-c="azul"], [data-c="rosa"], [data-c="laranja"]):is(:hover, :focus-visible) { color: var(--branco); }
.help-row[data-c="rosa"] { --row-c: var(--rosa); }
.help-row[data-c="laranja"] { --row-c: var(--laranja); }
.help-num { font-weight: 800; font-size: .9rem; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.help-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 4.6vw, 3.9rem); letter-spacing: -.05em; line-height: .95; margin: 0; transition: transform .55s var(--ease-out); }
.help-row:hover .help-title, .help-row:focus-visible .help-title { transform: translateX(14px); }
.help-text { margin: 0; color: var(--cinza); max-width: 44ch; transition: color .3s; }
.help-row:hover .help-text, .help-row:focus-visible .help-text { color: inherit; }
.help-arrow { width: 60px; height: 60px; border-radius: 50%; background: var(--preto); color: var(--branco); display: grid; place-items: center; transition: transform .5s var(--ease-out), background-color .3s, color .3s; }
.help-arrow svg { width: 24px; height: 24px; }
.help-row:hover .help-arrow, .help-row:focus-visible .help-arrow { transform: rotate(-45deg); background: var(--branco); color: var(--preto); }
.help-peek { position: fixed; left: 0; top: 0; z-index: 60; width: 230px; height: 230px; pointer-events: none; opacity: 0; transform: translate3d(var(--x, 0), var(--y, 0), 0) translate(24px, -80%) scale(.6) rotate(-8deg); transition: opacity .25s, transform .35s var(--ease-out); }
.help-peek.on { opacity: 1; transform: translate3d(var(--x, 0), var(--y, 0), 0) translate(24px, -80%) scale(1) rotate(-4deg); }
.help-peek img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 20px 24px rgba(0,0,0,.25)); }
@media (hover: none), (pointer: coarse) { .help-peek { display: none; } }
@media (max-width: 760px) {
  .help-row { grid-template-columns: minmax(0, 1fr) 48px; row-gap: 8px; padding-left: 18px; }
  .help-row::after { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 5px; border-radius: 4px; background: var(--row-c, var(--amarelo)); }
  .help-num { grid-column: 1 / -1; }
  .help-text { grid-column: 1 / 2; }
  .help-arrow { width: 48px; height: 48px; grid-row: 2; grid-column: 2; }
}

/* Faixa de texto gigante que anda com a rolagem */
.scroll-type { overflow: hidden; padding-block: clamp(24px, 4vw, 48px); display: grid; gap: .1em; }
.st-row { display: flex; width: max-content; will-change: transform; }
.st-chunk { flex: none; margin: 0; padding-right: .3em; white-space: nowrap; font-family: var(--font-display); font-weight: 900; font-size: clamp(3.4rem, 11vw, 10rem); line-height: .92; letter-spacing: -.055em; }
.st-chunk .w { transition: color .3s, -webkit-text-stroke-color .3s; }
.st-outline .st-chunk { color: transparent; -webkit-text-stroke: 2px var(--preto); }
.st-outline .w:hover { color: var(--rosa); -webkit-text-stroke-color: var(--rosa); }
.st-row:not(.st-outline) .w:hover { color: var(--azul); }
.scroll-type .dot { display: inline-block; color: var(--laranja); -webkit-text-stroke: 0; animation: dot-pulse 1.8s ease-in-out infinite; }
.st-outline .dot { color: var(--rosa); animation-delay: -.9s; }
@keyframes dot-pulse { 0%, 100% { scale: 1; } 50% { scale: .62; } }

/* Como funciona a adoção: etapas reais do pedido */
.process-wrap { position: relative; }
.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); position: relative; }
.process-track { position: absolute; left: 34px; right: 34px; top: 33px; height: 4px; border-radius: 4px; background: var(--cinza-claro); overflow: hidden; }
.process-track span { display: block; height: 100%; background: var(--preto); transform-origin: left; transform: scaleX(var(--progress, 0)); }
.process li { position: relative; }
.process-dot { position: relative; z-index: 1; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: var(--creme); box-shadow: inset 0 0 0 3px var(--preto); font-weight: 900; font-size: 1.4rem; margin-bottom: 18px; transition: background-color .4s, color .4s, transform .5s var(--ease-out); }
.process li.is-reached .process-dot { background: var(--dot-c, var(--amarelo)); transform: scale(1.06); }
.process li:nth-child(2) { --dot-c: var(--rosa); }
.process li:nth-child(3) { --dot-c: var(--laranja); }
.process li:nth-child(4) { --dot-c: var(--azul); }
.process li:nth-child(n+2).is-reached .process-dot { color: var(--branco); }
.process h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); margin-bottom: .35em; }
.process p { color: var(--cinza); margin: 0; font-size: .97rem; }
@media (max-width: 900px) {
  .process { grid-template-columns: 1fr; gap: 26px; }
  .process-track { left: 33px; right: auto; top: 34px; bottom: 34px; width: 4px; height: auto; }
  .process-track span { transform-origin: top; transform: scaleY(var(--progress, 0)); }
  .process li { display: grid; grid-template-columns: 70px 1fr; column-gap: 18px; }
  .process-dot { margin: 0; grid-row: span 2; }
}

/* Cabeçalhos de seção alinhados à esquerda, com ação à direita */
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-head h2 { margin: 0; max-width: 18ch; }
.sec-head .lead { margin: .6rem 0 0; }

/* Botão que acompanha o cursor (só em mouse) */
.magnet { transition: transform .35s var(--ease-out), background-color .2s, color .2s, box-shadow .2s; }

.final-loop { position: absolute; width: clamp(160px, 20vw, 260px); left: 46%; top: 8%; color: var(--amarelo); z-index: 1; pointer-events: none; }
@media (max-width: 860px) { .final-loop { left: auto; right: 6%; top: auto; bottom: 40%; width: 140px; } }

/* Rodapé: laço da marca no canto */

@media (prefers-reduced-motion: reduce) {
  [data-split] .w > span { transform: none !important; }
  .hero-giant, .hero-pets, .hero-loop { transform: none !important; }
  .hero-giant { transform: translate(0, -50%) !important; }
  .loop path, .hero-loop path { stroke-dashoffset: 0 !important; }
}

/* ---------- Movimento contínuo ("vida" nas seções) ----------
   Faixas de palavras que nunca param, animais respirando, etiquetas flutuando.
   Tudo desliga com prefers-reduced-motion. */
.pw-track { display: inline-flex; animation: pw-run var(--pw-dur, 48s) linear infinite; }
.pw-track > span { flex: none; padding-right: .32em; }
.pw-rev .pw-track { animation-direction: reverse; }
@keyframes pw-run { to { transform: translateX(-50%); } }
.hero-giant .pw-track { --pw-dur: 36s; }
@keyframes breathe { 0%, 100% { scale: 1 1; } 50% { scale: 1.008 1.02; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes floaty { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -8px; rotate: -3deg; } }
.poster-pet { transform-origin: 50% 100%; }
.poster.is-settled .poster-pet { animation: breathe 5.2s ease-in-out infinite; }
.poster.is-settled .poster-tag { animation: bob 4.4s ease-in-out infinite; }
.poster-loop.is-visible, .hero-loop, .final-loop { animation: floaty 6s ease-in-out 1.6s infinite; }
.hero-pet { transform-origin: 50% 100%; }
.hero-pet.is-active { animation: breathe 5.2s ease-in-out .8s infinite; }
.hero-name { animation: bob 4.4s ease-in-out infinite; }
.site-footer.is-in .footer-mark span { animation: bob 3.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 110ms + 1.2s); }
.site-footer.is-in .footer-peek img { animation: peek 7s ease-in-out 2.2s infinite; }
@keyframes peek { 0%, 68%, 100% { translate: 0 0; } 76% { translate: 0 22%; } 84% { translate: 0 -5%; } 90% { translate: 0 0; } }

/* Vídeo "Como funciona" */
.film { margin: 0 0 clamp(40px, 6vw, 72px); }
.film-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius-xl); background: var(--laranja); box-shadow: 0 50px 90px -60px rgba(17, 17, 17, .7); transform: scale(var(--film-s, 1)); transform-origin: 50% 100%; }
.film-video { width: 100%; height: 100%; object-fit: cover; }
.film-toggle { position: absolute; right: clamp(12px, 2vw, 22px); bottom: clamp(12px, 2vw, 22px); width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--branco); color: var(--preto); display: grid; place-items: center; cursor: pointer; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55); transition: transform .3s var(--ease-out), background-color .2s; }
.film-toggle:hover { transform: scale(1.06); background: var(--amarelo); }
.film-toggle svg { width: 22px; height: 22px; }
.film-toggle .i-play { display: none; margin-left: 3px; }
.film:not(.is-playing) .film-toggle .i-play { display: block; }
.film:not(.is-playing) .film-toggle .i-pause { display: none; }
.film figcaption { margin-top: 12px; font-size: .88rem; color: var(--cinza); }
.process li.is-current .process-dot { background: var(--amarelo); color: var(--preto); animation: ring 1.4s ease-out infinite; }
@keyframes ring { 0% { box-shadow: inset 0 0 0 3px var(--preto), 0 0 0 0 rgba(255, 207, 0, .7); } 100% { box-shadow: inset 0 0 0 3px var(--preto), 0 0 0 16px rgba(255, 207, 0, 0); } }
.process li.is-current h3 { color: var(--azul); }
@media (max-width: 760px) { .film-frame { border-radius: var(--radius-lg); } .film-toggle { width: 48px; height: 48px; } }

@media (prefers-reduced-motion: reduce) {
  .pw-track, .poster-pet, .poster-tag, .poster-loop, .hero-loop, .final-loop, .hero-pet, .hero-name,
  .footer-mark span, .footer-peek img, .scroll-type .dot, .process li.is-current .process-dot { animation: none !important; }
  .film-frame { transform: none !important; }
}
.empty .empty-art.is-loop svg { animation: floaty 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .empty .empty-art.is-loop svg { animation: none; } }
@media (max-width: 480px) {
  .quick-search .select { font-size: .88rem; padding-left: 12px; padding-right: 30px; background-position: right 10px center; }
}

/* ---------- Painel da equipe (/equipe) ---------- */
.team { padding-bottom: 80px; }
.team-head .poster-copy { padding-block: clamp(28px, 4vw, 48px); }
.team-head h1 { margin-bottom: .2em; }
.team-head .lead { margin-bottom: 1rem; }
.team-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.team-controls .seg { background: var(--branco); border: 0; color: var(--preto); }
.team-updated { margin: 22px 0 14px; font-size: .9rem; color: var(--cinza); }
.team-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.team-kpi { background: var(--branco); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-pop-sm); border-top: 5px solid var(--azul); }
.team-kpi:nth-child(2) { border-top-color: var(--laranja); }
.team-kpi:nth-child(3) { border-top-color: var(--rosa); }
.team-kpi:nth-child(4) { border-top-color: var(--amarelo); }
.team-kpi:nth-child(5) { border-top-color: var(--preto); }
.team-kpi.warn { background: var(--amarelo-claro); }
.team-kpi p { margin: 0; }
.team-kpi-label { font-weight: 700; font-size: .85rem; }
.team-kpi-num { font-weight: 900; font-size: clamp(2rem, 3.4vw, 2.8rem); letter-spacing: -.04em; line-height: 1.1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.team-kpi-foot { font-size: .82rem; color: var(--cinza); }
.team-delta { font-size: .8rem; font-weight: 800; letter-spacing: 0; padding: 2px 8px; border-radius: 999px; }
.team-delta.up { background: #E3F5EA; color: #0B6B35; }
.team-delta.down { background: #FCE5E3; color: #A1221A; }
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.team-wide { grid-column: 1 / -1; }
.team-card { min-width: 0; }
.team-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 20px; margin-bottom: 14px; }
.team-card-head h2 { font-size: 1.25rem; margin: 0 0 2px; }
.team-card-head p { margin: 0; font-size: .88rem; color: var(--cinza); }
.team-note { font-size: .85rem; color: var(--cinza); margin: 0; }
.team-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .85rem; font-weight: 600; }
.team-legend li { display: flex; align-items: center; gap: 7px; }
.team-legend i { width: 12px; height: 12px; border-radius: 3px; display: block; }
.team-chart { position: relative; min-height: 230px; }
.team-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.team-chart .g { stroke: var(--cinza-claro); stroke-width: 1; }
.team-chart .ax { font-size: 11px; fill: var(--cinza); font-family: var(--font-body); }
.team-chart .hit, .team-chart .hit-all { fill: transparent; cursor: crosshair; }
.team-chart .hit.on { fill: rgba(17, 17, 17, .05); }
.team-chart .line { fill: none; stroke: var(--azul); stroke-width: 2; stroke-linejoin: round; }
.team-chart .area { fill: rgba(0, 95, 255, .1); }
.team-chart .xh { stroke: var(--cinza); stroke-width: 1; stroke-dasharray: 3 3; }
.team-chart .dot { fill: var(--azul); stroke: var(--branco); stroke-width: 2; }
.team-chart-empty { position: absolute; inset: 0 0 26px 36px; display: grid; place-items: center; margin: 0; text-align: center; padding: 16px; color: var(--cinza); font-weight: 600; pointer-events: none; }
.team-tip { position: absolute; top: 0; z-index: 5; min-width: 150px; pointer-events: none; background: var(--preto); color: var(--branco); border-radius: 12px; padding: 10px 12px; font-size: .82rem; line-height: 1.45; display: grid; gap: 2px; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5); }
.team-tip span { display: flex; align-items: center; gap: 6px; }
.team-tip span b { margin-left: auto; padding-left: 12px; }
.team-tip i { width: 9px; height: 9px; border-radius: 2px; display: block; }
.team-tip[hidden] { display: none; }
.team-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.team-bars li { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; align-items: center; gap: 12px; font-size: .92rem; }
.team-bars .lbl { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-bars .bar { height: 14px; border-radius: 4px; background: var(--creme); overflow: hidden; }
.team-bars .bar i { display: block; height: 100%; border-radius: 4px; background: var(--azul); }
.team-bars .val { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 2.5ch; text-align: right; }
.team-empty { margin: 0; padding: 18px; border-radius: 14px; background: var(--creme); color: var(--cinza); font-weight: 600; font-size: .92rem; }
.team-pend { list-style: none; margin: 0; padding: 0; display: grid; }
.team-pend li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.team-pend li:last-child { border-bottom: 0; }
.team-pend li span { flex: 1; }
.team-pend li strong { font-size: 1.15rem; min-width: 2ch; text-align: right; color: var(--cinza); }
.team-pend li.has strong { color: var(--laranja-texto); }
.team-table { margin-top: 12px; font-size: .9rem; }
.team-table summary { cursor: pointer; font-weight: 700; }
.table-wrap { overflow-x: auto; margin-top: 10px; }
.team-tbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
.team-tbl th, .team-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.team-tbl th:first-child, .team-tbl td:first-child, .team-tbl.left th, .team-tbl.left td { text-align: left; }
.team-tbl th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cinza); }
.team-privacy { grid-column: 1 / -1; margin: 4px 0 0; font-size: .88rem; color: var(--cinza); }
@media (max-width: 1100px) { .team-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .team-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-kpi:last-child { grid-column: 1 / -1; }
  .team-grid { grid-template-columns: 1fr; }
}
.socials a:not(.footer-contact) { flex: none; }
.footer-contact { overflow-wrap: anywhere; }
[data-team-body] > .empty, [data-team-body] > .loading-page { margin-top: 20px; }