/* =========================================================
   Mobile-first: los estilos base (base.css/layout.css/components.css)
   ya están pensados para teléfono. Aquí solo se AMPLÍA para
   pantallas más grandes.
========================================================= */

/* ---------- Tablet / escritorio pequeño ---------- */
@media (min-width: 700px) {
  .navbar { padding: 20px var(--gutter); }

  .nav-toggle { display: none; }

  .nav-links {
    position: static;
    height: auto;
    width: auto;
    flex-direction: row;
    gap: 2rem;
    background: none;
    transform: none;
    padding-top: 0;
  }

  .nav-link { color: var(--vino-oscuro); }
  .navbar.scrolled .nav-link { color: var(--plateado-claro); }

  .section-inner { max-width: 720px; }
  .hero-content { max-width: 560px; }
}

/* ---------- Escritorio ---------- */
@media (min-width: 1000px) {
  .section-inner { max-width: 820px; }
  .hero-content { max-width: 620px; }
}