/* ================================================================
   MOMENTOS ÚNICOS — responsive.css
   ------------------------------------------------------------
   Breakpoints:
     1024px -> Tablets grandes / laptops pequeños
      768px -> Tablets / móviles horizontales
      480px -> Móviles
   ================================================================ */

/* ---------- TABLET (≤1024px) ---------- */
@media (max-width: 1024px){
    .hero-inner{ grid-template-columns: 1fr; }
    .hero-visual{ order:-1; max-width: 420px; margin: 0 auto; }
    .hero-copy p{ max-width: 100%; }

    .services-grid{ grid-template-columns: repeat(2, 1fr); }
    .why-inner{ grid-template-columns: 1fr; }
    .why-visual{ max-width: 420px; margin: 0 auto; }

    .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
    .testi-grid{ grid-template-columns: repeat(2, 1fr); }
    .process-grid{ grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
    .pricing-grid{ grid-template-columns: repeat(2, 1fr); }
    .ticket-card.featured{ transform:none; }
    .ticket-card.featured:hover{ transform: translateY(-8px); }

    .ideas-layout{ grid-template-columns: 220px 1fr; gap: 26px; }
    .idea-gallery{ grid-template-columns: repeat(2, 1fr); }

    .contact-layout{ grid-template-columns: 1fr; }
    .counters-grid{ grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }

    .footer-inner{ grid-template-columns: 1fr 1fr; }
}

/* ---------- MÓVIL HORIZONTAL / TABLET PEQUEÑA (≤768px) ---------- */
@media (max-width: 768px){
    section{ padding: 64px 0; }

    .main-nav{
        position: fixed; top: 84px; left:0; right:0; bottom:0;
        background: var(--bg); flex-direction:column; align-items:flex-start;
        padding: 30px 24px; gap: 24px; transform: translateX(100%); transition: transform .3s ease;
        overflow-y:auto;
    }
    .main-nav.open{ transform: translateX(0); }
    .main-nav ul{ flex-direction:column; gap: 6px; width:100%; }
    .main-nav ul li{ width:100%; }
    .main-nav ul a{ display:block; padding: 14px 6px; font-size:1.05rem; border-bottom:1px solid var(--line); }
    .btn-nav-cta{ width:100%; }
    .nav-toggle{ display:flex; }
    .nav-toggle.open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
    .nav-toggle.open span:nth-child(2){ opacity:0; }
    .nav-toggle.open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

    .hero{ padding: 40px 0 70px; }
    .hero-actions{ flex-direction:column; align-items:stretch; }
    .hero-stats{ gap: 24px; }

    .services-grid{ grid-template-columns: 1fr; }
    .gallery-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
    .gallery-item.g-wide{ grid-column: span 2; }
    .testi-grid{ grid-template-columns: 1fr; }
    .process-grid{ grid-template-columns: 1fr; }

    .pricing-grid{ grid-template-columns: 1fr; }
    .pricing-note{ margin-left: 24px; margin-right: 24px; }

    .ideas-layout{ grid-template-columns: 1fr; }
    .ideas-sidebar{ display:none; }
    .ideas-mobile-select{ display:block; }
    .idea-panel{ padding: 26px; }
    .idea-gallery{ grid-template-columns: repeat(2, 1fr); }
    .idea-tips{ grid-template-columns: 1fr; }

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

    .counters-grid{ grid-template-columns: 1fr 1fr; }

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

    .cta-final{ margin: 0 16px; padding: 50px 26px; }

    .back-to-top{ right: 90px; bottom: 22px; width:42px; height:42px; }
    .whatsapp-float{ width: 56px; height:56px; bottom:22px; right:22px; }
}

/* ---------- MÓVIL (≤480px) ---------- */
@media (max-width: 480px){
    .container{ padding: 0 18px; }
    .header-inner{ height: 72px; }
    .main-nav{ top: 72px; }
    .brand-tag{ display:none; }

    .hero-copy h1{ font-size: 2.1rem; }
    .hero-collage{ aspect-ratio: 4/5; }
    .hero-sticker{ font-size:0.75rem; padding: 9px 14px; }
    .hero-sticker.s1{ left: 0; top: 2%; }

    .section-head h2{ font-size: 1.7rem; }

    .gallery-grid{ grid-template-columns: 1fr 1fr; grid-auto-rows: 110px; }
    .idea-gallery{ grid-template-columns: 1fr; }
    .idea-panel-head{ flex-wrap:wrap; }

    .counters-grid{ grid-template-columns: 1fr; gap: 26px; }
    .counter-item .counter-num{ font-size: 2.2rem; }

    .contact-whatsapp-big{ flex-direction:column; align-items:flex-start; }
}