/* ============================================================
   ONEXYA - FIX PANTALLAS GRANDES
   Archivo: fix-large-screens.css
   
   INSTRUCCIONES:
   1. Copia este archivo en tu carpeta styles/
   2. En index.html, añade DESPUÉS de todos los demás CSS:
      <link rel="stylesheet" href="styles/fix-large-screens.css">
   
   Esto sobreescribe los max-width fijos por valores fluidos
   que se adaptan a cualquier resolución.
   ============================================================ */


/* ============================================================
   VARIABLE GLOBAL DE CONTENEDOR
   Se adapta automáticamente según el tamaño de pantalla
   ============================================================ */

:root {
  /*
    clamp(MIN, PREFERIDO, MAX)
    - Nunca baja de 1120px (desktop estándar actual)
    - Usa el 90% del viewport (margen de 5% a cada lado)
    - Nunca sube de 1600px (límite para legibilidad)
  */
  --container-max-width: clamp(1120px, 90vw, 1600px);

  /*
    Para los títulos de sección (actualmente fijos a 800px)
    Se escala proporcionalmente
  */
  --section-header-max-width: clamp(800px, 62vw, 1000px);
}


/* ============================================================
   CONTENEDORES PRINCIPALES
   Los 3 elementos que estaban fijos a 1120px
   ============================================================ */

/* Barra de navegación */
.nav-primary {
  max-width: var(--container-max-width);
}

/* Contenedor de cada sección */
.section-container {
  max-width: var(--container-max-width);
}

/* Contenedor del footer */
.footer-container {
  max-width: var(--container-max-width);
}

/* Cabecera de sección (título + subtítulo) */
.section-header {
  max-width: var(--section-header-max-width);
}


/* ============================================================
   BREAKPOINTS POR TAMAÑO DE PANTALLA
   
   Pantalla          Resolución     Container resultante
   ─────────────────────────────────────────────────────
   Portátil estándar  1280px        1152px  (90vw)
   Desktop estándar   1440px        1296px  (90vw)
   Full HD            1920px        1600px  (cap máximo)
   2K                 2560px        1800px  (cap ampliado)
   4K / Ultra-wide    3840px        2200px  (cap ampliado)
   ============================================================ */

/* Full HD y superiores: ampliamos el cap máximo */
@media (min-width: 1920px) {
  :root {
    --container-max-width: clamp(1600px, 88vw, 1800px);
    --section-header-max-width: clamp(900px, 58vw, 1100px);
  }
}

/* 2K */
@media (min-width: 2560px) {
  :root {
    --container-max-width: clamp(1800px, 86vw, 2200px);
    --section-header-max-width: clamp(1000px, 52vw, 1300px);
  }
}

/* 4K / Ultra-wide extremo */
@media (min-width: 3440px) {
  :root {
    --container-max-width: clamp(2200px, 80vw, 2600px);
    --section-header-max-width: clamp(1200px, 46vw, 1500px);
  }
}


/* ============================================================
   PROTECCIÓN MÓVIL (no tocar lo que ya funciona bien)
   Revierte a comportamiento original en pantallas pequeñas
   ============================================================ */

@media (max-width: 1024px) {
  :root {
    --container-max-width: 100%;
    --section-header-max-width: 100%;
  }
}

/* Eliminar línea de scan del hero */
.scanline {
  display: none;
}