/* ============================================================
   CACAGUATE — Responsive Styles
   Mobile-First breakpoints
   ============================================================ */

/* ============================================================
   BREAKPOINTS
   xs:  < 480px  (small phones)
   sm:  480–767px (large phones)
   md:  768–1023px (tablets)
   lg:  1024–1279px (small desktops)
   xl:  1280px+ (large desktops)
   ============================================================ */

/* ============================================================
   TABLET — max 1023px
   ============================================================ */
@media (max-width: 1023px) {

  :root {
    --sp-24: 8rem;
    --sp-16: 5rem;
    --sp-12: 4rem;
  }

  /* Nav */
  .nav__links { display: none; }
  .nav__cta .btn:not(.btn--whatsapp) { display: none; }
  .nav__hamburger { display: flex; }

  /* Hero */
  .hero__content { max-width: 780px; }

  /* Intro */
  .intro__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
  .intro__visual { order: -1; }
  .intro__img-main { aspect-ratio: 16/9; }
  .intro__img-accent { display: none; }
  .intro__stats { grid-template-columns: repeat(3, 1fr); }

  /* Services */
  .services__grid { grid-template-columns: repeat(2, 1fr); }

  /* Stats bar */
  .stats-bar__inner { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .stat-item:nth-child(2)::after { display: none; }

  /* Portfolio */
  .portfolio-item:nth-child(1) { grid-column: span 12; }
  .portfolio-item:nth-child(2) { grid-column: span 12; }
  .portfolio-item:nth-child(3),
  .portfolio-item:nth-child(4),
  .portfolio-item:nth-child(5) { grid-column: span 4; }

  /* Clients */
  .clients__logos { gap: var(--sp-4) var(--sp-6); }

  /* Newsletter */
  .newsletter__inner {
    flex-direction: column;
    text-align: center;
  }
  .newsletter__form { max-width: 100%; width: 100%; }

  /* Contact */
  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  /* Footer */
  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }

  /* CTA */
  .cta-section__title { font-size: clamp(2.5rem, 5vw, 4rem); }
}

/* ============================================================
   LARGE PHONE — max 767px
   ============================================================ */
@media (max-width: 767px) {

  :root {
    --sp-24: 5rem;
    --sp-16: 4rem;
    --sp-12: 3rem;
    --sp-8:  3rem;
  }

  /* Base Typography */
  h1, .h1 { font-size: clamp(2rem, 7vw, 3rem); }
  h2, .h2 { font-size: clamp(1.75rem, 6vw, 2.5rem); }

  /* Hero */
  .hero__title { letter-spacing: -0.03em; }
  .hero__subtitle { font-size: 1.125rem; }
  .hero__actions { flex-direction: column; align-items: center; }
  .hero__actions .btn { width: 100%; max-width: 320px; justify-content: center; }

  /* Services */
  .services__grid { grid-template-columns: 1fr; }

  /* Stats bar */
  .stats-bar__inner { grid-template-columns: 1fr 1fr; }
  .stat-item::after { display: none; }

  /* Portfolio */
  .portfolio-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
  }
  .portfolio-item:nth-child(1),
  .portfolio-item:nth-child(2),
  .portfolio-item:nth-child(3),
  .portfolio-item:nth-child(4),
  .portfolio-item:nth-child(5) { grid-column: span 1; }
  .portfolio-item:nth-child(1) { grid-column: span 2; }

  /* Clients */
  .clients__logos { gap: var(--sp-3) var(--sp-4); }
  .client-logo { height: 28px; }

  /* Contact form */
  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: var(--sp-4); }

  /* Section header */
  .section-header { margin-bottom: var(--sp-6); }
  .section-header__desc { font-size: var(--fs-base); }

  /* Newsletter */
  .newsletter__form { flex-direction: column; }
  .newsletter__input { text-align: center; }
  .newsletter__form .btn { width: 100%; justify-content: center; }

  /* Footer */
  .footer__top { grid-template-columns: 1fr; gap: var(--sp-6); }
  .footer__bottom { flex-direction: column; text-align: center; }
  .footer__legal { flex-wrap: wrap; justify-content: center; }

  /* Page header */
  .page-header__title { font-size: clamp(2.5rem, 10vw, 4rem); }
  .page-header { padding-top: calc(var(--nav-h) + var(--sp-8)); }

  /* WhatsApp float */
  .whatsapp-float {
    bottom: var(--sp-3);
    right: var(--sp-3);
    padding: 0.875rem 1.25rem;
  }
  .whatsapp-float span { display: none; }

  /* Cookie banner */
  .cookie-banner {
    flex-direction: column;
    text-align: center;
    left: var(--sp-2);
    right: var(--sp-2);
    bottom: var(--sp-2);
  }
  .cookie-banner__actions { justify-content: center; }

  /* Nav CTA */
  .nav__cta { display: none; }

  /* Intro stats */
  .intro__stats { grid-template-columns: 1fr; gap: var(--sp-2); }

  /* CTA section */
  .cta-section__actions { flex-direction: column; align-items: center; }
  .cta-section__actions .btn { width: 100%; max-width: 320px; justify-content: center; }

  /* Buttons */
  .btn--lg {
    padding: 1rem 2rem;
    font-size: var(--fs-base);
  }

  /* Swiper buttons */
  .swiper-button-next,
  .swiper-button-prev {
    display: none !important;
  }
}

/* ============================================================
   SMALL PHONE — max 479px
   ============================================================ */
@media (max-width: 479px) {

  .container { padding-left: var(--sp-3); padding-right: var(--sp-3); }

  .hero__content { padding: 0 var(--sp-3); padding-top: var(--nav-h); }

  .service-card { padding: var(--sp-6) var(--sp-4); }

  .stats-bar__inner { grid-template-columns: 1fr 1fr; }

  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-item:nth-child(1),
  .portfolio-item:nth-child(2),
  .portfolio-item:nth-child(3),
  .portfolio-item:nth-child(4),
  .portfolio-item:nth-child(5) { grid-column: span 1; }

  .footer__brand-name { font-size: var(--fs-xl); }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .nav,
  .whatsapp-float,
  .cookie-banner,
  .loader,
  .cursor,
  .scroll-progress { display: none !important; }

  body {
    background: white;
    color: black;
  }

  .section--dark,
  .section--dark2 {
    background: white;
    color: black;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .loader__bar { animation: none; width: 100%; }
  .loader__logo { animation: none; }
  .whatsapp-float { animation: none; }
  .marquee-track,
  .marquee-track--reverse { animation: none; }
}

/* ============================================================
   HIGH CONTRAST MODE
   ============================================================ */
@media (prefers-contrast: high) {
  :root {
    --b-dark:  rgba(255,255,255,0.3);
    --b-light: rgba(0,0,0,0.3);
  }
  .service-card { border-color: rgba(255,255,255,0.2); }
}

/* ============================================================
   DARK MODE (system preference, already dark by default)
   ============================================================ */
@media (prefers-color-scheme: light) {
  /* Site is dark-first by design — no forced light override */
}

/* ============================================================
   LARGE SCREENS — min 1440px
   ============================================================ */
@media (min-width: 1440px) {
  :root {
    --fs-hero: 8.5rem;
  }

  .hero__content { max-width: 1100px; }
}