/* ═══════════════════════════════════════════════════════
   RESPONSIVE — Patrizio Roman
   Aplicado globalmente a todas las páginas
   Breakpoints: 1024 (tablet), 768 (mobile lg), 480 (mobile sm)
   ═══════════════════════════════════════════════════════ */

/* ── Hamburger button (hidden on desktop, shown on mobile) ── */
.nav-burger {
  display: none;
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  position: relative;
  cursor: pointer;
  padding: 0;
  z-index: 600;
}
.nav-burger span {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 1px;
  background: #c9a96e;
  transition: transform .3s, opacity .25s, top .3s;
}
.nav-burger span:nth-child(1) { top: 10px; }
.nav-burger span:nth-child(2) { top: 16px; }
.nav-burger span:nth-child(3) { top: 22px; }
.nav-burger.open span:nth-child(1) { top: 16px; transform: rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { top: 16px; transform: rotate(-45deg); }

/* ════════════════════════════════════════
   TABLET (≤ 1024px)
   ════════════════════════════════════════ */
@media (max-width: 1024px) {
  nav, nav.scrolled { padding: 1.25rem 2rem; }

  .hero { padding: 0 2rem; }
  #work, #services, #process, #testimonials, #cta-banner { padding: 5rem 2rem; }
  .work-grid, .services-grid { grid-template-columns: repeat(2,1fr); }
  .process-steps { grid-template-columns: repeat(2,1fr); }
  .process-step { border-bottom: .5px solid rgba(201,169,110,.08); }
  .process-step:nth-last-child(-n+2) { border-bottom: none; }
  .process-step:nth-child(2n) { border-right: none; }

  #about-teaser { grid-template-columns: 1fr; }
  .about-img-wrap { min-height: 360px; }
  .about-img-wrap::after { display: none; }
  .about-teaser-content { padding: 4rem 2rem; }

  .footer-top { grid-template-columns: 1fr 1fr; gap: 3rem; padding: 3rem 2rem; }
  .footer-bottom { padding: 1.25rem 2rem; }

  .testi-card { min-width: calc(50% - 2px); padding: 2.5rem; }
}

/* ════════════════════════════════════════
   MOBILE LG (≤ 768px) — iPhone landscape & big phones
   ════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Disable custom cursor — usar tap nativo */
  body, * { cursor: auto !important; }
  .cursor-dot, .cursor-ring, #cursor, #cursorRing { display: none !important; }

  /* NAV — hamburguesa */
  nav, nav.scrolled {
    padding: 1rem 1.25rem;
    background: rgba(7,9,26,.95);
    backdrop-filter: blur(10px);
    border-bottom: .5px solid rgba(201,169,110,.1);
  }
  .nav-logo { font-size: 16px; }
  .nav-burger { display: block; }

  /* CTA en nav: oculto, va dentro del menú */
  nav > .nav-cta { display: none; }

  /* Menú móvil */
  .nav-links {
    position: fixed;
    inset: 0;
    background: rgba(7,9,26,.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    transform: translateX(100%);
    transition: transform .45s cubic-bezier(.4,0,.2,1);
    z-index: 550;
    padding: 4rem 2rem;
  }
  .nav-links.open { transform: none; }
  .nav-links a { font-size: 14px; letter-spacing: .25em; }
  .nav-links li.mobile-cta { margin-top: 1rem; }
  .nav-links li.mobile-cta a {
    border: .5px solid #c9a96e;
    padding: .9rem 2rem;
    color: #c9a96e;
    border-radius: 3px;
  }

  /* HERO */
  .hero { padding: 0 1.25rem; min-height: 90vh; }
  .hero-glow { display: block; }
  .name-row:nth-child(1) { font-size: clamp(54px, 18vw, 92px) !important; }
  .name-row:nth-child(2) { font-size: clamp(32px, 11vw, 60px) !important; margin-right: 0 !important; }
  .hero-rule { width: 180px !important; }
  .hero-sub { font-size: 12px; padding: 0 1rem; margin-bottom: 2.5rem; }
  .hero-actions { flex-direction: column; gap: .75rem; width: 100%; max-width: 280px; }
  .hero-actions a { width: 100%; text-align: center; box-sizing: border-box; }
  .hero-scroll { bottom: 1.5rem; }

  /* Video slot */
  .hero-video-wrap, video.hero-video { object-fit: cover; }

  /* Sections — generic */
  #work, #services, #process, #testimonials, #cta-banner, #about-teaser {
    padding: 4rem 1.25rem;
  }
  .sec-title { font-size: clamp(32px, 8vw, 48px) !important; }
  .work-head {
    flex-direction: column; align-items: flex-start; gap: 1.5rem; margin-bottom: 2rem;
  }
  .filter-tabs { gap: .35rem; }
  .filter-tab { font-size: 8.5px; padding: .5rem 1rem; }

  /* Work grid → 1 col */
  .work-grid { grid-template-columns: 1fr; }
  .work-card-img { aspect-ratio: 4/3; }
  .work-card-overlay { padding: 1.5rem; }
  .work-card-cta { opacity: 1; transform: none; color: #c9a96e; } /* siempre visible en mobile */

  /* Services → 1 col */
  .services-grid { grid-template-columns: 1fr; }
  .svc-card { padding: 2rem; }
  .svc-name { font-size: 22px; }

  /* Process → 1 col */
  .process-steps { grid-template-columns: 1fr; }
  .process-step { border-right: none !important; border-bottom: .5px solid rgba(201,169,110,.08); padding: 2rem 1rem; }
  .process-step:last-child { border-bottom: none; }

  /* Testimonials — apilar TODAS las tarjetas en vertical (como Recent Projects) */
  #testimonials > div[style] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .5rem;
  }
  .testi-nav { display: none !important; }
  .testi-track-wrap { margin-top: 2rem; overflow: visible; }
  .testi-track {
    flex-direction: column !important;
    transform: none !important;
    gap: 1rem;
  }
  .testi-card { min-width: 100% !important; padding: 2rem 1.75rem; }
  .testi-quote { font-size: 17px; }

  /* About teaser — altura natural, imagen 4:3 limpia, sin huecos */
  #about-teaser { min-height: 0 !important; }
  .about-img-wrap { min-height: 0 !important; aspect-ratio: 4 / 3; }
  .about-img-wrap img { height: 100%; }
  .about-teaser-content {
    padding: 2.75rem 1.25rem 3rem;
    justify-content: flex-start; gap: 1.5rem;
  }
  .about-teaser-content > div {
    display: flex; flex-direction: column;
    align-items: flex-start; gap: 1.5rem;
  }
  .about-quote-big { font-size: clamp(24px, 6vw, 32px) !important; margin-bottom: 0; }
  .about-body-text { max-width: 100%; margin-bottom: 0; }
  .about-stats { gap: 1.75rem; flex-wrap: wrap; margin-bottom: 0; }
  .about-stat-num { font-size: 32px; }

  /* CTA */
  .cta-actions { flex-direction: column; align-items: stretch; gap: .75rem; max-width: 280px; margin: 0 auto; }
  .cta-actions a { width: 100%; text-align: center; box-sizing: border-box; }

  /* Footer */
  .footer-top {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 2.5rem 1.25rem;
  }
  .footer-bottom {
    flex-direction: column; gap: 1rem;
    padding: 1.5rem 1.25rem;
    text-align: center;
  }
  .footer-social { gap: 1.5rem; }

  /* Modal */
  .modal-panel {
    width: calc(100% - 1.5rem);
    padding: 2rem 1.5rem;
    max-height: 92vh;
    border-radius: 4px;
  }
  .modal-title { font-size: 26px; margin-bottom: 2rem; }
  .modal-form input,
  .modal-form textarea,
  .modal-form select { font-size: 16px; } /* evita zoom en iOS */
  .modal-close { top: 1rem; right: 1rem; }

  /* Ticker */
  .ticker { padding: .75rem 0; }
  .ticker-inner { gap: 2.5rem; }

  /* ─── CASE STUDIES (páginas de proyecto) ─── */
  .cs-hero, .case-hero, .project-hero {
    padding: 8rem 1.25rem 4rem !important;
    min-height: auto !important;
  }
  .cs-hero h1, .case-hero h1, .project-hero h1,
  .cs-title, .project-title {
    font-size: clamp(36px, 9vw, 60px) !important;
    line-height: 1.05 !important;
  }
  .cs-meta, .project-meta, .case-meta {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }
  .cs-section, .project-section, .case-section {
    padding: 3rem 1.25rem !important;
  }
  .cs-grid-2, .project-grid-2, .case-grid-2,
  .cs-grid-3, .project-grid-3, .case-grid-3 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .cs-fullwidth img, .project-fullwidth img, img.full {
    width: 100% !important; height: auto !important;
  }
  .cs-quote, .project-quote, blockquote.quote {
    font-size: 22px !important;
    padding: 2rem 1rem !important;
  }
  .cs-next, .project-next, .next-project {
    padding: 4rem 1.25rem !important;
    text-align: center;
  }

  /* ─── ABOUT page ─── */
  .about-hero, .about-page-hero { padding: 7rem 1.25rem 3rem !important; }
  .about-hero h1, .about-page-hero h1 { font-size: clamp(36px, 10vw, 64px) !important; }
  .about-content { padding: 3rem 1.25rem !important; }
  .about-grid, .skills-grid, .timeline-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .about-portrait { max-width: 100% !important; }

  /* ─── CONTACT page ─── */
  .contact-hero, .contact-page-hero { padding: 7rem 1.25rem 3rem !important; }
  .contact-hero h1, .contact-page-hero h1 { font-size: clamp(36px, 10vw, 64px) !important; }
  .contact-grid, .contact-layout {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: 2rem 1.25rem !important;
  }
  .contact-info, .contact-form-wrap { padding: 2rem 1.5rem !important; }
  .contact-form input,
  .contact-form textarea,
  .contact-form select { font-size: 16px !important; }
  .contact-info-item { padding: 1rem 0 !important; }
  .contact-availability {
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 1.25rem !important;
    text-align: center;
  }
}

/* ════════════════════════════════════════
   MOBILE SM (≤ 480px) — iPhone SE / standard
   ════════════════════════════════════════ */
@media (max-width: 480px) {
  nav, nav.scrolled { padding: .9rem 1rem; }
  .nav-logo { font-size: 14px; letter-spacing: .15em; }

  .hero { padding: 0 1rem; }
  .name-row:nth-child(1) { font-size: 56px !important; }
  .name-row:nth-child(2) { font-size: 36px !important; }
  .hero-sub { font-size: 11.5px; }

  #work, #services, #process, #testimonials, #cta-banner, #about-teaser {
    padding: 3rem 1rem;
  }

  .sec-title { font-size: 32px !important; }
  .modal-panel { padding: 1.75rem 1.25rem; }
  .modal-title { font-size: 22px; }

  .footer-logo { font-size: 18px; }
  .ticker-item { font-size: 8.5px; }
}

/* ════════════════════════════════════════
   PREVENT iOS ZOOM ON FORM FOCUS
   ════════════════════════════════════════ */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Lock body scroll when mobile menu open */
body.menu-open { overflow: hidden; }