@font-face{font-family:"Inter Tight";font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/inter-tight-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/inter-tight-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --ink:#16130f; --ink2:#6f665b; --ink3:#a39a8d;
  --crema:#F3EADF; --arena:#E7D6BC; --card:#fff; --line:rgba(22,19,15,.10);
  --live:#E5372B; --hold:#9A5B00; --hold-bg:#FFEFD0; --ok:#1E7A46; --ok-bg:#E1F2E7;
  --ease:cubic-bezier(.2,.8,.2,1);
  --font:"Inter Tight",-apple-system,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:linear-gradient(180deg,#F3EADF 0%,#E9DDCA 100%) fixed;color:var(--ink);
  font-family:var(--font);-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1}
button{font:inherit;color:inherit;cursor:pointer}
.digits,.cents,.cd,.hold-t{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

/* ───────── Celular (base) ───────── */
.app{max-width:480px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 16px calc(112px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:20px}
.top{display:flex;align-items:center;justify-content:space-between}
.brand{font-size:13px;font-weight:700;letter-spacing:.32em;color:var(--ink)}
.live{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:7px 14px 7px 12px;font-size:14px;font-weight:600}
.live i{width:9px;height:9px;border-radius:50%;background:var(--live);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
body[data-state="sold"] .live i,body[data-state="ended"] .live i,body[data-state="pre"] .live i{animation:none;background:var(--ink3)}

.hero{position:relative;background:radial-gradient(ellipse 62% 58% at 50% 46%,#FDFAF4 0%,#F1E7D6 62%,#E8DAC4 100%);border-radius:28px;overflow:hidden;aspect-ratio:1/.8;box-shadow:0 18px 40px -22px rgba(60,40,10,.35)}
.hero img{position:absolute;left:50%;top:50%;height:88%;width:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 22px 20px rgba(80,25,30,.28))}
.hero-cap{display:none}
.kicker{margin:0;display:inline-block;align-self:flex-start;background:var(--ink);color:#fff;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
h1{margin:10px 0 0;font-size:clamp(32px,9.4vw,44px);line-height:1.02;font-weight:700;letter-spacing:-.03em}
.lede{margin:8px 0 0;font-size:18px;line-height:1.35;color:var(--ink2)}

.main{display:flex;flex-direction:column;gap:20px}
.pricebox{background:var(--card);border-radius:28px;padding:20px 20px 18px;box-shadow:0 18px 40px -26px rgba(60,40,10,.4);display:grid;grid-template-columns:1fr;grid-template-areas:"l" "p" "d" "b" "v" "r" "s"}
.pricebox>*{min-width:0}
.plabel{grid-area:l}.price{grid-area:p}.drop{grid-area:d}.bar{grid-area:b}.vs{grid-area:v}.rate{grid-area:r}.statusline{grid-area:s}
.plabel{font-size:16px;font-weight:600;color:var(--ink2);display:flex;align-items:center;gap:10px;min-height:28px}
/* El número del precio: peso 700, letras con aire, separador de miles chico y suave, USD y centavos arriba como en una etiqueta de precio */
.price{display:flex;align-items:flex-start;gap:0;margin-top:8px}
.cur{font-size:clamp(17px,4.8vw,22px);font-weight:700;color:var(--ink2);letter-spacing:.06em;line-height:1;margin:.5em .55em 0 0}
.digits{font-size:clamp(58px,20.5vw,104px);line-height:.9;font-weight:700;letter-spacing:-.03em;display:inline-flex;align-items:baseline;text-rendering:geometricPrecision}
.digits span{display:inline-block}
.digits .sep{width:.2em;text-align:center;font-weight:600;color:var(--ink2);letter-spacing:0}
.digits span.roll{animation:roll .34s var(--ease)}
@keyframes roll{from{transform:translateY(-34%);opacity:0}to{transform:none;opacity:1}}
.cents{font-size:clamp(22px,6.6vw,34px);font-weight:700;color:var(--ink2);letter-spacing:-.01em;line-height:1;margin:.3em 0 0 .14em}
.drop{margin-top:12px;font-size:19px;font-weight:600;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;color:var(--ink)}
.drop b{font-weight:800}
.delta{display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:var(--ok-bg);color:var(--ok);font-size:15px;font-weight:700;padding:4px 10px;opacity:0;transform:translateY(4px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.delta.show{opacity:1;transform:none}
.bar{height:6px;border-radius:99px;background:var(--arena);margin-top:12px;overflow:hidden}
.bar i{display:block;height:100%;width:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0);border-radius:99px}
.vs{margin-top:12px;font-size:16px;color:var(--ink2);min-height:22px}
.vs.good{color:var(--ok);font-weight:600}
.rate{margin-top:2px;font-size:15px;color:var(--ink2)}
.statusline{display:none;margin-top:10px;font-size:19px;line-height:1.35;font-weight:600}
.hold-t{font-weight:800}

body[data-state="held"] .pricebox{background:var(--hold-bg)}
body[data-state="held"] .plabel{color:var(--hold)}
body[data-state="sold"] .pricebox,body[data-state="ended"] .pricebox{background:var(--ok-bg)}
body[data-state="sold"] .plabel,body[data-state="ended"] .plabel{color:var(--ok)}
body[data-state="held"] :is(.drop,.bar,.vs,.rate),body[data-state="sold"] :is(.drop,.bar,.vs,.rate),body[data-state="ended"] :is(.drop,.bar,.vs,.rate),body[data-state="pre"] :is(.drop,.bar,.vs,.rate){display:none}
body[data-state="held"] .statusline,body[data-state="sold"] .statusline,body[data-state="ended"] .statusline,body[data-state="pre"] .statusline{display:block}

.curve{position:relative;background:var(--card);border-radius:28px;padding:16px 16px 14px;box-shadow:0 18px 40px -26px rgba(60,40,10,.4)}
.curve h2{margin:0 0 6px;font-size:16px;font-weight:600;color:var(--ink2)}
.curve .plot{position:relative;aspect-ratio:2.5/1}
.curve svg#curveSvg{display:block;width:100%;height:100%;overflow:visible}
.curve .lista{position:absolute;left:0;right:0;border-top:1.5px dashed var(--ink3);pointer-events:none}
.curve .lista span{position:absolute;right:0;top:-24px;font-size:14px;font-weight:600;color:var(--ink2);background:var(--card);padding:0 0 0 6px}
.curve .axis{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:15px;color:var(--ink2);font-weight:500}
#cNow,.ring{r:9px}
#cNow{stroke-width:3.5px}
.ring{transform-box:fill-box;transform-origin:center;animation:ring 1.8s ease-out infinite}
@keyframes ring{from{transform:scale(1);opacity:.5}to{transform:scale(3);opacity:0}}

.facts{margin:0;background:var(--card);border-radius:28px;padding:6px 20px;box-shadow:0 18px 40px -26px rgba(60,40,10,.4)}
.facts div{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.facts div:last-child{border-bottom:0}
.facts dt{font-size:16px;color:var(--ink2);font-weight:500}
.facts dd{margin:0;font-size:18px;font-weight:700;text-align:right}
.facts dd small{display:block;font-size:14px;font-weight:500;color:var(--ink2)}

.how h2,.terms summary{font-size:20px;font-weight:700;letter-spacing:-.01em;margin:0 0 12px}
.how ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.how li{display:flex;gap:14px;align-items:flex-start;font-size:18px;line-height:1.35}
.how li b{flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:700}
.terms{color:var(--ink2);font-size:15px;line-height:1.5}
.terms summary{cursor:pointer;color:var(--ink);font-size:17px;margin:0}
.terms ul{margin:10px 0 0;padding-left:20px}
.terms li{margin-bottom:6px}
.tbd{background:#FFE9A8;border-radius:4px;padding:0 4px;color:#5c4400}

.cta{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(243,234,223,0),rgba(243,234,223,.94) 28%)}
.cta > div{max-width:480px;margin:0 auto}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;border:0;border-radius:18px;background:var(--ink);color:#fff;font-size:19px;font-weight:700;letter-spacing:-.01em;transition:transform .16s var(--ease),opacity .2s;text-align:center}
.btn:active{transform:scale(.98)}
.btn[disabled]{background:#cfc5b6;color:#6f665b;cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
:focus-visible{outline:3px solid #2563eb;outline-offset:2px}

/* Hoja de reserva */
.sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;background:rgba(22,19,15,.45);animation:fade .2s}
.sheet-card{width:100%;max-width:480px;max-height:92dvh;overflow:auto;background:var(--crema);border-radius:28px 28px 0 0;padding:22px 20px calc(24px + env(safe-area-inset-bottom));animation:up .32s var(--ease)}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-x{float:right;width:40px;height:40px;border:0;border-radius:50%;background:#fff;font-size:22px;line-height:1}
.sheet h2{margin:0 0 6px;font-size:28px;line-height:1.08;letter-spacing:-.03em;font-weight:700;padding-right:48px}
.sheet p{margin:0 0 14px;font-size:17px;line-height:1.4;color:var(--ink2)}
.sheet p b{color:var(--ink)}
.field{display:block;margin-bottom:12px}
.field span{display:block;font-size:15px;font-weight:600;margin-bottom:6px}
.field input{width:100%;height:54px;border-radius:14px;border:1.5px solid var(--line);background:#fff;padding:0 16px;font:inherit;font-size:18px}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.4;margin:6px 0 16px;color:var(--ink2)}
.chk input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:#16130f}
.timer{display:inline-flex;align-items:center;gap:8px;background:var(--hold-bg);color:var(--hold);border-radius:999px;padding:7px 14px;font-weight:700;font-size:17px;margin-bottom:12px;font-variant-numeric:tabular-nums}
.bank{background:#fff;border-radius:18px;padding:4px 16px;margin:0 0 12px}
.bank div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px}
.bank div:last-child{border-bottom:0}
.bank dt{color:var(--ink2)} .bank dd{margin:0;font-weight:700;display:flex;gap:10px;align-items:center;text-align:right}
.copy{border:0;background:var(--arena);border-radius:10px;padding:6px 10px;font-size:14px;font-weight:600}
.note{font-size:15px;color:var(--ink2);margin:10px 0 0}
.tag{display:inline-block;background:var(--ink);color:#fff;border-radius:6px;padding:2px 7px;font-size:12px;font-weight:700;letter-spacing:.06em;vertical-align:middle}
.upload{display:block;margin:14px 0 0}
.prevbox{display:flex;gap:14px;align-items:center;background:#fff;border-radius:18px;padding:12px;margin:12px 0}
.prevbox img{width:84px;height:84px;object-fit:cover;border-radius:12px;flex:none;background:var(--arena)}
.prevbox div{font-size:15px;color:var(--ink2);line-height:1.35;min-width:0;overflow-wrap:anywhere}
.prevbox b{color:var(--ink);display:block;font-size:16px}
.spin{display:inline-block;width:14px;height:14px;border-radius:50%;border:2.5px solid var(--hold);border-top-color:transparent;animation:spin .9s linear infinite;vertical-align:-2px;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}


/* ───────── Tele (/tv) — 16:9; todo en unidades u = 1/100 del ancho de la pantalla ─────────
   Jerarquía: 1) el PRECIO (enorme)  2) qué es (iPhone + nombre)  3) qué significa (cuánto menos que en la tienda)  4) cómo se compra (QR)  5) el resto, bajito. */
body.tv{--u:min(1vw,1.7778vh);overflow:hidden;height:100vh;background:radial-gradient(120% 100% at 24% 42%,#FCF8F0 0%,#F2E8D8 52%,#E7DAC5 100%)}
body.tv .app{max-width:none;margin:0;width:calc(var(--u)*100);height:calc(var(--u)*56.25);padding:calc(var(--u)*2.8) calc(var(--u)*4.4) calc(var(--u)*3);gap:0;
  display:grid;grid-template-columns:calc(var(--u)*31) 1fr;grid-template-rows:minmax(0,1fr);column-gap:calc(var(--u)*5);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
body.tv .top{display:contents}
body.tv .brand{position:absolute;left:calc(var(--u)*4.4);top:calc(var(--u)*2.9);font-size:calc(var(--u)*1.7)}
.tvtag{display:none}
body.tv .tvtag{display:block;position:absolute;left:calc(var(--u)*4.4);top:calc(var(--u)*5.5);font-size:calc(var(--u)*1.4);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink2)}
body.tv .live{position:absolute;right:calc(var(--u)*4.4);top:calc(var(--u)*2.8);font-size:calc(var(--u)*2.1);font-weight:700;padding:calc(var(--u)*.9) calc(var(--u)*2.2);background:#fff;box-shadow:0 calc(var(--u)*.3) calc(var(--u)*1.2) rgba(60,40,10,.12)}
body.tv .live i{width:calc(var(--u)*1.2);height:calc(var(--u)*1.2)}
body.tv .left{grid-column:1;grid-row:1;display:flex;flex-direction:column;min-height:0;padding-top:calc(var(--u)*8)}
body.tv .hero{flex:1;aspect-ratio:auto;background:none;box-shadow:none;border-radius:0;overflow:visible;min-height:0}
body.tv .hero::before{content:"";position:absolute;left:-18%;right:-18%;top:-2%;bottom:6%;background:radial-gradient(closest-side,rgba(255,255,255,.96) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%)}
body.tv .hero img{height:90%;top:43%;filter:drop-shadow(0 calc(var(--u)*2) calc(var(--u)*2) rgba(80,25,30,.32))}
body.tv .hero-cap{display:block;position:absolute;left:50%;transform:translateX(-50%);bottom:0;white-space:nowrap;background:#fff;border-radius:99px;padding:calc(var(--u)*.9) calc(var(--u)*2.2);font-size:calc(var(--u)*2);font-weight:600;box-shadow:0 calc(var(--u)*.3) calc(var(--u)*1.4) rgba(60,40,10,.14);z-index:2}
body.tv .main{grid-column:2;grid-row:1;gap:0;min-height:0;justify-content:space-between}
body.tv .kicker,body.tv .lede{display:none}
body.tv h1{margin:calc(var(--u)*.4) 0 0;font-size:calc(var(--u)*4.6);line-height:1}
body.tv .pricebox{position:relative;isolation:isolate;background:none;box-shadow:none;border-radius:0;padding:0;grid-template-columns:1fr auto;grid-template-areas:"l l" "p p" "v v" "b d" "s s";row-gap:calc(var(--u)*1.1)}
body.tv .pricebox::before{content:"";position:absolute;inset:calc(var(--u)*-1.8) calc(var(--u)*-2.4);border-radius:calc(var(--u)*3);z-index:-1}
body.tv[data-state] .pricebox{background:none}
body.tv[data-state="held"] .pricebox::before{background:var(--hold-bg)}
body.tv[data-state="sold"] .pricebox::before,body.tv[data-state="ended"] .pricebox::before{background:var(--ok-bg)}
body.tv .plabel{font-size:calc(var(--u)*2);font-weight:700;letter-spacing:.14em;text-transform:uppercase;min-height:0}
body.tv[data-state="live"] .plabel{display:none}
body.tv .price{margin:0}
body.tv .cur{font-size:calc(var(--u)*2.8);margin:calc(var(--u)*1.4) calc(var(--u)*1.2) 0 0}
body.tv .digits{font-size:calc(var(--u)*14.4);line-height:.9}
body.tv .cents{font-size:calc(var(--u)*5);margin:calc(var(--u)*1.5) 0 0 calc(var(--u)*.4)}
body.tv .vs{grid-area:v;justify-self:start;margin:0;min-height:0;display:inline-flex;align-items:center;white-space:nowrap;padding:calc(var(--u)*.8) calc(var(--u)*2.2);border-radius:99px;background:rgba(22,19,15,.07);color:var(--ink2);font-size:calc(var(--u)*2.7);font-weight:700}
body.tv .vs.good{background:var(--ok-bg);color:var(--ok)}
body.tv .bar{grid-area:b;align-self:center;height:calc(var(--u)*.6);margin:0 calc(var(--u)*2.4) 0 0;background:rgba(22,19,15,.10)}
body.tv .drop{grid-area:d;margin:0;font-size:calc(var(--u)*2.2);font-weight:600;color:var(--ink2);gap:calc(var(--u)*.8);flex-wrap:nowrap;white-space:nowrap}
body.tv .drop b{color:var(--ink)}
body.tv .delta{font-size:calc(var(--u)*2);padding:calc(var(--u)*.3) calc(var(--u)*1.1)}
body.tv .rate{display:none}
body.tv .statusline{grid-area:s;font-size:calc(var(--u)*2.9);margin:0;line-height:1.3}
body.tv .curve,body.tv .facts,body.tv .how,body.tv .terms,body.tv .cta,body.tv .sheet{display:none}
body.tv .qrcard{display:flex}
body.tv :is(.vs,.drop,.bar,.rate):empty{display:none}
body.tv[data-state="held"] :is(.drop,.bar,.vs,.rate),body.tv[data-state="sold"] :is(.drop,.bar,.vs,.rate),body.tv[data-state="ended"] :is(.drop,.bar,.vs,.rate),body.tv[data-state="pre"] :is(.drop,.bar,.vs,.rate),body.tv[data-state="paused"] :is(.drop,.bar,.vs,.rate){display:none}
body.tv[data-state="held"] .qrcard,body.tv[data-state="proof"] .qrcard,body.tv[data-state="sold"] .qrcard,body.tv[data-state="ended"] .qrcard{display:none}
body.tv[data-state="held"] .pricebox,body.tv[data-state="proof"] .pricebox,body.tv[data-state="sold"] .pricebox,body.tv[data-state="ended"] .pricebox{margin:auto 0}
.qrcard{display:none;align-items:center;gap:calc(var(--u)*2.4);background:var(--card);border-radius:calc(var(--u)*2.6);padding:calc(var(--u)*1.9);box-shadow:0 calc(var(--u)*1.2) calc(var(--u)*3) calc(var(--u)*-1.6) rgba(60,40,10,.38)}
.qrcard .code{flex:none;width:calc(var(--u)*11);height:calc(var(--u)*11);background:#fff}
.qrcard .code svg{width:100%;height:100%;display:block}
.qrcard h3{margin:0;font-size:calc(var(--u)*3.8);line-height:1.05;font-weight:800;letter-spacing:-.03em}
.qrcard p{margin:calc(var(--u)*.8) 0 0;font-size:calc(var(--u)*2.1);line-height:1.25;color:var(--ink2);font-weight:500}
.qrcard .qr1{color:var(--ink);font-weight:700;font-size:calc(var(--u)*2.4)}
.qrcard .qr3{font-size:calc(var(--u)*1.8);font-weight:700;color:var(--ink)}
body.tv .conn{top:calc(var(--u)*1.6);font-size:calc(var(--u)*1.6);padding:calc(var(--u)*.6) calc(var(--u)*1.6)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.dotsvg{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible}
.note.err{color:#B3261E}
.conn{position:fixed;left:50%;top:max(10px,env(safe-area-inset-top));transform:translateX(-50%);z-index:60;background:#16130f;color:#fff;border-radius:99px;padding:8px 16px;font-size:14px;font-weight:600;box-shadow:0 8px 24px -8px rgba(0,0,0,.4)}
.cargando{display:grid;place-items:center;min-height:40dvh;color:var(--ink2);font-size:18px}