/* Mobile-first — breakpoints: 375px / 768px / 1280px */

@media (max-width: 768px) {
  .navbar {
    padding: 20px 24px;
  }

  .nav__left,
  .nav__right {
    gap: 20px;
  }

  .nav__owl {
    width: 52px;
    height: 52px;
  }

  .hero__title-line1 { font-size: 40px; }
  .hero__title-line2 { font-size: 48px; }

  /* En móvil la barra del navegador come parte del 100vh */
  .hero {
    height: 100svh;
  }

  /* Los tres bloques del pie comparten bottom en escritorio y se
     solapan en pantallas estrechas: se apilan centrados en vertical */
  .hero__scroll {
    bottom: 112px;
  }

  .hero__bottom-left {
    left: 50%;
    bottom: 56px;
    transform: translateX(-50%);
  }

  .hero__bottom-left-line {
    display: none;
  }

  .hero__bottom-right {
    right: 50%;
    bottom: 24px;
    transform: translateX(50%);
  }

  .hero__tagline {
    white-space: nowrap;
  }
}

@media (max-width: 375px) {
  .nav__left  { gap: 14px; }
  .nav__right { gap: 14px; }

  .hero__title-line1 { font-size: 32px; }
  .hero__title-line2 { font-size: 38px; }
}