/* ════════════════════════════════════════════════════════
   responsive.css — Breakpoints
   ════════════════════════════════════════════════════════

   Breakpoints:
     1024px  → hero 1 columna (foto oculta)
      900px  → about, experiencia y contacto a 1 columna
      768px  → skills 3 → 2 columnas
      640px  → nav mobile, stacks varios
*/

/* ── 1024px: hero ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-grid    { grid-template-columns: 1fr; }
  .hero-right   { display: none; }
}

/* ── 900px: secciones de 2 columnas ──────────────────── */
@media (max-width: 900px) {

  /* About */
  .about-cols {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* Experiencia: carrusel pasa abajo de los puestos */
  .exp-empresa-body {
    grid-template-columns: 1fr;
  }
  .exp-puestos-col {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .exp-carousel-col {
    position: static;       /* sale del sticky */
    padding: 0 1rem 1rem;   /* reajuste de padding */
  }

  /* Contact */
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* ── 768px: skills 3→2 columnas ──────────────────────── */
@media (max-width: 768px) {
  .skills-cols {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

/* ── 640px: mobile general ───────────────────────────── */
@media (max-width: 640px) {

  /* Scroll padding: compensa la nav bar al navegar a secciones */
  html { scroll-padding-top: 80px; }

  /* Nav */
  .nav-home     { display: none; }
  .nav-links    { display: none; }
  .nav-menu-btn { display: block; }

  /* Hero */
  .hero-cta { flex-direction: column; align-items: flex-start; }

  /* Títulos: permitir salto de línea */
  .section-title { white-space: normal; }

  /* Skills 2→1 columna */
  .skills-cols { grid-template-columns: 1fr; gap: 2rem; }

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

  /* Footer */
  footer { flex-direction: column; text-align: center; }

  /* Projects */
  .projects-grid { grid-template-columns: 1fr; }
  .projects-more { margin-top: 1.5rem; }

  /* Experiencia: encabezado apilado en pantalla muy angosta */
  .exp-empresa-header { flex-wrap: wrap; gap: 0.5rem; }
  .exp-empresa-periodo { flex-basis: 100%; padding-left: calc(30px + 0.75rem); }
}