/* ============================================================
   06-RESPONSIVE.CSS
   Media queries — cargar SIEMPRE al final, después de los demás CSS
   ============================================================ */

@media (max-width: 1100px) {
  .nav-links { gap: 15px; }
  .nav-links a { font-size: 11px; }
  .header-inner { width: calc(100% - 36px); }
  .hero-grid, .landing-hero-grid { gap: 35px; }
  .hero h1 { font-size: 58px; }
}

@media (max-width: 800px) {
  .section { padding: 85px 0; }
  .section-heading { align-items: start; flex-direction: column; gap: 14px; }
  .section-heading > p { max-width: 540px; }
  .header-inner { min-height: 68px; }
  .menu-toggle { display: inline-flex; margin-left: auto; }
  .nav-links {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    padding: 22px 24px; background: #11111f; border-bottom: 1px solid #ffffff22;
    flex-direction: column; align-items: start; gap: 20px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: 14px; }
  .hero { min-height: 100dvh; }
  .hero-grid, .landing-hero-grid { grid-template-columns: 1fr; padding-top: 72px; padding-bottom: 65px; }
  .hero-copy { max-width: 680px; }
  .hero-visual { width: min(590px, 90%); margin: auto; }
  .hero-logo { height: 76px; }
  .problem-layout, .value-layout, .testimonials-layout, .faq-layout, .landing-end-grid {
    grid-template-columns: 1fr; gap: 45px;
  }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .offer-panel { grid-template-columns: 1fr; gap: 20px; }
  .landing-hero { min-height: auto; }
  .landing-visual { width: min(580px, 90%); margin: auto; }
}

@media (max-width: 600px) {
  .shell { width: min(100% - 36px, 1180px); }
  .header-inner { gap: 12px; }
  .wordmark { font-size: 19px; }
  .brand-mark { width: 29px; height: 28px; line-height: 28px; }
  .header-contact { display: none; }
  .hero-grid { padding-top: 64px; padding-bottom: 46px; gap: 22px; }
  .hero h1, .landing-hero h1 { font-size: clamp(43px, 10.7vw, 62px); }
  .hero-lead, .landing-hero-grid > div > p { font-size: 14px; line-height: 1.75; }
  .button-row { margin: 28px 0; }
  .button-row .btn { width: 100%; }
  .hero-visual { padding-top: 45px; width: 100%; }
  .hero-logo { height: 55px; }
  .mock-body { min-height: 215px; padding: 13px; }
  .mock-content { padding-top: 28px; }
  .mock-art { height: 150px; }
  .mock-content strong { font-size: 19px; }
  .floating-chip { left: -7px; bottom: 3px; }
  .hero-bottom { font-size: 8px; }
  .hero-bottom span:last-child { display: none; }
  .section h2, .landing h2 { font-size: clamp(34px, 9vw, 48px); }
  .section-intro { font-size: 14px; }
  .statement-band { margin-top: 65px; }
  .services-grid, .pillars, .landing-problem-list, .benefit-grid, .landing-step-grid {
    grid-template-columns: 1fr;
  }
  .service-card { min-height: 245px; }
  .pillars { gap: 12px; }
  .pillar { min-height: 210px; }
  .step { grid-template-columns: 45px 1fr 20px; gap: 10px; }
  .step h3 { font-size: 18px; }
  .portfolio-screen { width: 93%; border-width: 5px; }
  .portfolio-placeholder { height: 240px; padding: 25px; }
  .portfolio-mobile {
    width: 90px; height: 170px; border-width: 4px; right: 0; top: 75px; border-radius: 12px;
  }
  .mobile-preview { padding: 20px 8px; }
  .mobile-preview b { font-size: 11px; margin-top: 14px; }
  .portfolio-caption { display: block; }
  .portfolio-caption .text-link { margin-top: 25px; }
  .faq-list summary { font-size: 14px; gap: 11px; }
  .faq-list details p { padding-left: 28px; padding-right: 8px; }
  .final-cta { padding: 90px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 42px 20px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-bottom { gap: 10px; flex-direction: column; }
  .landing-hero-grid { padding-top: 65px; }
  .landing-window-body { min-height: 225px; padding: 32px 22px; }
  .landing-window-body b { font-size: 26px; }
  .landing-step-grid { gap: 0; }
  .landing-step-grid > div { display: flex; align-items: center; gap: 28px; padding: 14px 0; }
  .landing-step-grid p { margin: 0; max-width: none; }
  .offer-panel { padding: 32px 24px; }
  .offer-action .btn, .landing-end .btn { white-space: normal; text-align: left; }
  .landing-end { padding: 80px 0; }
  .lead-form { padding: 24px; }
}