/**
 * SkySales Pro - Variables de responsividad
 * Solo espaciado fluido y breakpoints. La estructura visual (grids, columnas) no cambia.
 * Así el mismo diseño responde igual en todos los dispositivos.
 */

:root {
  /* Breakpoints únicos para que el corte sea igual en cualquier dispositivo */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Contenedor: mismo margen lateral en todas las pantallas (escala con el ancho) */
  --container-max: 1200px;
  --container-padding: clamp(1rem, 4vw, 2.5rem);

  /* Espaciado vertical de secciones (proporcional al viewport) */
  --section-padding-y: clamp(3rem, 6vw, 5rem);

  /* Pantallas ultra anchas: se amplían en --bp-2xl (ver media query abajo) */
  --bp-2xl: 2000px;
  --layout-content-max: 1200px;
  --layout-modules-box-max: 1050px;
  --layout-footer-inner-max: 1400px;
  --layout-nav-max: 1600px;
  --layout-banner-inner-max: 1600px;

  /* Escala tipográfica (se combina con html font-size en pantallas anchas) */
  --type-root-pct: 100%;
}

/* Escalado progresivo: el bloque central usa más ancho real del monitor */
@media (min-width: 1400px) {
  :root {
    --container-max: min(1280px, calc(100vw - 3rem));
    --container-padding: clamp(1rem, 3vw, 2.5rem);
    --layout-content-max: min(1280px, calc(100vw - 3rem));
    --layout-modules-box-max: min(1120px, calc(100vw - 3.5rem));
    --layout-footer-inner-max: min(1340px, calc(100vw - 3rem));
    --layout-nav-max: min(1640px, calc(100vw - 2.5rem));
    --layout-banner-inner-max: min(1680px, calc(100vw - 2.5rem));
    --type-root-pct: 105%;
  }

  html {
    font-size: var(--type-root-pct);
  }
}

@media (min-width: 1600px) {
  :root {
    --container-max: min(1420px, calc(100vw - 2.5rem));
    --container-padding: clamp(1rem, 2.8vw, 2.25rem);
    --layout-content-max: min(1440px, calc(100vw - 2.5rem));
    --layout-modules-box-max: min(1240px, calc(100vw - 3rem));
    --layout-footer-inner-max: min(1500px, calc(100vw - 2.25rem));
    --layout-nav-max: min(1760px, calc(100vw - 2rem));
    --layout-banner-inner-max: min(1780px, calc(100vw - 2rem));
    --type-root-pct: 107%;
  }

  html {
    font-size: var(--type-root-pct);
  }
}

@media (min-width: 1920px) {
  :root {
    --container-max: min(1580px, calc(100vw - 2rem));
    --container-padding: clamp(1rem, 2.2vw, 2rem);
    --section-padding-y: clamp(3.5rem, 5vw, 6rem);
    --layout-content-max: min(1680px, calc(100vw - 2rem));
    --layout-modules-box-max: min(1360px, calc(100vw - 2.5rem));
    --layout-footer-inner-max: min(1720px, calc(100vw - 2rem));
    --layout-nav-max: min(1880px, calc(100vw - 1.5rem));
    --layout-banner-inner-max: min(1900px, calc(100vw - 1.5rem));
    --type-root-pct: 112%;
  }

  html {
    font-size: var(--type-root-pct);
  }
}

@media (min-width: 2200px) {
  :root {
    --container-padding: clamp(1rem, 1.8vw, 2rem);
    --layout-content-max: min(1880px, calc(100vw - 2rem));
    --layout-modules-box-max: min(1480px, calc(100vw - 2.5rem));
    --layout-footer-inner-max: min(1920px, calc(100vw - 2rem));
    --layout-nav-max: min(2000px, calc(100vw - 1.5rem));
    --layout-banner-inner-max: min(1980px, calc(100vw - 1.5rem));
    --type-root-pct: 116%;
  }

  html {
    font-size: var(--type-root-pct);
  }
}

@media (min-width: 2560px) {
  :root {
    --container-max: min(1980px, calc(100vw - 2rem));
    --container-padding: clamp(1rem, 1.5vw, 2rem);
    --section-padding-y: clamp(4rem, 4vw, 6.5rem);
    --layout-content-max: min(2200px, calc(100vw - 2.5rem));
    --layout-modules-box-max: min(1650px, calc(100vw - 3rem));
    --layout-footer-inner-max: min(2280px, calc(100vw - 2rem));
    --layout-nav-max: min(2300px, calc(100vw - 2rem));
    --layout-banner-inner-max: min(2240px, calc(100vw - 2rem));
    --type-root-pct: 122%;
  }

  html {
    font-size: var(--type-root-pct);
  }
}