/* 03-servicos.css
   Serviços: título "tudo pro seu pet" e as cartas coloridas empilhadas que balançam.
*/

/* serviços: título gigante atrás, cartas coloridas que balançam */
.services {
  position: relative; overflow: clip; isolation: isolate;
  background: var(--page);
  display: grid; grid-template-rows: auto auto 1fr;
  padding-block: clamp(20px, 3vw, 40px) clamp(28px, 4vw, 56px);
}
.svc-head {
  max-width: 1240px; width: 100%; margin-inline: auto;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  position: relative; z-index: 2;
}
.svc-head .eyebrow { font-size: 14px; font-weight: 600; color: var(--brown); }
.svc-head .all {
  background: var(--brown); color: var(--cream);
  font-size: 13px; font-weight: 600; text-decoration: none;
  padding: 8px 14px; border-radius: 999px; white-space: nowrap;
}
.svc-title {
  position: relative; z-index: 0;
  margin: clamp(10px, 2vw, 28px) 0 0; text-align: center; user-select: none;
  font: 800 clamp(84px, 16.5vw, 250px)/.8 var(--display);
  font-variation-settings: "opsz" 96;
  letter-spacing: -.055em; color: var(--hero);
}
.svc-title span { display: block; }
.carousel {
  position: relative; z-index: 1;
  max-width: 1240px; width: 100%; margin-inline: auto;
  display: grid; grid-template-columns: 1fr; align-items: end;
  margin-top: calc(-1 * clamp(40px, 5vw, 80px));
}
.deck { position: relative; height: clamp(440px, 42vw, 540px); display: grid; place-items: end center; }
.card {
  --i: 0; --fg: var(--cream); --btn: var(--gold); --btn-fg: var(--brown);
  position: absolute; bottom: 10px;
  width: min(600px, 100%); aspect-ratio: 600 / 340;
  background: var(--bg); color: var(--fg);
  border-radius: 26px; overflow: hidden;
  box-shadow: 0 24px 40px -18px rgba(84, 45, 43, .55);
  transform-origin: 50% 100%;
  transform: translate(calc(var(--i) * 30px), calc(var(--i) * -46px)) rotate(calc(-6deg + var(--i) * 3deg));
  z-index: calc(10 - var(--i));
  transition: transform .55s cubic-bezier(.2, .8, .2, 1);
  animation: sway 4.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.7s);
  display: grid; grid-template-columns: 1fr 50%; align-content: start;
  padding: clamp(18px, 2.4vw, 28px);
  cursor: pointer;
}
@keyframes sway { 0%, 100% { rotate: -1.4deg; } 50% { rotate: 1.4deg; } }
.card.front { cursor: default; }
.card h3 {
  grid-column: 1; margin: 0; position: relative; z-index: 1;
  font: 800 clamp(24px, 2.8vw, 36px)/.95 var(--display); letter-spacing: -.03em; color: var(--fg);
}
.card .body { grid-column: 1; display: grid; gap: 14px; align-content: start; margin-top: clamp(10px, 1.4vw, 16px); position: relative; z-index: 1; opacity: 0; transition: opacity .3s; }
.card.front .body { opacity: 1; }
.card p { margin: 0; font-size: clamp(13px, 1.2vw, 15px); line-height: 1.4; color: var(--fg); }
.card .go {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px;
  background: var(--btn); color: var(--btn-fg); font-weight: 600; font-size: 13px;
  padding: 9px 15px; border-radius: 999px;
}
.card .art { position: absolute; right: 0; bottom: 0; width: 52%; height: 100%; pointer-events: none; }
.card .art img { position: absolute; right: 4%; bottom: 0; max-width: 100%; max-height: 96%; width: auto; height: auto; }
/* cores alternadas */
.k-vet { --bg: var(--brown); }
.k-petshop { --bg: var(--gold); --fg: var(--brown); --btn: var(--brown); --btn-fg: var(--cream); }
.k-passeio { --bg: var(--caramel); } /* caramelo: a guia vermelha da foto aparece */
.k-hotel { --bg: #F6B5B0; --fg: var(--brown); --btn: var(--brown); --btn-fg: var(--cream); } /* rosado da foto do beagle */
.k-sitter { --bg: var(--violet); }
/* ajustes de cada foto */
.k-vet .art { width: 50%; }
.k-vet .art img { max-width: none; max-height: none; height: 74%; right: 15%; }
.k-vet .art::before { /* coração azul-clarinho em volta do rosto */
  content: ""; position: absolute; right: 1%; top: 6%; width: 98%; aspect-ratio: 120 / 108;
  background: url("../public/svg/servicos-decoracoes/coracao-veterinario.svg") center / contain no-repeat;
  animation: beat 2.4s ease-in-out infinite;
}
@keyframes beat { 0%, 100% { scale: 1; } 12% { scale: 1.06; } 24% { scale: 1; } 36% { scale: 1.04; } }
.k-hotel .art { width: 52%; }
.k-hotel .art img { max-width: none; max-height: none; height: 92%; right: -3%; }
.k-passeio .art { width: 50%; }
.k-passeio .art img { max-width: none; max-height: none; height: 102%; right: 3%; bottom: -2%; }
.card .deco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: var(--fg); opacity: .6; }
.card .deco.front { z-index: 2; opacity: .85; }
.k-petshop .deco { color: var(--brown); }
.k-petshop .deco.front { opacity: 1; }
.k-sitter .deco.front { color: var(--gold); opacity: 1; }
.k-vet .deco.front { color: var(--gold); opacity: 1; }
.k-sitter .art img { max-height: 98%; }
.arrow {
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; margin-bottom: 40%;
  background: var(--brown); color: var(--cream); display: grid; place-items: center;
  box-shadow: 0 6px 14px rgba(84, 45, 43, .3); z-index: 12;
}
.arrow:hover { background: var(--hero); }
.arrow:focus-visible, .card:focus-visible, .svc-head .all:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.arrow svg { width: 20px; height: 20px; }