/*
 * Movvi — capa responsive (AUTORADA: el origen no tenía media queries)
 * ---------------------------------------------------------------------
 * REGLA DE ORO: en este archivo TODO va dentro de un @media. Por encima de
 * 1025px no se aplica ni una línea, así que el render de escritorio queda
 * idéntico al del Design Component original por construcción.
 *
 * Breakpoints
 *   · móvil    ≤ 640px
 *   · estrecho ≤ 400px   (solo reduce la escala del teléfono)
 *   · tablet   641 – 1024px
 *   · menú móvil ≤ 860px (incluye tablet en vertical)
 *
 * Gutter lateral constante por breakpoint: 48 → 28 → 20px.
 *
 * Los dos mockups de teléfono son px rígidos por dentro (SVG con viewBox
 * fijo, puntos del mapa posicionados en px). En vez de reflowir sus
 * entrañas se escalan en bloque con transform sobre .mv-phone-scale y se
 * compensa la altura del envoltorio, de modo que el interior sigue siendo
 * 1:1 con escritorio y nunca aparece scroll horizontal.
 *   alto real: hero 684px (664 + 2×10 de marco) · secuenciador 692px
 */

/* ===================================================================== */
/* TABLET — 641 a 1024px                                                 */
/* ===================================================================== */
@media (min-width:641px) and (max-width:1024px){
  :root{--mv-gutter:28px}

  /* Hero: una columna, teléfono a tamaño real debajo del texto. */
  .mv-hero{padding:112px var(--mv-gutter) 72px}
  .mv-hero__inner{grid-template-columns:1fr;gap:44px}
  .mv-hero__title{font-size:clamp(56px,7.5vw,72px);letter-spacing:-2px}
  .mv-hero__lead{font-size:var(--mv-fs-lead-sm)}
  .mv-hero__mark{width:620px;height:620px;right:-150px;top:-90px}

  /* Cómo funciona: teléfono arriba, texto y barras debajo. */
  .mv-seq{padding:76px 0}
  .mv-seq__inner{grid-template-columns:1fr;gap:40px}
  .mv-seq__visual{order:1}
  .mv-seq__text{order:2}
  .mv-seq__track{height:300px}
  .mv-step__title{font-size:clamp(40px,5.6vw,52px);letter-spacing:-1.6px}

  /* La app: cabecera apilada, features a dos columnas. */
  .mv-todo{padding:84px var(--mv-gutter)}
  .mv-todo__head{grid-template-columns:1fr;gap:24px;align-items:start}
  .mv-todo__title{font-size:clamp(42px,6vw,54px);letter-spacing:-1.8px}
  .mv-todo__grid{grid-template-columns:1fr 1fr}
  .mv-feature{padding:34px 28px}

  /* Aliados: tarjetas apiladas. */
  .mv-allies{padding:84px var(--mv-gutter)}
  .mv-allies__title{font-size:clamp(40px,5.6vw,52px);letter-spacing:-1.6px}
  .mv-allies__grid{grid-template-columns:1fr;gap:22px}
  .mv-ally{padding:34px}

  /* Descarga: logo debajo, tarjeta menos acolchada. */
  .mv-dl{padding:84px var(--mv-gutter)}
  .mv-dl__card{padding:48px}
  .mv-dl__grid{grid-template-columns:1fr;gap:36px}
  .mv-dl__title{font-size:clamp(42px,6vw,54px);letter-spacing:-1.8px}
  .mv-dl__logo{width:200px;height:200px;border-radius:46px}
}

/* ===================================================================== */
/* MENÚ MÓVIL — ≤ 860px                                                  */
/* ===================================================================== */
@media (max-width:860px){
  .mv-nav__burger{display:inline-flex}

  /* Los enlaces pasan a panel desplegable a pantalla completa. */
  .mv-nav__links{
    position:fixed;left:0;right:0;top:0;
    min-height:100vh;
    flex-direction:column;align-items:stretch;justify-content:center;
    gap:4px;padding:92px 24px 48px;
    background:var(--mv-green-900);
    font-size:var(--mv-fs-lead);
    z-index:-1;
    visibility:hidden;opacity:0;
    transform:translateY(-14px);
    /* visibility sin interpolación: se oculta al terminar el fundido y se
       muestra al instante al abrir, para que el foco del primer enlace
       funcione siempre. */
    transition:transform .35s var(--mv-ease),opacity .3s ease,visibility 0s linear .35s;
  }
  .mv-nav__links,
  .mv-nav.is-solid .mv-nav__links{color:var(--mv-on-dark)}
  .mv-nav.is-open .mv-nav__links{
    visibility:visible;opacity:1;transform:translateY(0);
    transition:transform .35s var(--mv-ease),opacity .3s ease,visibility 0s;
  }
  .mv-nav__link{padding:14px 0;border-bottom:1px solid var(--mv-on-dark-14)}
  .mv-nav__cta,.mv-nav__cta:hover{
    margin-top:22px;justify-content:center;padding:16px 20px;
  }
  /* Bloqueo de scroll mientras el panel está abierto (lo pone movvi.js). */
  body.mv-nav-open{overflow:hidden}
}

/* ===================================================================== */
/* MÓVIL — ≤ 640px                                                       */
/* ===================================================================== */
@media (max-width:640px){
  :root{
    --mv-gutter:20px;
    --mv-phone-k:.86;        /* 360px de viewport → teléfono de ~277px */
  }

  /* --- Nav ---------------------------------------------------------- */
  .mv-nav{padding:14px var(--mv-gutter)}
  .mv-nav.is-solid{padding:10px var(--mv-gutter)}
  .mv-nav__mark{width:34px;height:34px}
  .mv-nav__word{font-size:var(--mv-fs-lead)}

  /* --- Hero --------------------------------------------------------- */
  .mv-hero{min-height:auto;padding:104px var(--mv-gutter) 56px}
  .mv-hero__inner{grid-template-columns:1fr;gap:36px}
  .mv-badge{font-size:var(--mv-fs-micro);padding:7px 14px;letter-spacing:.3px}
  .mv-hero__title{font-size:clamp(40px,11.5vw,60px);letter-spacing:-1.5px;margin-top:18px}
  .mv-hero__lead{font-size:17px;max-width:none;margin-top:18px}
  .mv-hero__actions{gap:10px;margin-top:26px}
  .mv-hero__actions>a{flex:1 1 100%;justify-content:center}
  .mv-hero__stats{
    gap:20px 18px;margin-top:34px;padding-top:22px;
    flex-wrap:wrap;max-width:none;
  }
  .mv-hero__stats>div{flex:1 1 40%}
  .mv-stat__value{font-size:28px;letter-spacing:-.6px}
  .mv-hero__mark{width:420px;height:420px;right:-120px;top:-60px;opacity:.05}
  .mv-hero__orb{width:260px;height:260px;left:-110px;bottom:-120px}
  .mv-cue{display:none}                      /* el cue "DESLIZA" sobra en móvil */
  .mv-hero__visual .mv-phone-scale{height:calc(684px * var(--mv-phone-k))}

  /* --- Marquee ------------------------------------------------------ */
  .mv-marquee{padding:14px 0}
  .mv-marquee__item{font-size:var(--mv-fs-body-sm);padding:0 18px}
  .mv-marquee__track{animation-duration:20s}

  /* --- Cómo funciona ------------------------------------------------ */
  .mv-seq{padding:56px 0}
  .mv-seq__inner{grid-template-columns:1fr;gap:28px}
  .mv-seq__visual{order:1}                   /* el DOM mantiene texto → teléfono */
  .mv-seq__text{order:2}                     /* para el lector de pantalla      */
  .mv-seq__visual .mv-phone-scale{height:calc(692px * var(--mv-phone-k))}
  .mv-seq__track{height:360px}
  .mv-step__n{font-size:var(--mv-fs-label)}
  .mv-step__title{font-size:clamp(30px,8vw,38px);letter-spacing:-1px;max-width:none}
  .mv-step__body{font-size:var(--mv-fs-body);max-width:none;margin-top:14px}
  .mv-chip{font-size:var(--mv-fs-label);padding:10px 16px;margin-top:18px}
  .mv-seq__bars{gap:8px;margin-top:28px}
  .mv-bar{height:6px}
  .mv-bar::after{content:"";position:absolute;inset:-19px 0}   /* zona táctil de 44px */

  /* --- La app ------------------------------------------------------- */
  .mv-todo{padding:56px var(--mv-gutter)}
  .mv-todo__head{grid-template-columns:1fr;gap:20px;align-items:start;padding-bottom:28px}
  .mv-todo__title{font-size:clamp(32px,8.5vw,42px);letter-spacing:-1.2px}
  .mv-todo__lead{font-size:var(--mv-fs-body)}
  .mv-todo__grid{grid-template-columns:1fr}
  .mv-feature{padding:28px 20px;border-right:0}
  .mv-feature__title{font-size:var(--mv-fs-lead)}

  /* --- Aliados ------------------------------------------------------ */
  .mv-allies{padding:56px var(--mv-gutter)}
  .mv-kicker--dark{margin-bottom:20px}
  .mv-allies__title{font-size:clamp(30px,8vw,40px);letter-spacing:-1.2px;margin-bottom:28px}
  .mv-allies__grid{grid-template-columns:1fr;gap:18px}
  .mv-ally{padding:26px;border-radius:var(--mv-r-xl)}
  .mv-ally__ico{width:48px;height:48px;font-size:var(--mv-fs-h4)}
  .mv-ally__title{font-size:24px;letter-spacing:-.6px;margin-top:18px}
  .mv-ally__body{font-size:var(--mv-fs-body-sm);margin:10px 0 20px}
  .mv-ally__cta,.mv-ally__cta:hover{margin-top:24px;width:100%;justify-content:center}
  .mv-allies__mark{width:320px;height:320px;left:-120px;bottom:-140px}

  /* --- Descarga ----------------------------------------------------- */
  .mv-dl{padding:56px var(--mv-gutter)}
  .mv-dl__card{padding:32px 22px;border-radius:var(--mv-r-2xl)}
  .mv-dl__grid{grid-template-columns:1fr;gap:26px}
  .mv-dl__visual{order:-1}                   /* logo primero en móvil */
  .mv-dl__logo{width:150px;height:150px;border-radius:34px}
  .mv-dl__title{font-size:clamp(32px,8.5vw,42px);letter-spacing:-1.2px}
  .mv-dl__lead{font-size:var(--mv-fs-body);margin:16px 0 26px;max-width:none}
  .mv-dl__stores{gap:10px}
  .mv-dl__stores>a{flex:1 1 100%;justify-content:flex-start}
  .mv-dl__orb{width:260px;height:260px;right:-80px;top:-90px}

  /* --- Footer ------------------------------------------------------- */
  .mv-footer{padding:32px var(--mv-gutter) 40px}
  .mv-footer__inner{flex-direction:column;align-items:flex-start;gap:18px}
  .mv-footer__brand{flex-wrap:wrap;gap:10px}
  .mv-footer__tag{margin-left:0}
  .mv-footer__links{flex-wrap:wrap;gap:14px 18px}
}

/* ===================================================================== */
/* MÓVIL ESTRECHO — ≤ 400px (iPhone SE / 360px Android)                  */
/* ===================================================================== */
@media (max-width:400px){
  :root{--mv-phone-k:.8}
  .mv-hero__stats>div{flex:1 1 100%}
  .mv-footer__links{gap:12px 16px}
}