/* =========================================
   responsive.css — Breakpoints globales y layout adaptativo
   Proyecto: CONSULTOR DIGITAL
   ========================================= */

/* ≤ 1200px */
@media (max-width:1200px){
  .hero .container{ grid-template-columns:1fr; text-align:center; }
}

/* ≤ 1024px */
@media (max-width:1024px){
  .site-header .container{ flex-wrap:wrap; gap:1rem; }
  .section{ padding: var(--space-7) 0; }
}

/* ≤ 768px */
@media (max-width:768px){
  .menu-toggle{ display:inline-flex; }
  .nav-links{
    position:absolute;
    top:100%; left:0; width:100%;
    background:var(--color-brand-700);
    padding:var(--space-5);
    display:none; flex-direction:column;
    gap:var(--space-4);
  }
  .nav-links.active{ display:flex; }
  .nav-links a{ color:var(--color-neutral-100); }
  .header-cta{ display:none!important; }
  .beneficios-grid,.servicios-grid,.casos-grid,.testimonios-grid{ gap:var(--space-5); }

  /* Servicios header ajuste */
  .servicios-header h2{ font-size:1.6rem; }
  .servicios-header .lead{ font-size:1rem; margin-bottom:var(--space-5); }

  /* Botón WhatsApp compacto */
  .btn-whatsapp{
    position:fixed; bottom:24px; right:24px;
    width:50px; height:50px; border-radius:30%;
    font-size:0; justify-content:center; padding:0;
  }

}

/* ≤ 600px */
@media (max-width:600px){
  .hero-dinamico #problem-line,
  .hero-dinamico #solution-line{ font-size:1.05rem; line-height:1.3; }
}