/* MenioQR — responsive overrides.
   Los layouts del landing viven en estilos inline; se vencen con !important.
   Los grids llevan clases mq-* en el HTML (nunca selectores [style*=...],
   que se rompen si cambia el string del atributo). Breakpoints:
     > 960px  → desktop original (no se toca)
     641-960  → tablet: 2 columnas donde había 3-4, 1 donde había 2 asimétricas
     <= 640   → móvil: TODO a 1 columna + tipografía y padding reducidos
     <= 380   → extra compacto */

html, body { max-width: 100%; overflow-x: hidden; }

/* ══════════════════════════════════════════════════════════════════════
   TABLET (<= 960px)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  /* Nav: sin menú central, solo logo + lang + CTA */
  nav[data-nav] [data-desktop-nav] { display: none !important; }
  nav[data-nav] > div { gap: 12px !important; }

  /* Hero: 2 cols → 1 col, phone abajo del texto */
  section#top {
    grid-template-columns: 1fr !important;
    padding: 108px 20px 60px !important;
    gap: 40px !important;
  }
  section#top [data-parallax-scene] { max-width: 380px; margin: 0 auto; }
  section#top [data-parallax-scene] img[data-parallax="46"] { width: 260px !important; }
  /* Badges flotantes: el teléfono (260px) queda centrado y la escena lo envuelve,
     así que los offsets del desktop dejan el QR encima de la pantalla. Lo empujamos
     al borde derecho (apenas montado sobre la esquina) para que no tape el contenido. */
  section#top .mq-hero-qr {
    right: auto !important;
    left: 160px !important;
    top: 14px !important;
  }
  section#top .mq-hero-card {
    left: -14px !important;
    bottom: 56px !important;
  }

  /* Grids de 3-4 columnas → 2. Los pasos son solo 3 tarjetas: en 2 columnas
     quedaban 2+1 (huérfana), así que se mantienen en una sola fila de 3. */
  .mq-grid-steps    { grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; }
  .mq-grid-features { grid-template-columns: repeat(2, 1fr) !important; }
  .mq-grid-values   { grid-template-columns: repeat(2, 1fr) !important; }

  /* Grids de 2 columnas → 1 */
  .mq-grid-panel    { grid-template-columns: 1fr !important; gap: 32px !important; }
  .mq-grid-example  { grid-template-columns: 1fr !important; gap: 32px !important; }
  .mq-grid-contact  { grid-template-columns: 1fr !important; gap: 32px !important; }
  .mq-grid-mission  { grid-template-columns: 1fr !important; }
  .mq-grid-pricing  { grid-template-columns: 1fr !important; }

  /* CTA visual: sin plato decorativo y sin alto mínimo reservado para él */
  section#cta > div { padding: 40px 28px !important; }
  section#cta img[src*="cta-plate"] { display: none !important; }
  section#cta > div > div:last-child { min-height: 0 !important; }

  /* Plantillas orbit: menos alto */
  [data-orbit-viewport] { height: 420px !important; }
  [data-orbit-viewport] img[data-phone] { width: 200px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   MÓVIL (<= 640px) — TODO a 1 columna
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── NAV ────────────────────────────────────────────────────────── */
  nav[data-nav] { padding: 12px 14px !important; }
  nav[data-nav] a[data-nav-cta] { padding: 9px 14px !important; font-size: 13px !important; }
  nav[data-nav] [data-lang-btn] { padding: 9px 11px !important; font-size: 12.5px !important; }

  /* ── HERO ───────────────────────────────────────────────────────── */
  section#top {
    padding: 96px 18px 50px !important;
    gap: 28px !important;
  }
  section#top h1 { font-size: clamp(30px, 8vw, 42px) !important; }
  section#top p { font-size: 15.5px !important; max-width: 100% !important; }
  .mq-hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  section#top a[data-btn-primary],
  section#top a[data-secondary] {
    font-size: 15px !important;
    padding: 14px 20px !important;
    width: 100%;
    justify-content: center;
  }
  section#top [data-parallax-scene] { max-width: 300px; }
  section#top [data-parallax-scene] img[data-parallax="46"] { width: 220px !important; }
  /* Badges flotantes en móvil: visibles pero PEQUEÑOS y pegados al teléfono.
     El QR asoma en la esquina superior derecha; la tarjeta cruza la base a la
     izquierda. Escalamos por width/padding/font (nunca transform: el parallax
     escribe transform en mousemove y pisaría el escalado). */
  section#top .mq-hero-float { display: block !important; }

  section#top .mq-hero-qr {
    right: auto !important;
    left: 176px !important;
    top: 12px !important;
  }
  section#top .mq-hero-qr [data-parallax="60"] {
    width: 52px !important;
    padding: 6px !important;
    border-radius: 12px !important;
  }
  section#top .mq-hero-qr [data-parallax="60"] > div:first-child { padding: 5px !important; }
  section#top .mq-hero-qr [data-parallax="60"] > div:last-child {
    font-size: 7px !important;
    margin-top: 4px !important;
  }

  section#top .mq-hero-card {
    left: -10px !important;
    bottom: 40px !important;
  }
  section#top .mq-hero-card [data-parallax="45"] {
    width: 132px !important;
    padding: 7px 9px !important;
    gap: 7px !important;
    border-radius: 12px !important;
  }
  section#top .mq-hero-card [data-parallax="45"] > div:first-child {
    width: 22px !important;
    height: 22px !important;
    border-radius: 7px !important;
  }
  section#top .mq-hero-card [data-parallax="45"] > div:first-child :is(i, svg) {
    width: 13px !important;
    height: 13px !important;
  }
  section#top .mq-hero-card [data-parallax="45"] > div:last-child { font-size: 10px !important; }

  /* ── VALUE BAR ──────────────────────────────────────────────────── */
  .mq-value-bar { gap: 10px 20px !important; }
  .mq-value-bar span { font-size: 13.5px !important; }

  /* ── HOW IT WORKS: 3 cols → 1 ───────────────────────────────────── */
  section#como { padding: 60px 18px !important; }
  section#como h2 { font-size: clamp(24px, 6.5vw, 30px) !important; }
  .mq-grid-steps { grid-template-columns: 1fr !important; gap: 14px !important; }
  .mq-grid-steps [data-card] { padding: 24px !important; }
  .mq-grid-steps [data-step-num] { font-size: 42px !important; }
  .mq-grid-steps [data-card] h3 { font-size: 18px !important; margin-top: 12px !important; }
  .mq-grid-steps [data-card] p { font-size: 14.5px !important; margin-top: 8px !important; }

  /* ── PANEL ──────────────────────────────────────────────────────── */
  section#panel { padding: 60px 18px !important; gap: 24px !important; }
  section#panel h2 { font-size: clamp(24px, 6.5vw, 32px) !important; }
  section#panel p { font-size: 15px !important; }
  section#panel img[data-parallax="30"] { border-radius: 12px !important; }

  /* ── PLANTILLAS ─────────────────────────────────────────────────── */
  section#plantillas { padding: 60px 18px !important; }
  section#plantillas h2 { font-size: clamp(22px, 6vw, 28px) !important; }
  /* La órbita se mueve con el cursor; en táctil la instrucción sobra */
  section#plantillas > p[data-reveal] { display: none !important; }
  [data-orbit-viewport] { height: 340px !important; max-width: 100% !important; }
  [data-orbit-viewport] img[data-phone] { width: 170px !important; }

  /* ── FEATURES: 4 cols → 1, card compacta icono + texto ──────────── */
  .mq-grid-features { grid-template-columns: 1fr !important; gap: 12px !important; }
  .mq-grid-features > [data-card] {
    display: grid !important;
    grid-template-columns: 46px 1fr !important;
    column-gap: 16px !important;
    align-items: start;
    padding: 20px 22px !important;
  }
  .mq-grid-features > [data-card] > [data-lit] {
    grid-row: 1 / span 2;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
  }
  /* lucide reemplaza cada <i data-lucide> por un <svg> al montar: hay que cubrir ambos */
  .mq-grid-features > [data-card] > [data-lit] :is(i, svg) { width: 20px !important; height: 20px !important; }
  .mq-grid-features > [data-card] > h3 { margin: 2px 0 0 !important; font-size: 16px !important; }
  .mq-grid-features > [data-card] > p { grid-column: 2; margin-top: 4px !important; font-size: 13.5px !important; }

  /* ── EJEMPLO REAL ───────────────────────────────────────────────── */
  section#ejemplo { padding: 60px 18px !important; }
  .mq-grid-example { gap: 24px !important; }
  section#ejemplo h2 { font-size: clamp(24px, 6.5vw, 32px) !important; }
  section#ejemplo [data-quote] { padding: 30px 24px !important; }
  section#ejemplo [data-quote] p { font-size: 17px !important; }

  /* ── FAQ ────────────────────────────────────────────────────────── */
  section#faq { padding: 60px 18px 30px !important; }
  section#faq h2 { font-size: clamp(24px, 6.5vw, 30px) !important; }
  section#faq [data-faq-btn] { padding: 20px 20px !important; }
  section#faq [data-faq-btn] > span:first-child { font-size: 15.5px !important; }
  section#faq [data-faq-panel] p {
    padding: 0 20px 22px !important;
    font-size: 14.5px !important;
  }

  /* ── CTA VISUAL "Pagas una vez" ──────────────────────────────────── */
  section#cta { padding: 40px 16px 70px !important; }
  section#cta > div {
    padding: 34px 20px !important;
    border-radius: 22px !important;
  }
  section#cta h2 { font-size: clamp(22px, 6.5vw, 30px) !important; }
  section#cta p { font-size: 15px !important; }
  .mq-grid-pricing { gap: 14px !important; }
  section#cta [data-lift-card] {
    padding: 22px 20px !important;
    border-radius: 16px !important;
  }
  section#cta [data-lift-card] h3 { font-size: 19px !important; }
  /* Badge "Opcional" y kickers a 11px; el 14.5px SOLO para los ítems de la
     lista — una regla genérica span[data-en] pisaría el badge por orden de
     cascada (misma especificidad + !important) */
  section#cta [data-lift-card] span[data-en*="OPTIONAL"],
  section#cta [data-lift-card] > div[data-en] {
    font-size: 11px !important;
  }
  section#cta [data-lift-card] > div:last-child { gap: 11px !important; }
  section#cta [data-lift-card] > div:last-child span[data-en] { font-size: 14.5px !important; }
  section#cta a[data-cta-btn] {
    display: inline-flex !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
  }

  /* ── CONTACT ────────────────────────────────────────────────────── */
  section#contacto { padding: 60px 18px !important; }
  section#contacto h2 { font-size: clamp(22px, 6.5vw, 32px) !important; }
  section#contacto p { font-size: 15px !important; }
  section#contacto a[data-btn-primary] {
    display: flex !important;
    justify-content: center;
    padding: 14px 22px !important;
    font-size: 15px !important;
    margin-top: 22px !important;
  }
  section#contacto [data-card] { padding: 14px 16px !important; }
  section#contacto [data-card] > div > div:first-child { font-size: 14.5px !important; }
  section#contacto [data-card] > div > div:last-child { font-size: 13px !important; }

  /* ── FOOTER ─────────────────────────────────────────────────────── */
  footer > div:first-child {
    flex-direction: column !important;
    gap: 26px !important;
    padding: 40px 20px !important;
  }
  footer > div:first-child > div:last-child { gap: 32px !important; }

  /* ══════ SOBRE NOSOTROS ══════ */

  .mq-about-hero { padding: 130px 18px 30px !important; }
  .mq-about-hero h1 { font-size: clamp(28px, 7vw, 40px) !important; }

  .mq-grid-mission { grid-template-columns: 1fr !important; gap: 16px !important; }
  .mq-grid-mission [data-card] { padding: 26px !important; }
  .mq-grid-mission [data-card] h2 { font-size: 20px !important; }
  .mq-grid-mission [data-card] p { font-size: 14.5px !important; line-height: 1.6 !important; }

  .mq-grid-values { grid-template-columns: 1fr !important; gap: 12px !important; }
  .mq-grid-values [data-card] { padding: 24px !important; }

  .mq-client-card { padding: 32px 24px !important; }
  .mq-client-card h2 { font-size: clamp(20px, 5.5vw, 26px) !important; }

  .mq-about-cta { padding: 44px 22px !important; }
  .mq-about-cta h2 { font-size: clamp(22px, 6.5vw, 30px) !important; }
  .mq-about-cta a[data-cta-btn] { padding: 14px 24px !important; font-size: 15px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   MÓVIL ESTRECHO (<= 480px): el wordmark cede espacio al CTA del nav
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  nav[data-nav] > div > a:first-child > span:last-child { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   MÓVIL PEQUEÑO (<= 380px)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  section#top [data-parallax-scene] img[data-parallax="46"] { width: 190px !important; }
  nav[data-nav] a[data-nav-cta] { padding: 8px 12px !important; font-size: 12px !important; }
  section#cta [data-lift-card] { padding: 20px 16px !important; }
  section#cta > div { padding: 30px 16px !important; }
  [data-orbit-viewport] img[data-phone] { width: 150px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   TÁCTIL: sin cursor la instrucción de la órbita sobra (a cualquier ancho)
   y los controles del nav necesitan área táctil suficiente
   ══════════════════════════════════════════════════════════════════════ */
@media (hover: none) {
  section#plantillas > p[data-reveal] { display: none !important; }
}
@media (pointer: coarse) {
  nav[data-nav] a[data-nav-cta],
  nav[data-nav] [data-lang-btn] { min-height: 44px; }
}

/* ══════════════════════════════════════════════════════════════════════
   REDUCED MOTION: las animaciones decorativas se apagan
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  [data-glow], [data-marquee] { animation: none !important; }
}