/*
 * responsive.css
 * Breakpoints globales y ajustes transversales.
 * Los ajustes específicos de cada componente están en su propio archivo.
 */

/* ── DESKTOP GRANDE ──────────────────────────────────── */
@media (min-width: 1440px) {
  :root {
    --gutter: 3rem;
  }
}

/* ── TABLET ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --section-py: clamp(3rem, 6vw, 5rem);
  }
  .cl-section-header__title  { font-size: var(--size-2xl); }
  .cl-benefits__title        { font-size: var(--size-2xl); }
  .cl-positioning__headline  { font-size: var(--size-2xl); }
  .cl-page-header__title     { font-size: var(--size-2xl); }
  .cl-error-state__title     { font-size: var(--size-2xl); }
}

/* ── MOBILE GRANDE ───────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --gutter:     1.25rem;
    --section-py: clamp(2.5rem, 8vw, 4rem);
  }
  .cl-section-header { margin-bottom: var(--space-8); }

  .cl-positioning__stats {
    flex-wrap: wrap;
    gap: var(--space-8);
  }
  .cl-posts-grid {
    grid-template-columns: 1fr;
  }
  .cl-inner-page {
    padding-top: clamp(4rem, 8vw, 6rem);
  }
}

/* ── MOBILE ──────────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --gutter: 1rem;
  }
  .cl-band__content .cl-btn {
    width: 100%;
    justify-content: center;
  }
  .cl-positioning__stats {
    flex-direction: column;
    gap: var(--space-5);
  }
  .cl-error-state__ctas {
    flex-direction: column;
  }
  .cl-error-state__ctas .cl-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── PRINT ───────────────────────────────────────────── */
@media print {
  .cl-header,
  .cl-footer,
  .cl-hero__scroll-hint,
  .cl-band__ticker,
  .cl-hamburger {
    display: none !important;
  }
  body {
    background: white;
    color: black;
  }
  .cl-main {
    padding-top: 0;
  }
}

/* ── 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;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}