/* ============================================================
   responsive.css — Breakpoints (desktop-first)
   ============================================================ */

/* ---- <= 1024px ---- */
@media (max-width:1024px){
  .scaf-matrix{grid-template-columns:repeat(3,1fr)}
}

/* ---- <= 860px: nav colapsa ---- */
@media (max-width:860px){
  .menu-btn{display:block}
  .nav{
    position:absolute;left:var(--gutter);right:var(--gutter);top:70px;
    flex-direction:column;gap:2px;padding:12px;
    background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
    opacity:0;transform:translateY(-8px);pointer-events:none;
    transition:opacity var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);
  }
  .nav.is-open{opacity:1;transform:none;pointer-events:auto}
  .nav a{padding:12px 14px}

  .investors .thesis{grid-template-columns:1fr}
  .scaf-matrix{grid-template-columns:repeat(2,1fr)}
  .footer-top{flex-direction:column;gap:var(--space-4)}

  .eco-globe-wrap,.eco-globe{width:190px;height:190px}
  .eco-globe-glow{inset:-28px}
  .eco-globe-ring{inset:-16px;--ring-r:106px}
  .eco-globe-dot{width:8px;height:8px;margin:-4px}
}

/* ---- <= 620px ---- */
@media (max-width:620px){
  .scaf-matrix{grid-template-columns:1fr 1fr}
  .proj{grid-template-columns:auto minmax(0,1fr);gap:var(--space-2)}
  .proj-side{grid-column:2;justify-self:start;margin-top:8px}
  .proj:hover{padding-inline:8px}
  .hero-meta{gap:var(--space-3)}
  .footer-links{grid-template-columns:1fr}

  .eco-globe-wrap{display:none}
}

/* ---- Reduced motion: sin transform de entrada ---- */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important}
  .hero-mark{opacity:1 !important;transform:none !important}
  *{scroll-behavior:auto}
}