/* ifstore.uy drop storefront — replicated from the approved prototype
   (design/ifstore-drop-prototype.html). Self-hosted fonts, no CDNs. */

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/space-grotesk-400.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/space-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/space-grotesk-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-600.woff2') format('woff2')}

:root{
  --navy:#12325E;
  --navy-deep:#0B1F3D;
  --navy-mid:#1B4380;
  --sky:#8FB3E8;
  --sky-pale:#C9DAF5;
  --ice:#EFF3F9;
  --line:#E4EAF3;
  --ink:#101C30;
  --slate:#6B7C97;
  --trust:#2E7D4F;
  --white:#FFFFFF;
  --radius:14px;
  --header-h:56px;
  --strip-h:34px;
  --nav-h:58px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--white)}
.display{font-family:'Space Grotesk',sans-serif}

/* ---------- header ---------- */
header.ifs{
  position:fixed;top:0;left:0;right:0;z-index:40;
  height:var(--header-h);
  background:var(--navy);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;
  padding-top:env(safe-area-inset-top);
}
.logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;color:var(--white);letter-spacing:.4px;text-decoration:none}
.logo span{color:var(--sky);font-weight:500}
.header-icons{display:flex;gap:16px}
.header-icons a{display:flex}
.header-icons svg{width:21px;height:21px;stroke:var(--sky);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- countdown strip ---------- */
.strip{
  position:fixed;top:var(--header-h);left:0;right:0;z-index:39;
  height:var(--strip-h);
  background:var(--navy-mid);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;font-size:12.5px;
}
.strip .label{color:var(--sky-pale)}
.strip .timer{color:var(--white);font-weight:600;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px}
.strip .timer svg{width:13px;height:13px;stroke:var(--sky-pale);fill:none;stroke-width:2;stroke-linecap:round}

/* ---------- feed ---------- */
main.feed{
  height:100dvh;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  padding-top:calc(var(--header-h) + var(--strip-h));
  scroll-padding-top:calc(var(--header-h) + var(--strip-h));
}
.card{
  min-height:calc(100dvh - var(--header-h) - var(--strip-h) - var(--nav-h));
  scroll-snap-align:start;
  display:flex;flex-direction:column;
  padding:16px 18px 10px;
  max-width:480px;margin:0 auto;
}
.art{
  position:relative;border-radius:var(--radius);
  aspect-ratio:4/3.1;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.art img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art .glyph{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:min(34vw,150px);line-height:1;user-select:none;
}
.badge{
  position:absolute;font-size:11.5px;font-weight:600;
  padding:5px 12px;border-radius:999px;letter-spacing:.2px;z-index:2;
}
.badge.stock{top:12px;left:12px;background:var(--navy);color:var(--white)}
.badge.stock.agotado{background:var(--slate)}
.badge.pos{top:12px;right:12px;background:var(--white);color:var(--navy-mid);border:1px solid var(--sky-pale);font-weight:500}
.meter{height:4px;background:var(--line);border-radius:2px;margin-top:12px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--navy);border-radius:2px}
.meter-label{font-size:11.5px;color:var(--slate);margin-top:5px}

.info{margin-top:14px;flex:1}
.name{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:19px}
.sub{font-size:12.5px;color:var(--slate);margin-top:3px}
.price-row{display:flex;align-items:baseline;gap:10px;margin-top:10px}
.price{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;color:var(--navy)}
.iva{font-size:12.5px;color:var(--trust);font-weight:500}
.cuotas{font-size:13px;color:var(--slate);margin-top:3px}

.cta{
  display:block;width:100%;border:none;cursor:pointer;text-align:center;text-decoration:none;
  background:var(--navy);color:var(--white);
  font-family:'Inter',sans-serif;font-weight:600;font-size:15.5px;
  padding:15px;border-radius:var(--radius);margin-top:14px;
  transition:transform .08s ease,background .15s ease;
}
.cta:active{transform:scale(.98);background:var(--navy-deep)}
.cta[disabled],.cta.agotado{background:var(--ice);color:var(--slate);cursor:default}
.cta.narrow{max-width:280px}
.cta.secundario{background:var(--white);color:var(--navy);border:1px solid var(--sky-pale)}
.hint{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:12.5px;color:var(--slate);margin-top:14px;padding-bottom:6px;
}
.hint svg{width:15px;height:15px;stroke:var(--sky);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){.hint svg{animation:none}}

/* ---------- waitlist form (shared: end card + upcoming page) ---------- */
form.waitlist{display:flex;gap:8px;max-width:340px;margin:6px auto 0;width:100%}
form.waitlist input[type=email]{
  flex:1;min-width:0;appearance:none;background:var(--white);
  border:1px solid var(--line);border-radius:12px;
  padding:13px 14px;font-size:14px;font-family:'Inter',sans-serif;color:var(--ink);
}
form.waitlist input[type=email]::placeholder{color:var(--slate)}
form.waitlist input[type=email]:focus{outline:2px solid var(--sky);outline-offset:1px;border-color:var(--sky)}
form.waitlist button{
  border:none;background:var(--navy);color:var(--white);font-weight:600;
  font-size:14px;padding:0 18px;border-radius:12px;cursor:pointer;
  font-family:'Inter',sans-serif;white-space:nowrap;
  transition:background .15s ease;
}
form.waitlist button:active{background:var(--navy-deep)}
form.waitlist .ok{color:var(--trust);font-weight:600;font-size:14px;width:100%;text-align:center}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* ---------- end card ---------- */
.card.end{justify-content:center;text-align:center;gap:14px}
.end h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;color:var(--navy)}
.end p{font-size:14px;color:var(--slate);max-width:300px;margin:0 auto;line-height:1.6}

/* ---------- upcoming page ---------- */
.upcoming{min-height:calc(100dvh - var(--header-h) - var(--nav-h));display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:14px;padding:24px 18px;max-width:480px;margin:0 auto}
.upcoming .eyebrow{
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--navy-mid);background:#E8F0FB;padding:5px 14px;border-radius:999px;
}
.upcoming h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:30px;color:var(--navy);margin:0}
.upcoming p{font-size:14px;color:var(--slate);max-width:300px;line-height:1.6;margin:0}
.upcoming .big-timer{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:34px;color:var(--navy);
  font-variant-numeric:tabular-nums;background:var(--ice);border-radius:var(--radius);
  padding:14px 22px;margin:4px 0;
}
.upcoming form.waitlist{margin-top:10px}

/* ---------- bottom nav ---------- */
nav.ifs{
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--white);border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-around;
}
nav.ifs a{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;font-size:10.5px;color:var(--slate)}
nav.ifs a.active{color:var(--navy);font-weight:600}
nav.ifs svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- product sheet ---------- */
.overlay{
  position:fixed;inset:0;z-index:50;background:rgba(11,31,61,.45);
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.overlay.open{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:51;
  background:var(--white);border-radius:22px 22px 0 0;
  max-width:480px;margin:0 auto;
  max-height:88dvh;overflow-y:auto;
  transform:translateY(105%);transition:transform .28s cubic-bezier(.32,.72,.28,1);
  padding:10px 18px calc(18px + env(safe-area-inset-bottom));
}
.sheet.open{transform:translateY(0)}
.grab{width:40px;height:4px;background:var(--line);border-radius:2px;margin:4px auto 14px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sheet-head .name{font-size:17px}
.close-btn{border:none;background:var(--ice);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.close-btn svg{width:16px;height:16px;stroke:var(--slate);stroke-width:2;stroke-linecap:round}
.thumbs{display:flex;gap:8px;margin-top:14px}
.thumbs div,.thumbs a{flex:1;aspect-ratio:1/1;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:34px;overflow:hidden}
.thumbs img{width:100%;height:100%;object-fit:cover}
.pill{font-size:11.5px;font-weight:600;background:#E8F0FB;color:var(--navy-mid);padding:4px 10px;border-radius:999px}
.trust{border:1px solid var(--line);border-radius:var(--radius);margin-top:14px;overflow:hidden}
.trust .row{display:flex;align-items:center;gap:12px;padding:12px 14px}
.trust .row + .row{border-top:1px solid var(--line)}
.trust svg{width:20px;height:20px;stroke:var(--navy);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.trust .row.ok svg{stroke:var(--trust)}
.trust b{display:block;font-size:13.5px;font-weight:600}
.trust small{font-size:11.5px;color:var(--slate)}
.wa{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;border:1px solid var(--sky-pale);background:var(--white);color:var(--navy);
  font-family:'Inter',sans-serif;font-weight:500;font-size:14px;
  padding:13px;border-radius:var(--radius);margin-top:8px;cursor:pointer;text-decoration:none;
}
.wa svg{width:17px;height:17px;fill:var(--trust)}

/* ---------- standalone pages (product, checkout, legal, error) ---------- */
main.page{
  max-width:480px;margin:0 auto;
  padding:calc(var(--header-h) + 18px) 18px calc(var(--nav-h) + 24px);
}
main.page h1{font-family:'Space Grotesk',sans-serif;color:var(--navy);font-size:24px;margin-bottom:8px}
main.page h2{font-family:'Space Grotesk',sans-serif;color:var(--navy);font-size:17px;margin:18px 0 8px}
main.page p{font-size:14px;line-height:1.6;color:var(--ink);margin-bottom:10px}
main.page .muted{color:var(--slate)}

.form-field{margin-bottom:14px}
.form-field label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.form-field input,.form-field select,.form-field textarea{
  width:100%;border:1px solid var(--line);border-radius:12px;
  padding:13px 14px;font-size:14px;font-family:'Inter',sans-serif;color:var(--ink);background:var(--white);
}
.form-field input:focus,.form-field select:focus{outline:2px solid var(--sky);outline-offset:1px;border-color:var(--sky)}
.form-row{display:flex;gap:10px}
.form-row .form-field{flex:1}
.alert{border-radius:12px;padding:12px 14px;font-size:13.5px;margin-bottom:14px}
.alert.err{background:#FBEDEF;color:#8C2333}
.alert.ok{background:#EAF5EE;color:var(--trust)}
.hold-timer{display:flex;align-items:center;justify-content:space-between;background:var(--ice);
  border-radius:12px;padding:12px 14px;font-size:13px;margin-bottom:16px}
.hold-timer b{font-variant-numeric:tabular-nums;color:var(--navy)}
.summary{border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:16px;display:flex;gap:12px;align-items:center}
.summary .mini-art{width:56px;height:56px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:24px;flex-shrink:0}
.card-field-host{border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-height:48px}
.legal-note{font-size:11.5px;color:var(--slate);margin-top:10px}
.radio-row{display:flex;gap:10px;margin-bottom:14px}
.radio-row label{flex:1;border:1px solid var(--line);border-radius:12px;padding:12px;font-size:13.5px;
  display:flex;gap:8px;align-items:center;cursor:pointer}
.radio-row input:checked + span{font-weight:600;color:var(--navy)}