/* TABLETS Y ESCRITORIO (A partir de 768px) */
@media (min-width: 768px){
  .nav-toggle { display: none; }
  
  .site-nav { 
    display: flex !important; 
    gap: 10px; 
    align-items: center; 
  }
  
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; align-items: start; gap: 50px; }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr 1fr; }
}

/* ESCRITORIO GRANDE */
@media (min-width: 1024px){
  .projects-grid { grid-template-columns: repeat(3, 1fr); }
  .section { padding: 60px 0; }
  .hero { padding-top: 60px; }
}

/* SOLO MÓVILES (Hasta 767px) */
@media (max-width: 767px){
  .hero h1 { font-size: 32px; }
  .hero-actions { display: grid; gap: 10px; }
  .btn { width: 100%; }

  /* Ajuste de navegación móvil abierta */
  .site-nav.is-open { 
    display: flex !important; 
    flex-direction: column;
    position: absolute; 
    top: 64px; left: 0; right: 0; 
    background: #0a0e1a; 
    padding: 20px; 
    z-index: 100; 
    border-bottom: 1px solid var(--accent); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  }
  
  .site-nav a { padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .site-nav .nav-cta { margin-top: 10px; text-align: center; }

  .timeline-top { flex-direction: column; }
  .timeline-top span { margin-top: 5px; }
}