/* Additions for the static ES clone (preview banner + entrance animations replicating inlead) */
#preview-banner{position:fixed;left:8px;bottom:8px;z-index:2147483000;background:rgba(220,38,38,.92);color:#fff;
 font:600 11px/1.2 Montserrat,system-ui,sans-serif;padding:5px 9px;border-radius:999px;pointer-events:none;letter-spacing:.02em;box-shadow:0 2px 8px rgba(0,0,0,.2)}
@keyframes qzFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes qzFade{from{opacity:0}to{opacity:1}}
@keyframes qzShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@media(prefers-reduced-motion:no-preference){
 .qz-enter [id^="layer_"]{animation:qzFade .35s ease both}
 .qz-enter [data-animate-item]{animation:qzFadeUp .4s ease both;animation-delay:calc(var(--qz-i,0) * 70ms)}
}
.qz-shake{animation:qzShake .35s ease}
.qz-ruler .swiper-wrapper{will-change:transform;touch-action:pan-y;user-select:none}
.qz-ruler .swiper-wrapper.dragging{cursor:grabbing!important}
.qz-quotes .swiper-wrapper{transition:transform .5s ease}
video[data-video]{object-fit:contain}
html,body{overflow-x:clip}

/* =================== DESKTOP ADAPTATION (>=768px) ===================
   Phone-width centred column, tighter spacing, smaller decorative images,
   normal-size buttons, sticky primary button, back button beside column. */
.qz-sticky{display:none}
@media (min-width:768px){
  body{background:#fafafa}
  main{background:#fafafa}
  .main-content{max-width:460px;margin:0 auto;background:#fff;min-height:100vh !important;
    padding:14px 16px 24px !important;gap:10px !important;box-shadow:0 0 0 1px #eee,0 10px 40px rgba(0,0,0,.05);justify-content:flex-start !important}
  .main-content > div{max-width:100% !important}
  .qz-head{display:flex !important;align-items:center;gap:12px !important;justify-content:flex-start !important}
  .qz-head > div:first-child{flex:0 0 auto !important;width:auto !important}
  .qz-head > div:first-child > div{display:none !important}
  .qz-head > div:first-child button span{display:none !important}
  .qz-head > div:nth-child(2){flex:1 1 auto;max-width:none !important;margin:0 !important}
  .qz-head > div:nth-child(3){display:none !important}
  .main-content .py-10{padding-top:0 !important;padding-bottom:0 !important}
  .main-content .py-2{padding-top:.25rem !important;padding-bottom:.25rem !important}
  .main-content h1{font-size:clamp(1.25rem,1.6vw + .5rem,1.6rem) !important;line-height:1.2 !important}
  img.qz-deco{max-height:30vh;width:auto !important;max-width:100%;margin-left:auto;margin-right:auto;object-fit:contain}
  [data-video]{max-height:30vh;width:auto !important;max-width:100%;margin:0 auto;display:block}
  .main-content [data-animate-item] img{max-height:16vh;object-fit:contain}
  .main-content button.btn{min-height:0 !important;padding-top:.8rem !important;padding-bottom:.8rem !important;font-size:1rem !important}
  .qz-sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;pointer-events:none;
    transform:translateY(110%);transition:transform .25s ease;}
  .qz-sticky.show{transform:none;pointer-events:auto}
  .qz-sticky-inner{max-width:460px;margin:0 auto;padding:10px 16px 14px;background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));}
  #preview-banner{z-index:70}
}

/* before/after compare: mirror photo content only (slider, handle, labels unchanged) */
img.qz-cmp-flip{transform:scaleX(-1)}

/* t449 (2026-10-31) D1: step-40 offer -> per-day price box alone + separate "lifetime / one-time payment" chip below it (same grey contrast box language) */
.qz-offer-side{display:flex;flex-direction:column;align-items:stretch;gap:6px;max-width:50%;flex-shrink:0}
/* .qz-perday removed in t460 (box is now .qz-off) */
.qz-lifetime{text-align:center;padding-top:.4rem;padding-bottom:.4rem}
.qz-lifetime .text-xs{font-size:.62rem;letter-spacing:.02em;font-weight:600}
.qz-lifetime-2{margin-top:.2rem}
/* t460 (2026-10-31): per-day price box -> discount badge (-NN% + AHORRAS $X COP), computed from the card's own strikethrough anchor */
.qz-offer-side .qz-off{display:block;text-align:center}
.qz-off .qz-off-pct{color:#dc2626;font-size:1.75rem;letter-spacing:-.01em;padding-top:.15rem;padding-bottom:.2rem}
.qz-off .qz-off-save{font-size:.66rem;font-weight:700;letter-spacing:.02em;line-height:1.25;color:#16a34a;opacity:1;max-width:5.6rem;margin:0 auto}

/* ============ t467 (2026-10-31, Pedro approved t465u/t467u): UX fixes 1, 2, 3, 4b, 5, 7 (6 = copy, in build.py) ============ */
/* 1 — step 20 (dVLtdE): smaller illustration + tighter rhythm so CONTINUAR is above the fold. Content unchanged. */
#step_dVLtdE #layer_Qoc2Mf img{max-height:min(32svh,270px) !important;width:auto !important;max-width:100%;margin:0 auto;display:block;object-fit:contain}
#step_dVLtdE #layer_Qoc2Mf > div > div{display:flex;justify-content:center}
#step_dVLtdE{justify-content:flex-start !important;gap:.5rem !important}
#step_dVLtdE > .py-10{display:none}
@media (min-width:768px){#step_dVLtdE #layer_Qoc2Mf img{max-height:min(26vh,240px) !important}}
/* 2 — step 39 (33poyS): readable "Tu peso" chart label */
#step_33poyS #layer_mV8kmG .theme-font-title{font-size:1.125rem !important;line-height:1.4 !important;font-weight:700 !important;text-align:center;padding-bottom:.25rem}
/* 3 — next button full colour once the step is answered (.qz-ready toggled by app.js); stays pale while not */
.qz-ready.opacity-75{opacity:1 !important}
.qz-ready button.cursor-not-allowed{cursor:pointer !important}
/* 5 — step 34 (AAOhnj): room above the chart so the red weight tag does not overlap the headline */
#step_AAOhnj #layer_sC9hoc{padding-top:2.6rem !important}
/* 7 — step 30 (S9XJ6R): hide the misplaced AGE explanation box (it stays on step 31) */
#step_S9XJ6R #layer_xePGnh{display:none !important}
/* 4b — mobile: sticky copy of the next button ONLY on plain answer steps 11/12/27 (app.js whitelist);
   content screens 30/34/39 tightened so the REAL button sits above the fold. Nothing hidden. */
@media (max-width:767.98px){
  .qz-sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;pointer-events:none;transform:translateY(110%);transition:transform .25s ease}
  .qz-sticky.show{transform:none;pointer-events:auto}
  .qz-sticky-inner{padding:10px 12px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to top,#fff 72%,rgba(255,255,255,0))}
  #step_AAOhnj, #step_33poyS, #step_S9XJ6R{gap:.5rem !important}
  #step_AAOhnj .py-1, #step_AAOhnj .content.py-2,
  #step_33poyS .py-1, #step_33poyS .content.py-2,
  #step_S9XJ6R .py-1, #step_S9XJ6R .content.py-2{padding-top:.125rem !important;padding-bottom:.125rem !important}
  #step_AAOhnj [class*="alrt-"].content, #step_33poyS [class*="alrt-"].content, #step_S9XJ6R [class*="alrt-"].content{padding:10px 12px !important}
  #step_AAOhnj [class*="alrt-"] h2, #step_33poyS [class*="alrt-"] h2{font-size:1.3rem !important;line-height:1.2 !important;margin-bottom:.15rem}
  #step_AAOhnj [class*="alrt-"] p, #step_33poyS [class*="alrt-"] p, #step_S9XJ6R [class*="alrt-"] p{font-size:.85rem !important;line-height:1.35 !important}
  #step_AAOhnj h1{font-size:1.6rem !important;line-height:1.12 !important}
  #step_AAOhnj #layer_sC9hoc .aspect-video{aspect-ratio:auto !important;height:140px}
  #step_AAOhnj #layer_O6Xh9Y p, #step_AAOhnj #layer_O6Xh9Y span{font-size:.66rem !important;line-height:1.3 !important}
  #step_33poyS #layer_mV8kmG .aspect-video{aspect-ratio:auto !important;height:160px}
  #step_33poyS #layer_ltAG5j h1{font-size:1.75rem !important;line-height:1.12 !important}
  #step_S9XJ6R #layer_objetivo .pt-4{padding-top:.5rem !important}
}