/* ==========================================================================
   ZOONARANJA — Responsive global (mobile-first refinements)
   ========================================================================== */

@media (max-width: 1200px) {
  .masonry-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .masonry-grid { grid-template-columns: repeat(2, 1fr); }
  .masonry-item.wide { grid-column: span 2; }
  #hero .hero-trust { gap: var(--space-md); }
  .peru-map-wrap { max-width: 320px; }
}

html,
body {
  overflow-x: clip;
}

#hero .hero-copy-mobile { display: none; }

@media (max-width: 768px) {
  :root { --nav-height: 68px; }
  .team-photo { height: 180px; }
  #whatsapp-widget .wa-tag { display: none; }
  .section-head { margin-bottom: 1.5rem; }
  #tools .tool-tabs {
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
    gap: 0.75rem;
  }
  #tools .tool-tab-btn {
    width: 100%;
    min-height: 48px;
    text-align: center;
  }
  .section-padding { padding: 2rem 0; }
  .section-padding-sm { padding: 1.5rem 0; }
  #site-footer { padding-top: 2rem; }
  #hero { min-height: 100svh; }
  #hero .hero-content { padding-top: calc(var(--nav-height) + 3rem); }
  #hero .hero-badge,
  #hero .hero-copy-desktop { display: none; }
  #hero .hero-copy-mobile { display: inline; }
  #trust-bar .trust-bar-item:last-child { display: none; }
  #hero h1 { margin-top: 1.5rem; margin-bottom: 1rem; }
  #hero .hero-sub { font-size: 0.9rem; line-height: 1.5; margin-bottom: 1rem; }
  #hero .hero-trust { display: none; }
  #trust-bar .trust-bar-item:last-child { display: none; }
  #hero .hero-trust {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
  }
  #hero .scroll-cue { display: none; }
  #hero .hero-trust .trust-item:nth-child(n + 3) { display: none; }
  #hero .hero-actions {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
    padding-bottom: 4rem;
  }
  #hero .hero-actions .btn {
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0.85rem 1rem;
    justify-content: center;
    font-size: 0.9rem;
  }
  .section-head .section-title { margin-top: 1.5rem; }
  .compare-wrap { aspect-ratio: 1/1; }
  #ai-chatbot-window { width: calc(100vw - 32px); right: 16px; bottom: 96px; }
  #ai-chatbot-toggle { right: 84px; bottom: 20px; width: 54px; height: 54px; }
  #whatsapp-widget { bottom: 20px; right: 16px; }
  .wa-button { width: 54px; height: 54px; font-size: 1.4rem; }
}

@media (max-width: 560px) {
  .masonry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(110px, 40vw, 210px);
    gap: 0.6rem;
  }
  .masonry-item,
  .masonry-item.tall,
  .masonry-item.wide {
    min-width: 0;
    min-height: 0;
    aspect-ratio: auto;
  }
  .masonry-item.tall { grid-row: span 2; }
  .masonry-item.wide { grid-column: span 2; }
  .trust-bar-item span { display: none; }
  #stats .stats-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* Simplificar movimiento en móviles: menos parallax, sin cursor personalizado,
   pet companion oculto para no interferir con la lectura en pantallas pequeñas */
@media (max-width: 768px) {
  #pet-companion-track { height: 100vh; }
  .pet-companion { width: 48px; height: 40px; }
  .light-orb, .organic-blob { display: none; }
}

@media print {
  #site-header, #whatsapp-widget, #ai-chatbot-toggle, #ai-chatbot-window,
  #back-to-top, #scroll-progress, #pet-companion-track, .custom-cursor, .cursor-ring {
    display: none !important;
  }
}
@media (max-width: 768px) {
  #hero {
    min-height: auto;
    padding-block: calc(var(--nav-height) + 5.5rem) 3rem;
  }

  #hero .hero-content {
    padding-block: 0;
  }

  #hero h1,
  #hero h1 .hero-title-line {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .mobile-menu {
    -webkit-overflow-scrolling: touch;
  }

  #ai-chatbot-window {
    left: 1rem;
    right: 1rem;
    width: auto;
    max-height: min(70svh, 480px);
    bottom: 5.5rem;
  }

  #ai-chatbot-toggle {
    right: 1rem;
    bottom: 5rem;
  }

  #whatsapp-widget {
    right: 1rem;
    bottom: 1rem;
  }

  .locations-scroll,
  .chat-body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  #locations .grid-2 > .reveal-slide-l {
    position: relative !important;
    top: auto !important;
    z-index: auto;
    margin-bottom: 0.5rem;
  }

  #locations .grid-2 {
    gap: 0.75rem !important;
  }

  #locations .peru-map-wrap {
    max-width: none;
    height: clamp(180px, 34svh, 260px);
    aspect-ratio: auto;
  }

  #locations .locations-scroll {
    max-height: 360px;
    overflow-y: auto;
    padding-right: 0;
  }

  #ai-assistant-promo .grid-2 {
    gap: 1.25rem;
  }

  #ai-assistant-promo .btn {
    display: flex;
    width: max-content;
    margin-inline: auto;
  }

  #ai-assistant-promo .ai-promo-icons {
    font-size: 3.6rem;
    letter-spacing: 0;
  }

  .footer-newsletter input {
    min-width: 0;
  }

  .footer-bottom-links {
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
  }

  .footer-bottom-links a {
    overflow-wrap: anywhere;
  }

  .footer-social a {
    width: 40px;
    height: 40px;
  }

  .footer-col a {
    display: inline-block;
    padding-block: 0.2rem;
  }

  #booking-vet-grid,
  #booking-time-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .time-slot {
    min-height: 44px;
  }
}

@media (max-width: 560px) {
  #site-header .nav-inner {
    padding-inline: 1rem;
    gap: 0.5rem;
  }

  .nav-actions {
    gap: 0.35rem;
  }

  .nav-actions .btn-primary {
    display: none;
  }

  .logo-word {
    font-size: 1.15rem;
  }
}

@media (max-width: 420px) {
  .finder-box {
    flex-direction: column;
    border-radius: var(--radius-md);
  }

  .finder-box input,
  .finder-box button {
    width: 100%;
    min-width: 0;
  }

  .location-search-bar .finder-box button {
    justify-content: center;
    min-height: 44px;
  }
}

@media (max-width: 360px) {
  .footer-newsletter {
    flex-direction: column;
  }

  .footer-newsletter input,
  .footer-newsletter button {
    width: 100%;
    min-width: 0;
  }

  .footer-newsletter button {
    min-height: 44px;
  }
}