/* Qivi — landing pública. Sistema visual: dark theme, acento en degradado
   #2b6bff → #a628d8. Referencia de diseño: mockup interactivo (ver README). */

:root {
  --bg: #05060a;
  --bg-alt: #0b0d14;
  --text: #f2f3f7;
  --accent-a: #2b6bff;
  --accent-b: #a628d8;
  --border: rgba(255, 255, 255, 0.08);
}

* { box-sizing: border-box; }

/* overflow-x: los resplandores decorativos (.qivi-glow, hasta 640px) salen de
   sus secciones a propósito; en celular eso dejaba desplazar la página ~150px
   hacia el costado. `clip` en body los recorta sólo a los costados (sin crear
   scroll ni cortarlos arriba/abajo); `hidden` en html evita que el overflow
   de body se propague al viewport (ahí `clip` valdría como `hidden`). */
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  overflow-x: clip;
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.gradient-text {
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- decorativos ---------- */

/* Cuadrícula de fondo (la misma de la app), reusada en toda la landing salvo
   la sección final. `.qivi-section-grid` es la base compartida — línea,
   tamaño, z-index; el modificador de máscara (.qivi-grid-bg para el hero,
   más alta/angosta; .qivi-grid-vignette para el resto, un óvalo centrado)
   define sólo la forma del desvanecido en los bordes de cada sección.
   z-index:-1 la deja siempre detrás del contenido — cada sección que la usa
   ya arma su propio stacking context (position + z-index explícito), así
   que no se "escapa" y tapa otra sección. La opacidad de reposo de acá abajo
   es sólo el fallback sin JS: main.js la pisa en cada scroll según qué tan
   centrada está la sección en la pantalla — así es como "se mueve la luz"
   al bajar la página (ver updateSectionGridLight en js/main.js). */
.qivi-section-grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none;
  opacity: 0.35;
  transition: opacity 0.5s ease;
}
.qivi-grid-bg {
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}
.qivi-grid-vignette {
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 30%, transparent 100%);
}

.qivi-glow {
  position: absolute; border-radius: 50%;
  filter: blur(90px);
  animation: qivi-glow-pulse 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes qivi-glow-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.08); }
}

.qivi-star {
  position: absolute; border-radius: 50%; background: #ffffff;
  animation: qivi-star-twinkle 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes qivi-star-twinkle {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 0.9; }
}

/* watermark QR fijo, esquina inferior derecha — se revela con el scroll */
.qivi-watermark {
  position: fixed; right: -70px; bottom: -70px; width: 320px; height: 320px;
  z-index: 0; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle at 70% 70%, #000 35%, transparent 72%);
  mask-image: radial-gradient(circle at 70% 70%, #000 35%, transparent 72%);
}
.qivi-watermark-inner {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
}
.qivi-watermark-grid {
  width: 234px; height: 234px; display: grid;
  grid-template-columns: repeat(21, 1fr); grid-template-rows: repeat(21, 1fr); gap: 1.5px;
}
.qivi-wm-cell {
  width: 100%; height: 100%; border-radius: 1.5px;
  transition: opacity 0.6s ease, transform 0.6s ease, background 0.6s ease;
  opacity: 0.03; background: rgba(255, 255, 255, 0.4); transform: scale(0.4);
}
.qivi-wm-cell.on { transform: scale(0.4); opacity: 0.04; }
.qivi-wm-cell.revealed { opacity: 0.42; transform: scale(1); background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); }

/* ---------- botones / badges / tarjetas ---------- */

.qivi-btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 30px; border-radius: 999px; font-size: 16px; font-weight: 700;
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
  color: #ffffff; border: none; cursor: pointer;
  box-shadow: 0 8px 28px -8px rgba(166, 40, 216, 0.55);
}
/* "Tarjeta QR", sólo en los CTA "Create my QR": relleno oscuro sólido +
   borde en degradado (truco de doble background: la capa de degradado va a
   `border-box`, las de relleno/textura a `padding-box`, así el degradado
   sólo asoma en el anillo del borde) + textura de puntitos (módulos, no
   líneas continuas — se leen más como un QR real que como papel
   cuadriculado) + ícono de "ojo" de QR antes del texto (ver el <svg> en el
   HTML). El texto va en JetBrains Mono (monoespaciada, técnica, mucho más
   legible que la pixel font que probamos antes — esa se leía mal). El hover
   corre la textura un módulo y levanta el botón, para que de verdad tiente
   el click. `.qivi-btn-icon` es un hijo aparte del `<span data-i18n>` (no se
   puede meter el ícono adentro de ese span: applyStaticText() lo pisaría con
   textContent en cada cambio de idioma). */
.qivi-btn-grid {
  gap: 9px;
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-weight: 700;
  letter-spacing: -0.01em;
  border: 2px solid transparent;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.4) 1.1px, transparent 1.3px),
    linear-gradient(#0b0d1c, #0b0d1c),
    linear-gradient(90deg, var(--accent-a), var(--accent-b));
  background-origin: padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, border-box;
  background-size: 7px 7px, 100% 100%, 100% 100%;
  background-repeat: repeat, no-repeat, no-repeat;
  background-position: 0 0, 0 0, 0 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-position 0.6s ease;
}
.qivi-btn-icon { flex-shrink: 0; }
.qivi-btn-grid:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 14px 34px -6px rgba(166, 40, 216, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.1);
  background-position: 3.5px 3.5px, 0 0, 0 0;
}
.qivi-btn-grid:active { transform: translateY(0) scale(0.98); }
.qivi-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 28px; border-radius: 999px; font-size: 16px; font-weight: 600;
  background: rgba(255, 255, 255, 0.04); color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.16);
  cursor: pointer;
}
.qivi-btn-small { padding: 11px 22px; font-size: 14px; }
.qivi-btn-float { padding: 13px 22px; font-size: 14px; }

/* Línea chica sobre el H1 (13/10, SEO): reemplaza al badge "New". */
.qivi-eyebrow {
  margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(242, 243, 247, 0.55);
}

.qivi-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0));
  background-color: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 18px;
}

.qivi-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); border: none; padding: 0; cursor: default; }
.qivi-dot-active { background: linear-gradient(90deg, var(--accent-a), var(--accent-b)); width: 22px; border-radius: 999px; }

.qivi-arrow-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px; color: var(--text); flex-shrink: 0;
}
.qivi-arrow-btn:disabled { opacity: 0.35; cursor: default; }

.qivi-carousel-track { display: flex; transition: transform 0.6s cubic-bezier(.4, 0, .2, 1); }

.qivi-float-cta {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0; transform: translateY(12px); pointer-events: none;
}
.qivi-float-cta.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ---------- aviso de idioma (29/9, ver initLangBanner en js/main.js) ---------- */

.lang-banner {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px;
  padding: 9px 48px 9px 16px; font-size: 13.5px; color: var(--text); text-align: center;
  background: linear-gradient(90deg, rgba(43, 107, 255, 0.18), rgba(166, 40, 216, 0.18));
  border-bottom: 1px solid rgba(166, 40, 216, 0.35);
}
.lang-banner[hidden] { display: none; }
.lang-banner-go {
  font-size: 12.5px; font-weight: 700; color: #ffffff; padding: 6px 12px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
}
.lang-banner-close {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; background: none; cursor: pointer;
  color: rgba(242, 243, 247, 0.6); font-size: 20px; line-height: 1;
}
.lang-banner-close:hover { color: #ffffff; }

/* ---------- nav ---------- */

.qivi-nav {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1180px; margin: 0 auto; padding: 26px 24px;
}
.qivi-logo-wrap { display: flex; align-items: center; }
.qivi-logo-wrap-center { justify-content: center; }
.qivi-logo-img { height: 36px; width: auto; display: block; }
.qivi-logo-wrap-center .qivi-logo-img { height: 110px; }
.qivi-nav-links { display: flex; align-items: center; gap: 28px; }
.qivi-nav-link { font-size: 15px; color: rgba(242, 243, 247, 0.75); }

.qivi-lang-toggle {
  display: flex; align-items: center; gap: 2px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px; padding: 3px;
}
.qivi-lang-btn {
  font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
  color: rgba(242, 243, 247, 0.5); cursor: pointer; letter-spacing: 0.02em;
  border: none; background: transparent;
}
.qivi-lang-btn.active { color: #ffffff; background: rgba(255, 255, 255, 0.08); }

/* Segunda fila del menú (23/10): en celular la landing esconde los links del
   menú; las páginas en español (y /es/ para "Guías") los muestran acá. */
.seo-subnav { display: none; }
@media (max-width: 860px) {
  .seo-subnav {
    position: relative; z-index: 3; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    padding: 0 16px 6px; margin-top: -6px;
  }
  .seo-subnav::-webkit-scrollbar { display: none; }
  .seo-subnav a {
    flex: none; font-size: 14px; padding: 7px 14px; border-radius: 999px; white-space: nowrap;
    color: rgba(242, 243, 247, 0.75); border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03);
  }
  .seo-subnav a[aria-current="page"] { color: #fff; border-color: transparent; background: linear-gradient(90deg, var(--accent-a), var(--accent-b)); }
}

/* ---------- hero ---------- */

.qivi-hero { position: relative; z-index: 0; padding-bottom: 40px; overflow-x: clip; }
.qivi-hero .qivi-grid-bg { height: 860px; }
.qivi-hero-inner {
  position: relative; z-index: 2; max-width: 1180px; margin: 0 auto;
  padding: 76px 24px 60px; display: flex; align-items: center; gap: 56px;
}
.qivi-hero-left { flex: 1 1 0; min-width: 0; }
.qivi-h1 { margin: 0 0 20px; font-size: 56px; line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; }
.qivi-sub { margin: 0 0 32px; font-size: 18px; line-height: 1.6; color: rgba(242, 243, 247, 0.68); max-width: 480px; }
.qivi-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
.qivi-stat { font-size: 14px; color: rgba(242, 243, 247, 0.45); }

.qivi-hero-right {
  flex: 0 0 600px; position: relative; height: 480px;
  --qivo-w: 720px;
}
/* Video de Qivo (14/10). No tiene transparencia: el cuadro va entero (la cola
   llega casi a los dos costados en el loop, un recorte se la cortaría) y los
   bordes se difuminan con una máscara radial para que el fondo violeta se
   funda con el de la landing. Las orillas del video ya son casi negras. */
.hero-qivo {
  position: absolute; left: 50%; top: 50%; z-index: 0;
  width: var(--qivo-w); height: auto; aspect-ratio: 16 / 9;
  transform: translate(-46%, -50%);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 68%, rgba(0, 0, 0, 0.55) 86%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 68%, rgba(0, 0, 0, 0.55) 86%, transparent 100%);
  pointer-events: none;
}

/* ---------- cómo funciona ---------- */

.qivi-section { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 90px 24px; }
.qivi-section-title { margin: 0 0 12px; font-size: 34px; font-weight: 800; text-align: center; }
.qivi-section-sub { margin: 0 0 56px; font-size: 17px; color: rgba(242, 243, 247, 0.65); text-align: center; }

.how-carousel { display: flex; align-items: center; gap: 16px; }
.how-viewport { flex: 1; max-width: 900px; margin: 0 auto; overflow: hidden; }
.how-page {
  flex: 0 0 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px;
}
.step-card { padding: 40px; overflow: hidden; }
.step-icon { width: 48px; height: 48px; margin-bottom: 22px; }
.step-icon svg { display: block; }
.step-title { font-size: 21px; font-weight: 700; margin-bottom: 10px; }
.step-desc { font-size: 15px; line-height: 1.6; color: rgba(242, 243, 247, 0.65); }

/* Texturas de fondo muy sutiles (5-8% de opacidad, ya "horneada" en el color
   de cada capa) inspiradas en el cuerpo de un QR — malla de puntos, trazas
   de circuito, retícula hexagonal. Se alternan entre las 6 tarjetas (ver
   STEP_PATTERNS en js/main.js) para que no se repita siempre el mismo
   patrón. Cada regla suma su textura COMO PRIMERA capa de
   `background-image`, dejando atrás el mismo degradado sutil que ya usa
   `.qivi-card` (repetido acá porque `background-image` no se puede "sumar"
   entre reglas — la última declaración pisa la lista entera, así que hay
   que repetir la base). El texto de la tarjeta nunca se ve afectado: el
   fondo de un elemento siempre pinta detrás de su propio contenido. */
.step-pattern-dots {
  background-image:
    radial-gradient(rgba(43, 107, 255, 0.1) 1px, transparent 1.4px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0));
  background-size: 14px 14px, 100% 100%;
}
.step-pattern-circuit {
  background-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc2MCcgaGVpZ2h0PSc2MCc+PGcgZmlsbD0nbm9uZScgc3Ryb2tlPSdyZ2JhKDE2Niw0MCwyMTYsMC4wOCknIHN0cm9rZS13aWR0aD0nMS4yJz48cGF0aCBkPSdNMCAxNSBINjAnLz48cGF0aCBkPSdNMCA0NSBINjAnLz48cGF0aCBkPSdNMjAgMCBWNjAnLz48cGF0aCBkPSdNNDUgMTUgVjM1IEgzMCcvPjwvZz48ZyBmaWxsPSdyZ2JhKDE2Niw0MCwyMTYsMC4xMiknPjxjaXJjbGUgY3g9JzIwJyBjeT0nMTUnIHI9JzInLz48Y2lyY2xlIGN4PSc0NScgY3k9JzE1JyByPScyJy8+PGNpcmNsZSBjeD0nMzAnIGN5PSczNScgcj0nMicvPjwvZz48L3N2Zz4="),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0));
  background-size: 60px 60px, 100% 100%;
}
.step-pattern-hex {
  background-image:
    repeating-linear-gradient(60deg, rgba(166, 40, 216, 0.07) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(-60deg, rgba(43, 107, 255, 0.07) 0 1px, transparent 1px 16px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0));
}
.qivi-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }

/* ---------- a dónde puede apuntar tu QR ---------- */


/* ---------- personalización ---------- */

.pers-section {
  position: relative; z-index: 2; background: var(--bg-alt);
  border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
/* Carrusel de QRs reales (15/10): el del centro grande, los de los costados
   más chicos y apagados (los ubica layoutQrs() en js/main.js). */
.qrc { --qrc-size: 360px; display: flex; flex-direction: column; align-items: center; }
.qrc-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 30px; }
.qrc-filter {
  font: inherit; font-size: 14px; font-weight: 600; color: rgba(242, 243, 247, 0.7);
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px; padding: 8px 18px; cursor: pointer;
}
.qrc-filter:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.3); }
.qrc-filter.on { color: #fff; border-color: transparent; background: linear-gradient(90deg, var(--accent-a), var(--accent-b)); }
.qrc-stage { position: relative; width: 100%; max-width: 1040px; }
.qrc-track {
  position: relative; height: var(--qrc-size); outline: none;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
}
.qrc-track.dragging { cursor: grabbing; }
.qrc-track:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.35); outline-offset: 8px; border-radius: 24px; }
.qrc-item {
  position: absolute; left: 50%; top: 0; width: var(--qrc-size); height: var(--qrc-size);
  margin-left: calc(var(--qrc-size) / -2); border-radius: 22px; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.85);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.5s, filter 0.5s;
  will-change: transform;
}
.qrc-track.dragging .qrc-item { transition: none; }
.qrc-item.center { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 40px 90px -34px rgba(139, 108, 255, 0.6); }
.qrc-item img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
/* Los de fondo transparente van sobre una tarjeta clara. */
.qrc-item.light { background: #f4f5f8; padding: 22px; }
.qrc-arrow { position: absolute; top: 50%; z-index: 20; transform: translateY(-50%); }
#qrc-prev { left: 0; }
#qrc-next { right: 0; }
.qrc-arrow[hidden] { display: none; }
.qrc-info { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 28px; text-align: center; }
.qrc-style { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #b9a3ff; }
.qrc-scan { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; color: rgba(242, 243, 247, 0.72); }
.qrc-cta { margin-top: 4px; }
#qrc-dots .qivi-dot { cursor: pointer; }

/* ---------- QR estático vs Qivi ---------- */


/* ---------- planes ----------
   Mockup aprobado 29/9 (qivi-planes-tarjetas-mockup.html). El cambio entre
   tabla (ancho) y tarjetas deslizables (angosto) depende del ancho del
   bloque .pl (container query), no del de la ventana. `overflow: clip` en la
   sección (no `hidden`) para que el encabezado de la tabla completa pueda
   quedar fijo arriba al bajar (sticky). */

.plans-section {
  position: relative; z-index: 2; background: var(--bg-alt);
  border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden; overflow: clip;
}
.pl { container-type: inline-size; max-width: 1120px; margin: 0 auto; }
.pl-badge {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b)); color: #fff; padding: 5px 10px; border-radius: 999px;
}
.pl-top { min-height: 22px; margin-bottom: 12px; }
.pl-name { font-size: 18px; font-weight: 800; }
.pl-tag { font-size: 12.5px; color: rgba(242, 243, 247, 0.64); margin-top: 3px; line-height: 1.35; }
.pl-price { display: flex; align-items: baseline; gap: 4px; margin-top: 14px; flex-wrap: wrap; }
.pl-price .amt { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.pl-price .per { font-size: 13px; color: rgba(242, 243, 247, 0.64); }
.pl-btn {
  display: block; text-align: center; border-radius: 12px; padding: 12px 10px; font-size: 14px; font-weight: 700; line-height: 1.2;
  background: rgba(255, 255, 255, 0.04); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.16);
}
.pl-btn:hover { background: rgba(255, 255, 255, 0.08); }
.pl-btn.primary {
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b)); color: #fff; border-color: transparent;
  box-shadow: 0 10px 26px -10px rgba(120, 60, 255, 0.75);
}
.pl-btn.primary:hover { filter: brightness(1.1); }
.pl-ck {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle;
  background: linear-gradient(135deg, rgba(43, 107, 255, 0.28), rgba(166, 40, 216, 0.34));
}
.pl-ck::after {
  content: ""; width: 4px; height: 8px; margin-top: -2px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.pl-dash { color: rgba(242, 243, 247, 0.3); font-weight: 600; }
.pl-val { font-weight: 700; font-size: 14px; line-height: 1.3; }
.pl-val small { display: block; font-weight: 500; font-size: 11.5px; color: rgba(242, 243, 247, 0.64); margin-top: 2px; }
.pl-lbl { font-size: 14px; line-height: 1.3; }
.pl-lbl small { display: block; font-size: 12px; color: rgba(242, 243, 247, 0.64); margin-top: 2px; }
.pl-lbl.first { font-weight: 700; }
.pl-lbl.first small { font-weight: 400; }

/* ancho: tabla de funciones clave */
.pl-kt { display: grid; grid-template-columns: minmax(190px, 1.2fr) repeat(4, minmax(0, 1fr)); position: relative; margin-top: 16px; }
.pl-hl {
  border-radius: 22px; border: 1.5px solid transparent; z-index: 0; margin: -16px -2px -8px;
  background: linear-gradient(rgba(22, 16, 44, 0.92), rgba(10, 11, 18, 0.92)) padding-box, linear-gradient(170deg, var(--accent-a), var(--accent-b)) border-box;
  box-shadow: 0 34px 70px -34px rgba(120, 60, 255, 0.7);
}
.pl-kt > .c { position: relative; z-index: 1; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; text-align: center; }
.pl-kt > .c.l { justify-content: flex-start; text-align: left; padding-left: 4px; }
.pl-kt > .c.h { flex-direction: column; align-items: stretch; justify-content: flex-start; text-align: left; padding: 4px 16px 22px; border-bottom: 1px solid var(--border); }
.pl-kt > .c.h .pl-btn { margin-top: 18px; }
.pl-kt > .c.last { border-bottom: 0; }

/* angosto: una tarjeta por pantalla (oculto en ancho). margin -24px = el
   padding lateral de .qivi-section, así cada tarjeta ocupa la pantalla
   menos 16px de cada lado. */
.pl-kc-wrap { display: none; }
.pl-kc {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 16px 6px; margin: 0 -24px;
  scroll-padding-inline: 16px; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.pl-kc::-webkit-scrollbar { display: none; }
.pl-card {
  flex: 0 0 100%; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always;
  background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 20px 18px 8px;
}
.pl-card.pro {
  border: 1.5px solid transparent; box-shadow: 0 24px 50px -30px rgba(120, 60, 255, 0.8);
  background: linear-gradient(#0d0b1a, #0a0b12) padding-box, linear-gradient(160deg, var(--accent-a), var(--accent-b)) border-box;
}
.pl-card .pl-btn { margin-top: 16px; }
.pl-card ul { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--border); }
.pl-card li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.pl-card li:last-child { border-bottom: 0; }
.pl-card li .pl-lbl { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.pl-card li > :last-child { flex: 0 1 auto; max-width: 50%; text-align: right; overflow-wrap: break-word; }
.pl-dots { display: flex; justify-content: center; gap: 2px; margin-top: 10px; }
.pl-dots button { width: 28px; height: 28px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.pl-dots i { display: block; width: 7px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); transition: width 0.2s; }
.pl-dots button.on i { width: 22px; background: linear-gradient(90deg, var(--accent-a), var(--accent-b)); }
.pl-swipe { text-align: center; font-size: 12px; color: rgba(242, 243, 247, 0.3); margin-top: 2px; }

/* "Comparar todas las funciones" */
.pl-cmp-toggle {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 44px auto 0; padding: 12px 20px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--text);
  cursor: pointer; font: inherit; font-weight: 700; font-size: 14px;
}
.pl-cmp-toggle .chev { width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s; }
.pl-cmp-toggle[aria-expanded="true"] .chev { transform: translateY(2px) rotate(-135deg); }
.pl-cmp { display: none; margin-top: 26px; }
.pl-cmp.open { display: block; }
.pl-ft { display: grid; grid-template-columns: minmax(190px, 1.2fr) repeat(4, minmax(0, 1fr)); }
.pl-ft > .c { padding: 11px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13.5px; }
.pl-ft > .c.l { justify-content: flex-start; text-align: left; padding-left: 4px; color: rgba(242, 243, 247, 0.86); }
.pl-ft > .c.p { background: rgba(139, 108, 255, 0.05); }
.pl-ft > .c.h {
  position: sticky; top: 0; z-index: 2; background: var(--bg-alt); font-weight: 800; font-size: 14px; padding: 14px 16px;
  border-bottom: 1px solid var(--border); flex-direction: column; gap: 2px;
}
.pl-ft > .c.h small { font-weight: 500; font-size: 11.5px; color: rgba(242, 243, 247, 0.64); }
.pl-ft > .c.h.p { background: #120f22; }
.pl-ft > .c.g {
  grid-column: 1 / -1; justify-content: flex-start; padding: 22px 4px 8px; font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: #b9a3ff; border-bottom: 1px solid var(--border);
}
.pl-ft .pl-val { font-size: 13px; }
.pl-fm { display: none; }
.pl-seg {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; background: #10121a; border: 1px solid var(--border);
  border-radius: 14px; padding: 4px; position: sticky; top: 0; z-index: 3;
}
.pl-seg button { border: 0; background: none; border-radius: 10px; padding: 10px 2px; font: inherit; font-weight: 700; font-size: 13px; color: rgba(242, 243, 247, 0.64); cursor: pointer; min-width: 0; }
.pl-seg button.on { background: #fff; color: #05060a; }
.pl-fm-price { text-align: center; font-size: 12.5px; color: rgba(242, 243, 247, 0.64); margin: 10px 0 4px; }
.pl-fm-g { padding: 20px 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #b9a3ff; border-bottom: 1px solid var(--border); }
.pl-fm-r { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.pl-fm-r .pl-lbl { flex: 1 1 auto; min-width: 0; font-size: 13.5px; overflow-wrap: break-word; }
.pl-fm-v { flex: 0 1 auto; max-width: 50%; text-align: right; overflow-wrap: break-word; }
.pl-fm-v[hidden] { display: none; }

@container (max-width: 720px) {
  .pl-kt, .pl-ft { display: none; }
  .pl-kc-wrap, .pl-fm { display: block; }
  .pl-cmp-toggle { margin-top: 30px; max-width: 100%; }
}

/* ---------- CTA final + footer ---------- */

.final-section { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 100px 24px 60px; text-align: center; }
.final-title { margin: 0 0 18px; font-size: 36px; font-weight: 800; }
.final-sub { margin: 0 0 34px; font-size: 17px; color: rgba(242, 243, 247, 0.65); }
.final-cta { padding: 18px 38px; font-size: 17px; }

.qivi-footer {
  margin-top: 100px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
.qivi-footer-bottom {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.qivi-footer-copy { font-size: 14px; color: rgba(242, 243, 247, 0.5); }
.qivi-footer-links { display: flex; gap: 24px; }
.qivi-footer-links a { font-size: 14px; color: rgba(242, 243, 247, 0.5); }
.qivi-footer-social { display: flex; justify-content: center; gap: 18px; margin-top: -12px; }
.qivi-footer-social a { display: inline-flex; color: rgba(242, 243, 247, 0.5); transition: color .15s; }
.qivi-footer-social a:hover { color: rgba(242, 243, 247, 0.9); }
/* Links a las páginas de contenido (23/10, sólo en /es/ y en esas páginas) */
.qivi-footer-pages { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 24px; }
.qivi-footer-pages a { font-size: 14px; color: rgba(242, 243, 247, 0.6); }
.qivi-footer-pages a:hover { color: rgba(242, 243, 247, 0.9); }

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
  .qivi-hero-inner { flex-direction: column; gap: 48px; }
  .qivi-hero-left { text-align: center; }
  .qivi-sub { margin-left: auto; margin-right: auto; }
  .qivi-hero-ctas { justify-content: center; }
  .qivi-hero-right { flex-basis: auto; width: 100%; max-width: 460px; height: calc(var(--qivo-w) * 9 / 16); }
}

@media (max-width: 860px) {
  .qivi-nav-links { gap: 16px; }
  .qivi-nav-link:not(.qivi-nav-login) { display: none; }
  .qivi-h1 { font-size: 40px; }
  .how-page { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .qivi-hero-right { --qivo-w: 135vw; }
  .qivi-section-title, .final-title { font-size: 28px; }
}

/* ---------- celular y tablet (≤860px) ----------
   Todo lo de acá abajo aplica sólo a pantallas angostas: el escritorio no
   cambia. Los carruseles pasan de "página que se corre con flechas" a
   deslizamiento con el dedo (scroll-snap); js/main.js sincroniza los puntos
   con el deslizamiento y no aplica el translateX de escritorio. */
@media (max-width: 860px) {
  /* header: logo + idioma + Log in + CTA chico, sin apretarse */
  .qivi-nav { padding: 18px 16px; gap: 10px; }
  .qivi-nav-links { gap: 12px; }
  .qivi-logo-wrap { flex-shrink: 0; } /* el logo nunca se aplasta para hacer lugar */
  .qivi-logo-img { height: 30px; }
  .qivi-nav-login { font-size: 14px; white-space: nowrap; color: rgba(242, 243, 247, 0.85); }
  .qivi-lang-btn { padding: 4px 8px; font-size: 11px; }
  .qivi-nav .qivi-btn-small { padding: 8px 13px; font-size: 12px; gap: 6px; white-space: nowrap; }

  /* píxeles decorativos: la marca de agua fija quedaba detrás de textos y
     botones — en pantallas angostas no hay lugar libre para ella */
  .qivi-watermark { display: none; }

  /* "How it works": una tarjeta por pantalla, deslizable, texto completo */
  .how-carousel .qivi-arrow-btn { display: none; }
  .how-viewport { overflow: visible; max-width: none; min-width: 0; } /* min-width: sin esto el flex lo estira al ancho del contenido */
  #how-track {
    transform: none !important; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  #how-track::-webkit-scrollbar { display: none; }
  .how-page { display: contents; }
  .how-page .step-card { flex: 0 0 100%; scroll-snap-align: center; padding: 30px 24px; }
  #how-dots .qivi-dot { cursor: pointer; }

  /* Carrusel de QRs: el del centro ocupa casi todo el ancho y los de los
     costados asoman; las flechas quedan más chicas, sobre los bordes. */
  .qrc { --qrc-size: min(66vw, 300px); }
  .qrc-arrow { width: 38px; height: 38px; font-size: 16px; }
  #qrc-prev { left: -8px; }
  #qrc-next { right: -8px; }

  /* CTA flotante → barra fija abajo, de ancho completo, sobre el área segura
     del iPhone, visible desde el principio; el body deja ese espacio al final
     para no tapar nada */
  .qivi-float-cta {
    left: 0; right: 0; bottom: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(5, 6, 10, 0.88);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .qivi-float-cta, .qivi-float-cta.visible { opacity: 1; transform: none; pointer-events: auto; } /* siempre visible (pedido de Jefe) */
  .qivi-float-cta a { display: block; }
  .qivi-float-cta .qivi-btn-float { width: 100%; padding: 13px 16px; font-size: 15px; }
  body { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}


@media (max-width: 400px) {
  /* 375px, sobre todo en español ("Iniciar sesión" / "Crear mi QR"): sin el
     ícono y un poco más compacto, entra todo en una línea sin aplastar el logo */
  .qivi-nav .qivi-btn-icon { display: none; }
  .qivi-nav { gap: 8px; }
  .qivi-nav-links { gap: 8px; }
  .qivi-logo-img { height: 28px; }
  .qivi-nav-login { font-size: 13px; }
  .qivi-lang-btn { padding: 3px 6px; }
  .qivi-nav .qivi-btn-small { padding: 7px 10px; font-size: 11.5px; }
}

/* ---------- contacto (28/9) ---------- */
.contact { max-width: 560px; margin: 90px auto 0; text-align: center; }
.contact-title { font-size: 28px; margin: 0 0 8px; }
.contact-sub { margin: 0 0 22px; color: rgba(242, 243, 247, 0.6); font-size: 15px; }
.contact-form { display: grid; gap: 12px; text-align: left; }
.contact-form input, .contact-form textarea {
  width: 100%; box-sizing: border-box; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--bg-alt); color: var(--text); padding: 12px 14px; font: inherit; font-size: 15px;
}
.contact-form textarea { min-height: 130px; resize: vertical; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible, .contact-send:focus-visible {
  outline: 2px solid #8fb0ff; outline-offset: 2px;
}
.contact-send {
  justify-self: start; padding: 12px 22px; border: none; border-radius: 12px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 15px; color: #fff;
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
}
.contact-send[disabled] { opacity: 0.6; cursor: default; }
.contact-status { margin: 0; min-height: 1.4em; font-size: 14px; color: rgba(242, 243, 247, 0.7); }
.contact-status.ok { color: #4fe3a6; }
.contact-status.err { color: #ff8f8f; }
.contact-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contact-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 860px) { .contact { margin-top: 64px; padding: 0 16px; } .contact-send { justify-self: stretch; } }

/* ---------- Métricas (30/9): vista de Analíticas con datos de ejemplo ----------
   Ver la sección #metricas en index.html y js/metrics.js (números que suben,
   gráfico que se dibuja y barras que crecen al aparecer en pantalla). */
.mx-sub { margin-bottom: 44px; }
.mx-window { position: relative; z-index: 2; overflow: hidden; border: 1px solid var(--accent-a); box-shadow: 0 0 40px -12px rgba(43, 107, 255, 0.35); }
.mx-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.mx-dots { display: flex; gap: 6px; }
.mx-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.mx-wintitle { font-weight: 700; font-size: 14px; margin-right: auto; }
.mx-demo { font: 700 10.5px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: #ffd166; background: rgba(255, 209, 102, .08); border: 1px solid rgba(255, 209, 102, .35); border-radius: 999px; padding: 4px 9px; }
.mx-range, .mx-tabs { display: inline-flex; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); border-radius: 9px; padding: 2px; }
.mx-range button, .mx-tabs button { border: 0; background: none; color: rgba(242, 243, 247, .65); padding: 5px 10px; border-radius: 7px; cursor: pointer; font: 600 12px -apple-system, "Segoe UI", Roboto, sans-serif; }
.mx-range button { font-family: "JetBrains Mono", ui-monospace, monospace; padding: 5px 9px; }
.mx-range button.on, .mx-tabs button.on { background: rgba(255, 255, 255, .08); color: var(--text); }
.mx-range button:focus-visible, .mx-tabs button:focus-visible { outline: 2px solid var(--accent-a); outline-offset: 1px; }
.mx-body { padding: 18px; display: grid; gap: 14px; }
.mx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mx-kpi, .mx-panel { padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .02); border: 1px solid var(--border); min-width: 0; }
.mx-n { font: 700 26px/1.1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mx-n small { font: 500 12px -apple-system, "Segoe UI", sans-serif; color: rgba(242, 243, 247, .42); margin-left: 4px; }
.mx-l { font-size: 12px; color: rgba(242, 243, 247, .42); margin-top: 6px; }
.mx-up { font-size: 11.5px; color: #4fe3a6; margin-top: 3px; }
.mx-chip { display: inline-block; margin-top: 6px; font-size: 11px; color: rgba(242, 243, 247, .65); background: rgba(255, 255, 255, .04); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; }
.mx-chip b { font-family: "JetBrains Mono", ui-monospace, monospace; color: var(--text); }
.mx-main { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; }
.mx-panel { padding: 16px; }
.mx-panel h3 { margin: 0; font-size: 14px; font-weight: 700; }
.mx-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.mx-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: rgba(242, 243, 247, .65); }
.mx-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }
.mx-legend i.a { background: var(--accent-a); }
.mx-legend i.b { background: #c05cf0; }
.mx-chart { display: flex; flex-direction: column; }
.mx-chart-box { position: relative; flex: 1; min-height: 220px; }
.mx-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.mx-chart .ax { font: 500 10px "JetBrains Mono", ui-monospace, monospace; fill: rgba(242, 243, 247, .42); }
.mx-chart .gl { stroke: rgba(255, 255, 255, .06); }
.mx-chart path.line { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mx-chart path.area { opacity: 0; transition: opacity .8s .9s; }
.mx-window.drawn .mx-chart path.area { opacity: 1; }
.mx-split-l { display: flex; justify-content: space-between; font-size: 12px; color: rgba(242, 243, 247, .42); }
.mx-split-l b { color: var(--text); font-family: "JetBrains Mono", ui-monospace, monospace; }
.mx-split { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .04); margin: 5px 0 10px; }
.mx-split i { display: block; height: 100%; width: 0; transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.mx-split i.p { background: linear-gradient(90deg, var(--accent-a), var(--accent-b)); }
.mx-split i.u { background: #3a3f4d; }
.mx-grp { font: 600 10.5px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: rgba(242, 243, 247, .42); margin: 10px 0 2px; }
.mx-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 56px auto; align-items: center; gap: 9px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.mx-row:last-child { border-bottom: 0; }
.mx-row .ic { color: rgba(242, 243, 247, .42); display: grid; place-items: center; }
.mx-row .ic svg { width: 15px; height: 15px; }
.mx-row .cc { font: 600 10px "JetBrains Mono", ui-monospace, monospace; color: rgba(242, 243, 247, .65); border: 1px solid var(--border); border-radius: 5px; padding: 1px 3px; text-align: center; }
.mx-row .nm { line-height: 1.25; }
.mx-row.gray .nm { color: rgba(242, 243, 247, .65); }
.mx-row .bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .04); overflow: hidden; }
.mx-row .bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--accent-a), var(--accent-b)); transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.mx-row.gray .bar i { background: #3a3f4d; }
.mx-row .v { font: 600 12px "JetBrains Mono", ui-monospace, monospace; color: rgba(242, 243, 247, .65); text-align: right; white-space: nowrap; }
.mx-foot { font-size: 11.5px; color: rgba(242, 243, 247, .42); margin-top: 8px; line-height: 1.45; }
.mx-points { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.mx-pt { display: flex; gap: 12px; align-items: flex-start; }
.mx-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(43, 107, 255, .15), rgba(166, 40, 216, .15)); border: 1px solid var(--border); }
.mx-ico svg { width: 17px; height: 17px; color: #cdbfff; }
.mx-pt b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.mx-pt span { font-size: 13px; color: rgba(242, 243, 247, .65); line-height: 1.45; }
.mx-note { position: relative; z-index: 2; margin: 18px 0 0; text-align: center; font-size: 12px; color: rgba(242, 243, 247, .42); }
/* Aparición al hacer scroll: sólo si el JS está (clase .mx-js en la sección). */
.mx-js .mx-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s, transform .7s; }
.mx-js .mx-reveal.in { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .mx-main { grid-template-columns: 1fr; }
  .mx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mx-sub { margin-bottom: 28px; }
  .mx-body { padding: 12px; gap: 10px; }
  .mx-kpis { gap: 10px; }
  .mx-n { font-size: 22px; }
  .mx-top { gap: 8px; }
  .mx-wintitle { flex-basis: 100%; order: 3; }
  .mx-points { grid-template-columns: 1fr; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-js .mx-reveal, .mx-split i, .mx-row .bar i, .mx-chart path.area { transition: none; }
}

/* Zona segura del iPhone (6/10): cámara/isla, hora y batería arriba, la
   barra de inicio abajo y los costados con el celular horizontal. env() vale
   0 donde no hace falta (compu, Android sin recorte): no cambia nada ahí. */
body {
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.qivi-float-cta {
  right: calc(24px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 860px) {
  .qivi-float-cta {
    right: 0; bottom: 0;
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
  }
}

/* ---------- preguntas frecuentes (6/10, mockup aprobado) ---------- */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { border-radius: 16px; transition: border-color 0.2s, box-shadow 0.2s; }
.faq-item[open] { border-color: rgba(43, 107, 255, 0.55); box-shadow: 0 0 34px -14px rgba(43, 107, 255, 0.45); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 20px 24px;
  font-size: 17px; font-weight: 700; line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: #ffffff; }
.faq-item summary:focus-visible { outline: 2px solid var(--accent-a); outline-offset: 2px; border-radius: 16px; }
.faq-item .chev {
  margin-left: auto; flex-shrink: 0; width: 8px; height: 8px; border: solid rgba(242, 243, 247, 0.6); border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg); transition: transform 0.2s;
}
.faq-item[open] .chev { transform: translateY(2px) rotate(-135deg); border-color: var(--text); }
.faq-a { padding: 0 24px 22px; font-size: 15.5px; line-height: 1.65; color: rgba(242, 243, 247, 0.72); }
.faq-a p { margin: 0; }
.faq-more { text-align: center; margin: 34px 0 0; font-size: 15px; color: rgba(242, 243, 247, 0.6); }
.faq-more a { color: var(--text); font-weight: 700; border-bottom: 1px solid rgba(242, 243, 247, 0.35); }
@media (max-width: 600px) {
  .faq-item summary { padding: 17px 18px; font-size: 16px; }
  .faq-a { padding: 0 18px 18px; font-size: 15px; }
}

/* ---------- "Un QR para cada momento de tu negocio" (7/10, mockup aprobado) ---------- */
.uc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.uc-card {
  position: relative; padding: 20px 18px 18px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; outline: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.uc-card:hover, .uc-card:focus-visible, .uc-card.open {
  border-color: rgba(139, 108, 255, 0.55); transform: translateY(-2px); box-shadow: 0 18px 40px -22px rgba(120, 60, 255, 0.7); z-index: 5;
}
.uc-body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.uc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.uc-ico {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text);
}
.uc-name { font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: rgba(242, 243, 247, 0.55); }
.uc-title { font-size: 16px; font-weight: 800; line-height: 1.25; }
.uc-desc { font-size: 13.5px; line-height: 1.45; color: rgba(242, 243, 247, 0.62); }
.uc-tag {
  align-self: flex-start; display: inline-block; max-width: 100%; margin-top: auto; font-size: 11.5px; font-weight: 700;
  padding: 4px 9px; border-radius: 999px; color: #c9b8ff; background: rgba(139, 108, 255, 0.12); border: 1px solid rgba(139, 108, 255, 0.28);
}
.uc-hint { text-align: center; margin: 22px 0 0; font-size: 13px; color: rgba(242, 243, 247, 0.4); }

/* mini celular: en compu flota debajo (fila 1) o arriba (fila 2) de la tarjeta */
.uc-prev {
  position: absolute; left: 50%; top: calc(100% + 12px); transform: translate(-50%, -8px); opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.uc-card:nth-child(n+6) .uc-prev { top: auto; bottom: calc(100% + 12px); }
.uc-card:nth-child(5n+1) .uc-prev { left: 0; transform: translate(0, -8px); }
.uc-card:nth-child(5n) .uc-prev { left: auto; right: 0; transform: translate(0, -8px); }
.uc-card:hover .uc-prev, .uc-card:focus-visible .uc-prev, .uc-card.open .uc-prev { opacity: 1; transform: translate(-50%, 0); }
.uc-card:nth-child(5n+1):hover .uc-prev, .uc-card:nth-child(5n+1).open .uc-prev, .uc-card:nth-child(5n+1):focus-visible .uc-prev,
.uc-card:nth-child(5n):hover .uc-prev, .uc-card:nth-child(5n).open .uc-prev, .uc-card:nth-child(5n):focus-visible .uc-prev { transform: translate(0, 0); }

.ph { width: 168px; height: 300px; border-radius: 26px; padding: 7px; background: #1d1f27; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ph-s { position: relative; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; background: #f4f5f8; color: #16171d; font-size: 9.5px; line-height: 1.35; text-align: left; }
.ph-s::before { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 46px; height: 12px; border-radius: 8px; background: #0b0c10; z-index: 3; }
.ph-pad { padding: 26px 10px 10px; }
.ph-bar { height: 7px; border-radius: 4px; background: #d9dbe2; margin: 5px 0; }
.ph-bar.w60 { width: 60%; } .ph-bar.w85 { width: 85%; }
.ph-btn { display: block; text-align: center; font-weight: 800; font-size: 9.5px; padding: 7px; border-radius: 8px; color: #fff; margin-top: 8px; }
.ph-btn.ig { background: #0095f6; } .ph-btn.ios { background: #0a84ff; } .ph-btn.map { background: #1a73e8; }
.p-wa { background: #efe7de; }
.p-wa .hd { background: #075e54; color: #fff; padding: 24px 10px 8px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.p-wa .hd i { width: 16px; height: 16px; border-radius: 50%; background: #9fd8c9; }
.p-wa .in { position: absolute; left: 6px; right: 6px; bottom: 8px; display: flex; gap: 5px; align-items: center; }
.p-wa .in span { flex: 1; background: #fff; border-radius: 14px; padding: 6px 8px; }
.p-wa .in b { width: 22px; height: 22px; border-radius: 50%; background: #25d366; display: grid; place-items: center; color: #fff; font-size: 10px; flex-shrink: 0; }
.p-menu .ttl { font-size: 13px; font-weight: 900; text-align: center; margin: 4px 0 8px; letter-spacing: 0.04em; }
.p-menu .it { display: flex; justify-content: space-between; gap: 6px; border-bottom: 1px dashed #cfd2da; padding: 5px 0; }
.p-menu .pdf { position: absolute; top: 26px; right: 8px; font-size: 8px; font-weight: 800; color: #d33; }
.p-web .url { background: #e4e6ec; border-radius: 8px; padding: 4px 8px; margin-bottom: 8px; color: #555; }
.p-web .hero { height: 70px; border-radius: 10px; background: linear-gradient(135deg, #8b6cff, #2b6bff); margin-bottom: 8px; }
.p-web .gr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.p-web .gr i { height: 52px; border-radius: 8px; background: #dfe2ea; }
.p-ig .av { width: 46px; height: 46px; border-radius: 50%; margin: 2px auto 6px; background: conic-gradient(#feda75, #d62976, #962fbf, #4f5bd5, #feda75); padding: 2px; }
.p-ig .av i { display: block; width: 100%; height: 100%; border-radius: 50%; background: #8b6cff; border: 2px solid #f4f5f8; }
.p-ig .nm { text-align: center; font-weight: 800; }
.p-ig .gr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 8px; }
.p-ig .gr i { aspect-ratio: 1; background: #d5d8e0; }
.p-ig .gr i:nth-child(2n) { background: #c9c0f5; }
.p-vc .av { width: 50px; height: 50px; border-radius: 50%; background: #c9c0f5; margin: 4px auto 6px; display: grid; place-items: center; font-weight: 900; font-size: 15px; color: #5a3fd0; }
.p-vc .nm { text-align: center; font-weight: 800; font-size: 11px; }
.p-vc .rw { background: #fff; border-radius: 8px; padding: 6px 8px; margin-top: 6px; }
.p-vc .rw small { display: block; color: #7a7e8a; font-size: 8px; }
.p-map { background: #e8eef0; }
.p-map .mp { position: absolute; inset: 0; background:
  linear-gradient(90deg, transparent 46%, #fff 46%, #fff 52%, transparent 52%),
  linear-gradient(0deg, transparent 58%, #fff 58%, #fff 63%, transparent 63%),
  linear-gradient(35deg, transparent 30%, #f6e7b4 30%, #f6e7b4 34%, transparent 34%), #dfe9e4; }
.p-map .pin { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -100%) rotate(-45deg); width: 22px; height: 22px; border-radius: 50% 50% 50% 0; background: #e5483b; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25); }
.p-map .card { position: absolute; left: 8px; right: 8px; bottom: 8px; background: #fff; border-radius: 10px; padding: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); }
.p-wifi { background: #dfe3ea; }
.p-wifi .sh { position: absolute; left: 8px; right: 8px; top: 50%; transform: translateY(-50%); background: #fff; border-radius: 14px; padding: 12px 10px; text-align: center; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }
.p-wifi .sh svg { margin: 0 auto 6px; display: block; }
.p-wifi .bt { display: flex; gap: 6px; margin-top: 10px; }
.p-wifi .bt span { flex: 1; padding: 6px; border-radius: 8px; font-weight: 800; }
.p-wifi .bt .no { background: #e4e6ec; } .p-wifi .bt .yes { background: #0a84ff; color: #fff; }
.p-yt { background: #0f0f0f; color: #f1f1f1; }
.p-yt .pl { margin: 22px -10px 8px; height: 88px; background: linear-gradient(135deg, #3a2f6b, #11131a); display: grid; place-items: center; }
.p-yt .pl i { width: 34px; height: 24px; border-radius: 7px; background: #f00; position: relative; }
.p-yt .pl i::after { content: ''; position: absolute; left: 13px; top: 6px; border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.p-yt .ph-bar { background: #2a2a2a; }
.p-app .row { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.p-app .ic { width: 52px; height: 52px; border-radius: 13px; background: linear-gradient(135deg, #8b6cff, #2b6bff); flex-shrink: 0; }
.p-app .cat { color: #7a7e8a; }
.p-app .get { display: inline-block; margin-top: 4px; padding: 3px 12px; border-radius: 999px; background: #0a84ff; color: #fff; font-weight: 800; }
.p-app .shots { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; margin-top: 12px; }
.p-app .shots i { height: 110px; border-radius: 8px; background: #dfe2ea; }
.p-sp { background: linear-gradient(180deg, #2c5e3f, #121212 70%); color: #fff; }
.p-sp .cv { width: 110px; height: 110px; margin: 6px auto 10px; border-radius: 6px; background: linear-gradient(135deg, #a628d8, #2b6bff); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); }
.p-sp .tr { font-weight: 800; font-size: 11px; }
.p-sp .ar { color: #b3b3b3; }
.p-sp .pr { height: 3px; border-radius: 2px; background: #535353; margin: 10px 0 8px; position: relative; }
.p-sp .pr::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 38%; background: #fff; border-radius: 2px; }
.p-sp .ct { display: flex; justify-content: center; }
.p-sp .ct i { width: 30px; height: 30px; border-radius: 50%; background: #1ed760; position: relative; }
.p-sp .ct i::after { content: ''; position: absolute; left: 12px; top: 9px; border-left: 9px solid #000; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }

/* ---------- "Imprimiste 500 folletos...": QR común vs. Qivi (7/10, mockup aprobado) ---------- */
.cmp { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); position: relative; }
.cmp-hl {
  position: absolute; grid-column: 3; grid-row: 1 / span 5; inset: -14px; border-radius: 22px; border: 1.5px solid transparent;
  background: linear-gradient(rgba(22, 16, 44, 0.92), rgba(10, 11, 18, 0.92)) padding-box, linear-gradient(170deg, var(--accent-a), var(--accent-b)) border-box;
  box-shadow: 0 34px 70px -34px rgba(120, 60, 255, 0.7);
}
.cmp-row { display: contents; }
.cmp-h.before, .cmp-cell.before { grid-column: 1; }
.cmp-arrow, .cmp-gap { grid-column: 2; }
.cmp-h.after, .cmp-cell.after { grid-column: 3; }
.cmp-h { position: relative; z-index: 1; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 0 14px; }
.cmp-h.before { color: rgba(242, 243, 247, 0.4); }
.cmp-h.after { padding-left: 4px; }
.cmp-cell { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 18px 4px; font-size: 16px; line-height: 1.4; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.cmp-cell.before { color: rgba(242, 243, 247, 0.45); }
.cmp-cell.after { color: #f2f3f7; font-weight: 600; border-top-color: rgba(139, 108, 255, 0.18); }
.cmp-arrow { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; color: rgba(242, 243, 247, 0.3); border-top: 1px solid rgba(255, 255, 255, 0.06); }
.cmp-x, .cmp-ok { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 900; }
.cmp-x { background: rgba(255, 255, 255, 0.05); color: rgba(242, 243, 247, 0.4); }
.cmp-ok { background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); color: #fff; box-shadow: 0 6px 16px -6px rgba(166, 40, 216, 0.8); }
.cmp-cta { text-align: center; margin-top: 46px; }
.cmp-label-m { display: none; }

@media (max-width: 1024px) { .uc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  /* usos: 2 columnas; al tocar, la tarjeta se abre a lo ancho con el celular adentro */
  .uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .uc-card { padding: 16px 14px; }
  .uc-card:hover { transform: none; }
  .uc-card.open { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .uc-card.open .uc-body { flex: 1 1 100%; }
  .uc-prev, .uc-card:hover .uc-prev { position: static; display: none; opacity: 1; transform: none !important; pointer-events: auto; }
  .uc-card.open .uc-prev { display: block; margin: 12px auto 0; }
  .uc-title { font-size: 15px; }
  .uc-hint { margin-top: 16px; }

  /* QR común vs. Qivi: una tarjeta por fila, "antes" arriba y "con Qivi" abajo */
  .cmp { display: flex; flex-direction: column; gap: 14px; }
  .cmp-hl, .cmp-h, .cmp-arrow, .cmp-gap { display: none; }
  .cmp-row { display: block; border-radius: 18px; overflow: hidden; background: var(--bg-alt); border: 1px solid var(--border); }
  .cmp-cell { border: 0; padding: 14px 16px; font-size: 15px; }
  .cmp-cell.after {
    border-radius: 0 0 17px 17px; border-top: 1.5px solid transparent;
    background: linear-gradient(rgba(22, 16, 44, 0.95), rgba(14, 12, 30, 0.95)) padding-box, linear-gradient(90deg, var(--accent-a), var(--accent-b)) border-box;
  }
  .cmp-label-m { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 3px; }
  .cmp-cell.before .cmp-label-m { color: rgba(242, 243, 247, 0.35); }
  .cmp-cell .tx { min-width: 0; }
  .cmp-cta { margin-top: 30px; }
}

/* Tarjeta "Inmobiliaria" (8/10): el aviso de propiedad reservada que ve quien escanea */
.p-prop { background: #fff; }
.p-prop .ph-pad { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; gap: 7px; }
.p-prop .ag { display: flex; align-items: center; gap: 5px; font-weight: 800; color: #0e3b34; font-size: 10px; margin-bottom: 4px; }
.p-prop .ag i { width: 14px; height: 14px; border-radius: 4px; background: #0e6b5c; }
.p-prop .bd { font-size: 8px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: #fdf3dc; color: #8a6410; border-radius: 999px; padding: 3px 8px; }
.p-prop .msg { font-weight: 800; font-size: 11.5px; line-height: 1.25; color: #1d2026; }
.ph-btn.prop { background: #1d2026; }