/* ===== Variables y base ===== */
:root{--red:#E5533D;--green:#3DC46A;--ink:#0E0E0E;--ink2:#191919;--gold:#C9A55A;--gold-l:#E0C27A;--gray:#A39C88;--on:#F2EEE4}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--ink);color:var(--on);font-family:'Anton',Impact,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
main{min-height:100svh;max-width:460px;margin:0 auto;
  padding:calc(40px + env(safe-area-inset-top,0px)) 22px calc(22px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:center;text-align:center}
.top{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(22px,4.5svh,38px);width:100%}
.label{font-family:'Montserrat',sans-serif;font-weight:800;font-size:12px;letter-spacing:.22em;color:var(--gray)}
.label-red{color:var(--red)}
.label-green{color:var(--green)}

/* ===== Título y textos ===== */
h1{font-weight:400;line-height:.88;text-transform:uppercase}
h1 small{display:block;font-size:clamp(34px,10vw,44px);letter-spacing:.04em;margin-bottom:clamp(12px,2.5svh,20px)}
h1 span{display:block;font-size:clamp(96px,30vw,136px);color:var(--gold);letter-spacing:.02em}
.sub{margin-top:8px;font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(13px,3.8vw,15px);color:var(--gray)}
.desc{margin:18px auto 0;white-space:nowrap;font-size:clamp(22px,7.4vw,32px);line-height:1.05;text-transform:uppercase}
.desc b{font-weight:400;color:var(--gold)}
.pillars{margin-top:12px;font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(11px,3.3vw,14px);letter-spacing:.14em;color:var(--on)}
.pillars i{font-style:normal;color:var(--gold);padding:0 .5em}

/* ===== Precios ===== */
.price{display:flex;flex-direction:column;align-items:center;gap:14px}
.row{display:flex;flex-direction:column;align-items:center;gap:4px}
.was{font-size:clamp(38px,11vw,48px);color:var(--red);text-decoration:line-through;text-decoration-thickness:4px}
.now{font-size:clamp(72px,22vw,100px);line-height:.9;color:var(--green)}
.now sup{display:inline-block;font-size:.42em;line-height:1;vertical-align:top;position:relative;top:.1em;margin-left:.05em}

/* ===== Temporizador ===== */
.timer{display:flex;flex-direction:column;align-items:center;gap:8px}
.clock{font-size:clamp(52px,15vw,68px);line-height:1;font-variant-numeric:tabular-nums}

/* ===== Botón ===== */
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:76px;border-radius:18px;
  background:var(--gold);color:var(--ink);text-decoration:none;font-size:clamp(20px,6.2vw,26px);letter-spacing:.03em;gap:10px;padding:0 16px;
  animation:pulse 2s infinite}
.btn:active{transform:scale(.97);background:var(--gold-l)}
.btn:focus-visible{outline:3px solid var(--gold-l);outline-offset:4px}
.emoji{font-size:1.2em}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(201,165,90,.55)}70%{box-shadow:0 0 0 16px rgba(201,165,90,0)}100%{box-shadow:0 0 0 0 rgba(201,165,90,0)}}
@media (prefers-reduced-motion:reduce){.btn{animation:none}}
@media (max-height:700px){.top{gap:16px}h1 span{font-size:88px}.now{font-size:64px}.clock{font-size:46px}}

/* ===== Oferta terminada ===== */
.over .clock{color:var(--gray)}
.over .btn{background:var(--ink2);color:var(--gray);animation:none;pointer-events:none}

#pay{white-space:nowrap;font-size:clamp(17px,5.4vw,24px);padding:0 12px;gap:8px;margin-top:clamp(28px,6svh,52px)}

/* ===== LANDING FIJA: entra entera en cualquier pantalla ===== */
html.lock,html.lock body{overflow:hidden;height:100%;overscroll-behavior:none}
html.lock body{position:fixed;inset:0;width:100%}
#app{height:100vh;height:100dvh;min-height:0;overflow:hidden;justify-content:space-between;
  padding:calc(max(14px,2.6dvh) + env(safe-area-inset-top,0px)) 20px calc(max(14px,2.6dvh) + env(safe-area-inset-bottom,0px))}
#app .top{flex:1 1 auto;min-height:0;justify-content:center;gap:min(3.2dvh,28px)}
#app h1 small{font-size:min(10vw,5.2dvh,44px);margin-bottom:min(1.4dvh,12px)}
#app h1 span{font-size:min(28vw,14dvh,136px)}
#app .pillars{font-size:min(3.3vw,1.8dvh,14px);margin-top:min(1.4dvh,12px);white-space:nowrap}
#app .desc{font-size:min(7.2vw,3.9dvh,32px);margin-top:min(1.8dvh,16px)}
#app .sub{font-size:min(3.8vw,2dvh,15px);margin-top:min(.8dvh,8px)}
#app .price{gap:min(1.4dvh,12px)}
#app .row{gap:min(.5dvh,4px)}
#app .label{font-size:min(3.1vw,1.6dvh,12px)}
#app .was{font-size:min(11vw,5.4dvh,48px);text-decoration-thickness:max(2px,.08em)}
#app .now{font-size:min(21vw,10.5dvh,100px)}
#app .timer{gap:min(.8dvh,8px)}
#app .clock{font-size:min(15vw,7.5dvh,68px)}
#pay{flex-shrink:0;min-height:0;height:min(76px,8.6dvh);margin-top:min(3.6dvh,36px);padding:0 12px;
  white-space:nowrap;font-size:min(5.2vw,3dvh,24px);gap:.4em}