/* ==========================================================================
   M&F HERRAMIENTAS — responsive.css
   Mobile-first overrides. main.css ya es razonablemente fluido con clamp();
   aquí ajustamos layout estructural por breakpoint.
   ========================================================================== */

/* ---------- Mobile base adjustments (<720px) ---------- */
@media (max-width: 720px) {
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100svh;
    width: min(78vw, 320px);
    background: var(--c-steel-900);
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    padding: 2rem;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease-in-out);
    z-index: 400;
    display: flex;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav a { font-size: 1.1rem; }

  .btn-nav { display: none; }
  .nav-toggle { display: flex; z-index: 410; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Hero nuevo — ajustes móvil */
  .hero { cursor: auto; padding: 4rem 0 6rem 0; gap: 1rem; overflow: hidden; }
  .hero-word { font-size: clamp(3.5rem, 20vw, 7rem); letter-spacing: -0.01em; }
  .hero-bottom { gap: 1rem; margin-top: 0; }
  .hero-tagline { font-size: clamp(0.9rem, 4vw, 1.1rem); padding: 0 1rem; }
  .hero-cta-row { gap: 0.75rem; }
  .flashlight-beam { border-left-width: 80px; border-right-width: 80px; }
  .flashlight-halo { width: 55px; }
  /* Linterna: tamaño controlado en móvil, sin rotación */
  .hero-flashlight-wrap {
    width: clamp(320px, 95vw, 550px);
    transform: none;
  }

  .hero-specs { gap: 1rem; padding: 1rem var(--gutter); }
  .spec-label { max-width: 100px; font-size: 0.68rem; }
  .spec-divider { display: none; }
  .scroll-cue { display: none; }

  .about-grid { grid-template-columns: 1fr; }

  .service-row {
    grid-template-columns: 40px 1fr;
    row-gap: 0.75rem;
  }
  .service-tag { grid-column: 2; justify-self: start; }

  .brands-grid { grid-template-columns: repeat(2, 1fr); }
  .brands-grid--five { grid-template-columns: repeat(2, 1fr); }
  .brands-grid--five .brand-plate,
  .brands-grid--five .brand-plate:nth-child(4),
  .brands-grid--five .brand-plate:nth-child(5) { grid-column: auto; }
  .categories-grid { grid-template-columns: repeat(2, 1fr); }

  .contact-grid { grid-template-columns: 1fr; }
  .form-row-split { grid-template-columns: 1fr; }

  .assembly-fragments { gap: 1rem; }
  .fragment { font-size: 0.9rem; padding: 0.8rem 1rem; }

  .trust-bar-label { border-right: none; padding-right: 0; }
  .trust-list { gap: 0.5rem 1.25rem; }
}

/* ---------- Small phones ---------- */
@media (max-width: 400px) {
  .categories-grid { grid-template-columns: 1fr 1fr; }
  .hero-word { font-size: 19vw; }
}

/* ---------- Tablet ---------- */
@media (min-width: 721px) and (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr 1fr; }
  .brands-grid { grid-template-columns: repeat(3, 1fr); }
  .brands-grid--five { grid-template-columns: repeat(6, 1fr); }
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
}

/* ---------- Laptop (769px–1280px) ---------- */
@media (min-width: 721px) and (max-width: 1280px) {
  .hero { gap: 0.75rem; }
  .hero-word { font-size: clamp(3.5rem, 9vw, 8rem); }
  .hero-flashlight-wrap {
    width: clamp(450px, 80vw, 950px);
    transform: none;
  }
}

/* ---------- Large desktop refinement ---------- */
@media (min-width: 1440px) {
  :root { --container: 1320px; }
}