/* ==========================================================================
   ELYON AI — Responsive
   Ajustes globales por breakpoint que no pertenecen a un solo componente.
   La mayoría de ajustes específicos viven junto a su componente en
   components.css (mejor localidad, mismo resultado en cascada).

   Breakpoints del proyecto: 1600 / 1440 / 1280 / 1024 / 900 / 768 / 640 / 500 / 390
   ========================================================================== */

@media (max-width: 1600px) {
  :root {
    --text-hero: clamp(3.25rem, 2.1rem + 5.8vw, 6.5rem);
  }
}

@media (max-width: 1280px) {
  .container {
    padding-inline: var(--container-padding);
  }
}

@media (max-width: 900px) {
  :root {
    --section-padding: clamp(4rem, 3.2rem + 4vw, 7rem);
  }
}

@media (max-width: 390px) {
  :root {
    --container-padding: 1.1rem;
  }
}