/* =========================================================
   ORGANIC JOURNEY — RESPONSIVE STYLESHEET
   Breakpoints: 1200 / 1024 / 768 / 480
   ========================================================= */

/* ---------- Laptops / small desktops ---------- */
@media (max-width: 1200px){
  .why-grid{ grid-template-columns: repeat(3, 1fr); }
  .why-card:nth-child(4), .why-card:nth-child(5){ grid-column: span 1; }
  .products-grid{ grid-template-columns: repeat(2, 1fr); }
  .timeline{ grid-template-columns: repeat(3, 1fr); row-gap: 60px; }
  .timeline-line{ display:none; }
}

/* ---------- Tablets ---------- */
@media (max-width: 1024px){
  .container{ padding: 0 24px; }
  section{ padding: 90px 0; }

  .nav-menu{
    position: fixed; top:0; right:-100%; height:100vh; width: min(340px, 82vw);
    background: var(--beige); flex-direction:column; justify-content:center; align-items:flex-start;
    gap: 26px; padding: 40px; box-shadow: -20px 0 50px rgba(0,0,0,0.15);
    transition: right .45s var(--ease-premium); z-index: 1;
  }
  .nav-menu.is-open{ right:0; }
  .nav-menu .nav-link{ color: var(--forest) !important; font-size: 1.05rem; }
  .nav-toggle{ display:flex; }
  .nav-toggle.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-active span:nth-child(2){ opacity:0; }
  .nav-toggle.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  .nav-actions .btn-whatsapp span{ display:none; }
  .nav-actions .btn-whatsapp{ padding: 12px; width:42px; height:42px; justify-content:center; border-radius:50%; }

  .about-grid, .contact-grid{ grid-template-columns: 1fr; gap: 60px; }
  .about-media{ min-height: 420px; max-width: 460px; margin: 0 auto; }
  .faq-grid{ grid-template-columns: 1fr; gap: 40px; }

  .hero-counters{ grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .gallery-item.span-2{ grid-column: span 2; grid-row: span 1; }

  .footer-grid{ grid-template-columns: 1fr 1fr; row-gap: 40px; }
}

/* ---------- Large phones / small tablets ---------- */
@media (max-width: 768px){
  .why-grid{ grid-template-columns: repeat(2, 1fr); }
  .products-grid{ grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .benefits-grid{ grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .timeline{ grid-template-columns: 1fr; gap: 44px; }
  .timeline-step{ padding-top: 0; }

  .form-row{ grid-template-columns: 1fr; }
  .contact-form{ padding: 30px 24px; }

  .hero-title{ letter-spacing: -0.005em; }
  .hero-cta{ flex-direction: column; width: 100%; }
  .hero-cta .btn{ width:100%; justify-content:center; }

  .footer-grid{ grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom-inner{ flex-direction:column; text-align:center; }
}

/* ---------- Phones ---------- */
@media (max-width: 480px){
  .container{ padding: 0 18px; }
  section{ padding: 70px 0; }

  .navbar{ padding: 16px 18px; }
  .nav-logo-text{ font-size: 1.05rem; }

  .hero{ padding-top: 100px; }
  .hero-counters{ grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 32px 18px 40px; }
  .counter-num, .counter-suffix{ font-size: 1.5rem; }

  .why-grid{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .gallery-item.span-2{ grid-column: span 1; }

  .video-card{ aspect-ratio: 3/4; }

  .about-badge{ position:static; margin-top: 16px; display:inline-flex; }
  .about-media{ min-height: auto; }
  .blob-frame-2{ display:none; }
  .blob-frame-1{ position: static; width:100%; aspect-ratio: 4/3; }

  .contact-cards{ gap: 10px; }
  .contact-card{ padding: 14px 16px; }

  .fab{ width:50px; height:50px; right: 16px; font-size:1.3rem; }
  .fab-whatsapp{ bottom: 16px; }
  .fab-top{ bottom: 78px; }
}

/* ---------- Ultra-wide ---------- */
@media (min-width: 1600px){
  :root{ --container-w: 1360px; }
}