/* ============================================================
   GUILLERMO NIÑO — Responsive
   ============================================================ */

html, body { overflow-x: hidden; }

/* ---- Header: la navegación horizontal se oculta primero,
   entra el botón de menú fullscreen ---- */
@media (max-width: 900px) {
  .header-nav { display: none; }
  .menu-toggle { display: flex; }
  .quick-contact a:nth-child(3) { display: none; } /* Email queda disponible en Contacto */
  .quick-contact .sep { display: none; }
}

@media (max-width: 640px) {
  .site-header .container { padding: 1.1rem var(--space-sm); }
  .header-right { gap: 12px; }
  .quick-contact { display: none; } /* en pantallas mínimas, el menú fullscreen ya lleva WhatsApp/Email */
}

/* ---- Hero: pantalla completa cinematográfica en todos los tamaños.
   La imagen y el cosmos SIEMPRE están presentes — solo se ajusta el
   tamaño del contenido para que respire bien en cada pantalla. ---- */
@media (max-width: 1080px) {
  .hero-center { padding: var(--space-xl) 1.2rem; }
  .hero-scroll { padding: 0 1.2rem var(--space-md); }
}

@media (max-width: 640px) {
  body[data-page="home"] .site-header .container { padding: 1rem var(--space-sm); }
  .hero-photo img { object-position: center 24%; }
}

/* ---- Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
  .project-block { grid-template-columns: 1fr; gap: var(--space-lg); }
  .project-block.reverse .project-media,
  .project-block.reverse .project-text { order: unset; }
  .theme-grid { grid-template-columns: repeat(2, 1fr); }
  .thinking-grid { grid-template-columns: 1fr; }
  .vision-columns { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-channels { grid-template-columns: 1fr; }
}

/* ---- Móvil grande (≤ 768px) ---- */
@media (max-width: 768px) {
  .theme-grid { grid-template-columns: 1fr 1fr; }
  .vision-columns { grid-template-columns: 1fr; gap: var(--space-md); }
  .video-piece { max-width: 100%; }

  /* Zonas táctiles más cómodas en el reproductor de video */
  .video-btn { width: 44px; height: 44px; }
  .video-btn svg { width: 20px; height: 20px; }
  .video-controls { padding: var(--space-md) var(--space-xs) var(--space-xs); gap: 0.5rem; }
  .video-progress { padding: 10px 0; background: none; }
  .video-progress::before {
    content: '';
    position: absolute; inset: 10px 0;
    background: var(--linea-media);
  }
  .video-progress-fill { top: 10px; bottom: 10px; }
  .video-play-overlay .ring { width: 72px; height: 72px; }
}

/* ---- Móvil (390-430px de referencia) ---- */
@media (max-width: 480px) {
  .container { padding: 0 1.15rem; }
  .theme-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .project-meta { gap: 0.5rem; }
  .btn { width: 100%; justify-content: center; }
  .hero-name { letter-spacing: 0.12em; }
}

/* ---- Móvil pequeño (320-375px) ---- */
@media (max-width: 375px) {
  .vision-statement { font-size: clamp(1.5rem, 7vw, 2rem); }
  .header-brand span:last-child { font-size: 0.82rem; }
}