/* Quantum Futura · sección "maqueta de la app" para tu página.
   Todo está bajo .qfd para no chocar con los estilos de tu sitio. */
@font-face{font-family:'QFD Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(demo/fonts/archivo-latin-standard-normal.woff2) format('woff2-variations'),url(demo/fonts/archivo-latin-standard-normal.woff2) format('woff2')}
@font-face{font-family:'QFD Mono';font-style:normal;font-weight:500;font-display:swap;src:url(demo/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}

.qfd{
  --qfd-ink:#0B0B0B; --qfd-card:#131413; --qfd-line:#262826; --qfd-gris:#A7ABA7; --qfd-fg:#ECEDEA;
  --qfd-bronce:#B2976B; --qfd-arena:#7E7266; --qfd-dwell:6s;
  --qfd-sans:'QFD Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --qfd-mono:'QFD Mono',ui-monospace,Menlo,Consolas,monospace;
  position:relative;overflow:hidden;background:var(--qfd-ink);color:var(--qfd-fg);font-family:var(--qfd-sans);
  padding:clamp(56px,9vw,112px) 20px;color-scheme:dark;-webkit-font-smoothing:antialiased
}
.qfd *,.qfd *::before,.qfd *::after{box-sizing:border-box}
.qfd-wrap{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"intro device" "steps device";column-gap:clamp(40px,7vw,104px);row-gap:28px;align-items:start}

/* Texto */
.qfd-intro{grid-area:intro;align-self:end;max-width:34rem}
.qfd-eyebrow{margin:0 0 14px;font-family:var(--qfd-mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--qfd-bronce)}
.qfd-title{margin:0;font-stretch:125%;font-weight:800;font-size:clamp(28px,3.6vw,44px);line-height:1.06;letter-spacing:.01em;text-wrap:balance}
.qfd-lead{margin:16px 0 0;font-size:16px;line-height:1.55;color:var(--qfd-gris);max-width:32rem}

/* Pantallas de la app (también sirven para navegar la demo) */
.qfd-steps{grid-area:steps;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-width:34rem}
.qfd-step button{display:grid;gap:6px;width:100%;margin:0;padding:16px 18px;border:1px solid transparent;border-radius:16px;
  background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background-color .3s ease,border-color .3s ease}
.qfd-step button:hover{background:#101110}
.qfd-step button:focus-visible{outline:2px solid var(--qfd-bronce);outline-offset:2px}
.qfd-step.is-active button{background:var(--qfd-card);border-color:#2E2A22}
.qfd-step-k{font-family:var(--qfd-mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--qfd-arena);transition:color .3s ease}
.qfd-step-t{font-stretch:112%;font-weight:700;font-size:17px;color:var(--qfd-gris);transition:color .3s ease}
.qfd-step-d{font-size:14px;line-height:1.5;color:var(--qfd-gris)}
.qfd-step.is-active .qfd-step-k{color:var(--qfd-bronce)}
.qfd-step.is-active .qfd-step-t{color:var(--qfd-fg)}
.qfd-bar{display:block;height:2px;margin-top:6px;border-radius:2px;background:var(--qfd-line);overflow:hidden;opacity:0;transition:opacity .3s ease}
.qfd-bar span{display:block;width:0;height:100%;background:var(--qfd-bronce)}
.qfd.is-ticking .qfd-step.is-active .qfd-bar{opacity:1}
.qfd.is-ticking .qfd-step.is-active .qfd-bar span{animation:qfd-fill var(--qfd-dwell) linear forwards}
@keyframes qfd-fill{from{width:0}to{width:100%}}

/* Teléfono */
.qfd-device-col{grid-area:device;display:flex;flex-direction:column;align-items:center;gap:18px}
.qfd-device{position:relative;width:min(360px,84vw);padding:11px;border-radius:56px;
  background:linear-gradient(160deg,#232423 0%,#121312 45%,#0A0A0A 100%);
  box-shadow:0 0 0 1px #2C2D2C,inset 0 0 0 1px rgba(255,255,255,.05),0 50px 90px -30px rgba(0,0,0,.9),0 0 140px -40px rgba(178,151,107,.35)}
.qfd-screen{position:relative;width:100%;aspect-ratio:390/844;border-radius:46px;overflow:hidden;background:var(--qfd-ink);isolation:isolate}
.qfd-frame{position:absolute;left:0;top:0;width:390px;height:844px;border:0;display:block;transform-origin:0 0;background:var(--qfd-ink)}
.qfd-hint{margin:0;font-size:13px;color:var(--qfd-gris);text-align:center}
.qfd-tourbtn{margin:0;padding:10px 16px;min-height:44px;border:1px solid var(--qfd-line);border-radius:999px;background:none;color:var(--qfd-gris);
  font:inherit;font-size:13px;cursor:pointer;transition:border-color .3s ease,color .3s ease}
.qfd-tourbtn:hover{border-color:var(--qfd-arena);color:var(--qfd-fg)}
.qfd-tourbtn:focus-visible{outline:2px solid var(--qfd-bronce);outline-offset:2px}
.qfd.is-manual .qfd-tourbtn{display:none}

/* Teléfonos y tablets angostas: texto, teléfono y luego las pantallas */
@media (max-width:880px){
  .qfd-wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "device" "steps";row-gap:32px}
  .qfd-intro,.qfd-steps{max-width:none}
}