/* ================================================================
   RESPONSIVE — Media queries (desktop-first)
   ================================================================ */

/* ── Tablet landscape ───────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Hero */
  .hero-layout { grid-template-columns: 1fr; gap: 40px; }
  .hero-visuals { min-height: 360px; max-width: 540px; }

  /* Servicios */
  .services-grid { grid-template-columns: 1fr 1fr; }

  /* Instagram */
  .ig-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 200px);
  }
  .ig-tile.t1 { grid-column: span 2; grid-row: span 2; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Contacto */
  .contact-grid { grid-template-columns: 1fr; }
}

/* ── Tablet portrait / móvil grande ────────────────────────── */
@media (max-width: 768px) {

  section { padding: 80px 0; }

  /* Hero */
  .hero { padding: 120px 0 40px; }

  /* Header */
  .nav, .header .cta-btn { display: none; }
  .hamburger { display: flex; }

  .nav.mobile-open {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: fixed;
    top: 72px;
    left: 16px;
    right: 16px;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.1);
  }

  .nav.mobile-open a {
    padding: 14px 20px;
    border-radius: 12px;
    color: var(--ink);
  }

  .nav.mobile-open a:hover {
    background: var(--cream);
    color: var(--black);
  }

  /* Métricas */
  .metrics-strip {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .metric {
    border-bottom: 1px solid var(--line);
    padding: 20px;
  }

  .metric:nth-child(2n)      { border-right: none; }
  .metric:nth-last-child(-n+2) { border-bottom: none; }

  /* Servicios */
  .services-grid { grid-template-columns: 1fr; }

  /* Portfolio */
  .portfolio-card { flex: 0 0 calc((100% - 24px) / 1); }

  /* Instagram */
  .ig-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 180px);
  }

  .ig-tile.t1 { grid-column: span 2; grid-row: span 2; }
  .ig-tile.t2,
  .ig-tile.t3,
  .ig-tile.t4,
  .ig-tile.t5 { grid-column: span 1; grid-row: span 1; }

  /* Formulario */
  .form-row { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; }

  /* Contacto info */
  .contact-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 20px 0;
  }
}

/* ── Móvil pequeño ──────────────────────────────────────────── */
@media (max-width: 480px) {

  .hero-cta-row .btn {
    width: 100%;
    justify-content: center;
  }

  .contact-form { padding: 28px; }

  .hero-sticker {
    width: 80px;
    height: 80px;
    font-size: 12px;
  }
}