/* ════════════════════════════════════════════════════════════
   DRACO APP — "Más posibilidades para tu tienda."
   La app de secciones, incluida con Draco Theme (vale 30 €/mes, para
   ti 0 €). Basado en la referencia _assets-sin-usar/ref-draco-app-2.png.
   · Cabecera centrada: pastilla, título en dos líneas, entradilla.
   · Mockup de la app hecho en HTML: menú propio a la izquierda (oscuro)
     y el panel claro con la portada y cuatro secciones destacadas,
     cada una con su vista previa y "Añadir al theme".
   · Pasos 1-2-3, botón y aviso: las secciones solo funcionan con
     Draco Theme activo.
   Movimiento (js/draco-app.js): la ventana sube al llegar, las
   tarjetas entran una a una, la destacada va rotando, la cinta corre
   y el contador baja.
   ════════════════════════════════════════════════════════════ */

.dapp{--dapp-ease:cubic-bezier(.16,1,.3,1);--dapp-ink:#14171f;position:relative;padding-block:var(--section-pad);overflow-x:clip}
.dapp-container{position:relative;max-width:var(--page-max);margin:0 auto;padding-inline:var(--page-gutter)}
.dapp-accent{color:var(--c-deep)}
html:not([data-theme="light"]) .dapp-accent{color:var(--c-sky)}

/* ── Cabecera ── */
.dapp-head{max-width:820px;margin:0 auto 44px;text-align:center}
.dapp-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;padding:8px 18px 8px 10px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--c-sky) 45%,transparent);background:color-mix(in srgb,var(--c-deep) 10%,transparent);
  font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-sky)}
.dapp-eyebrow img{width:20px;height:auto}
[data-theme="light"] .dapp-eyebrow{color:var(--c-deep)}
.dapp-title{font-size:clamp(2rem,4.3vw,3.4rem);font-weight:900;letter-spacing:-.035em;line-height:1.04;color:var(--text-1);margin-bottom:18px}
.dapp-sub{max-width:52ch;margin:0 auto;font-size:17px;line-height:1.55;color:var(--text-2)}

/* ── Escenario: marco con brillo azul ── */
.dapp-stage{position:relative;perspective:1600px}
.dapp-stage::before{content:"";position:absolute;inset:10% 4% -6%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(47,109,255,.38),transparent);filter:blur(50px)}
[data-theme="light"] .dapp-stage::before{opacity:.45}
.dapp-window{display:grid;grid-template-columns:168px minmax(0,1fr);padding:8px;border-radius:24px;background:#0b1222;
  border:1.5px solid color-mix(in srgb,var(--c-deep) 75%,transparent);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--c-deep) 10%,transparent),0 0 60px -10px rgba(47,109,255,.55),0 50px 90px -40px rgba(0,0,0,.85);
  font-family:-apple-system,"SF Pro Text","Inter",system-ui,sans-serif;color:var(--dapp-ink);font-size:13px;line-height:1.4}

/* menú de la app */
.dapp-side{padding:16px 6px 16px 8px;color:#e6ebf5}
.dapp-side-brand{display:flex;flex-direction:column;gap:10px;margin:0 0 20px 8px;font-size:15px;font-weight:700}
.dapp-side-brand img{width:44px;height:auto}
.dapp-side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.dapp-side li{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;font-size:13.5px;font-weight:500;color:#c7cfdd}
.dapp-side li.is-active{background:#1b2a4a;color:#fff}
.dapp-side svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* panel claro */
.dapp-main{border-radius:16px;background:#f6f7f9;overflow:hidden}
.dapp-apphead{display:flex;align-items:center;gap:8px;padding:11px 18px;background:#fff;border-bottom:1px solid #e6e8ec;font-size:13px;font-weight:600}
.dapp-apphead img{width:18px;height:18px}
.dapp-body{padding:18px 20px 22px}

.dapp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:end;padding:22px 0 0 26px;border-radius:16px;
  background:linear-gradient(105deg,#eef5ff 0%,#dbeafe 55%,#c4dcfb 100%);border:1px solid #cfe0f8;overflow:hidden}
.dapp-hero-copy{align-self:center;padding-bottom:22px}
.dapp-hero-top{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.dapp-hero-logo{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#0a0f1c;box-shadow:0 6px 14px -6px rgba(10,15,28,.6)}
.dapp-hero-logo img{width:36px;height:auto}
.dapp-hero-name{font-size:21px;font-weight:700;letter-spacing:-.01em}
.dapp-badge{padding:4px 11px;border-radius:999px;background:#d3f5dd;color:#0c5132;font-size:12.5px;font-weight:600}
.dapp-hero-desc{font-size:19px;font-weight:500;letter-spacing:-.01em;color:var(--dapp-ink)}
.dapp-hero-sub{margin-top:2px;font-size:15px;color:#8a93a3}
/* estado de la tienda + licencia: solo se lee "DRC0-", el resto borroso */
.dapp-status{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.dapp-status > span{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:9px;background:rgba(255,255,255,.75);
  border:1px solid #d6e3f5;font-size:12.5px;font-weight:600;color:#303744}
.dapp-status-shop i{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.2)}
.dapp-status-lic code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12px;font-weight:700;letter-spacing:.04em;color:#14171f}
.dapp-blur{filter:blur(3.5px);user-select:none;-webkit-user-select:none}
/* Assets/app/banner-preview.webp: tienda en ordenador + móvil, cortada
   abajo a propósito; se apoya en el borde de abajo del banner */
.dapp-hero-shots{position:relative;align-self:end;height:200px;overflow:hidden}
.dapp-hero-shots img{display:block;width:min(100%,340px);height:auto;margin-left:auto;margin-right:18px;filter:drop-shadow(0 10px 24px rgba(16,40,90,.25))}

.dapp-feat-title{margin:22px 0 12px;font-size:18px;font-weight:700;letter-spacing:-.01em}
.dapp-feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dapp-card{display:flex;flex-direction:column;margin:0;padding:10px 10px 12px;border-radius:14px;background:#fff;border:1.5px solid #e6e8ec;
  transition:border-color .35s ease,box-shadow .35s ease,transform .45s var(--dapp-ease)}
.dapp-card.is-active{border-color:#2a62f0;box-shadow:0 0 0 4px rgba(42,98,240,.12),0 14px 28px -16px rgba(42,98,240,.6);transform:translateY(-3px)}
.dapp-card figcaption{margin:12px 4px 10px;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dapp-add{display:block;margin-top:auto;padding:9px 0;border-radius:9px;background:#14171f;color:#fff;font-size:12.5px;font-weight:600;text-align:center;transition:background-color .3s ease}
.dapp-card.is-active .dapp-add{background:#2a62f0}

/* vistas previas */
.dapp-prev{position:relative;aspect-ratio:4/3;border-radius:9px;overflow:hidden;background:#f2f3f5}
.dapp-prev--img img{width:100%;height:100%;object-fit:cover;display:block}
/* portadas de sección (3:2, fondo blanco): enteras, sin recortar el móvil */
.dapp-prev--cover{background:#fff}
.dapp-prev--cover img{width:100%;height:100%;object-fit:contain;display:block}

/* las vistas previas escalan con su tarjeta (1cqi = 1% de su ancho) */
.dapp-prev{container-type:inline-size}
/* WhatsApp: misma composición que las portadas (escritorio + móvil).
   Móvil con la proporción de los de las portadas (≈1:2). */
.dapp-prev--wa{background:#fff}
.dapp-ww{position:absolute;left:6cqi;top:12cqi;width:64cqi;height:50cqi;border-radius:2.5cqi;overflow:hidden;background:#fff;
  box-shadow:0 1.5cqi 5cqi rgba(16,24,40,.18),0 0 0 1px #eceef2}
.dapp-ww-page{position:absolute;inset:3cqi;display:grid;grid-template-columns:1fr 1fr;gap:3cqi;align-items:start}
.dapp-tw-img{position:relative;display:block;aspect-ratio:1;border-radius:1.6cqi;overflow:hidden;background:#f3e6dc}
.dapp-tw-img img{position:absolute;left:0;top:0;width:100%;height:auto;transform:scale(1.25);transform-origin:50% 8%}
.dapp-ww-lines{display:flex;flex-direction:column;gap:1.6cqi;padding-top:1cqi}
.dapp-ww-lines i,.dapp-ww-lines u{display:block;height:2cqi;border-radius:1cqi;background:#e7e9ee}
.dapp-ww-lines i.is-short{width:55%}
.dapp-ww-lines u{height:4cqi;margin-top:2cqi;background:#14171f}
.dapp-wa-chat{position:absolute;right:3cqi;bottom:3cqi;width:33cqi;border-radius:2cqi;overflow:hidden;background:#efe7dd;box-shadow:0 1.5cqi 4cqi rgba(16,24,40,.28)}
.dapp-wa-head{display:flex;align-items:center;gap:1.4cqi;padding:1.6cqi 2cqi;background:#075e54;color:#fff;line-height:1.1}
.dapp-wa-head > span:last-child{display:flex;flex-direction:column;gap:.4cqi;min-width:0}
.dapp-wa-head b{display:block;font-size:2.4cqi;font-weight:700;white-space:nowrap}
.dapp-wa-head small{display:block;font-size:1.9cqi;opacity:.8}
.dapp-wa-av{flex:none;display:grid;place-items:center;width:4.4cqi;height:4.4cqi;border-radius:50%;background:#25d366;font-size:2.2cqi;font-weight:800}
.dapp-wa-msgs{display:flex;flex-direction:column;gap:1.2cqi;padding:2cqi}
.dapp-wa-in,.dapp-wa-out{max-width:88%;padding:1cqi 1.6cqi;border-radius:1.4cqi;font-size:2.2cqi;line-height:1.25;color:#14171f;box-shadow:0 .3cqi .4cqi rgba(0,0,0,.08)}
.dapp-wa-in{align-self:flex-start;background:#fff;border-top-left-radius:0}
.dapp-wa-out{align-self:flex-end;background:#d9fdd3;border-top-right-radius:0}
.dapp-wa-fab{position:absolute;left:3cqi;bottom:3cqi;display:grid;place-items:center;width:6.4cqi;height:6.4cqi;border-radius:50%;background:#25d366;box-shadow:0 1cqi 2.4cqi rgba(37,211,102,.5)}
.dapp-wa-fab svg{width:3.8cqi;height:3.8cqi;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round}
.dapp-wp{position:absolute;right:7cqi;top:20cqi;width:22cqi;height:44cqi;display:flex;flex-direction:column;overflow:hidden;
  border-radius:4cqi;background:#efe7dd;border:1.3cqi solid #111;box-shadow:0 2cqi 5cqi rgba(16,24,40,.25)}
.dapp-tp-notch{position:absolute;z-index:1;left:50%;top:.8cqi;width:7cqi;height:1.8cqi;border-radius:2cqi;background:#111;transform:translateX(-50%)}
.dapp-wp .dapp-wa-head{padding:4cqi 1.2cqi 1.2cqi;gap:1cqi}
.dapp-wp .dapp-wa-head b{font-size:1.6cqi}
.dapp-wp .dapp-wa-head small{font-size:1.4cqi}
.dapp-wp .dapp-wa-av{width:3.2cqi;height:3.2cqi;font-size:1.6cqi}
.dapp-wp .dapp-wa-msgs{gap:1cqi;padding:1.6cqi 1.2cqi}
.dapp-wp .dapp-wa-in,.dapp-wp .dapp-wa-out{font-size:1.7cqi;padding:.8cqi 1.2cqi}

/* ── Pasos + botón + aviso ── */
.dapp-steps{list-style:none;display:flex;justify-content:center;align-items:center;gap:0;margin:40px 0 0;padding:0}
.dapp-steps li{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:500;color:var(--text-1)}
.dapp-steps li + li::before{content:"";width:56px;height:1.5px;margin:0 22px;background:color-mix(in srgb,var(--c-sky) 45%,transparent)}
.dapp-steps span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--c-deep);color:#fff;font-size:16px;font-weight:800;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--c-deep) 18%,transparent)}
.dapp-foot{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:30px;text-align:center}
.dapp-cta{display:inline-flex;align-items:center;gap:12px;height:58px;padding:0 34px;border:0;border-radius:999px;background:var(--c-deep);color:#fff;
  font-family:inherit;font-size:17px;font-weight:700;cursor:pointer;box-shadow:0 14px 34px -12px rgba(42,98,240,.8);
  transition:background-color .2s ease,transform .25s var(--dapp-ease)}
.dapp-cta svg{transition:transform .25s var(--dapp-ease)}
.dapp-cta:hover{background:var(--c-deep-hover,#3a6ef5);transform:translateY(-2px)}
.dapp-cta:hover svg{transform:translateX(3px)}
.dapp-cta:focus-visible{outline:2px solid var(--c-sky);outline-offset:3px}
.dapp-note{max-width:60ch;font-size:13.5px;line-height:1.6;color:var(--text-2)}
.dapp-note svg{display:inline-block;margin-right:6px;vertical-align:-3px;width:16px;height:16px;fill:none;stroke:var(--c-sky);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dapp-note b{color:var(--text-1)}
.dapp-note s{color:#e5484d;text-decoration-thickness:1.5px}
.dapp-note-price{display:inline-block;margin-top:4px;font-weight:700;color:var(--text-1);white-space:nowrap}

/* ── Movimiento ── */
.dapp-stage.is-armed .dapp-window{opacity:0;transform:translateY(48px) rotateX(10deg) scale(.97);transform-origin:50% 100%}
.dapp-stage.is-armed.is-in .dapp-window{opacity:1;transform:none;transition:opacity .6s ease,transform 1.1s var(--dapp-ease)}
.dapp-stage.is-armed .dapp-card{opacity:0;translate:0 16px}
.dapp-stage.is-armed.is-in .dapp-card{opacity:1;translate:0 0;
  transition:opacity .5s ease calc(.7s + var(--i) * 90ms),translate .7s var(--dapp-ease) calc(.7s + var(--i) * 90ms),
    border-color .35s ease,box-shadow .35s ease,transform .45s var(--dapp-ease)}
.dapp-stage.is-armed .dapp-badge{opacity:0;transform:scale(.6)}
.dapp-stage.is-armed.is-in .dapp-badge{opacity:1;transform:none;transition:opacity .3s ease .6s,transform .5s cubic-bezier(.34,1.56,.64,1) .6s}

/* ── Responsive ── */
@media(max-width:1024px){
  .dapp-window{grid-template-columns:140px minmax(0,1fr)}
  .dapp-side li{gap:9px;padding:9px 10px;font-size:12.5px;white-space:nowrap}
  .dapp-feat{gap:10px}
  .dapp-card figcaption{font-size:12.5px}
  .dapp-add{font-size:11.5px}
}
@media(max-width:860px){
  .dapp-feat{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .dapp-window{grid-template-columns:1fr;padding:6px;border-radius:20px}
  .dapp-side{display:none}
  .dapp-hero{grid-template-columns:1fr;padding:18px 18px 0}
  .dapp-hero-copy{padding-bottom:6px}
  .dapp-hero-shots{height:160px}
  .dapp-hero-shots img{margin-right:auto}
  .dapp-steps{flex-direction:column;align-items:flex-start;gap:14px;width:max-content;margin-inline:auto}
  .dapp-steps li + li::before{display:none}
}
@media(max-width:640px){
  .dapp-sub{font-size:15.5px}
  .dapp-body{padding:12px 12px 14px}
  .dapp-hero-name{font-size:18px}
  .dapp-hero-desc{font-size:16px}
  .dapp-feat{gap:10px}
  .dapp-card{padding:7px 7px 9px}
  .dapp-card figcaption{margin:9px 2px 8px;font-size:12.5px}
  .dapp-add{font-size:11.5px;padding:7px 0}
  .dapp-cta{width:100%;justify-content:center;padding:0 18px}
}
@media(prefers-reduced-motion:reduce){
  .dapp-stage.is-armed .dapp-window,.dapp-stage.is-armed .dapp-card,.dapp-stage.is-armed .dapp-badge{opacity:1;transform:none;translate:none;transition:none}
}