/* ==========================================================
   MOBILE PIXEL-PERFECT PASS — DogZ
   Folha carregada por último para corrigir somente o mobile
   sem reescrever a estrutura original do projeto.
   ========================================================== */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

@media (max-width: 767px) {
  :root {
    --mobile-gutter: 18px;
    --mobile-radius: 24px;
  }

  body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  .container {
    width: 100%;
    padding-left: var(--mobile-gutter) !important;
    padding-right: var(--mobile-gutter) !important;
  }

  /* Header / navegação */
  .header {
    padding: 8px 0 !important;
  }

  .header .container {
    min-height: 70px;
    gap: 12px;
  }

  .logo-icon img {
    height:77px !important;
    width: auto !important;
    max-width: 132px !important;
  }

  .menu-toggle {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #fff7ef;
    z-index: 1101;
  }

  .menu-toggle span {
    width: 27px;
    height: 3px;
  }

  .mobile-menu {
    z-index: 1100;
    width: min(88vw, 340px) !important;
    max-width: min(88vw, 340px) !important;
    border-top-left-radius: 26px;
    border-bottom-left-radius: 26px;
  }

  .mobile-menu-content {
    padding: 104px 22px 28px !important;
  }

  .menu-section {
    margin-bottom: 24px !important;
  }

  .menu-section-title {
    font-family: var(--font-secondary);
    font-size: 1.35rem !important;
    line-height: 1.05;
    margin-bottom: 8px;
  }

  .menu-list a {
    font-size: 1rem !important;
    line-height: 1.25;
    padding: 9px 0 !important;
  }

  /* HOME — hero/carrossel */
  .hero-section {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    min-height: auto !important;
    padding: 12px 0 26px !important;
    overflow: hidden;
  }

  .slider-container {
    width: 100%;
    padding: 0 var(--mobile-gutter) !important;
    overflow: visible !important;
  }

  .slide-1,
  .slide-2,
  .slide-3,
  .slider-container > .active {
    width: 100%;
    max-width: 100% !important;
    min-height: 0 !important;
    flex-direction: column !important;
    border-radius: 26px !important;
    overflow: hidden;
  }

  .hero-image,
  .hero-content {
    flex: none !important;
    width: 100% !important;
  }

  .hero-image {
    min-height: 0 !important;
  }

  .image-wrapper {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
  }

  .image-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .slide-1 .image-wrapper img { object-position: center 41% !important; }
  .slide-2 .image-wrapper img { object-position: center 32% !important; }
  .slide-3 .image-wrapper img { object-position: center 22% !important; }

  .hero-content {
    justify-content: center;
    padding: 22px 20px 26px !important;
  }

  .content-card {
    width: 100%;
    align-items: center;
    text-align: center;
    gap: 10px !important;
  }

  .hero-title {
    margin: 0 !important;
    font-size: clamp(2.3rem, 11vw, 3.1rem) !important;
    line-height: .95 !important;
  }

  .hero-description {
    max-width: 31ch !important;
    margin: 0 auto !important;
    font-size: .98rem !important;
    line-height: 1.48 !important;
  }

  .span-card {
    display: block;
    margin-top: 8px !important;
    font-size: .9rem !important;
    line-height: 1.35 !important;
  }

  .btn-primary,
  .btn-primary-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 156px;
    max-width: 210px !important;
    margin-left: 0 !important;
    padding: 12px 24px !important;
    font-size: 1rem !important;
    line-height: 1.05 !important;
    white-space: nowrap;
  }

  .slider-btn {
    top: 31vw !important;
    width: 38px !important;
    height: 38px !important;
    z-index: 10 !important;
  }

  .slider-prev { left: 24px !important; }
  .slider-next { right: 24px !important; }

  .carousel-indicators {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100%;
    margin: 16px auto 0 !important;
    justify-content: center !important;
    order: 10;
  }

  .indicator {
    width: 11px !important;
    height: 11px !important;
  }

  .paw-prints {
    opacity: .12 !important;
    inset: 0 !important;
    top: 0 !important;
    overflow: hidden;
  }

  .paw {
    width: 32px !important;
    height: 32px !important;
  }

  /* HOME — seções gerais */
  .why-dogz-section,
  .estrutura-section,
  .testimonials-section,
  .faq-section,
  .instagram-live-section,
  .contact-section {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  .section-title,
  .estrutura-title,
  .contact-title,
  .faq-title {
    font-size: clamp(2rem, 9vw, 2.55rem) !important;
    line-height: 1.02 !important;
    text-align: center;
  }

  .section-description,
  .faq-subtitle,
  .contact-subtitle {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  .why-dogz-content {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  .why-dogz-images {
    min-height: 300px !important;
    max-width: 360px;
    width: 100%;
    margin: 0 auto;
  }

  .image-1,
  .image-2 {
    width: 190px !important;
    height: 190px !important;
  }

  .image-1 { top: 0 !important; right: 14px !important; }
  .image-2 { bottom: 0 !important; left: 14px !important; }

  .testimonials-grid,
  .instagram-live-grid {
    grid-template-columns: 1fr !important;
  }

  .contact-card {
    grid-template-columns: 1fr !important;
    height: auto !important;
    overflow: hidden;
    border-radius: 26px !important;
  }

  .contact-map iframe {
    min-height: 280px !important;
  }

  .contact-info {
    padding: 24px 20px !important;
  }

  .floating-btn,
  .whatsapp-float {
    right: 14px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }

  .floating-btn span {
    display: none !important;
  }

  .floating-btn {
    min-height: 52px !important;
    width: 52px !important;
    padding: 0 !important;
    justify-content: center;
    border-radius: 50% !important;
  }
}

@media (max-width: 520px) {
  /* Títulos de páginas internas */
  .service-hero-bar,
  .bath-hero,
  .about-hero__bar,
  .structure-page .hero__topbar {
    padding: 22px 0 18px !important;
  }

  .service-hero-title,
  .bath-hero__title,
  .about-hero__title,
  .structure-page .hero__topbar h1 {
    font-size: clamp(2.45rem, 12vw, 3rem) !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
  }

  .service-hero-subtitle,
  .bath-hero__subtitle {
    max-width: 30ch;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
  }

  /* Páginas: Hotel / Creche */
  .hospedagem-page,
  .service-page.service-daycare.service-daycare-flow .daycare-page,
  .bath-content,
  .about-content,
  .structure-page .structure-content {
    padding-top: 28px !important;
    padding-bottom: 44px !important;
  }

  .hosp-section,
  .service-page.service-daycare.service-daycare-flow .daycare-section {
    padding: 24px 0 34px !important;
  }

  .hosp-grid,
  .hosp-grid.two,
  .service-page.service-daycare.service-daycare-flow .daycare-grid,
  .service-page.service-daycare.service-daycare-flow .daycare-grid--reverse,
  .bath-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .hosp-text,
  .bath-text,
  .daycare-copy,
  .about-text,
  .about-details {
    text-align: left !important;
  }

  .hosp-lead,
  .hosp-body p,
  .bath-intro,
  .bath-cta,
  .service-page.service-daycare.service-daycare-flow .daycare-body p,
  .about-text p,
  .about-details p {
    font-size: 1rem !important;
    line-height: 1.72 !important;
  }

  .hosp-pill,
  .hosp-pill.orange,
  .day-pill,
  .service-page.service-daycare.service-daycare-flow .daycare-pill,
  .bath-quote {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px auto 16px !important;
    padding: 18px 20px !important;
    border-radius: 24px !important;
    font-size: clamp(1.85rem, 9vw, 2.35rem) !important;
    line-height: 1.04 !important;
    letter-spacing: .5px !important;
    text-align: center !important;
  }

  .hosp-pill p,
  .hosp-pill.orange p {
    text-align: center !important;
    margin: 0;
  }

  .orange {
    display: block !important;
    width: 100%;
    font-size: clamp(1.65rem, 8vw, 2.05rem) !important;
    line-height: 1.08 !important;
    margin: 18px 0 !important;
    text-align: center !important;
  }

  .hosp-highlight,
  .service-page.service-daycare.service-daycare-flow .daycare-highlight {
    padding: 18px 20px !important;
    border-radius: 24px !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  /* Imagens circulares — troca medidas absolutas por grid estável */
  .hosp-media,
  .hosp-grid.two .hosp-media,
  .hosp-media.small,
  .bath-media,
  .service-page.service-daycare.service-daycare-flow .daycare-collage,
  .service-page.service-daycare.service-daycare-flow .daycare-collage--alt {
    min-height: 0 !important;
    width: 100% !important;
  }

  .hosp-bubbles {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: center;
  }

  .circle,
  .circle-1,
  .circle-2,
  .circle-3,
  .circle-4,
  .circle-5,
  .circle-6,
  .bath-photo,
  .bath-photo--main,
  .bath-photo--room,
  .service-page.service-daycare.service-daycare-flow .daycare-photo,
  .service-page.service-daycare.service-daycare-flow .daycare-photo--lg,
  .service-page.service-daycare.service-daycare-flow .daycare-photo--md,
  .service-page.service-daycare.service-daycare-flow .daycare-photo--sm,
  .service-page.service-daycare.service-daycare-flow .daycare-photo--left,
  .service-page.service-daycare.service-daycare-flow .daycare-photo--right-top,
  .service-page.service-daycare.service-daycare-flow .daycare-photo--right-bottom {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    max-width: none !important;
    border-radius: 50% !important;
  }

  .circle:first-child,
  .service-page.service-daycare.service-daycare-flow .daycare-photo:first-child,
  .bath-photo--main {
    grid-column: 1 / -1;
    width: min(100%, 310px) !important;
    justify-self: center;
  }

  .bath-media {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    justify-items: center;
  }

  .bath-photo--room {
    width: min(100%, 260px) !important;
  }

  .bath-decor {
    opacity: .35 !important;
  }

  .bath-svg {
    transform: scale(.72);
  }

  .hosp-sidefill {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 !important;
    margin: 12px 0 20px !important;
    text-align: center;
  }

  .hosp-sidefill-text {
    width: 100% !important;
    font-size: clamp(1.7rem, 8vw, 2.15rem) !important;
    line-height: 1.08 !important;
    text-align: center !important;
  }

  .hosp-sidefill-photo {
    width: min(100%, 280px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    justify-self: center;
    border-radius: 50% !important;
  }

  /* A DogZ */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .about-photo--top,
  .about-excellence-photos,
  .about-mission__photo {
    justify-content: center !important;
    align-items: center !important;
  }

  .about-circle,
  .about-circle--ex1,
  .about-circle--ex2 {
    width: min(100%, 286px) !important;
    transform: none !important;
    margin: 0 auto;
  }

  .about-excellence-block,
  .about-excellence-right {
    grid-column: auto !important;
  }

  .about-excellence__title {
    font-size: clamp(2.3rem, 12vw, 3rem) !important;
    line-height: .98 !important;
    margin: 0 0 18px !important;
    text-align: center;
    transform: none !important;
  }

  .about-card {
    padding: 34px 20px 24px !important;
    border-radius: 28px !important;
  }

  .about-card__lead {
    font-size: clamp(1.35rem, 7vw, 1.85rem) !important;
    line-height: 1.08 !important;
  }

  .about-badge {
    height: auto !important;
    max-height: 78px;
    max-width: 180px;
    margin: 10px 0 0 38px !important;
  }

  .about-mission {
    height: auto !important;
    overflow: hidden !important;
  }

  .about-mission__grid {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 36px var(--mobile-gutter) 44px !important;
    text-align: center;
  }

  .about-mission__text h2 {
    font-size: clamp(2.15rem, 10vw, 2.8rem) !important;
    line-height: 1.02 !important;
  }

  .about-mission__text p {
    max-width: none !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    text-align: center !important;
  }

  .about-mission__photo img {
    width: min(100%, 280px) !important;
    transform: none !important;
  }

  /* Nossa Estrutura */
  .structure-page .hero__onda {
    padding: 26px 0 36px !important;
  }

  .structure-page .hero__grid {
    margin-top: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    text-align: center;
  }

  .structure-page .hero__text p {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  .structure-page .structure-title {
    padding: 0 var(--mobile-gutter);
    font-size: clamp(2rem, 9vw, 2.45rem) !important;
    line-height: 1.02 !important;
    text-align: center;
  }

  .structure-page .structure-item,
  .structure-page .structure-item.reverse,
  .structure-page .structure-security {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }

  .structure-page .structure-item.reverse .structure-images {
    order: 2;
  }

  .structure-page .structure-item.reverse .structure-text {
    order: 1;
  }

  .structure-page .bg-green,
  .structure-page .bg-light,
  .structure-page .security-left,
  .structure-page .security-right {
    padding: 28px 22px !important;
  }

  .structure-page .structure-text h3,
  .structure-page .security-left h3 {
    font-size: clamp(2.2rem, 10vw, 2.75rem) !important;
    line-height: 1 !important;
    margin-top: 0 !important;
    text-align: center;
  }

  .structure-page .structure-text p {
    text-align: center;
    font-size: 1rem !important;
  }

  .structure-page .structure-images.two,
  .structure-page .structure-images.three,
  .structure-page .structure-item.banho-tosa .structure-images.two {
    height: auto !important;
    grid-template-columns: 1fr 1fr !important;
  }

  .structure-page .structure-images img {
    aspect-ratio: 1 / 1 !important;
  }

  .structure-page .security-right li {
    gap: 10px !important;
    font-size: .98rem !important;
  }

  .structure-page .security-right li .check-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  .structure-page .security-right li strong {
    font-size: 1.18rem !important;
  }
}

@media (max-width: 380px) {
  :root { --mobile-gutter: 14px; }

  .logo-icon img {
    height: 60px !important;
    max-width: 118px !important;
  }

  .hero-title {
    font-size: clamp(2.05rem, 11vw, 2.55rem) !important;
  }

  .hero-description {
    font-size: .94rem !important;
  }

  .slider-btn {
    top: 34vw !important;
  }

  .service-hero-title,
  .bath-hero__title,
  .about-hero__title,
  .structure-page .hero__topbar h1 {
    font-size: 2.35rem !important;
  }
}