/* ============================================================
   SOPLAI — Responsive CSS
   Breakpoints: Mobile < 640px | Tablet 640–1024px | Desktop > 1024px
   ============================================================ */

/* ---- Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
  .nav-links { gap: 20px; }
  .nav-link  { font-size: 14px; }

  /* Hero: stack on narrower screens */
  .hero { grid-template-columns: 1fr; gap: var(--sp-6); padding: 72px var(--sp-4) 80px; }
  .hero-content { max-width: 100%; }
  .hero h1   { font-size: clamp(36px, 5.5vw, 60px); }
  .hero-lead { font-size: 17px; }
  .hero-visual { max-width: 480px; margin: 0 auto; } /* center when stacked */

  /* Methodology: hide the horizontal connector line when columns change */
  .fases        { grid-template-columns: 1fr 1fr; }
  .fases::before { display: none; }

  .sobre-grid { grid-template-columns: 1fr; gap: 40px; }

  .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }

  .dash-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Large mobile / small tablet (≤ 800px) ---- */
@media (max-width: 800px) {
  /* Nav: show hamburger, hide desktop links */
  .nav-links { display: none; }
  .menu-btn  { display: flex; }
  .nav-drawer .btn { display: none; }
  .nav-drawer { overflow-y: auto; max-height: 100dvh; }
  .logo-img { height: 80px; max-width: 160px; object-fit: contain; }
  .skip-link { display: none; }

  .section { padding: 72px var(--sp-3); }

  /* Nav is 80px fixed — hero top padding must exceed it */
  .hero { padding: 104px var(--sp-3) 88px; }

  .hero-stats { grid-template-columns: 1fr 1fr; }
  .stat { border-right: none !important; border-top: 1px solid rgba(0,158,161,0.2) !important; }
  .stat:nth-child(-n+2) { border-top: none !important; }

  .problemas-grid   { grid-template-columns: 1fr; }
  .servicios-grid   { grid-template-columns: 1fr; }
  .servicios-inner  { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .testimonios-grid { grid-template-columns: 1fr; }
  .roi-numbers      { grid-template-columns: 1fr 1fr; }
  .roi-num          { border-left: none; border-top: 1px solid rgba(255,255,255,0.15); }
  .roi-num:nth-child(-n+2) { border-top: none; }
  .cta-inner        { grid-template-columns: 1fr; }

  .kit-internas { padding: 40px 24px; }
  .tools-grid   { grid-template-columns: repeat(3, 1fr); }

  .footer-inner  { grid-template-columns: 1fr 1fr; }
  .footer-brand  { grid-column: 1 / -1; }
  .logo-img-footer { height: 60px; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .form-row { grid-template-columns: 1fr; }
}

/* ---- Mobile (≤ 640px) ---- */
@media (max-width: 640px) {
  :root { font-size: 15px; }

  .nav-inner { padding: 0 var(--sp-2); }

  /* Reduce diagonal cut — 52px is too large on a 375px screen */
  .servicios-section { clip-path: polygon(0 28px, 100% 0, 100% calc(100% - 28px), 0 100%); }
  .cta-bottom        { clip-path: polygon(0 28px, 100% 0, 100% 100%, 0 100%); }

  /* Brand visual: tighter padding on mobile */
  .brand-visual-wrap { padding: var(--sp-3) var(--sp-2); }

  /* Hero top must clear 80px fixed nav */
  .hero   { padding: 96px var(--sp-2) 56px; }
  .section { padding: 56px var(--sp-2); }

  /* Eyebrow: allow wrapping on narrow screens */
  .hero-eyebrow { white-space: normal; max-width: 100%; letter-spacing: 0.06em; font-size: 10px; padding: 6px 12px; }

  .hero h1   { font-size: clamp(30px, 8vw, 44px); }
  .hero-lead { font-size: 16px; }
  .hero-ctas { flex-direction: column; align-items: flex-start; }
  .hero-ctas .btn { width: 100%; max-width: 320px; justify-content: center; }
  .hero-visual { display: none; }

  .hero-stats { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; }

  .fases { grid-template-columns: 1fr; }
  .fase  { margin-top: 16px; }

  /* ROI: tighter padding so numbers breathe without overflow */
  .roi-numbers { grid-template-columns: 1fr 1fr; }
  .roi-num { padding: var(--sp-3) var(--sp-2); }
  .roi-num strong { font-size: clamp(28px, 8vw, 40px); }

  .tools-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-inner { grid-template-columns: 1fr; }

  .dash-kpis { grid-template-columns: 1fr 1fr; }
  .dash-row  { grid-template-columns: 1fr 52px 60px; }
  .dash-row .badge { display: none; }

  .cta-inner { grid-template-columns: 1fr; }
  .contact-form-card { padding: var(--sp-3); }

  .sobre-grid { gap: 32px; }
  .sobre-card { padding: var(--sp-3); }
}

/* ---- Tiny (≤ 360px) ---- */
@media (max-width: 360px) {
  .hero h1  { font-size: 28px; }
  .btn-lg   { padding: 14px 24px; font-size: 16px; }
  .hero-stats { grid-template-columns: 1fr; }
  .stat { border-top: 1px solid var(--line); border-left: none; }
  .stat:first-child { border-top: none; }
}

/* ---- Touch targets (WCAG 2.5.5) ---- */
@media (pointer: coarse) {
  .btn, .nav-link, .theme-btn, .lang-btn, .menu-btn {
    min-height: 48px;
    min-width: 48px;
  }
  .nav-link { padding: 12px 4px; }
}

/* ---- Print ---- */
@media print {
  .nav, .hero-ctas, .cta-bottom, .footer, .theme-btn, .lang-btn, .menu-btn { display: none !important; }
  body { color: #000; background: #fff; }
  .section { padding: 32px 0; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: 11px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .fade-in { opacity: 1 !important; transform: none !important; }
}