@font-face {
  font-family: 'Bacalar';
  src: url('../assets/fonts/BacalarTest-SemiExpanded.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Bacalar Condensed';
  src: url('../assets/fonts/bacalartest-condensed.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Resist Sans';
  src: url('../assets/fonts/ResistSansDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Resist Sans';
  src: url('../assets/fonts/ResistSansDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #FFFFFF;
  --accent: #0B54BF;      /* Sapphire */
  --accent-dark: #00193A; /* Prussian Blue */
  --accent-light: #006AFF; /* Digital Blue */
}

* { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  font-family: 'Resist Sans', sans-serif;
  /* overflow-x:clip (não hidden): hidden em ancestral quebra o
     position:sticky das seções de baixo. */
  overflow-x: clip;
}
/* flow-root contém a margem do .hero-card dentro do body (sem isso ela
   "vaza" e cria scroll de 1px) — substitui o antigo overflow:hidden. */
body {
  display: flow-root;
  /* Logan (01/11): espaçamento -7% em todo o texto. Quem tem letter-spacing
     próprio também perdeu 6% (exceto a marca AMIZZE, que é logo). */
  letter-spacing: -0.07em;
}
button, input, select, textarea { letter-spacing: inherit; }

/* --- Preloader "Bloop" (Framer, portado) — sequência: título entra e
     sai, uma bolha nasce minúscula, cresce cobrindo a tela, depois some
     revelando a página. Tudo via @keyframes, funciona mesmo sem JS
     (js/preloader.js só limpa o elemento do DOM depois, opcional). --- */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: preloaderOut 1s ease forwards;
  animation-delay: 2.3s;
}

#preloader-title {
  font-family: 'Bacalar', sans-serif;
  font-weight: 600;
  color: #FFFFFF;
  font-size: clamp(2.5rem, 8vw, 5rem);
  letter-spacing: 0.08em;
  margin: 0;
  opacity: 0;
  animation: preloaderTitle 1.3s ease forwards;
}

#preloader-blob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  fill: #FFFFFF;
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  animation: preloaderBlob 1s cubic-bezier(.44, 0, .56, 1) forwards;
  animation-delay: 1.3s;
}

@keyframes preloaderTitle {
  0%   { opacity: 0; transform: translateY(14px); }
  25%  { opacity: 1; transform: translateY(0); }
  60%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}

@keyframes preloaderBlob {
  0%   { opacity: 0; transform: scale(0); }
  15%  { opacity: 1; transform: scale(1); }
  60%  { opacity: 1; transform: scale(160); }
  100% { opacity: 1; transform: scale(160); }
}

@keyframes preloaderOut {
  0%   { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  #preloader {
    animation: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  #preloader-title, #preloader-blob { animation: none; }
}

/* --- Card azul, flutuando sobre o fundo branco --- */
/* `height` fixo (não `min-height`) de propósito: trava o card exatamente
   na tela — combinado com `overflow:hidden` abaixo, qualquer
   excesso de conteúdo é cortado em vez de empurrar a página. A página
   agora rola (seções abaixo); o hero segue com 1 tela de altura. Revisar se elas
   entrarem (a página vai precisar rolar de verdade). */
.hero-card {
  position: relative;
  margin: clamp(16px, 4vw, 32px);
  height: calc(100vh - (2 * clamp(16px, 4vw, 32px)));
  background: var(--accent);
  border-radius: 45px;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  padding: 24px clamp(20px, 4vw, 48px) 32px;
  overflow: hidden;
}

/* --- Nav: grid de 3 colunas (não flex + absolute) de propósito — a
     logo central precisa de uma coluna própria que os links/CTA nunca
     invadem, em qualquer largura. Com flex+absolute (jeito antigo), a
     logo flutuava por cima e podia ser coberta pelos vizinhos quando o
     nav ficasse estreito (tablet). --- */
nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 12px;
  position: relative;
  z-index: 3;
}

.nav-links {
  grid-column: 1;
  justify-self: start;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  row-gap: 6px;
  column-gap: clamp(14px, 2.4vw, 28px);
  font-size: clamp(0.68rem, 1.4vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* Versão simplificada do item 13 da biblioteca (só o texto, sem a
   linha — a linha ficava visível o tempo todo, sem sumir no estado de
   repouso, e não era o efeito desejado aqui). Herda cor/tamanho/peso
   do .nav-links. */
.nav-links a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  width: min-content;
  cursor: pointer;
  outline: none;
}
.nav-links a:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
  border-radius: 2px;
}

.nav-link-text {
  height: 1.6em;
  overflow: hidden;
}
.nav-link-stack {
  display: flex;
  flex-direction: column;
  transition: transform .4s cubic-bezier(.44, 0, .56, 1);
}
.nav-link-label {
  display: block;
  height: 1.6em;
  line-height: 1.6em;
  white-space: nowrap;
}
.nav-links a:hover .nav-link-stack {
  transform: translateY(-1.6em);
}

@media (prefers-reduced-motion: reduce) {
  .nav-link-stack { transition: none; }
}

.nav-mark {
  grid-column: 2;
  justify-self: center;
}

.nav-mark img {
  /* logo nova é horizontal (1078x368, ~2,9:1): dimensiona pela altura */
  height: clamp(32px, 4vw, 56px);
  width: auto;
  display: block;
}

/* Legenda solta, não acompanha a logo — fica no fluxo normal, entre o
   nav e o wordmark. */
.hero-caption {
  position: relative;
  top: clamp(2px, 0.6vw, 8px);
  z-index: 3;
  margin: 12px 0 0;
  font-family: 'Bacalar Condensed', sans-serif;
  font-size: clamp(0.65rem, 1.625vw, 1.3rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-align: center;
}

.nav-actions {
  grid-column: 3;
  justify-self: end;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.cta-small {
  background: #006AFF;
  color: #FFFFFF;
  border-radius: 999px;
  padding: clamp(10px, 1.8vw, 16px) clamp(14px, 3vw, 26px);
  font-size: clamp(0.6rem, 1.3vw, 0.75rem);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  max-width: 46vw; /* segurança: texto longo quebra em 2 linhas em vez de estourar o nav */
  transition: transform .15s ease, filter .2s ease;
}
.cta-small:hover { filter: brightness(1.1); transform: translateY(-2px); }
.cta-small:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .cta-small { transition: none; }
}

/* --- Nav mobile — fora do .hero-card, sobre o fundo branco da página
     (mockup Figma, 22/09/2026). Escondida por padrão; só aparece no
     breakpoint mobile (ver media query no fim do arquivo). No desktop
     o <nav> normal dentro do card cobre esse papel. --- */
.mobile-nav {
  display: none;
  position: relative;
  z-index: 2001; /* acima do .mobile-menu (2000) — o X continua clicável por cima do menu aberto */
  align-items: center;
  justify-content: space-between;
  /* 1.98vw = inset real da logo no frame Figma (64px / 3240px) */
  padding: 1.98vw clamp(20px, 6vw, 32px) 0;
}

/* Espaço vazio do mesmo tamanho da .mobile-nav (padding-top 1.98vw +
   altura da logo 24.7vw = altura total da barra), sem nenhum botão. */
.mobile-nav-spacer {
  display: none;
  width: 100%;
}

/* Tamanhos extraídos do frame Figma (3240×5760): logo 800px, franchise
   586px, hambúrguer 500px — todos convertidos pra vw (Xpx / 3240). */
.mobile-nav-logo {
  /* do tamanho do hambúrguer (Logan, 02/11; era 24.7vw, depois 18.15vw e
     ainda parecia grande: o Franchise tem texto embaixo, o desenho dele é menor) */
  height: 13vw;
  width: auto;
  display: block;
}

.mobile-nav-franchise {
  height: 18.15vw;
  width: auto;
  display: block;
}

/* Hambúrguer — agora com moldura tipo botão (inspirado no exemplo
   shadcn "outline/icon" que o usuário mandou, só que na cor da marca
   em vez de preto). Vira X girando via transform, sem JS (o JS só
   alterna a classe .is-open). */
.menu-toggle {
  display: flex;
  flex: none;
  position: relative; /* referência pro position:absolute das linhas */
  width: 13vw;   /* era 16vw (Logan, 02/11) */
  height: 13vw;
  border: 3px solid #0B54BF;
  border-radius: 8px;
  background: transparent;
  padding: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, border-color .2s ease;
}
/* Feedback tátil de clique (inspirado no "lift" da biblioteca, item 2 —
   aqui invertido: aperta em vez de levantar, já que é toque/clique,
   não hover). Sem isso o botão não dava nenhum retorno visual ao tocar. */
.menu-toggle:active {
  transform: scale(0.82);
}
/* Linhas posicionadas por `top` em % (não por translateY em px fixo) —
   assim elas sempre convergem exatamente no centro do botão ao virar
   X, não importa o tamanho real do botão (que é fluido, em vw). Era
   isso que deixava o X torto antes. */
.menu-toggle-line {
  display: block;
  position: absolute;
  left: 50%;
  width: 55%;
  height: 3px;
  border-radius: 2px;
  background: #0B54BF;
  transform: translate(-50%, -50%);
  /* Curva com leve "estouro" (overshoot) em vez de ease simples — dá
     uma sensação de mola no morph hambúrguer -> X. */
  transition: top .35s cubic-bezier(.34, 1.56, .64, 1), transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease;
}
.menu-toggle-line:nth-child(1) { top: 28%; }
.menu-toggle-line:nth-child(2) { top: 50%; }
.menu-toggle-line:nth-child(3) { top: 72%; }

.menu-toggle.is-open .menu-toggle-line:nth-child(1) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.menu-toggle.is-open .menu-toggle-line:nth-child(2) {
  opacity: 0;
}
.menu-toggle.is-open .menu-toggle-line:nth-child(3) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .menu-toggle, .menu-toggle-line { transition: none; }
}

/* Menu mobile tela-cheia (23/09/2026) — desliza da esquerda por cima
   de tudo (inclusive do .hero-card), fundo azul da marca, texto e
   divisórias em branco. Trocou do mecanismo antigo (dropdown com
   max-height, cabia só embaixo do hambúrguer) pra cobrir a tela
   inteira, já que agora tem link pra cada seção do plano. */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--accent);
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  /* links mais pra baixo, longe da barra do topo (Logan, 02/11) */
  padding: calc(1.98vw + 18.15vw + 48px) clamp(24px, 8vw, 48px) 24px;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
.mobile-menu.is-open {
  transform: translateX(0);
}
.mobile-menu a {
  display: block;
  padding: 16px 4px;
  color: #FFFFFF;
  text-decoration: none;
  font-family: 'Resist Sans', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.mobile-menu a:first-child {
  border-top: none;
}

/* Logo, ícone Franchise e as linhas do hambúrguer são todos azuis —
   com o menu tela-cheia aberto (fundo azul), ficariam invisíveis
   (azul sobre azul). Força tudo pra branco enquanto o menu tiver
   .is-open, incluindo o X (senão não dá pra fechar visualmente). */
body:has(.mobile-menu.is-open) .menu-toggle-line {
  background: #FFFFFF;
}
body:has(.mobile-menu.is-open) .menu-toggle {
  border-color: #FFFFFF;
}
body:has(.mobile-menu.is-open) .mobile-nav-logo,
body:has(.mobile-menu.is-open) .mobile-nav-franchise {
  filter: brightness(0) invert(1);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu { transition: none; }
}

/* --- Hero stage: wordmark + vídeo do cachorro (WebM com alfa real,
     gerado a partir do fundo verde original via ffmpeg — ver skill
     video-background-removal pra receita completa) --- */
.hero-stage {
  position: relative;
  flex: 1;
  min-height: 0; /* deixa o flex:1 dividir o espaço real, sem forçar mínimo */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.hero-wordmark {
  font-family: 'Bacalar', sans-serif;
  font-weight: 600;
  color: #FFFFFF;
  font-size: clamp(4.5rem, 20vw, 15rem);
  line-height: 0.9;
  letter-spacing: 0.08em;
  margin: 0;
  margin-top: clamp(-120px, -9.375vw, -60px);
  text-align: center;
  width: 100%;
}

.hero-video {
  position: absolute;
  bottom: clamp(-195px, -15.234vw, -97.5px);
  left: 50%;
  transform: translateX(-50%);
  /* Vídeo é 1100x618 (~1,78:1, mais largo que alto). Só limitar por vh
     (como antes) deixa a largura estourar a tela em tablet retrato
     (tela estreita e alta) — por isso o segundo limite em vw, que trava
     a largura resultante em ~93vw no pior caso. */
  height: min(clamp(410px, 79vh, 850px), 52vw);
  pointer-events: none;
  user-select: none;
}

/* Safari desktop não tem transparência real (ver js/safari-video-fix.js)
   — o vídeo que ele recebe já tem "AMIZZE" desenhada atrás do cachorro
   dentro do próprio arquivo, então o <h1> HTML fica redundante (e um
   fundo azul opaco cobrindo o quadro inteiro tamparia ele de qualquer
   jeito). Só desktop — no mobile o wordmark HTML continua em uso, ver
   a regra dentro da media query abaixo. */
body.is-safari-desktop .hero-wordmark {
  display: none;
}
/* O vídeo desktop do Safari é o card inteiro (1358x740 num viewport de
   1440x900: azul + "AMIZZE" + cachorro). Preenche o .hero-card; nav,
   legenda e botões ficam por cima (z-index 3). Fundo do vídeo = cor
   do card, então as bordas arredondadas (overflow:hidden) continuam ok. */
body.is-safari-desktop .hero-stage {
  position: static;
}
body.is-safari-desktop .hero-video {
  top: auto;
  bottom: 0;
  left: 50%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 1454 / 666;
  height: 100%;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: center bottom;
  z-index: 0;
  /* Esmaece as bordas pro azul do card: o decodificador de cada navegador
     arredonda o azul do MP4 de um jeito, e sem isso aparece uma emenda. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 8%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 8%);
  mask-composite: intersect;
}

/* --- Bottom row: CTA + toggle --- */
.hero-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  z-index: 3;
  padding-top: 16px;
  flex-wrap: wrap;
}

/* Botão "Arrow Reveal" — adaptado de um componente Originkit (React/
   Framer Motion) pra CSS puro. Efeito: badge circular com seta à
   esquerda, que cresce no hover até cobrir o botão inteiro. */
.cta-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 16px);
  background: #FFFFFF;
  border: 2px solid #FFFFFF;
  border-radius: 999px;
  padding: clamp(10px, 1.6vw, 12px) clamp(24px, 6vw, 56px);
  font-family: 'Resist Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(0.95rem, 2.2vw, 1.3rem);
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(11, 84, 191, 0.18);
  transition: transform .15s ease;
}
.cta-pill:active { transform: scale(0.97); }

/* Caixa pequena e fixa (58x58) que carrega o badge + a seta — ela é um
   item de flex normal, então acompanha a centralização do botão. Badge
   e seta ficam um por cima do outro dentro dela, como irmãos (não pai/
   filho), pra o badge crescer no hover sem "inflar" a seta junto. */
.cta-pill-icon {
  position: relative;
  flex: none;
  width: clamp(44px, 6vw, 58px);
  height: clamp(44px, 6vw, 58px);
}

.cta-pill-badge {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  background: var(--accent-light);
  transform-origin: center;
  transition: transform .45s cubic-bezier(.42, 0, .2, 1);
  pointer-events: none;
}

.cta-pill-arrow {
  position: absolute;
  inset: 0;
  top: 3px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  line-height: 1;
  pointer-events: none;
}

.cta-pill-label {
  position: relative;
  top: 3px;
  z-index: 2;
  display: inline-block;
  line-height: 1;
  color: #212121; /* texto preto (Logan, 01/11) */
  transition: transform .3s ease, color .3s ease;
}

.cta-pill:hover .cta-pill-badge { transform: scale(20); }
.cta-pill:hover .cta-pill-label { transform: translateX(6px); color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
  .cta-pill, .cta-pill-badge, .cta-pill-label { transition: none; }
}

/* Toggle decorativo — mesma ideia estrutural da referência (par de
   ícones em pill), sem função real ainda. */
.species-toggle {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 16px);
  background: #FFFFFF;
  border: 2px solid #FFFFFF;
  border-radius: 999px;
  padding: clamp(8px, 1.6vw, 12px) clamp(16px, 3.5vw, 24px);
  box-shadow: 0 10px 24px rgba(11, 84, 191, 0.18);
}

/* Ícones reais (assets/images/icon-dog.webp / icon-cat.png, fundo
   transparente) recoloridos pra Prussian Blue via CSS mask — funciona
   com qualquer PNG de silhueta, independente da cor original. */
.species-toggle .icon-dog,
.species-toggle .icon-cat {
  width: clamp(44px, 6vw, 58px);
  height: clamp(44px, 6vw, 58px);
  background-color: var(--accent-dark);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.species-toggle .icon-dog {
  -webkit-mask-image: url('../assets/images/icon-dog.webp');
  mask-image: url('../assets/images/icon-dog.webp');
}

.species-toggle .icon-cat {
  -webkit-mask-image: url('../assets/images/icon-cat.webp');
  mask-image: url('../assets/images/icon-cat.webp');
}

@media (max-width: 640px) {
  /* O <nav> de desktop (dentro do .hero-card) sai de cena inteiro —
     vira a .mobile-nav, fora do card, sobre o fundo branco. */
  .hero-card > nav { display: none; }
  .mobile-nav { display: flex; }
  .mobile-menu { display: flex; }
  .mobile-nav-spacer { display: block; height: calc(1.98vw + 18.15vw); } /* = altura da barra (logo/Franchise) */

  /* No mobile o hero pode ser mais alto que a tela (decisão fechada:
     rola normal). overflow-x clip só impede rolagem lateral. */
  html, body {
    overflow-x: clip;
  }
  /* Centraliza o conjunto (nav + menu + card) verticalmente na tela —
     em vez de ficar preso no topo com sobra de espaço embaixo. */
  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
  }
  .hero-card {
    height: auto; /* sem min-height artificial — só a altura que o conteúdo pedir, mais curto */
    /* 3vw ≈ resto do cálculo de 29.63vw (offset do card no frame
       Figma) menos a altura da .mobile-nav acima dele. */
    margin-top: 3vw;
    border-radius: 3.7vw; /* 120px / 3240px no frame Figma */
    /* Distância do topo do card até a legenda, medida no print de
       referência do usuário (23/09). */
    padding-top: 8.9vw;
    padding-bottom: 13px; /* era 32px (herdado do desktop) — botões mais perto da borda de baixo */
  }
  .hero-stage {
    min-height: 40vh; /* reduzido — era o maior responsável por esticar o card */
  }
  .hero-video {
    /* Figma usa uma imagem com recorte retrato (1904x3102) pro
       cachorro — bem diferente da proporção paisagem do nosso vídeo
       (1100x618). object-fit:cover recorta o vídeo real do mesmo
       jeito, sem perder a transparência. Desce até a borda do card, por
       trás dos botões — o .hero-bottom já tem z-index maior, então o
       vídeo naturalmente fica atrás sem precisar mexer em mais nada. */
    bottom: -35vw;
    width: 58.77vw;   /* 1904px / 3240px */
    height: 95.74vw;  /* 3102px / 3240px */
    object-fit: cover;
    object-position: center top;
  }
  .hero-caption {
    top: 0;
    margin-top: 0;
    font-size: 3vw;
    letter-spacing: 0.24em;
  }
  .hero-wordmark {
    margin-top: -52vw;
    font-size: 17.44vw;    /* 565px / 3240px */
    letter-spacing: 0.1em; /* tracking 56.5px / font-size 565px = 0.1em, exato no Figma */
    /* Compensa o espaço fantasma que o letter-spacing deixa depois da
       última letra (não existe o equivalente antes da primeira) —
       sem isso o texto centralizado fica puxado pra esquerda. */
    transform: translateX(-0.1em);
  }

  /* Mobile Safari: o vídeo de fallback (fundo azul sólido, sem texto
     embutido) cobriria o wordmark inteiro, já que aqui ele fica atrás
     por padrão (ver .hero-stage). Traz o wordmark pra FRENTE só nesse
     caso — no desktop Safari a regra é a oposta (esconder o <h1>,
     porque lá o texto já vem dentro do vídeo, ver regra fora da media
     query). display:block sobrescreve o display:none da regra desktop. */
  body.is-safari-mobile .hero-wordmark {
    position: relative;
    z-index: 2;
  }
  body.is-safari-mobile .hero-video {
    z-index: 1;
  }

  /* Rodapé do card: os dois pills NÃO são do mesmo tamanho no Figma —
     proporção real 1368:1004 (CTA maior). Usando flex-grow em vez de
     vw fixo — divide o espaço REAL disponível dentro do card (que já
     descontou margem+padding), sem risco de estourar e quebrar linha
     como acontecia com vw (relativo à tela inteira, não ao card). */
  .hero-bottom {
    justify-content: center;
    gap: 3vw; /* era 10vw: o seletor ficou mais alto/largo (02/11) */
    flex-wrap: nowrap;
  }
  .cta-pill {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 900;
  }
  .cta-pill-icon {
    width: 36px;
    height: 36px;
  }
  .cta-pill-label {
    font-size: 0.8rem;
  }
  .cta-pill-arrow {
    font-size: 1.1rem;
    font-weight: 900;
  }
  .species-toggle {
    flex: 1004 1 0%;
    justify-content: center;
  }
}

/* --- Cursor customizado (rastro de pegadas), ativo só dentro do
     .hero-card — ver js/paw-trail.js. Cursor nativo continua visível.
     Desligado automaticamente em touch/prefers-reduced-motion pelo
     próprio JS. --- */
.hero-cursor-frame {
  position: absolute;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  pointer-events: none;
}

/* --- Rastro de pegadas de cachorro, ativo dentro do .hero-cursor-frame
     (ver js/paw-trail.js). SVG real de pegada (assets/icons/paw-print.svg)
     aplicado via CSS mask + background-color — mesma técnica do
     .species-toggle .icon-dog/.icon-cat, recolore fácil trocando a cor. */
.paw-print {
  position: absolute;
  width: 64px;
  height: 64px;
  background-color: #FFFFFF;
  opacity: 1;
  pointer-events: none;
  -webkit-mask-image: url('../assets/icons/paw-print.svg');
  mask-image: url('../assets/icons/paw-print.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  transition: opacity 1.4s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .paw-print { transition: none; }
}

/* ============================================================
   Troca de cards do hero (PET / SAÚDE / FAMÍLIA) — js/hero-cards.js.
   Tudo aqui só vale com .cards-on (ligado pelo JS quando há 2+ cards);
   com só o PET, nada disso é aplicado e o hero fica como sempre foi.
   ============================================================ */
.hero-card.cards-on {
  transition: background-color .8s ease;
  --sel-ink: #0B54BF;
}
.hero-card[data-card="saude"]   { background-color: #38A8EF; --sel-ink: #38A8EF; }
.hero-card[data-card="familia"] { background-color: #0C4BA1; --sel-ink: #0C4BA1; }

/* Personagem: sai 0.35s, entra 0.6s (power2.out) */
.cards-on .hero-video,
.hero-char {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) scale(.98);
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.cards-on .hero-video.is-active,
.hero-char.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
  transition: opacity .6s cubic-bezier(.215, .61, .355, 1), transform .6s cubic-bezier(.215, .61, .355, 1), visibility 0s;
}

/* Mesma caixa do vídeo do cachorro (ver .hero-video) */
.hero-char {
  /* --k e --b ajustam o tamanho/posição por card (cada foto tem proporção
     e enquadramento diferentes do vídeo do cachorro) */
  --char-h: min(clamp(410px, 79vh, 850px), 52vw);
  --k: 1;
  position: absolute;
  bottom: var(--b, clamp(-195px, -15.234vw, -97.5px));
  left: 50%;
  height: calc(var(--char-h) * var(--k));
  z-index: 2;
  pointer-events: none;
  user-select: none;
}
.hero-char img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}

/* Tamanho/posição por foto (desktop). Ajustar aqui se o enquadramento mudar. */
.hero-char[data-char="saude"]   { --k: 1.05; --b: calc(clamp(-195px, -15.234vw, -97.5px) - var(--char-h) * .04); }
.hero-char[data-char="familia"] { --k: 1.05; --b: calc(clamp(-200px, -14vw, -120px) - var(--char-h) * .06); }
@media (max-width: 640px) {
  .hero-char[data-char="saude"]   { --k: .85; --b: -12vw; }
  .hero-char[data-char="familia"] { --k: .74; --b: -10vw; }
  /* corte de baixo das fotos aparece entre os botões: esmaece em vez de linha reta */
  .hero-char img {
    -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent);
    mask-image: linear-gradient(to bottom, #000 86%, transparent);
  }
}

/* Safari desktop: o <h1> só some no card PET (o texto vai dentro do vídeo);
   nos outros cards ele volta atrás da imagem, e o palco volta a ser a
   referência de posição das imagens. */
body.is-safari-desktop.hero-alt .hero-wordmark { display: block; }
body.is-safari-desktop.hero-alt .hero-stage { position: relative; }

/* Legenda com máscara */
.cap-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: .45em 0;
  margin: -.45em 0;
}
.cap-text {
  display: block;
  transition: transform .25s ease-in, opacity .25s ease-in;
}
.cap-text.is-out   { transform: translateY(-110%); opacity: 0; }
.cap-text.is-below { transform: translateY(110%); opacity: 0; transition: none; }
.cap-text:not(.is-out):not(.is-below) {
  transition: transform .25s cubic-bezier(.215, .61, .355, 1), opacity .25s ease-out;
}

/* Seletor no estilo do switch da VOLDOG (voldogfood.com): pílula branca
   com sombra, ícones apagados (40%) e um círculo de cor que desliza até o
   ativo. Círculo no azul do ícone do "Seja um franqueado" (#006AFF). */
.species-toggle.is-selector {
  position: relative;
  gap: 8px;
  padding: 10px;
  border: 0;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 6px 34px rgba(0, 25, 58, .22);
}
.sel-indicator {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 999px;
  background: var(--accent-light);
  transition: transform .3s ease;
  will-change: transform;
  pointer-events: none;
}
.sel-btn {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(48px, 4.6vw, 64px);
  height: clamp(48px, 4.6vw, 64px);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  opacity: .4;
  transition: opacity .3s ease;
}
.sel-btn:hover,
.sel-btn[aria-pressed="true"] { opacity: 1; }
.sel-btn:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.sel-icon {
  width: 54%;
  height: 54%;
  background-color: var(--accent-dark);
  transition: background-color .3s ease;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.sel-btn[aria-pressed="true"] .sel-icon { background-color: #FFFFFF; }
.sel-icon-pet {
  -webkit-mask-image: url(../assets/icons/paw-print.svg);
  mask-image: url(../assets/icons/paw-print.svg);
}
.sel-icon-saude {
  width: 66%;
  height: 66%;
  -webkit-mask-image: url(../assets/icons/heart.svg);
  mask-image: url(../assets/icons/heart.svg);
}
.sel-icon-familia {
  -webkit-mask-image: url(../assets/icons/house.svg);
  mask-image: url(../assets/icons/house.svg);
}

@media (max-width: 640px) {
  .hero-char {
    --char-h: 95.74vw;
    bottom: var(--b, -35vw);
  }
  /* mesma altura do "Seja um franqueado" ao lado (Logan, 02/11) */
  /* altura = "Seja um franqueado" ao lado (estica na linha); largura só a
     dos ícones, pro botão do lado ficar com o resto do espaço */
  .species-toggle.is-selector { flex: none; gap: 2px; padding: 0 6px; align-self: stretch; align-items: center; }
  .sel-btn { width: 40px; height: 40px; }
}
/* celulares estreitos (360px): ícones um pouco menores pro botão do lado caber */
@media (max-width: 380px) {
  .species-toggle.is-selector { padding: 0 4px; }
  .sel-btn { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .sel-indicator { transition: none; }
}