/* ============================================================
   responsive.css — media queries transversales (900px y
   500px) y preferencia de movimiento reducido.
   IMPORTANTE: se carga en ÚLTIMO lugar para reproducir
   exactamente la cascada del archivo original (todos estos
   overrides iban al final del <style>).
   ============================================================ */

@media(max-width:900px){
  .nav-links{display:none}
  #hero h1{font-size:clamp(38px,10vw,60px)}
  .topics-grid{grid-template-columns:repeat(2,1fr)}
  .split,.magnet{grid-template-columns:1fr;gap:34px}
  .split.reverse .txt,.split.reverse .stage{order:0}
  .stage{order:-1;min-height:52vh}
  .split .txt p,.magnet .m-txt>p{max-width:none}
  .t-grid{grid-template-columns:1fr;gap:14px}
  .price-grid{grid-template-columns:1fr;max-width:440px}
  .plan .pill{left:50%;transform:translateX(-50%)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
  .proof{gap:28px}
}
@media(max-width:500px){
  section{padding:64px 18px}
  .topics-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .email-form{flex-direction:column;border-radius:20px;padding:14px;gap:12px}
  .email-form input{text-align:center;padding:6px 0}
  .email-form .btn-primary{width:100%;justify-content:center}
  .issue{grid-template-columns:auto 1fr;gap:14px}
  .issue .tag{grid-column:2;justify-self:start;margin-top:4px}
  .proof{gap:22px 34px}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important}
}