/* =========================================================
   Ladysoft · Fuerza de Ventas — mobile first
   Paleta tomada de la promo consumer / raspadita.
   Motion: solo transform + opacity (composite-only).
   ========================================================= */

:root {
  --mag: #d6007a;
  --mag-d: #a3005c;
  --mag-l: #ffe3f1;
  --sky: #c6ecf6;
  --blue: #b9d0eb;
  --lav: #a2a2cb;
  --vio: #8f72b8;
  --ink: #2b1838;
  --ink-2: #5c4a6b;
  --line: #e6dcee;
  --white: #fff;
  --yellow: #ffe500;
  --teal: #0f8f8a;
  --teal-d: #0a6b67;
  --ok: #138a4b;
  --warn: #b26a00;
  --err: #c8102e;

  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;
  --pill: 999px;
  --shadow: 0 10px 30px -12px rgba(73, 30, 105, .35);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --tabbar-h: 68px;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
  scroll-behavior: smooth;
}
@media (pointer: fine) { html { overscroll-behavior: none; } }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
  /* Degradé de la promo + grano. El grano es un SVG estático: se pinta una sola vez. */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.35'/></svg>"),
    linear-gradient(180deg, var(--sky) 0%, var(--blue) 28%, var(--lav) 62%, var(--vio) 100%);
  background-color: var(--blue);
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(214, 0, 122, .15);
  overflow-x: hidden;
}
html { scroll-padding-top: 76px; }
html:has(body.is-in) { scroll-padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px); }
body.is-in { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px); }

img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--mag); text-underline-offset: 3px; }
a:hover { color: var(--mag-d); }
p { margin: 0 0 .6em; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p, li { text-wrap: pretty; }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--mag); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--white); padding: 10px 14px; border-radius: var(--r-sm);
  font-weight: 700; transition: transform .2s var(--ease-out);
}
.skip:focus { transform: translateY(72px); }

main {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 8px 18px 32px;
  outline: none;
}

/* ---------------- Topbar ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  max-width: 480px; margin: 0 auto;
  padding: calc(10px + var(--safe-t)) 18px 10px;
}
.topbar-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }
.topbar::before { /* barra sólida al scrollear: solo opacity, sin blur caro */
  content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1;
  background: rgba(255, 255, 255, .96); box-shadow: 0 6px 18px -10px rgba(73, 30, 105, .35);
  opacity: 0; transition: opacity .2s;
  pointer-events: none;
}
.topbar.is-stuck::before { opacity: 1; }
.topbar__logo img { width: 100px; height: auto; filter: drop-shadow(0 4px 8px rgba(163, 0, 92, .25)); }
/* En registro / ingreso no tiene sentido el botón "Ingresar" arriba */
body[data-view="ingresar"] .topbar [data-auth="out"],
body[data-view="registro"] .topbar [data-auth="out"],
body[data-view="recuperar"] .topbar [data-auth="out"] { visibility: hidden; }
.topbar__right { display: flex; gap: 8px; align-items: center; }

.pts-chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  background: var(--white); color: var(--mag);
  padding: 8px 14px; border-radius: var(--pill);
  font-weight: 800; text-decoration: none; box-shadow: var(--shadow);
  min-height: 40px;
}
.pts-chip__n { font-size: 20px; font-variant-numeric: tabular-nums; }
.pts-chip__l { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }

/* ---------------- Tipografía ---------------- */
.display {
  text-transform: uppercase;
  font-weight: 800;
  line-height: .95;
  color: var(--mag);
  display: grid; gap: 6px;
  margin: 14px 0 14px;
}
.display__sm { font-size: clamp(24px, 7.4vw, 32px); letter-spacing: .01em; }
.stroke {
  font-size: clamp(42px, 13.5vw, 60px);
  color: var(--white);
  -webkit-text-stroke: .2em var(--mag);
  paint-order: stroke fill;
  letter-spacing: .005em;
  filter: drop-shadow(0 6px 0 rgba(163, 0, 92, .35));
}
.h1 { font-size: 30px; font-weight: 800; color: var(--mag); text-transform: uppercase; line-height: 1.05; margin-bottom: 6px; }
.h1--light { color: var(--white); -webkit-text-stroke: .22em var(--mag); paint-order: stroke fill; font-size: 34px; margin-top: 4px; filter: drop-shadow(0 4px 0 rgba(163, 0, 92, .3)); }
.h2 { margin: 0 0 14px; text-align: center; }
.h2s { font-size: 20px; font-weight: 800; color: var(--ink); }
.h3 { font-size: 19px; font-weight: 700; color: var(--mag); margin-bottom: 4px; text-transform: uppercase; }
.lead { text-align: center; color: var(--ink); margin: 0 auto 16px; max-width: 34ch; }
.muted { color: var(--ink-2); }
.muted-light { color: var(--ink); opacity: .85; margin-bottom: 14px; }
.center { text-align: center; }
.note { font-size: 14px; color: var(--ink-2); text-align: center; margin-top: 12px; }
.note--light { color: var(--ink); }

.pill {
  display: inline-block; border-radius: var(--pill);
  padding: 8px 20px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .02em;
}
.pill--mag { background: var(--mag); color: var(--white); font-size: 14px; padding: 6px 16px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .7); }
.pill--white { background: var(--white); color: var(--mag); font-size: 22px; box-shadow: var(--shadow); }

/* ---------------- Hero ---------------- */
.hero { text-align: center; padding-top: 6px; }
.hero__prize {
  display: inline-grid; gap: 0;
  background: var(--white); border-radius: var(--r-lg);
  padding: 10px 22px 12px; box-shadow: var(--shadow);
  text-transform: uppercase; font-weight: 600; color: var(--ink);
}
.hero__prize span { font-size: 15px; letter-spacing: .03em; }
.hero__prize strong { font-size: 40px; line-height: 1; color: var(--mag); font-weight: 800; }

/* Visual del inicio: productos + puntos */
.hero__visual { margin: 22px 0 12px; display: grid; justify-items: center; gap: 12px; }
.hero__packs {
  display: grid; grid-template-columns: 1fr 1.15fr 1.4fr; align-items: end; gap: 6px;
  width: min(92%, 420px);
}
.hero__packs img { width: 100%; filter: drop-shadow(0 10px 14px rgba(43, 24, 56, .3)); animation: pack-in .6s var(--ease-out) both; }
.hero__packs img:nth-child(2) { animation-delay: .08s; }
.hero__packs img:nth-child(3) { animation-delay: .16s; }
@keyframes pack-in { from { opacity: 0; transform: translateY(16px); } }
.hero__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hero__badge {
  padding: 5px 12px; border-radius: var(--pill); background: var(--yellow); color: var(--ink);
  font-weight: 800; font-size: 15px; white-space: nowrap;
}
.hero__badge--teal { background: var(--teal); color: var(--white); }

/* Raspadita (en "Cómo sumar"): la capa tapa el resultado, nadie sabe qué premio tiene */
.step__card { margin: 12px 0 2px; }
.step__card figcaption { font-size: 14px; color: var(--ink-2); margin-top: 10px; }
.scratch-card {
  display: block; position: relative; width: min(100%, 300px); container-type: inline-size;
  border-radius: 12px; overflow: hidden; transform: rotate(-2deg);
  box-shadow: 0 14px 28px -14px rgba(73, 30, 105, .55);
}
.scratch-card img { width: 100%; }
.scratch-card__cover {
  position: absolute; left: 24.5%; top: 54.5%; width: 51%; height: 20%;
  border-radius: 8px; display: grid; place-items: center;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .35) 0 2px, transparent 2px 6px),
    linear-gradient(135deg, #cfd3dc, #f4f5f8 45%, #b8bdc8 70%, #e7e9ee);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6);
  color: #6a6f7c; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  font-size: clamp(8px, 4.4cqw, 15px); white-space: nowrap;
}

.hero__dates { font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .03em; margin: 4px 0 18px; }

/* Inicio sin scroll: en celular vertical el hero ocupa justo el alto visible.
   Los productos son lo único flexible (container query); textos y espacios escalan con svh. */
@media (orientation: portrait) and (max-width: 719px) {
  .hero {
    height: calc(100svh - var(--hero-top, 110px)); min-height: 430px;
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(6px, 1.5svh, 16px); padding: 0 0 12px;
  }
  .hero > * { flex: none; margin: 0; }
  .hero .display { gap: clamp(2px, .6svh, 6px); }
  .hero .display__sm { font-size: clamp(20px, min(7.4vw, 4.2svh), 32px); }
  .hero .stroke { font-size: clamp(34px, min(13.5vw, 7.4svh), 60px); }
  .hero__prize { padding: clamp(6px, 1.1svh, 10px) 22px clamp(8px, 1.3svh, 12px); }
  .hero__prize span { font-size: clamp(13px, 2.2svh, 15px); }
  .hero__prize strong { font-size: clamp(28px, min(10.5vw, 5.4svh), 40px); }
  .hero__visual {
    flex: 1 1 0; min-height: 0; width: 100%; container-type: size;
    align-content: center; gap: clamp(6px, 1.2svh, 12px);
  }
  .hero__packs { width: min(92cqw, 420px, calc((100cqh - 40px) * 2.6)); }
  .hero__badges { flex-wrap: nowrap; gap: 6px; }
  .hero__badge { font-size: clamp(11px, 3.6vw, 15px); padding: 4px 10px; }
  .hero__dates { font-size: clamp(14px, 2.3svh, 17px); }
  .hero .stack { width: 100%; gap: clamp(8px, 1.4svh, 14px); }
  .hero .btn--lg { min-height: clamp(48px, 7svh, 56px); }
}
/* Teléfonos bajitos: "Ingresar" ya está arriba, sacamos el botón duplicado */
@media (orientation: portrait) and (max-width: 719px) and (max-height: 640px) {
  .hero .btn--light { display: none; }
}

/* ---------------- Botones ---------------- */
.btn {
  --bg: var(--white); --fg: var(--mag);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border: 0; border-radius: var(--pill);
  background: var(--bg); color: var(--fg);
  font: inherit; font-weight: 700; font-size: 17px; text-decoration: none;
  cursor: pointer; user-select: none;
  transition: transform .14s var(--ease-out), opacity .2s, background-color .2s, color .2s;
}
.btn:hover { color: var(--fg); filter: brightness(1.04); }
.btn:active { transform: scale(.97); }
.btn[disabled], .btn[aria-busy="true"] { opacity: .65; cursor: progress; }
.btn--primary { --bg: var(--mag); --fg: var(--white); box-shadow: 0 8px 0 -2px var(--mag-d), 0 14px 26px -12px rgba(163, 0, 92, .7); }
.btn--primary:hover { --bg: #e3088a; }
.btn--primary:active { transform: translateY(3px) scale(.99); box-shadow: 0 4px 0 -2px var(--mag-d); }
.btn--teal { --bg: var(--teal); --fg: var(--white); box-shadow: 0 8px 0 -2px var(--teal-d); }
.btn--teal:active { transform: translateY(3px); box-shadow: 0 4px 0 -2px var(--teal-d); }
.btn--light { --bg: rgba(255, 255, 255, .92); --fg: var(--mag); box-shadow: inset 0 0 0 2px var(--mag); }
.btn--ghost { --bg: rgba(255, 255, 255, .85); --fg: var(--mag); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 15px; }
.btn--lg { min-height: 56px; font-size: 19px; text-transform: uppercase; letter-spacing: .02em; }
.btn--block { width: 100%; }
.btn .spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.linklike { background: none; border: 0; padding: 0; color: var(--mag); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-sm { font-size: 15px; font-weight: 600; white-space: nowrap; }

.stack { display: grid; gap: 14px; }
.row-between { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }

/* ---------------- Bloques ---------------- */
.block { margin-top: 44px; }
.block--tight { margin-top: 28px; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.step {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start;
  background: var(--white); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow);
}
.step p { margin: 0 0 4px; color: var(--ink-2); }
.step__n {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mag); color: var(--white); font-weight: 800; font-size: 22px;
}
.tag {
  display: inline-block; margin-top: 6px !important;
  padding: 4px 12px; border-radius: var(--pill); font-weight: 800; font-size: 15px;
}
.tag--pts { background: var(--yellow); color: var(--ink) !important; }
.tag--big { font-size: 17px; }

.combos { display: grid; gap: 14px; }
.combo { background: var(--white); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.combo__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--mag); color: var(--white); padding: 12px 16px;
}
.combo__head h3 { font-size: 22px; font-weight: 800; text-transform: uppercase; color: var(--white); }
.combo__badge {
  background: var(--yellow); color: var(--ink); border-radius: var(--pill);
  padding: 4px 12px; font-weight: 800; font-size: 14px; white-space: nowrap;
}
.combo ul { list-style: none; margin: 0; padding: 6px 16px 10px; }
.combo li { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); }
.combo li:last-child { border-bottom: 0; }
.combo__u { min-width: 36px; font-weight: 800; color: var(--mag); font-variant-numeric: tabular-nums; }
.combo__d { flex: 1; min-width: 0; }
.combo__c { color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.combo__foot { padding: 10px 16px; background: var(--mag-l); font-weight: 700; color: var(--mag-d); font-size: 15px; }

.prizes { display: grid; gap: 12px; }
.prize {
  background: var(--white); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow);
  text-align: center;
}
.prize h3 { font-size: 16px; text-transform: uppercase; color: var(--ink-2); font-weight: 700; letter-spacing: .03em; }
.prize__amount { font-size: 34px; font-weight: 800; color: var(--mag); line-height: 1.1; margin: 4px 0; font-variant-numeric: tabular-nums; }
.prize__amount--3 { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 22px; }
.prize__amount--3 span { background: var(--mag-l); border-radius: var(--pill); padding: 2px 12px; }
.prize p:not(.prize__amount) { color: var(--ink-2); font-size: 15px; margin: 0; }
.prize--hl { background: var(--mag); color: var(--white); }
.prize--hl h3, .prize--hl p:not(.prize__amount) { color: rgba(255, 255, 255, .9); }
.prize--hl .prize__amount { color: var(--white); }
.prize--hl .prize__amount--3 span { background: rgba(255, 255, 255, .18); }

.faq { display: grid; gap: 10px; }
.faq details { background: var(--white); border-radius: var(--r); box-shadow: var(--shadow); }
.faq summary {
  list-style: none; cursor: pointer; padding: 16px 48px 16px 18px; font-weight: 700; position: relative;
  min-height: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; translate: 0 -50%;
  font-size: 26px; color: var(--mag); font-weight: 600; line-height: 1;
  transition: transform .2s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 18px 16px; margin: 0; color: var(--ink-2); }

.legal {
  max-width: 480px; margin: 0 auto; padding: 8px 18px calc(28px + var(--safe-b));
  font-size: 12.5px; color: var(--white); text-align: center; line-height: 1.4;
  text-shadow: 0 1px 2px rgba(43, 24, 56, .35);
}
.legal a { color: var(--white); }
.legal__bo { margin: 14px 0 0; }
.legal__bo a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px;
  font-weight: 600; text-decoration: none; letter-spacing: .01em;
  transition: background-color .15s ease, border-color .15s ease;
}
.legal__bo a:hover { background-color: rgba(255, 255, 255, .14); border-color: var(--white); }
.legal__bo a:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

/* ---------------- Formularios ---------------- */
.card {
  background: var(--white); border-radius: var(--r-lg);
  padding: 22px 18px; box-shadow: var(--shadow);
}
.form { display: grid; gap: 18px; margin-top: 14px; }
.field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend { font-weight: 700; font-size: 16px; color: var(--ink); padding: 0; }
.field legend { margin-bottom: 6px; }
.field__hint { font-size: 14px; color: var(--ink-2); margin: 0; }
.field__err { font-size: 14px; color: var(--err); margin: 0; font-weight: 600; min-height: 0; }
.field__err:empty { display: none; }
.fstep {
  display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 6px;
  border-radius: 50%; background: var(--mag); color: var(--white); font-size: 14px; vertical-align: 1px;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], select {
  width: 100%; min-height: 52px; padding: 12px 14px;
  font: inherit; font-size: 17px; /* ≥16px evita el zoom automático de iOS */
  color: var(--ink); background-color: #fbf8fd;
  border: 2px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .15s, background-color .15s;
  appearance: none; -webkit-appearance: none;
}
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23d6007a' stroke-width='2.4' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}
textarea {
  width: 100%; min-height: 120px; padding: 12px 14px; resize: vertical;
  font: inherit; font-size: 17px; line-height: 1.4; color: var(--ink); background-color: #fbf8fd;
  border: 2px solid var(--line); border-radius: var(--r-sm); transition: border-color .15s, background-color .15s;
}
textarea:focus-visible { outline: none; border-color: var(--mag); background-color: var(--white); box-shadow: 0 0 0 4px rgba(214, 0, 122, .15); }
.field.is-err textarea { border-color: var(--err); background-color: #fff6f7; }
.opt { font-weight: 500; color: var(--ink-2); }
input::placeholder, textarea::placeholder { color: #a596b3; }
input:focus-visible, select:focus-visible { outline: none; border-color: var(--mag); background-color: var(--white); box-shadow: 0 0 0 4px rgba(214, 0, 122, .15); }
.field.is-err input, .field.is-err select { border-color: var(--err); background-color: #fff6f7; }
.field.is-ok input { border-color: #9fd8b8; }

.pass { position: relative; }
.pass input { padding-right: 72px; }
.pass__toggle {
  position: absolute; right: 6px; top: 6px; bottom: 6px; padding: 0 12px;
  border: 0; border-radius: 10px; background: var(--mag-l); color: var(--mag-d);
  font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
}

.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 4px 0; }
.check input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--mag); flex: none; }

/* Selector de distribuidor */
.dist-list {
  display: grid; gap: 6px; max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px; margin-top: 4px; border-radius: var(--r-sm); background: #fbf8fd; border: 2px solid var(--line);
  content-visibility: auto;
}
.dist-opt {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 10px; cursor: pointer; background: var(--white);
  min-height: 52px;
}
.dist-opt input { width: 20px; height: 20px; margin: 0; accent-color: var(--mag); }
.dist-opt__n { font-weight: 600; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.dist-opt__m { display: block; font-size: 13px; color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.dist-opt:has(input:checked) { background: var(--mag-l); box-shadow: inset 0 0 0 2px var(--mag); }
.dist-empty { padding: 14px; color: var(--ink-2); text-align: center; }
.field.is-err .dist-list { border-color: var(--err); }

/* Raspaditas */
.addrow { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.addrow .btn { min-height: 52px; border-radius: var(--r-sm); box-shadow: none; }
.chips { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.chip {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
  padding: 8px 8px 8px 14px; border-radius: var(--r-sm);
  background: var(--mag-l); animation: pop-in .26s var(--ease-out) both;
}
.chip__n { font-weight: 800; font-size: 20px; color: var(--mag-d); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.chip__x {
  width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--white); color: var(--mag);
  font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
@keyframes pop-in { from { opacity: 0; transform: scale(.92) translateY(-4px); } }

/* Upload */
.upload { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.upload__btn {
  display: grid; place-items: center; text-align: center; min-height: 64px; padding: 10px;
  border-radius: var(--r-sm); border: 2px dashed var(--mag); background: var(--mag-l);
  color: var(--mag-d); font-weight: 700; cursor: pointer; line-height: 1.15;
  transition: transform .14s var(--ease-out);
}
.upload__btn:active { transform: scale(.97); }
.upload__btn:focus-within { outline: 3px solid var(--mag); outline-offset: 2px; }
.upload__btn--alt { border-style: solid; border-color: var(--line); background: var(--white); color: var(--ink); }
.upload__preview {
  grid-column: 1 / -1; position: relative; border-radius: var(--r-sm); overflow: hidden;
  background: #f1eaf6; border: 2px solid var(--line);
}
.upload__preview img { width: 100%; max-height: 320px; object-fit: contain; }
.upload__meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; font-size: 14px; background: var(--white); }
.upload__meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload__pdf { padding: 28px 12px; text-align: center; font-weight: 700; color: var(--mag-d); }
.upload.has-file .upload__btn { min-height: 48px; }

.ocr {
  display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r-sm);
  background: #f3f9ff; border: 1px solid #cfe3f5; font-size: 15px;
}
.ocr strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ocr--ok { background: #effaf3; border-color: #bfe6cf; }
.ocr--warn { background: #fff8eb; border-color: #f2d49b; }
.ocr__row { display: flex; align-items: center; gap: 8px; }
.ocr .spin { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--mag); border-right-color: transparent; animation: spin .7s linear infinite; flex: none; }

.summary {
  padding: 14px; border-radius: var(--r-sm); background: var(--yellow); color: var(--ink);
  font-weight: 700; text-align: center;
}

.checklist { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.checklist li { position: relative; padding-left: 28px; color: var(--ink-2); font-size: 15px; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--teal) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='10'><path d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/11px no-repeat;
}
.grid2 { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 400px) { .grid2 { grid-template-columns: 1fr 1fr; gap: 10px; } }
.geo { display: grid; gap: 6px; justify-items: start; }

.back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-weight: 700; color: var(--mag-d); text-decoration: none;
}
.back::before { content: "‹"; font-size: 28px; line-height: 0; }

/* ---------------- Panel ---------------- */
.hello { font-size: 28px; font-weight: 800; color: var(--mag); margin-top: 6px; line-height: 1.1; overflow-wrap: anywhere; }
.hello__dist { color: var(--ink-2); margin-bottom: 14px; font-weight: 500; }

.score {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: end;
  background: var(--mag); color: var(--white); border-radius: var(--r-lg); padding: 20px;
  box-shadow: 0 18px 40px -18px rgba(163, 0, 92, .9);
}
.score__label { grid-column: 1 / -1; margin: 0 0 -4px; white-space: nowrap; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; opacity: .9; }
.score__n { font-size: 68px; font-weight: 800; line-height: .9; margin: 0; }
.score__side { text-align: right; font-size: 15px; white-space: nowrap; }
.score__side p { margin: 0 0 2px; }
.score__side strong { font-size: 20px; }
.meter {
  grid-column: 1 / -1; height: 12px; border-radius: var(--pill); background: rgba(255, 255, 255, .25);
  overflow: hidden; margin-top: 8px;
}
.meter__fill {
  display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--yellow);
  transform-origin: left center; transform: scaleX(0);
  transition: transform .9s var(--ease-out);
}
.score__goal { grid-column: 1 / -1; margin: 0; font-size: 15px; opacity: .95; }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.action {
  display: grid; gap: 4px; padding: 16px; border-radius: var(--r); text-decoration: none;
  background: var(--white); color: var(--ink); box-shadow: var(--shadow);
  transition: transform .14s var(--ease-out);
}
.action:active { transform: scale(.97); }
.action:hover { color: var(--ink); }
.action__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: var(--white); margin-bottom: 6px; }
.action--mag .action__icon { background: var(--mag); }
.action--teal .action__icon { background: var(--teal); }
.action__t { font-weight: 800; font-size: 17px; line-height: 1.15; }
.action__s { font-size: 14px; color: var(--ink-2); }

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.item {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center;
  background: var(--white); border-radius: var(--r-sm); padding: 12px; box-shadow: var(--shadow);
}
.item__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--white); font-weight: 800; }
.item__ic--venta { background: var(--mag); }
.item__ic--exhibicion { background: var(--teal); }
.item__main { min-width: 0; }
.item__t { font-weight: 700; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item__s { font-size: 13px; color: var(--ink-2); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.item__r { font-size: 13px; color: var(--err); margin: 4px 0 0; white-space: normal; }
.badge { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: var(--pill); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.badge--pendiente { background: #fff1cc; color: var(--warn); }
.badge--validada { background: #dbf3e4; color: var(--ok); }
.badge--rechazada { background: #ffe0e5; color: var(--err); }
.item__pts { display: block; text-align: right; font-weight: 800; color: var(--mag); font-size: 15px; margin-top: 4px; font-variant-numeric: tabular-nums; }

.empty {
  background: rgba(255, 255, 255, .85); border-radius: var(--r); padding: 20px; text-align: center; color: var(--ink-2);
}
.empty strong { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }

.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rank li {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center;
  background: var(--white); border-radius: var(--r-sm); padding: 10px 14px; box-shadow: var(--shadow);
}
.rank__pos { font-weight: 800; color: var(--mag); font-size: 18px; font-variant-numeric: tabular-nums; }
.rank__n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank__p { font-weight: 800; font-variant-numeric: tabular-nums; }
.rank li.is-me { background: var(--yellow); }
.rank__d { display: block; font-size: 13px; color: var(--ink-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.rank li.rank__gap { display: block; text-align: center; background: none; box-shadow: none; padding: 0; min-height: 0; color: var(--ink-2); line-height: 1; }
.row-between--sp { margin-top: 18px; }
.tabs.tabs--rank { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rank-info { background: rgba(255, 255, 255, .7); border-radius: var(--r); padding: 12px 16px; margin-bottom: 12px; font-size: 15px; }
.rank-info p { margin: 0; }
.rank-info__t { font-weight: 800; color: var(--mag); margin-bottom: 2px !important; }
.demo-box { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); display: grid; gap: 10px; font-size: 15px; color: var(--ink-2); }
.demo-box p { margin: 0; }
.mock-strip a { color: var(--yellow); font-weight: 700; }
.rank__tag {
  display: table; margin-top: 3px; padding: 1px 8px; border-radius: var(--pill);
  background: var(--teal); color: var(--white); font-size: 12px; font-weight: 700; letter-spacing: .01em;
}
.rank__tag--podio { background: var(--mag); }
.faq-more { margin: 14px 0 0; text-align: center; font-weight: 600; }

.tabs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
  margin: 10px 0 14px; padding: 4px; border-radius: var(--pill); background: rgba(255, 255, 255, .6);
}
.tabs a {
  display: grid; place-items: center; white-space: nowrap; text-decoration: none; padding: 0 4px; min-height: 44px;
  border-radius: var(--pill); color: var(--ink); font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis;
  transition: background-color .2s, color .2s;
}
.tabs a[aria-current="page"] { background: var(--mag); color: var(--white); }

/* ---------------- Tabbar ---------------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 480px; margin: 0 auto;
  height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: var(--white); border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 30px -12px rgba(73, 30, 105, .35);
}
.tabbar a {
  display: grid; justify-items: center; align-content: end; gap: 2px; padding-bottom: 10px;
  text-decoration: none; color: var(--ink-2); font-size: 12px; font-weight: 700;
}
.tabbar a[aria-current="page"] { color: var(--mag); }
.tabbar__main { position: relative; }
.tabbar__plus {
  width: 54px; height: 54px; margin-top: -30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--mag); color: var(--white);
  font-size: 34px; font-weight: 500; line-height: 1;
  box-shadow: 0 0 0 5px var(--white), 0 10px 20px -6px rgba(163, 0, 92, .7);
  transition: transform .14s var(--ease-out);
}
.tabbar__main:active .tabbar__plus { transform: scale(.92); }

/* ---------------- Sheet (dialog) ---------------- */
.sheet {
  position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 480px;
  max-height: 90dvh; padding: 0; border: 0; border-radius: 26px 26px 0 0;
  background: var(--white); color: var(--ink); overflow: hidden; overscroll-behavior: contain;
}
.sheet::backdrop { background: rgba(43, 24, 56, .5); }
.sheet[open] { animation: sheet-up .38s var(--ease-out) both; }
.sheet[open]::backdrop { animation: fade .3s ease-out both; }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }
.sheet__body { padding: 28px 22px calc(22px + var(--safe-b)); text-align: center; display: grid; gap: 10px; }
.sheet__icon { display: grid; place-items: center; color: var(--ok); }
.sheet__icon svg { animation: pop .45s var(--ease-out) .12s both; }
.sheet__check { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .4s ease-out .35s forwards; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.sheet.is-err .sheet__icon { color: var(--err); }
.sheet p { color: var(--ink-2); }

.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i {
  position: absolute; top: -10px; width: 9px; height: 14px; border-radius: 2px;
  animation: fall 1.4s cubic-bezier(.2, .6, .4, 1) forwards;
}
@keyframes fall { to { transform: translate3d(var(--dx), 420px, 0) rotate(var(--r)); opacity: 0; } }

/* ---------------- Toast ---------------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + var(--safe-b) + 14px); z-index: 50;
  max-width: min(440px, calc(100vw - 32px)); padding: 12px 18px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--white); font-weight: 600; text-align: center;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  transition: transform .25s var(--ease-out), opacity .25s;
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }

/* ---------------- Transición entre vistas ---------------- */
.view.is-entering { animation: view-in .32s var(--ease-out) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------------- Tablet (720px+) ---------------- */
@media (min-width: 720px) {
  body { font-size: 18px; }
  main { max-width: 760px; padding: 16px 28px 48px; }
  .topbar { max-width: 760px; padding-left: 28px; padding-right: 28px; }
  .topbar__logo img { width: 128px; }
  .legal { max-width: 760px; }
  .hero { padding-top: 24px; }
  .hero .stack { max-width: 420px; margin: 0 auto; }
  .combos, .prizes { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .prizes .prize:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .lead { max-width: 60ch; }
  .faq { max-width: 760px; margin: 0 auto; }
  .cta-end { max-width: 420px; margin-left: auto; margin-right: auto; }

  /* formularios y vistas internas: columna cómoda, centrada */
  .view[data-view="registro"] .card, .view[data-view="ingresar"] .card, .view[data-view="recuperar"] .card { max-width: 560px; margin: 0 auto; }
  .view[data-view="venta"], .view[data-view="exhibicion"] { max-width: 620px; margin: 0 auto; }
  .view[data-view="historial"], .view[data-view="ranking"] { max-width: 700px; margin: 0 auto; }

  /* la barra de abajo flota como una píldora */
  .tabbar { bottom: 14px; max-width: 520px; border-radius: 22px; }
  body.is-in { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 40px); }
  .toast { bottom: calc(var(--tabbar-h) + var(--safe-b) + 34px); }
}

/* ---------------- Notebook (1024px+) ---------------- */
@media (min-width: 1024px) {
  main { max-width: 1160px; padding: 12px 40px 56px; }
  .topbar { max-width: 1160px; padding-left: 40px; padding-right: 40px; }
  .topbar__logo img { width: 140px; }
  .legal { max-width: 1160px; padding-left: 40px; padding-right: 40px; }
  .block { margin-top: 72px; }

  /* Hero en dos columnas: mensaje a la izquierda, productos a la derecha */
  .hero {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    grid-template-areas: "pill visual" "title visual" "prize visual" "dates visual" "cta visual";
    grid-template-rows: auto auto auto auto 1fr;
    align-content: center; column-gap: 56px; text-align: left;
    min-height: clamp(520px, calc(100svh - var(--hero-top, 120px) - 24px), 720px);
    padding-top: 12px;
  }
  .hero > .pill { grid-area: pill; justify-self: start; }
  .hero .display { grid-area: title; margin: 18px 0 22px; }
  .hero .display__sm { font-size: 44px; }
  .hero .stroke { font-size: 92px; }
  .hero__prize { grid-area: prize; justify-self: start; padding: 12px 26px 14px; }
  .hero__prize strong { font-size: 48px; }
  .hero__dates { grid-area: dates; margin: 22px 0 20px; font-size: 18px; }
  .hero .stack { grid-area: cta; grid-auto-flow: column; justify-content: start; align-self: start; max-width: none; margin: 0; }
  .hero .stack .btn { padding: 0 30px; }
  .hero__visual { grid-area: visual; align-self: center; margin: 0; gap: 22px; position: relative; isolation: isolate; padding: 40px 0; }
  .hero__visual::before { /* halo blanco detrás de los productos */
    content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 112%; aspect-ratio: 1;
    transform: translate(-50%, -50%); border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, .45) 60%, rgba(255, 255, 255, 0));
  }
  .hero__packs { width: 100%; max-width: 540px; gap: 10px; }
  .hero__badge { font-size: 17px; padding: 7px 16px; }

  .h2 .pill--white { font-size: 26px; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
  .step { grid-template-columns: 1fr; gap: 12px; padding: 24px; align-content: start; }
  .combos { gap: 20px; }
  .prizes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
  .prizes .prize:last-child:nth-child(odd) { grid-column: auto; }
  .prize { display: flex; flex-direction: column; justify-content: center; padding: 26px 22px; }

  /* Panel: puntos y accesos lado a lado; últimas cargas y ranking lado a lado */
  .view[data-view="panel"]:not([hidden]) {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 24px;
    grid-template-areas: "hello hello" "dist dist" "score actions" "ult rank" "foot foot";
  }
  .view[data-view="panel"] .hello { grid-area: hello; }
  .view[data-view="panel"] .hello__dist { grid-area: dist; }
  .view[data-view="panel"] .score { grid-area: score; }
  .view[data-view="panel"] .actions { grid-area: actions; margin-top: 0; }
  .view[data-view="panel"] .panel__ult { grid-area: ult; }
  .view[data-view="panel"] .panel__rank { grid-area: rank; }
  .view[data-view="panel"] .panel__foot { grid-area: foot; margin-top: 24px; }
}

/* ---------------- Movimiento reducido ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .confetti { display: none; }
}

/* ---------------- Maqueta ---------------- */
.mock-strip { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: calc(6px + var(--safe-t)) 12px 6px; background: var(--ink); color: var(--white); font-size: 13px; font-weight: 600; text-align: center; }