/* ============================================================
   MENTO.IA — Mobile refinements
   Desktop & tablet untouched; these rules only act ≤980px.
   ============================================================ */

/* 4-col grids (transformación, resultados): collapse responsively */
.cols4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .cols4 { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 540px){ .cols4 { grid-template-columns: 1fr !important; } }

/* Product dashboard: single column, no 3D skew on small screens */
@media (max-width: 700px){
  .app-body { grid-template-columns: 1fr; }
  .app, .app:hover { transform: none; }
  .product-layout { gap: 30px; }
}

@media (max-width: 560px){
  /* rhythm: slightly tighter sections */
  .section { padding-block: clamp(60px, 15vw, 96px); }

  /* hero */
  .hero-meta { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hero-meta .m { gap: 12px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; }
  .hero-sub { font-size: 16.5px; }

  /* nav: compact language switcher */
  .lang button { padding: 5px 7px; font-size: 11px; }
  .nav-inner { gap: 12px; }

  /* phase cards */
  .phasecard { padding: 26px 22px; border-radius: 22px; }
  .phasecard .ph-meta { flex-wrap: wrap; row-gap: 8px; }
  .phasecard .ph-big { font-size: 48px; }

  /* equation pill → soft card */
  .eq-bar { border-radius: 18px; padding: 16px 20px; gap: 10px; font-size: 15px; line-height: 1.5; }

  /* ecosystem diagram: tighter nodes */
  .eco-diagram { aspect-ratio: 1 / 1; }
  .eco-core { font-size: 19px; padding: 15px 26px; }
  .eco-node { font-size: 12px; padding: 7px 11px; gap: 6px; }
  .eco-node.n1 { top: 2%; left: 0; } .eco-node.n2 { top: 10%; right: 0; }
  .eco-node.n3 { bottom: 12%; left: 0; } .eco-node.n4 { bottom: 2%; right: 2%; }

  /* video */
  .video-play { width: 64px; height: 64px; }
  .video-play svg { width: 26px; height: 26px; }

  /* chapters & stats */
  .chapter .cn { font-size: 40px; }
  .stat .num { font-size: clamp(44px, 13vw, 60px); }
  .trust-stats { gap: 20px; }

  /* final CTA */
  .btn-xl { width: 100%; justify-content: center; padding: 18px 28px; font-size: 17px; }
  .final-note { max-width: none; }

  /* report cards / tags breathing room */
  .rcard { padding: 26px 22px; }
  .tquote { padding: 26px 22px; }
  .tquote p { max-width: none; }

  /* footer */
  .footer-cols { gap: 26px 36px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}

/* very narrow devices */
@media (max-width: 380px){
  .hero .pill { white-space: normal; text-align: left; line-height: 1.6; }
  .logo { font-size: 20px; }
  .d2 { font-size: clamp(29px, 8.6vw, 33px); }
}