/* ============================================================
   style.css — base, variáveis e layout
   ------------------------------------------------------------
   Este arquivo é MOBILE-FIRST: tudo aqui vale para celular.
   As telas maiores são tratadas em responsive.css, que é
   carregado depois e só usa min-width.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@400;600;700;800&display=swap');

:root{
  /* --- cores --- */
  --bg:#EFEAF7;
  --card:#FFFFFF;
  --soft:#F7F3FD;
  --ink:#3E3358;
  --ink-70:rgba(62,51,88,.70);
  --ink-45:rgba(62,51,88,.45);
  --ink-14:rgba(62,51,88,.14);

  /* estado do pet — usado igual em todo o produto */
  --lost:#FFAE38;      /* perdido */
  --found:#35C4C9;     /* achado na rua */
  --reunited:#FF7E9C;  /* voltou pra casa */
  --adopt:#5BC47E;     /* para adoção */

  --butter:#FFF3D6;
  --mint:#E4F7F7;
  --blush:#FFEDF2;
  --whats:#8FE3AE;

  /* --- tipografia --- */
  --display:'Baloo 2','Trebuchet MS',system-ui,sans-serif;
  --body:'Nunito','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* --- forma --- */
  --r:20px;
  --rs:14px;
  --line:2.5px solid var(--ink);
  --drop:0 4px 0 var(--ink-14);
  --drop-lg:0 6px 0 var(--ink-14), 0 14px 26px -14px rgba(62,51,88,.4);

  /* --- espaçamento e áreas seguras (notch do iPhone) --- */
  --gutter:16px;
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px);

  /* altura mínima confortável para o dedo */
  --touch:44px;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
}

body{
  margin:0;
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  /* impede barra de rolagem horizontal por qualquer elemento que vaze */
  overflow-x:hidden;

  /* rastro de patinhas de vários animais. O arquivo fica em
     assets/icons/paws-pattern.svg — para clarear, mude o
     fill-opacity lá dentro. Vai como background-image do body
     de propósito: camada separada com z-index negativo é
     pintada atrás do fundo e fica invisível. */
  background-color:var(--bg);
  background-image:url('../assets/icons/paws-pattern.svg');
  background-repeat:repeat;
  background-size:210px 210px;
  /* o texto corre por cima do padrão de patinhas: peso 600 em vez de
     400 dá contraste suficiente sem precisar apagar o fundo */
  font-weight:600;
}

img,svg{ max-width:100%; display:block }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none }
a{ color:inherit }

/* elementos de formulário nunca abaixo de 16px: menos que isso
   faz o Safari do iPhone dar zoom sozinho ao focar o campo */
input,select,textarea{ font-size:16px; font-family:inherit }

:focus-visible{ outline:3px solid var(--found); outline-offset:3px; border-radius:6px }

/* ---------- utilidades ---------- */
.display{ font-family:var(--display); font-weight:800; line-height:1.02; letter-spacing:-.01em }

.wrap{
  width:100%;
  max-width:1080px;
  margin-inline:auto;
  padding-inline:calc(var(--gutter) + var(--safe-l)) calc(var(--gutter) + var(--safe-r));
}

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }

.skip{
  position:absolute; left:-9999px; top:8px; z-index:9999;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:999px;
  font-weight:700; text-decoration:none;
}
.skip:focus{ left:12px }

/* ============ CABEÇALHO ============ */
.top{
  position:sticky; top:0; z-index:500;
  background:rgba(239,234,247,.94);
  backdrop-filter:blur(8px);
  border-bottom:2.5px solid var(--ink);
  padding-top:env(safe-area-inset-top,0px);
}
/* Logo em cima, navegação embaixo. No celular os dois na mesma linha
   se espremiam e o último item ficava cortado. Em duas linhas cabe
   o texto completo e sobra área de toque. */
.top-in{
  display:flex; flex-direction:column; align-items:stretch; gap:0;
  padding-block:8px 6px;
}
.logo{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--display); font-weight:800; font-size:17px;
  text-decoration:none; line-height:1.1;
  flex:0 1 auto; min-width:0;
}
.logo-mark{ width:28px; height:28px; flex:none }

.top-nav{
  display:flex; gap:6px; justify-content:center;
  margin-top:4px; padding-bottom:2px;
  /* em telas estreitas a navegação rola de lado em vez de quebrar */
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.top-nav::-webkit-scrollbar{ display:none }
.top-nav button{
  padding:9px 11px; font-size:13px; font-weight:700;
  border-radius:999px; border:2.5px solid transparent;
  white-space:nowrap; min-height:var(--touch);
}
.top-nav button:hover{ background:var(--card); border-color:var(--ink) }

/* Em tela estreita, "Perto de você" vira "Perto" e "Voltaram pra casa"
   vira "Voltaram". Sem isto a navegação não cabe e o último item fica
   cortado na borda. */
.hide-xs{ display:none }

/* o nome quebrava em duas linhas e empurrava a navegação */
.logo span{ white-space:nowrap }
.top-nav button[aria-current="true"]{ background:var(--ink); color:#fff }

/* ============ HERO ============ */
.hero{ padding:34px 0 30px; text-align:center }
.hero h1{
  margin:0 auto;
  max-width:17ch;
  font-size:clamp(31px,8.6vw,74px);
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(transparent 58%, rgba(255,174,56,.6) 58%, rgba(255,174,56,.6) 92%, transparent 92%);
  padding:0 .06em; border-radius:6px;
}
.hero-sub{
  max-width:48ch; margin:16px auto 0;
  font-size:clamp(15px,4vw,17px); font-weight:600;
  color:rgba(62,51,88,.82);
}
.counter{ margin-top:22px; font-size:14px; color:var(--ink-70) }
.counter b{
  color:var(--ink); background:var(--blush);
  padding:3px 11px; border-radius:999px; border:2px solid var(--ink);
  font-size:14px; display:inline-block; line-height:1.35;
}
.counter b.open{ background:var(--butter) }

/* ============ SEÇÕES ============ */
.sect{ padding:32px 0 }
.sect + .sect{ border-top:2.5px dashed var(--ink-14) }

.sect-head{ margin-bottom:20px }
.sect-head h2{
  margin:0;
  font-family:var(--display); font-weight:800;
  font-size:clamp(25px,6.4vw,40px); line-height:1.05;
}
.sect-head p{ margin:4px 0 0; font-size:14px; font-weight:600; color:rgba(62,51,88,.78); max-width:40ch }

/* ============ RODAPÉ ============ */
.foot{
  border-top:2.5px solid var(--ink);
  background:var(--ink); color:#fff;
  border-radius:30px 30px 0 0;
  margin-top:26px;
  padding:30px 0 calc(34px + var(--safe-b));
}
.foot-in{ display:flex; flex-direction:column; gap:24px }
.foot .logo{ color:#fff }
.foot p{ margin:10px 0 0; font-size:13px; opacity:.65; max-width:34ch }
.foot nav{ display:flex; flex-direction:column; gap:10px; font-size:14px }
.foot nav a{ opacity:.8; text-decoration:none; padding:2px 0 }
.foot nav a:hover{ opacity:1; text-decoration:underline }

/* ============ AVISO FLUTUANTE ============ */
.toast{
  position:fixed; left:50%; bottom:calc(18px + var(--safe-b));
  transform:translateX(-50%) translateY(160%);
  z-index:9500;
  background:var(--ink); color:#fff;
  padding:13px 18px; border-radius:999px;
  font-weight:700; font-size:14px; line-height:1.35;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5);
  transition:transform .28s cubic-bezier(.2,.9,.3,1.3);
  width:max-content; max-width:calc(100vw - 32px);
  text-align:center;
}
.toast[data-show="true"]{ transform:translateX(-50%) translateY(0) }
@media (prefers-reduced-motion: reduce){
  .toast{ transition:none }
}

/* direitos reservados */
.foot .direitos{ font-size:12px; opacity:.5; margin-top:6px }