/* 02-hero.css
   Topo da página: menu, título gigante "cuidado com ♥", dálmata, tags e balões flutuantes, frase e botão.
*/

/* nav */
.nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding-block: clamp(14px, 2vw, 22px);
  font-size: 13px; color: var(--cream);
}
.nav ul { display: flex; gap: clamp(12px, 2vw, 26px); list-style: none; margin: 0; padding: 0; }
.nav a { display: inline-block; color: inherit; text-decoration: none; opacity: .8; transition: opacity .25s, translate .25s; }
.nav a:hover, .nav a:focus-visible { opacity: 1; translate: 0 -1px; } /* destaque suave: só clareia e sobe 1px */
.logo {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--cream); color: var(--hero);
  font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: -.02em;
  padding: 6px 12px 6px 8px; border-radius: 999px;
  transition: scale .25s cubic-bezier(.2, .9, .25, 1.4); cursor: default;
}
.logo:hover { scale: 1.03; }
.logo svg { width: 18px; height: 18px; }
.nav .pill {
  justify-self: end; background: var(--cream); color: var(--ink);
  padding: 7px 14px; border-radius: 999px; font-weight: 600; opacity: 1;
}
.nav .pill:hover, .nav .pill:focus-visible { scale: 1.03; }

/* palco: título + pet + tags */
.stage {
  position: relative;
  padding-top: clamp(18px, 4vw, 40px);
  min-height: clamp(420px, 52vw, 600px);
}
.title {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "opsz" 96;
  color: var(--cream);
  font-size: clamp(64px, 15.2vw, 196px);
  line-height: .82;
  letter-spacing: -.052em;
  text-align: center;
  white-space: nowrap;
  position: relative; z-index: 1;
  user-select: none;
  translate: 0 calc(var(--h, 0) * -90px);
}
.title .heart { display: inline-block; width: .82em; height: .72em; vertical-align: -.02em; margin-left: .04em; }
.title .heart path { fill: var(--cream); }
.title .l2 { display: inline; }

.pet {
  position: absolute; z-index: 2;
  left: 50%; bottom: 0; margin: 0;
  width: clamp(260px, 30vw, 400px);
  transform: translateX(-50%);
  filter: drop-shadow(0 20px 30px rgba(84, 45, 43, .35));
  pointer-events: none;
}
.pet img { display: block; width: 100%; height: auto; max-height: clamp(340px, 46vw, 560px); object-fit: contain; object-position: bottom; }

/* tags */
.tags { list-style: none; margin: 0; padding: 0; }
.tag {
  position: absolute; z-index: 3;
  font: 600 clamp(11px, 1.15vw, 14px)/1 var(--body);
  padding: .62em 1.05em; border-radius: 999px;
  color: var(--ink); white-space: nowrap;
  box-shadow: 0 6px 14px rgba(84, 45, 43, .25);
  animation: bob 5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  rotate: var(--r, 0deg);
}
.tag button { all: unset; cursor: pointer; }
.tag:focus-within { outline: 3px solid var(--cream); outline-offset: 3px; }
.t1 { --r: -6deg; --d: -.4s; background: var(--gold); left: 13%; top: 14%; }
.t2 { --r: 3deg;  --d: -2.1s; background: var(--violet); color: var(--white); left: 62%; top: 4%; }
.t3 { --r: -3deg; --d: -1.2s; background: var(--white); left: 10%; top: 50%; }
.t4 { --r: 5deg;  --d: -3s;  background: var(--caramel); color: var(--cream); right: 9%; top: 47%; }
.t5 { --r: -4deg; --d: -.9s; background: var(--brown); color: var(--cream); right: 15%; top: 70%; }
.t6 { --r: 4deg;  --d: -2.6s; background: var(--gold); left: 19%; top: 74%; }
@keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
/* balões e ícones: curtida, agenda, consulta */
.ico {
  position: absolute; z-index: 3; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 clamp(11px, 1.1vw, 14px)/1 var(--body); white-space: nowrap;
  box-shadow: 0 8px 18px rgba(84, 45, 43, .28);
  animation: bob 6s ease-in-out infinite; animation-delay: var(--d, 0s);
  rotate: var(--r, 0deg);
}
.ico svg { width: 1.6em; height: 1.6em; flex: none; }
.bub { padding: .7em .95em; border-radius: 18px; }
.bub::after { /* rabinho do balão */
  content: ""; position: absolute; bottom: -7px; width: 16px; height: 16px;
  background: inherit; clip-path: polygon(0 0, 100% 0, 0 100%);
}
.tail-l::after { left: 16px; } .tail-r::after { right: 16px; transform: scaleX(-1); }
.dot { width: clamp(46px, 4.6vw, 60px); aspect-ratio: 1; border-radius: 50%; justify-content: center; }
.dot svg { width: 52%; height: 52%; }
.i1 { --r: -5deg; --d: -1s;   background: var(--cream); color: var(--hero); left: 28%; top: 30%; }
.i2 { --r: 4deg;  --d: -3.2s; background: var(--white); color: var(--ink); right: 4%; top: 22%; }
.i3 { --r: -8deg; --d: -2s;   background: var(--gold); color: var(--brown); left: 3%; top: 31%; }
.i4 { --r: 6deg;  --d: -4s;   background: var(--violet); color: var(--cream); right: 27%; top: 62%; }
.i5 { --r: 3deg;  --d: -.6s;  background: var(--brown); color: var(--cream); left: 31%; top: 60%; }
.i6 { --r: -6deg; --d: -2.8s; background: var(--cream); color: var(--hero); right: 21%; top: 38%; }
.i2 .cal { color: var(--violet); }
.i5 i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; animation: typing 1.2s infinite; }
.i5 i:nth-child(2) { animation-delay: .2s; } .i5 i:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
/* movimento ao aproximar o mouse */
.tag, .ico { transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform .45s cubic-bezier(.2, .9, .25, 1.3); }

/* rodapé do hero */
.foot {
  position: relative; z-index: 4;
  display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-block: 0 clamp(18px, 3vw, 34px);
  margin-top: clamp(-110px, -8vw, -40px);
}
.lede {
  margin: 0; max-width: 24ch;
  color: var(--cream);
  font: 800 clamp(36px, 3.83vw, 47px)/.95 var(--display);
  letter-spacing: -.04em;
  text-shadow: 0 4px 30px rgba(84, 45, 43, .35);
  text-wrap: balance;
}
.cta {
  appearance: none; border: 0; cursor: pointer;
  background: var(--gold); color: var(--brown);
  font: 800 clamp(16px, 1.6vw, 20px)/1 var(--display);
  letter-spacing: -.02em;
  padding: .9em 1.8em; border-radius: 999px;
  display: inline-flex; align-items: center; gap: .5em;
  transition: transform .15s ease, background .15s ease;
}
.cta:hover { transform: translateY(-2px); background: var(--white); }
.cta:focus-visible, .nav a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.cta svg { width: 1em; height: 1em; }