/* Ajustes responsive del header y del mockup de la laptop. */
.hero-grid,
.hero-visual,
.laptop-scene {
  min-width: 0;
}

.laptop-scene {
  width: min(510px, 100%);
  height: auto;
  aspect-ratio: 510 / 320;
  flex: 0 1 510px;
}

@media (max-width: 1100px) {
  .main-nav {
    gap: 18px;
  }

  .main-nav > a:nth-child(2),
  .main-nav > a:nth-child(5) {
    display: none;
  }
}

@media (max-width: 900px) {
  .hero-visual {
    width: 100%;
    min-width: 0;
  }

  .laptop-scene {
    width: 100%;
    max-width: 510px;
    height: auto;
    aspect-ratio: 510 / 320;
    overflow: hidden;
  }

  .screen-content {
    min-width: 0;
    padding: 9px;
    overflow: hidden;
  }

  .featured-tile {
    height: 74px;
    margin-top: 10px;
    padding: 10px;
  }

  .featured-tile small {
    margin-bottom: 5px;
    font-size: 6px;
  }

  .featured-tile strong {
    font-size: 11px;
  }

  .featured-tile span {
    margin-top: 5px;
    font-size: 6px;
  }

  .mini-cards {
    gap: 5px;
    margin-top: 8px;
  }

  .mini-cards div {
    min-width: 0;
    padding: 6px;
  }

  .mini-cards b {
    font-size: 10px;
  }

  .mini-cards small {
    font-size: 6px;
  }
}