/* 08-responsivo.css
   Ajustes para celular (até 760px) e para quem pede menos animação no sistema.
*/

/* tablet / celular */
@media (max-width: 760px) {
  .svc-title { font-size: clamp(64px, 23vw, 120px); }
  .carousel { margin-top: 80px; align-self: start; }
  .deck { height: 430px !important; }
  .k-vet .art img { height: auto; width: 86%; right: 6%; }
  .ans { grid-template-columns: 1fr; padding-left: clamp(14px, 2vw, 26px); }
  .how-grid { grid-template-columns: 1fr; }
  .help-panel { grid-template-columns: 1fr; }
  .ans { padding-left: 16px; }
  .ft-top { grid-template-columns: 1fr; }
  .ft-cols { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .ft-tag.c { display: none; }
  .ft-bottom { flex-direction: column; align-items: flex-start; }
  .corgi { order: -1; width: min(330px, 84vw); margin: 8px auto 0; }
  .steps, .steps.left, .steps.right { text-align: left; justify-items: start; grid-template-columns: 1fr 1fr; gap: 14px; }
  .steps.left .num { justify-self: start; }
  .how-grid { gap: 16px; }
  .step h3 { font-size: 17px; }
  .step p { font-size: 13px; }
  .how { padding-bottom: 8px; }
  .partners { grid-template-columns: 1fr; }
  .phones { height: 500px; }
  .phone { width: 200px; }
  .ph1 { left: 0; } .ph2 { right: 0; top: 14%; }
  .b3, .b6, .b7 { display: none; }
  .b1 { left: -2%; top: 0; } .b2 { right: -2%; top: 2%; } .b4 { left: -3%; top: 62%; } .b5 { right: -3%; top: 54%; } .b8 { left: 26%; bottom: -2%; }
  .qa summary { grid-template-columns: 40px 1fr auto; }
  .k-vet .art::before { width: 96%; top: auto; bottom: 16%; right: 1%; }
  .k-passeio .art img { height: auto; max-height: 104%; width: 100%; right: 0; bottom: 0; }
  .deck { grid-column: 1 / -1; grid-row: 1; height: 470px; }
  .card { aspect-ratio: auto; height: 330px; width: calc(100% - 40px); left: 0; grid-template-columns: 1fr; transform: translate(calc(var(--i) * 8px), calc(var(--i) * -38px)) rotate(calc(-3deg + var(--i) * 2deg)); }
  .card .body { max-width: 56%; }
  .card .art { width: 50%; }
  .k-hotel .art { width: 56%; }
  .k-hotel .art img { height: auto; width: 100%; right: 0; }
  .nav { grid-template-columns: auto 1fr; }
  .nav ul { display: none; }
  .nav .logo { justify-self: start; }
  .stage { min-height: 0; padding-top: 22px; padding-bottom: clamp(250px, 70vw, 360px); }
  .title { font-size: clamp(64px, 25vw, 150px); line-height: .8; }
  .title .l2 { display: block; }
  .pet { width: clamp(230px, 66vw, 340px); bottom: auto; top: clamp(178px, 50vw, 280px);
    -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
  .t1 { left: 4%;  top: 6%; }
  .t2 { left: auto; right: 4%; top: 2%; }
  .t3 { left: 3%;  top: 47%; }
  .t4 { right: 3%; top: 52%; }
  .t5 { right: 5%; top: 74%; }
  .t6 { left: 5%;  top: 80%; }
  .i1 { left: 34%; top: 28%; } .i2 { right: 3%; top: 15%; } .i3 { left: 4%; top: 23%; }
  .i4, .i5, .i6 { display: none; }
  .foot { margin-top: 0; flex-direction: column; align-items: stretch; padding-top: 18px; }
  .lede { max-width: none; font-size: clamp(22px, 6.3vw, 36px); }
  .cta { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tag, .ico, .i5 i, .k-vet .art::before, .ans, .pb, .corgi-img, .corgi .grass, .ball, .heart-loop.back { animation: none; }
  .float-h { display: none; }
  .ft-tag { animation: none; }
  .pb { transition: none; }
  .qa, .qa .tog { transition: none; }
  .tag, .ico { transition: none; }
  .card { animation: none; }
  .card, .card .body { transition: none; }
  .cta { transition: none; }
}