/* ===== QueHaces Design System v2 tokens ===== */
:root{
  --ink:#0E0E12;
  --paper:#FFFFFF;
  --bone:#F3F1EC;
  --fog:#E9E6DF;
  --ink-muted:#5C5B45;
  --lima:#E2FF3A;
  --lima-suave:#F3FFC9;
  --violeta:#3B2FEA;
  --violeta-deep:#170F55;
  --noche:#150B3D;
  --naranja:#FF8A3D;
  --lila:#C9BFFF;
  --celeste:#BFD9FF;

  --radius-sm:8px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-xl:32px;
  --radius-full:9999px;

  --gutter:24px;
}
@media (min-width:768px){ :root{ --gutter:40px; } }
@media (min-width:1024px){ :root{ --gutter:72px; } }

*{ box-sizing:border-box; }
html{ text-wrap-style: balance; }
body{
  margin:0;
  overflow-x:hidden;
  background:var(--lima);
  color:var(--ink);
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2{ font-family:"Unbounded", "Arial Black", "Helvetica Neue", Arial, sans-serif; }
button{ font-family:"Inter", sans-serif; }
.hide{ display:none !important; }
a{ color:inherit; }

/* ===== Hero band ===== */
.hero{
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  /* extra bottom padding reserves room for the fixed CTA bar (.cta-float)
     so it never overlaps the content above it */
  padding: 88px var(--gutter) 148px var(--gutter);
}
@media (max-width:767px){ .hero{ padding: 56px var(--gutter) 140px var(--gutter); min-height:0; } }
.hero-inner{ max-width:640px; width:100%; }

.badge-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
.badge{
  display:inline-flex; align-items:center; height:32px; padding:0 16px;
  border-radius:var(--radius-full);
  font-family:"Inter",sans-serif; font-size:12px; font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase;
}
.badge-pill{ background:var(--ink); color:var(--paper); }
.badge-outline{ background:var(--paper); color:var(--ink); border:1.5px solid var(--ink); }

.headline{
  font-family:"Unbounded", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-weight:800;
  font-size:44px; line-height:1.05; letter-spacing:-0.01em;
  color:var(--ink);
  margin:0 0 20px 0;
  max-width:12ch;
  text-transform:uppercase;
  overflow-wrap:anywhere;
  word-break:normal;
}
@media (min-width:768px){ .headline{ font-size:60px; } }
@media (min-width:1024px){ .headline{ font-size:76px; } }
.who{ display:inline; color:var(--violeta); }

p.lede{
  font-size:18px; line-height:1.5; color:var(--ink-muted); max-width:44ch; margin:0 0 28px 0;
}
p.lede del{ text-decoration: line-through; text-decoration-thickness:2px; }
p.lede ins{ text-decoration:none; }

/* claim input: now a standalone full-width field (the submit button
   lives in the fixed bottom bar, see .cta-float) */
.claim-input{
  display:flex; align-items:center;
  background:var(--paper); border-radius:var(--radius-sm);
  height:56px; padding:0 16px; gap:2px;
  width:100%;
  box-sizing:border-box;
  transition: opacity .15s ease;
}
.claim-input.is-checking{ opacity:.6; }
.claim-input .prefix{
  color:var(--ink-muted); font-size:16px; font-weight:400; white-space:nowrap;
}
.claim-input input{
  border:none; outline:none; background:transparent; font:inherit;
  font-family:"Inter", sans-serif; font-size:16px; color:var(--ink);
  flex:1; min-width:0; padding:0;
}
.claim-input input::placeholder{ color:var(--fog); }
.claim-input:focus-within{ box-shadow: 0 0 0 3px var(--ink); }

/* floating CTA: fixed to the bottom margin of the screen, neobrutalist
   style (thick border + hard offset shadow, no soft hover fade) — a
   deliberately punchier look than the rest of the flat button system,
   used only here. */
.cta-float{
  position:fixed; left:var(--gutter); right:var(--gutter);
  bottom:max(24px, env(safe-area-inset-bottom));
  z-index:20;
  display:flex; flex-direction:column; align-items:stretch; gap:16px;
}
/* full-bleed fade behind the floating bar: whatever scrolls underneath
   (headline, lede) softens out instead of cutting off hard against the
   input. Both stops are the same hue as --lima so the fade only ever
   changes opacity, never color — a transparent-to-solid-black gradient
   would otherwise pass through a muddy, wrong-hued midpoint. */
.cta-float::before{
  content:'';
  position:fixed; left:0; right:0; bottom:0;
  height:240px;
  background:linear-gradient(to bottom, #E2FF3A00 0%, var(--lima) 70%);
  pointer-events:none;
  z-index:-1; /* the input/button are normal-flow (non-positioned)
    children, which always paint above positioned ones regardless of
    DOM order — this negative z-index is what actually puts the fade
    behind them. */
}
.btn-cta{
  box-sizing:border-box;
  display:flex; flex-direction:row; justify-content:center; align-items:center;
  gap:10px;
  width:100%; height:60px; padding:20px 24px;
  background:#2B00FF; border:3px solid var(--ink);
  box-shadow:0px 6px 0px var(--ink);
  border-radius:var(--radius-full);
  color:var(--paper); font-family:"Unbounded",sans-serif; font-weight:800;
  font-size:16px; line-height:20px; text-transform:uppercase;
  cursor:pointer; transition: transform .1s ease, box-shadow .1s ease;
}
.btn-cta.light {
  background-color: var(--lima);
  color: var(--violeta-deep);
}
.btn-cta svg{ width:18px; height:18px; flex:none; }
.btn-cta:active{ transform:translateY(6px); box-shadow:0px 0px 0px var(--ink); }
.btn-cta:disabled{ opacity:.5; cursor:not-allowed; }
.btn-cta:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.btn-spinner{
  display:none; width:18px; height:18px; flex:none; box-sizing:border-box;
  border:3px solid rgba(255,255,255,.35); border-top-color:var(--paper);
  border-radius:50%; animation:btn-spin .7s linear infinite;
}
@keyframes btn-spin{ to{ transform:rotate(360deg); } }
.guarantee-text{
  width:100%; font-family:"Inter", sans-serif; font-weight:600;
  font-size:12px; line-height:16px; text-align:center;
  color:var(--ink); opacity:.7; margin:0;
}

.btn{
  font-weight:600; font-size:16px; line-height:1;
  border:none; border-radius:var(--radius-full);
  height:56px; padding:0 32px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition: background-color .15s ease, transform .1s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(.98); }
.btn:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.btn-accent{ background:var(--violeta); color:var(--paper); }
.btn-accent:hover{ background:#2f24c9; }
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:#2b2a33; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-on-dark{ background:var(--lima); color:var(--ink); }
.btn-on-dark:hover{ background:#cdec2e; }
.btn-pastel{ 
  background: transparent;
  color: var(--celeste);
 }
.btn-pastel:hover{ color: var(--violeta-deep); }

p.small-print{ font-size:13px; color:var(--ink-muted); margin:0; }

.form-err{ color:var(--violeta); font-size:14px; font-weight:700; margin: 10px 0 0 0; display:none; }
.form-err.on{ display:block; }
.field-error{ box-shadow: 0 0 0 2px #E4392F; }

/* ===== Step 2: violeta band (palette taken from a reference we liked —
   bright blue-violet ground, lima headline, lima pill CTA) ===== */
.step2{
  background:var(--violeta); padding: 64px var(--gutter) 96px var(--gutter);
}
.step2-inner{ max-width:640px; margin:0 auto; }
.step2 .eyebrow{
  font-size:14px; font-weight:600; letter-spacing:0.01em; color:var(--lila); margin-bottom:16px;
}
.step2 h2{
  font-weight:700; font-size:30px; line-height:1.1; letter-spacing:0em; color:var(--lima);
  margin:0 0 40px 0;
}
.step2 .form-err{ color:var(--naranja); }

.field{ margin-bottom:28px; margin-top: 16px; }
.field label{
  display:block; font-size:14px; font-weight:600; color:var(--paper); margin-bottom:8px;
}
.field input[type=text]{
  width:100%; font:inherit; font-family:"Inter",sans-serif; font-size:16px; color:var(--ink);
  background:var(--paper); border:none; border-radius:var(--radius-sm); padding:0 16px;
  height:52px;
}
.field input::placeholder{ color:var(--fog); }
.field input:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--lima); }
.field-hint{ font-size:13px; color:var(--lila); line-height:1.5; margin:10px 0 0 0; }

.checkbox-row{
  display:flex; align-items:center; gap:10px; margin-bottom:28px; cursor:pointer;
  font-size:15px; color:var(--paper);
}
.checkbox-row input{ width:18px; height:18px; accent-color:var(--lima); cursor:pointer; }

/* ---- photo dropzone: same content width as the rest of step 2 ---- */
.dropzone-outer{
  max-width:640px; margin:0 auto 16px auto;
}
.dropzone-outer.field-error {
  border-radius: var(--radius-xl);
}
.dropzone{
  display:flex; width:100%; aspect-ratio:16/9; max-height:70vh;
  border:none; border-radius:var(--radius-xl); padding:0; margin:0; cursor:pointer;
  background:var(--lima-suave);
  position:relative; overflow:hidden;
  font-family:inherit;
}
@media (min-width:1024px){ .dropzone{ aspect-ratio:21/9; } }
.dropzone:focus-visible{ outline:3px solid var(--ink); outline-offset:-3px; }
.dropzone-empty{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; padding:24px;
  border:3px dashed var(--ink); margin:12px;
  border-radius:var(--radius-lg);
}
.dropzone-icon{ font-size:40px; line-height:1; }
.dropzone-title{
  font-family:"Unbounded",sans-serif; font-weight:700; font-size:20px; color:var(--ink);
}
@media (min-width:768px){ .dropzone-title{ font-size:26px; } }
.dropzone-sub{ font-size:14px; color:var(--ink-muted); max-width:36ch; }
.dropzone-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
}
.dropzone-change{
  position:absolute; right:16px; bottom:16px;
  background:var(--ink); color:var(--paper); font-size:13px; font-weight:700;
  padding:8px 16px; border-radius:var(--radius-full);
}
.dropzone:hover .dropzone-change{ background:#2b2a33; }

.step2-actions{ display:flex; flex-direction:column; align-items:stretch; gap:16px; margin-top:24px; }
.paywall-note{ font-size:13px; color:var(--lila); }

.link-out{
  margin-top:32px; background:var(--paper); border-radius:var(--radius-md);
  padding:28px; display:none; flex-direction:column; gap:16px;
}
.link-out.on{ display:flex; }
.link-out-title{
  font-family:"Unbounded",sans-serif; font-weight:700; font-size:18px; color:var(--ink); margin:0;
}
.link-out-row{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.link-out code{ font-size:15px; color:var(--ink); word-break:break-all; width: 100%; }
.copy-btn,
.view-btn{
  background:var(--violeta); color:var(--paper); border:none; border-radius:var(--radius-full);
  padding:10px 20px; font-weight:600; font-size:14px; cursor:pointer; flex-shrink:0;
}
.copy-btn:hover{ background:#2f24c9; }
.view-btn { background: var(--violeta-deep) }
.view-btn:hover { background: var(--violeta) }

/* ===== modal ===== */
.modal-bg{ position:fixed; inset:0; background:rgba(14,14,18,.6); display:none; align-items:center; justify-content:center; padding:24px; z-index:50; }
.modal-bg.on{ display:flex; }
.modal{ background:var(--paper); border-radius:var(--radius-xl); padding:40px; max-width:360px; width:100%; text-align:center; }
.modal h3{ font-family:"Unbounded",sans-serif; font-weight:800; font-size:22px; margin:0 0 8px 0; color:var(--ink); }
.modal p{ color:var(--ink-muted); font-size:15px; line-height:1.5; margin:0 0 24px 0; }
.modal .price{ font-family:"Unbounded",sans-serif; font-size:36px; font-weight:800; color:var(--violeta); margin-bottom:20px; }

/* ===== reveal page (noche band) — photo-first, framed from the start ===== */
.reveal-page{
  min-height:100dvh; background:var(--noche); color:var(--paper);
  display:flex; flex-direction:column;
}
.reveal-header{ padding: 40px var(--gutter) 16px var(--gutter); flex:none; }
.reveal-title{
  font-family:"Unbounded",sans-serif; font-weight:800; font-size:30px; line-height:1.05;
  letter-spacing:-0.01em; text-transform:uppercase;
  color:var(--paper); margin:0; max-width:16ch;
  overflow-wrap:anywhere;
}
.reveal-title .who{ color:var(--lima); }
.reveal-msg{
  font-size:15px; line-height:1.5; color:var(--lila); margin:12px 0 0 0; max-width:44ch;
}

.photo-stage{
  flex:1 1 auto; min-height:0;
  padding: 0 var(--gutter) 28px var(--gutter);
  display:flex; justify-content:center;
}
.photo-wrap{ display:flex; flex-direction:column; width:100%; max-width:560px; position: relative; }
.photo-frame{
  position:relative; width:100%;
  border-radius:var(--radius-xl); overflow:hidden;
  background:var(--fog); flex:none;
}
.photo-frame img{
  display:block; width:100%; height:auto;
}
.photo-frame.is-tall{ max-height: calc(100dvh - 220px); }
.photo-frame.is-tall img{
  height: calc(100dvh - 220px); object-fit:cover;
}

/* the return-badge: always exists, always overlaps the photo's corner */
.return-badge{
  position: absolute;
  top: -34px;
  right: 8px;
  z-index: 3;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--violeta);
  border: 3px solid var(--lima);
  color: var(--paper);
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  cursor: pointer;
  transform: rotate(18deg);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
  transition: transform .15s ease;
}
.return-badge:hover{ transform:rotate(-9deg) scale(1.05); }
.return-badge:focus-visible{ outline:3px solid var(--paper); outline-offset:3px; }
.return-badge[hidden]{ display:none; }

/* the CTA panel: violeta bg + rounded top corners always present on the
   element — invisible against the page when it sits below the photo in
   normal flow (same background as the page around it), and only
   visually distinct when the photo is tall enough that the panel has
   to overlap its bottom edge instead. */
.reveal-cta{
  background:var(--noche); border-radius:0 0 var(--radius-xl) var(--radius-xl);
  padding: 20px 24px 4px 24px;
  text-align:center; flex:none;
}
.reveal-cta p{ color:var(--lila); font-size:14px; margin:0 0 14px 0; }
.photo-frame.is-tall + .reveal-cta{
  margin-top:-36px; position:relative; z-index:2;
  background:var(--violeta);
  padding:24px 24px 20px 24px;
  box-shadow: 0 -16px 28px rgba(21,11,61,.35);
}
.photo-frame.is-tall + .reveal-cta p{ color:var(--paper); }

.reveal-back{ text-align:center; padding: 0 var(--gutter) 24px var(--gutter); flex:none; }
.reveal-back a{ font-size:13px; color:rgba(255,255,255,.5); text-decoration:none; }
.reveal-back a:hover{ text-decoration:underline; }