/* ============================================================================
   Boxo Boost — /googlereviews
   Hereda tokens, .btn, .section-*, .modal-*, .field, .brief-* y .footer de
   /c/styles.css + /c/v2.css. Aquí solo vive lo específico de esta página.
   ========================================================================= */

:root{
  --gg-blue:   #4285F4;
  --gg-red:    #EA4335;
  --gg-yellow: #FBBC05;
  --gg-green:  #34A853;
  --star:      #FBBC05;
  /* Paleta del dashboard (Command Center) para el mockup del tablet */
  --cc-page:   #F8F9FC;
  --cc-card:   #FFFFFF;
  --cc-line:   #E5E7EB;
  --cc-ink:    #111827;
  --cc-ink-2:  #6B7280;
  --cc-ink-3:  #9CA3AF;
  --cc-blue:   #2B3FE8;
  --cc-green:  #10B981;
}

/* La nav de /c tiene el logo a 96px; aquí reusamos tal cual. */

/* ============ HERO ============ */
.boost-hero{
  position: relative;
  padding: 108px 0 40px;
  overflow: hidden;
}
.boost-hero .hero-canvas{
  position:absolute; inset:0; pointer-events:none; z-index:0;
}
.boost-hero-grid{
  position: relative; z-index: 1;
  display:grid; grid-template-columns: 1.02fr .98fr; gap: 48px; align-items:center;
}
.boost-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding: 7px 15px 7px 11px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  letter-spacing: .01em; margin-bottom: 20px;
}
.boost-eyebrow .pill{
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--primary); padding: 3px 8px; border-radius: 999px;
}
.boost-title{
  font-size: clamp(34px, 4.3vw, 57px); line-height: 1.0; letter-spacing: -0.035em;
  font-weight: 700; margin: 0 0 20px;
}
.boost-title .stars-inline{
  display:inline-flex; gap:2px; vertical-align: baseline;
  transform: translateY(2px);
}
.boost-title .stars-inline svg{ width: .5em; height: .5em; fill: var(--star); }
.boost-sub{
  font-size: 18px; line-height: 1.55; color: var(--ink-soft);
  max-width: 520px; margin: 0 0 28px;
}
.boost-hero-ctas{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.boost-hero-ctas .row{ display:flex; gap:12px; flex-wrap:wrap; }
.boost-cta-caption{ font-size: 13px; color: var(--ink-faint); }
.boost-stats{
  display:flex; gap: 34px; margin-top: 32px; flex-wrap: wrap;
}
.boost-stats .stat-num{
  display:block; font-size: 26px; font-weight: 700; letter-spacing: -0.03em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.boost-stats .stat-lbl{ display:block; font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; max-width: 150px; line-height:1.35; }

/* ---- Escena del hero: mostrador + stand QR + ficha de Google ---- */
.scene{ position: relative; height: 520px; }
.counter{
  position:absolute; bottom: 58px; left: 0; right: 0; height: 22px;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(175deg, #F0EAE0, #DCD1C2 55%, #C9BCA9);
  box-shadow: 0 16px 40px rgba(60,40,20,.20), inset 0 1px 0 rgba(255,255,255,.75);
}
.counter::after{
  content:""; position:absolute; top:100%; left: 4%; right: 4%; height: 62px;
  background: linear-gradient(180deg, rgba(120,95,65,.22), rgba(120,95,65,0));
  filter: blur(9px); border-radius: 50%;
}

/* Stand acrílico */
.qr-stand{
  position: absolute; z-index: 2; left: 3%; bottom: 72px;
  width: 206px;
  transform: rotate(-1.2deg);
}
.qr-stand-body{
  position: relative;
  background: linear-gradient(160deg, #FFFFFF, #F2F4FA);
  border: 1px solid rgba(17,20,39,.09);
  border-radius: 16px 16px 6px 6px;
  padding: 16px 16px 18px;
  box-shadow: 0 22px 46px rgba(17,20,39,.20), inset 0 1px 0 #fff;
  text-align:center;
}
.qr-stand-head{
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 8px;
}
.qr-stand-title{
  font-size: 17px; font-weight: 700; line-height: 1.12; letter-spacing: -.02em;
  color: #111427; margin-bottom: 12px;
}
.qr-stand-title em{ font-family:'Instrument Serif', serif; font-style:italic; font-weight:400; }
.qr-box{
  position: relative; width: 116px; height: 116px; margin: 0 auto 12px;
  background: #fff; border-radius: 12px; padding: 8px;
  box-shadow: 0 2px 10px rgba(17,20,39,.10);
}
.qr-box svg{ width:100%; height:100%; display:block; }
/* Línea de escaneo */
.qr-scan{
  position:absolute; left: 8px; right: 8px; height: 2px; top: 10px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  box-shadow: 0 0 12px 2px color-mix(in oklch, var(--primary) 55%, transparent);
  border-radius: 2px;
  animation: qrScan 2.6s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes qrScan{
  0%,8%   { transform: translateY(0);    opacity: 0; }
  14%     { opacity: 1; }
  50%     { transform: translateY(96px); opacity: 1; }
  86%     { transform: translateY(0);    opacity: 1; }
  94%,100%{ opacity: 0; }
}
.qr-stand-foot{
  font-size: 11.5px; color: #565D75; line-height: 1.35;
}
.qr-stand-nfc{
  display:inline-flex; align-items:center; gap:5px; margin-top: 9px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--primary); background: var(--primary-soft);
  padding: 4px 9px; border-radius: 999px;
}
/* Base del stand */
.qr-stand-base{
  width: 78%; height: 12px; margin: -2px auto 0;
  background: linear-gradient(180deg, #E7E9F2, #C9CDDD);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 18px rgba(17,20,39,.18);
}

/* Ondas NFC */
.nfc-waves{
  position:absolute; right: -14px; top: 46%; width: 54px; height: 54px;
  pointer-events:none;
}
.nfc-waves span{
  position:absolute; inset:0; margin:auto; width: 14px; height: 14px;
  border: 2px solid var(--primary); border-radius: 50%;
  opacity: 0; animation: nfcPing 2.4s ease-out infinite;
}
.nfc-waves span:nth-child(2){ animation-delay: .5s; }
.nfc-waves span:nth-child(3){ animation-delay: 1s; }
@keyframes nfcPing{
  0%   { transform: scale(.6); opacity: .85; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* Ficha de Google flotante */
.gcard{
  position: absolute; z-index: 3;
  top: 2px; right: -10px; width: 256px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 16px 17px;
  box-shadow: var(--shadow-lg);
}
.gcard-top{ display:flex; align-items:center; gap:9px; margin-bottom: 12px; }
.gcard-g{ width: 20px; height: 20px; flex:none; }
.gcard-biz{ font-size: 13.5px; font-weight: 600; letter-spacing:-.01em; }
.gcard-cat{ font-size: 11px; color: var(--ink-faint); }
.gcard-score{ display:flex; align-items:flex-end; gap:10px; }
.gcard-num{
  font-size: 40px; font-weight: 700; line-height: .9; letter-spacing: -.04em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.gcard-right{ padding-bottom: 3px; }
.gstars{ display:flex; gap: 2px; }
.gstars svg{ width: 15px; height: 15px; }
.gstars .s-off{ fill: var(--line); }
.gstars .s-on{ fill: var(--star); }
.gcard-count{ font-size: 11.5px; color: var(--ink-faint); margin-top: 3px; }
.gcard-delta{
  display:inline-flex; align-items:center; gap:5px; margin-top: 13px;
  font-size: 11.5px; font-weight: 600;
  background: #ECFDF5; color: #0B7A57; padding: 5px 10px; border-radius: 999px;
}
.gcard-spark{ display:flex; align-items:flex-end; gap: 4px; height: 34px; margin-top: 13px; }
.gcard-spark i{
  flex:1; background: var(--primary-soft); border-radius: 3px 3px 1px 1px;
  height: 12%; transition: height .8s cubic-bezier(.22,1,.36,1);
}
.gcard-spark i:last-child{ background: var(--primary); }

/* Burbuja de reseña entrante */
.rev-pop{
  position:absolute; z-index: 4; right: 2px; bottom: 34px; width: 228px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 12px 13px; box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(10px) scale(.96);
  transition: opacity .45s, transform .45s cubic-bezier(.22,1,.36,1);
}
.rev-pop.on{ opacity: 1; transform: translateY(0) scale(1); }
.rev-head{ display:flex; align-items:center; gap:8px; margin-bottom: 7px; }
.rev-av{
  width: 26px; height: 26px; border-radius: 50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size: 11.5px; font-weight: 700; color:#fff;
}
.rev-name{ font-size: 12px; font-weight: 600; }
.rev-stars{ display:flex; gap:1px; }
.rev-stars svg{ width: 10px; height: 10px; fill: var(--star); }
.rev-txt{ font-size: 12px; color: var(--ink-soft); line-height: 1.4; }

/* ============ TIRA DE NÚMEROS ============ */
.impact-strip{
  background: var(--bg-soft); border-radius: 40px; margin: 0 28px; padding: 40px 0;
}
.impact-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 0 40px;
}
.impact-item{ text-align:center; }
.impact-num{
  font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; letter-spacing: -.035em;
  font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--primary);
  line-height: 1;
}
.impact-lbl{ font-size: 13px; color: var(--ink-soft); margin-top: 8px; line-height: 1.4; }
.impact-src{ font-size: 10.5px; color: var(--ink-faint); margin-top: 5px; }

/* ============ LOS 2 CAMINOS ============ */
.paths-switch{
  display:grid; grid-template-columns: 1fr 1fr; gap: 12px;
  max-width: 720px; margin: 0 auto 36px;
}
.path-tab{
  text-align:left; padding: 16px 18px; border-radius: 18px;
  border: 1.5px solid var(--line); background: var(--card);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.path-tab:hover{ transform: translateY(-2px); }
.path-tab.on{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 14%, transparent), var(--shadow-md);
}
.path-tab-kicker{
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 6px;
}
.path-tab-title{ font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 4px; }
.path-tab-sub{ font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }

.path-panel{ display:none; }
.path-panel.on{ display:block; }

.path-stage{
  display:grid; grid-template-columns: 340px 1fr; gap: 48px; align-items:center;
  background: var(--card); border: 1px solid var(--line); border-radius: 36px;
  padding: 44px 46px; box-shadow: var(--shadow-md);
}

/* Teléfono del juego */
.gphone{
  width: 286px; height: 580px; margin: 0 auto; position: relative;
  background: #0A0C14; border-radius: 44px; padding: 10px;
  box-shadow: 0 34px 70px rgba(17,20,39,.30), inset 0 0 0 2px #2B3040;
}
.gphone-screen{
  width:100%; height:100%; border-radius: 35px; overflow: hidden;
  background: #F5F6FB; position: relative;
  display:flex; flex-direction:column;
}
.gphone-notch{
  position:absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 24px; background:#0A0C14; border-radius: 999px; z-index: 6;
}
.gs{
  position:absolute; inset:0; padding: 46px 20px 22px;
  display:flex; flex-direction:column;
  opacity: 0; visibility: hidden;
  transition: opacity .38s ease, transform .38s cubic-bezier(.22,1,.36,1);
  transform: translateY(10px);
  background: #F5F6FB;
}
.gs.on{ opacity: 1; visibility: visible; transform: none; }
.gs-brand{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  background:#fff; border:1px solid #E3E6EF; border-radius:999px;
  padding: 4px 11px 4px 4px; font-size: 11.5px; font-weight: 600; color:#111427;
  box-shadow: 0 2px 8px rgba(17,20,39,.05);
}
.gs-brand .av{
  width:20px;height:20px;border-radius:50%;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;
}
.gs-h{
  font-size: 25px; font-weight: 700; line-height: 1.06; letter-spacing: -.03em;
  color:#111427; margin: 18px 0 8px;
}
.gs-h em{ font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; color:var(--primary); }
.gs-p{ font-size: 13px; color:#565D75; line-height:1.45; margin: 0 0 16px; }
.gs-btn{
  margin-top:auto; width:100%; padding: 13px; border-radius: 14px;
  background: var(--primary); color:#fff; font-weight:600; font-size:14px;
  box-shadow: 0 8px 20px color-mix(in oklch, var(--primary) 34%, transparent);
}
.gs-btn.ghost{ background:#fff; color:#111427; border:1px solid #E3E6EF; box-shadow:none; }

/* Ruleta */
.wheel-wrap{ position:relative; width: 200px; height: 200px; margin: 6px auto 16px; }
.wheel{
  width:100%; height:100%; border-radius:50%;
  box-shadow: 0 14px 34px rgba(17,20,39,.20), inset 0 0 0 7px #fff;
  transition: transform 3.6s cubic-bezier(.16,.84,.26,1);
}
.wheel-pin{
  position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;
  border-top:17px solid #111427; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); z-index:3;
}
.wheel-hub{
  position:absolute; inset:0; margin:auto; width:46px;height:46px;border-radius:50%;
  background:#fff; box-shadow:0 3px 10px rgba(17,20,39,.22);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:var(--primary);letter-spacing:.06em;
}

/* Premio */
.prize-card{
  background:#fff; border-radius: 20px; padding: 20px 18px; text-align:center;
  box-shadow: 0 14px 34px rgba(17,20,39,.12); border:1px solid #E3E6EF;
  margin: 10px 0 14px;
}
.prize-big{
  font-size: 46px; font-weight:800; letter-spacing:-.04em; color: var(--primary); line-height:1;
}
.prize-sub{ font-size: 12.5px; color:#565D75; margin-top:6px; }
.prize-fine{ font-size: 10.5px; color:#8D94AA; margin-top:8px; }

/* Chat de WhatsApp */
.wa-screen{ background:#E9E2DA; }
.wa-top{
  margin: -46px -20px 12px; padding: 42px 14px 10px;
  background:#075E54; color:#fff; display:flex; align-items:center; gap:9px;
}
.wa-top .av{ width:28px;height:28px;border-radius:50%;background:#fff3;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700; }
.wa-top .nm{ font-size:13px;font-weight:600; }
.wa-top .st{ font-size:10px;opacity:.75; }
.wa-bubble{
  background:#fff; border-radius: 12px 12px 12px 3px; padding: 10px 12px;
  font-size: 12.5px; line-height:1.45; color:#111427; max-width: 92%;
  box-shadow: 0 1px 2px rgba(0,0,0,.12); margin-bottom: 9px;
  opacity:0; transform: translateY(8px); transition: opacity .4s, transform .4s;
}
.wa-bubble.on{ opacity:1; transform:none; }
.wa-bubble .t{ display:block; font-size:9.5px; color:#8D94AA; text-align:right; margin-top:4px; }
.wa-coupon{
  background: linear-gradient(140deg, var(--primary), #5B6BF0);
  color:#fff; border-radius: 14px; padding: 13px 14px; margin-top: 4px;
}
.wa-coupon .lbl{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; opacity:.8; }
.wa-coupon .val{ font-size: 27px; font-weight:800; letter-spacing:-.03em; line-height:1.1; }
.wa-coupon .code{ font-family:'JetBrains Mono',monospace; font-size:10.5px; opacity:.85; margin-top:3px; }

/* Pantalla de reseña */
.gs-review{ background:#fff; }
.star-row{ display:flex; justify-content:center; gap: 7px; margin: 18px 0 14px; }
.star-row svg{ width: 34px; height: 34px; fill: #E3E6EF; transition: fill .3s, transform .3s cubic-bezier(.34,1.56,.64,1); }
.star-row svg.lit{ fill: var(--star); transform: scale(1.12); }

/* Progreso de pasos del flujo */
.flow-steps{ display:flex; flex-direction:column; gap: 4px; }
.flow-step{
  display:flex; gap: 15px; padding: 15px 17px; border-radius: 16px;
  border: 1px solid transparent; transition: background .3s, border-color .3s;
  cursor: pointer; text-align:left; width:100%;
}
.flow-step.on{ background: var(--bg-soft); border-color: var(--line); }
.flow-num{
  width: 30px; height: 30px; flex:none; border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  font-size: 13px; font-weight: 700;
  background: var(--card); border:1px solid var(--line); color: var(--ink-faint);
  transition: background .3s, color .3s, border-color .3s;
}
.flow-step.on .flow-num{ background: var(--primary); color:#fff; border-color: var(--primary); }
.flow-t{ display:block; font-size: 15.5px; font-weight: 600; letter-spacing:-.015em; margin-bottom: 3px; }
.flow-d{ display:block; font-size: 13px; color: var(--ink-soft); line-height: 1.45; }

/* Panel del camino 2 */
.nfc-stage{
  display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:center;
  background: var(--card); border:1px solid var(--line); border-radius: 36px;
  padding: 44px 46px; box-shadow: var(--shadow-md);
}
.nfc-visual .qr-stand{ position: relative; left: auto; bottom: auto; }
.nfc-visual{
  position:relative; height: 400px; border-radius: 26px;
  background: radial-gradient(120% 90% at 50% 10%, var(--primary-soft), var(--bg-soft));
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.nfc-phone{
  position:absolute; right: 44px; top: 96px; width: 128px; height: 244px;
  background:#0A0C14; border-radius: 22px; padding: 5px;
  box-shadow: 0 22px 44px rgba(17,20,39,.28);
  transform: rotate(-9deg);
  animation: nfcTap 4s ease-in-out infinite;
}
@keyframes nfcTap{
  0%,100%{ transform: rotate(-9deg) translate(0,0); }
  42%    { transform: rotate(-9deg) translate(-30px, 14px); }
  58%    { transform: rotate(-9deg) translate(-30px, 14px); }
}
.nfc-phone-screen{
  width:100%;height:100%;border-radius:18px;background:#fff;overflow:hidden;
  padding: 14px 11px; display:flex; flex-direction:column; gap:7px;
}
.nfc-mini-g{ display:flex; align-items:center; gap:6px; }
.nfc-mini-g b{ font-size:10.5px; }
.nfc-mini-stars{ display:flex; gap:1.5px; }
.nfc-mini-stars svg{ width:11px;height:11px;fill:var(--star); }
.nfc-mini-box{ background:#F2F4F8; border-radius:8px; height:9px; }
.nfc-mini-cta{
  margin-top:auto; background: var(--primary); color:#fff; border-radius:9px;
  text-align:center; padding:7px; font-size:9.5px; font-weight:600;
}

.bullet-list{ list-style:none; padding:0; margin: 0; display:flex; flex-direction:column; gap: 13px; }
.bullet-list li{ display:flex; gap: 12px; align-items:flex-start; font-size: 14.5px; line-height:1.5; }
.bullet-list .bi{
  width: 24px; height: 24px; flex:none; border-radius: 8px; margin-top: 1px;
  display:flex; align-items:center; justify-content:center; font-size: 12px;
  background: var(--primary-soft); color: var(--primary); font-weight: 700;
}
.bullet-list li > span:last-child{ display:block; }
.bullet-list li strong{ font-weight: 600; display:block; }
.bullet-list li span.d{ color: var(--ink-soft); }

/* ============ BENEFICIOS ============ */
.ben-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.ben-card{
  background: var(--card); border:1px solid var(--line); border-radius: 24px;
  padding: 26px 24px; box-shadow: var(--shadow-sm);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.ben-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.ben-ico{
  width: 42px; height: 42px; border-radius: 13px; margin-bottom: 16px;
  display:flex; align-items:center; justify-content:center; font-size: 19px;
}
.ben-card h3{ font-size: 17.5px; font-weight: 700; letter-spacing:-.02em; margin: 0 0 8px; }
.ben-card p{ font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0; }

/* ============ SUCCESS STORIES ============ */
.story-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.story{
  background: var(--card); border:1px solid var(--line); border-radius: 26px;
  padding: 26px 24px; box-shadow: var(--shadow-sm); display:flex; flex-direction:column;
}
.story-top{ display:flex; align-items:center; gap: 11px; margin-bottom: 18px; }
.story-av{
  width: 40px; height: 40px; border-radius: 13px; flex:none; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px;
}
.story-biz{ font-size: 14.5px; font-weight: 600; letter-spacing:-.01em; }
.story-loc{ font-size: 11.5px; color: var(--ink-faint); }
.story-jump{
  display:flex; align-items:center; gap: 12px; margin-bottom: 16px;
  background: var(--bg-soft); border-radius: 16px; padding: 13px 15px;
}
.story-jump .from,.story-jump .to{ text-align:center; }
.story-jump .k{ font-size: 9.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); }
.story-jump .v{
  font-size: 21px; font-weight: 700; letter-spacing:-.03em;
  font-family:'JetBrains Mono',monospace;
}
.story-jump .to .v{ color: #0B7A57; }
.story-jump .arrow{ flex:1; height:2px; background: var(--line); position:relative; border-radius:2px; }
.story-jump .arrow::after{
  content:""; position:absolute; right:-1px; top:-3px;
  border-left: 7px solid var(--line); border-top:4px solid transparent; border-bottom:4px solid transparent;
}
.story q{ font-size: 14px; color: var(--ink-soft); line-height: 1.6; quotes:none; display:block; }
.story-meta{
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  display:flex; gap: 18px; font-size: 11.5px; color: var(--ink-faint);
}
.story-meta b{ display:block; color: var(--ink); font-size: 14px; font-weight:700; font-family:'JetBrains Mono',monospace; }

/* ============ DASHBOARD EN TABLET ============ */
.tablet-wrap{ display:flex; justify-content:center; padding: 8px 0 0; }
.tablet{
  width: min(980px, 100%); background:#0A0C14; border-radius: 30px; padding: 16px;
  box-shadow: 0 40px 90px rgba(17,20,39,.30), inset 0 0 0 2px #2B3040;
  position: relative;
}
.tablet::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom: 5px; width: 74px; height: 4px; border-radius: 999px; background:#2B3040;
}
.tablet-screen{
  background: var(--cc-page); border-radius: 18px; overflow:hidden;
  color: var(--cc-ink); font-size: 13px;
}
.dash-bar{
  display:flex; align-items:center; justify-content:space-between; gap: 14px;
  background:#fff; border-bottom:1px solid var(--cc-line); padding: 13px 18px;
}
.dash-bar-l{ display:flex; align-items:center; gap: 11px; }
.dash-logo{ height: 26px; width: auto; display:block; }
.dash-tag{
  font-size: 9.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--cc-ink-3);
  border-left: 1px solid var(--cc-line); padding-left: 11px;
}
.dash-live{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--cc-line); border-radius: 8px; padding: 5px 11px;
  font-size: 11.5px; color:#374151;
}
.dash-live::before{
  content:""; width:7px;height:7px;border-radius:50%;background:var(--cc-green);
  box-shadow:0 0 0 0 rgba(16,185,129,.5); animation: livePulse 2s infinite;
}
@keyframes livePulse{
  0%{ box-shadow:0 0 0 0 rgba(16,185,129,.45); }
  70%{ box-shadow:0 0 0 7px rgba(16,185,129,0); }
  100%{ box-shadow:0 0 0 0 rgba(16,185,129,0); }
}
.dash-body{ padding: 16px 18px 20px; display:flex; flex-direction:column; gap: 14px; }
.kpi-row{ display:grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.kpi{
  background: var(--cc-card); border:1px solid var(--cc-line); border-radius: 12px;
  padding: 14px 16px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.kpi-lbl{ font-size: 10px; font-weight:500; color: var(--cc-ink-2); text-transform:uppercase; letter-spacing:.07em; }
.kpi-val{ font-size: 27px; font-weight: 700; letter-spacing:-.03em; margin-top: 6px; line-height:1; }
.kpi-dl{ font-size: 11.5px; font-weight:500; color: var(--cc-green); margin-top: 6px; }
.dash-cols{ display:grid; grid-template-columns: 1.55fr 1fr; gap: 12px; }
.panel{
  background: var(--cc-card); border:1px solid var(--cc-line); border-radius: 12px;
  padding: 15px 17px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.panel-h{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom: 13px; }
.panel-t{ font-size: 13px; font-weight: 600; }
.panel-s{ font-size: 10.5px; color: var(--cc-ink-3); }
.spark-svg{ width:100%; height: 132px; display:block; overflow: visible; }
.spark-line{
  fill:none; stroke: var(--cc-blue); stroke-width: 2.4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray: 900; stroke-dashoffset: 900;
}
.tablet.in .spark-line{ animation: drawLine 1.8s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes drawLine{ to{ stroke-dashoffset: 0; } }
.spark-area{ fill: url(#ggrad); opacity: 0; }
.tablet.in .spark-area{ animation: fadeArea .9s .7s forwards; }
@keyframes fadeArea{ to{ opacity: 1; } }
.spark-dot{ fill:#fff; stroke: var(--cc-blue); stroke-width: 2.4; opacity:0; }
.tablet.in .spark-dot{ animation: fadeArea .4s 1.5s forwards; }
.axis-lbl{ font-size: 9px; fill: var(--cc-ink-3); font-family:'Space Grotesk',sans-serif; }

.stars-dist{ display:flex; flex-direction:column; gap: 8px; }
.sd-row{ display:flex; align-items:center; gap: 9px; font-size: 11px; color: var(--cc-ink-2); }
.sd-row .n{ width: 26px; display:flex; align-items:center; gap:2px; }
.sd-row .n svg{ width:9px;height:9px;fill:var(--star); }
.sd-bar{ flex:1; height: 8px; background:#F2F4F8; border-radius:999px; overflow:hidden; }
.sd-bar i{ display:block; height:100%; background: var(--star); border-radius:999px; width: 0; transition: width 1.1s cubic-bezier(.22,1,.36,1); }
.sd-row .p{ width: 30px; text-align:right; font-variant-numeric: tabular-nums; }

.funnel{ display:flex; flex-direction:column; gap: 7px; }
.fn-row{ display:flex; align-items:center; gap: 10px; font-size: 11px; }
.fn-lbl{ width: 92px; color: var(--cc-ink-2); flex:none; }
.fn-track{ flex:1; height: 22px; background:#F2F4F8; border-radius: 6px; overflow:hidden; }
.fn-track i{
  display:block; height:100%; border-radius:6px; width:0;
  background: linear-gradient(90deg, var(--cc-blue), #6B7BF5);
  transition: width 1.2s cubic-bezier(.22,1,.36,1);
}
.fn-val{ width: 36px; text-align:right; font-weight:600; font-variant-numeric: tabular-nums; }

.bars{ display:flex; align-items:flex-end; gap: 7px; height: 108px; }
.bars i{
  flex:1; border-radius: 4px 4px 2px 2px; height: 0;
  background: var(--cc-blue); opacity:.22;
  transition: height 1s cubic-bezier(.22,1,.36,1);
}
.bars i.hot{ opacity: 1; }
.bars-x{ display:flex; gap:7px; margin-top:7px; }
.bars-x span{ flex:1; text-align:center; font-size: 9px; color: var(--cc-ink-3); }

.dash-note{
  text-align:center; font-size: 12.5px; color: var(--ink-faint); margin-top: 18px;
}

/* ============ INCLUYE ============ */
.incl-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 14px; max-width: 900px; margin: 0 auto; }
.incl{
  display:flex; gap: 13px; align-items:flex-start;
  background: var(--card); border:1px solid var(--line); border-radius: 18px; padding: 18px 20px;
}
.incl .ck{
  width: 22px;height:22px;flex:none;border-radius:50%;margin-top:1px;
  background: var(--primary); color:#fff; display:flex;align-items:center;justify-content:center;
  font-size: 12px; font-weight: 700;
}
.incl b{ display:block; font-size: 14.5px; font-weight:600; letter-spacing:-.01em; margin-bottom: 3px; }
.incl span{ font-size: 13px; color: var(--ink-soft); line-height:1.45; }

/* ============ FORM MODAL (extras sobre .brief-*) ============ */
.boost-reward-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.reward-opt{
  border: 1.5px solid var(--line); background: var(--card); border-radius: 16px;
  padding: 16px 10px; text-align:center; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.reward-opt:hover{ transform: translateY(-2px); }
.reward-opt.is-on{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 14%, transparent);
}
.reward-pct{ font-size: 25px; font-weight: 800; letter-spacing:-.03em; color: var(--primary); line-height:1; }
.reward-lbl{ font-size: 11px; color: var(--ink-soft); margin-top: 5px; }
.game-opt{
  width:100%; display:flex; gap: 13px; align-items:center; text-align:left;
  border: 1.5px solid var(--line); background: var(--card); border-radius: 16px;
  padding: 14px 16px; margin-bottom: 9px; transition: border-color .2s, box-shadow .2s;
}
.game-opt.is-on{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 14%, transparent);
}
.game-opt .gi{ font-size: 22px; width: 40px; height:40px; flex:none; border-radius: 13px;
  background: var(--primary-soft); display:flex; align-items:center; justify-content:center; }
.game-opt b{ display:block; font-size: 14.5px; font-weight:600; }
.game-opt span{ font-size: 12.5px; color: var(--ink-soft); }
.game-opt .tagx{
  margin-left:auto; flex:none; font-size: 10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding: 4px 8px; border-radius: 999px;
}
.tagx.ready{ background:#ECFDF5; color:#0B7A57; }
.tagx.soon{ background: var(--bg-soft); color: var(--ink-faint); }
.field-hint{ font-size: 12px; color: var(--ink-faint); margin-top: 6px; line-height:1.4; }
.boost-recap{
  background: var(--bg-soft); border-radius: 14px; padding: 13px 15px; margin-bottom: 16px;
  font-size: 13px; color: var(--ink-soft); line-height:1.6;
}
.boost-recap b{ color: var(--ink); }
.b-err{ color:#E53935; font-size:12.5px; margin-top:8px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1040px){
  .boost-hero-grid{ grid-template-columns: 1fr; gap: 24px; }
  .scene{ height: 460px; }
  .gcard{ right: 4px; }
  .path-stage, .nfc-stage{ grid-template-columns: 1fr; gap: 32px; padding: 32px 26px; }
  .ben-grid, .story-grid{ grid-template-columns: 1fr 1fr; }
  .impact-grid{ grid-template-columns: repeat(2,1fr); gap: 28px 20px; }
}
@media (max-width: 760px){
  .boost-hero{ padding: 88px 0 24px; }
  .boost-title{ font-size: 33px; }
  .boost-sub{ font-size: 15.5px; }
  .boost-stats{ gap: 22px; }
  .boost-stats .stat-num{ font-size: 21px; }
  /* La escena va ARRIBA del copy, igual que el hero de /c en móvil. */
  .boost-hero-grid{ display:flex; flex-direction:column; }
  .scene{ order: -1; height: 356px; width: 100%; margin-bottom: 10px; }
  .counter{ bottom: 46px; height: 18px; }
  .qr-stand{ left: 0; bottom: 58px; width: 156px; }
  .qr-stand-body{ padding: 12px 12px 14px; }
  .qr-stand-head{ font-size: 9.5px; margin-bottom: 6px; }
  .qr-stand-title{ font-size: 14px; margin-bottom: 9px; }
  .qr-box{ width: 86px; height: 86px; padding: 6px; margin-bottom: 9px; }
  .qr-scan{ left:6px; right:6px; }
  @keyframes qrScan{
    0%,8%{ transform: translateY(0); opacity:0; }
    14%{ opacity:1; }
    50%{ transform: translateY(70px); opacity:1; }
    86%{ transform: translateY(0); opacity:1; }
    94%,100%{ opacity:0; }
  }
  .qr-stand-foot{ font-size: 10px; }
  .qr-stand-nfc{ font-size: 9px; padding: 3px 7px; margin-top: 7px; }
  .nfc-waves{ right: -10px; width: 40px; height: 40px; }
  .gcard{ width: 160px; right: 0; top: 0; padding: 11px 12px; border-radius: 15px; }
  .gcard-g{ width:16px; height:16px; }
  .gcard-biz{ font-size: 12px; }
  .gcard-cat{ font-size: 9.5px; }
  .gcard-num{ font-size: 27px; }
  .gstars svg{ width: 11px; height: 11px; }
  .gcard-count{ font-size: 10px; }
  .gcard-delta{ font-size: 10px; padding: 4px 8px; margin-top: 9px; }
  .gcard-spark{ height: 20px; margin-top: 9px; }
  .rev-pop{ right: 0; width: 160px; bottom: 24px; padding: 9px 10px; border-radius: 13px; }
  .rev-av{ width:22px; height:22px; font-size:10px; }
  .rev-name{ font-size: 11px; }
  .rev-txt{ font-size: 10.5px; }

  /* Stats en 3 columnas — apiladas se comen media pantalla. */
  .boost-stats{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
  .boost-stats .stat-num{ font-size: 19px; }
  .boost-stats .stat-lbl{ font-size: 11px; max-width: none; }
  .boost-hero-ctas .row{ width: 100%; }
  .boost-hero-ctas .row .btn{ flex: 1 1 auto; justify-content: center; }
  .paths-switch{ grid-template-columns: 1fr; }
  .ben-grid, .story-grid, .incl-grid{ grid-template-columns: 1fr; }
  .impact-strip{ margin: 0 14px; border-radius: 28px; }
  .impact-grid{ padding: 0 20px; }
  .path-stage, .nfc-stage{ border-radius: 26px; padding: 26px 18px; }
  .gphone{ width: 258px; height: 524px; }
  .nfc-stage{ grid-template-columns: 1fr; }
  .nfc-visual{ height: 320px; }
  .nfc-phone{ right: 24px; top: 70px; }
  .tablet{ padding: 10px; border-radius: 20px; }
  .kpi-row{ grid-template-columns: 1fr 1fr; }
  .dash-cols{ grid-template-columns: 1fr; }
  .kpi-val{ font-size: 22px; }
  .modal{ padding: 24px 20px !important; }
  .modal-actions{ flex-direction: column-reverse; }
  .modal-actions .btn{ width: 100%; }
  .boost-reward-grid{ gap: 8px; }
  .reward-pct{ font-size: 21px; }
  .reward-opt{ padding: 14px 6px; }
}

/* ============================================================================
   RESTAURAR EL MOVIMIENTO
   /c/styles.css cierra con un bloque "NO-MOTION OVERRIDE" (línea ~4799) que
   apaga TODAS las animaciones y transiciones del sitio con
   `*, *::before, *::after { animation:none !important; transition:none !important }`.
   Eso es a propósito en /c (variante sin motion para preview de IG), pero esta
   página vive de lo visual.

   `*` tiene especificidad 0, así que basta con prefijar `html` para ganar el
   desempate entre dos !important. Se restaura solo lo que esta página usa —
   los planetas del hero siguen congelados igual que en /c.
   ========================================================================= */

/* --- Animaciones propias --- */
html .qr-scan        { animation: qrScan 2.6s cubic-bezier(.45,0,.55,1) infinite !important; }
html .nfc-waves span { animation: nfcPing 2.4s ease-out infinite !important; }
html .nfc-waves span:nth-child(2){ animation-delay: .5s !important; }
html .nfc-waves span:nth-child(3){ animation-delay: 1s !important; }
html .nfc-phone      { animation: nfcTap 4s ease-in-out infinite !important; }
html .dash-live::before { animation: livePulse 2s infinite !important; }
html .tablet.in .spark-line { animation: drawLine 1.8s cubic-bezier(.22,1,.36,1) forwards !important; }
html .tablet.in .spark-area { animation: fadeArea .9s .7s forwards !important; }
html .tablet.in .spark-dot  { animation: fadeArea .4s 1.5s forwards !important; }
html .modal-backdrop { animation: fadeIn .3s !important; }
html .modal          { animation: modalIn .4s cubic-bezier(.2,.8,.2,1) !important; }

/* --- Transiciones propias --- */
html .wheel     { transition: transform 3.6s cubic-bezier(.16,.84,.26,1) !important; }
html .gs        { transition: opacity .38s ease, transform .38s cubic-bezier(.22,1,.36,1) !important; }
html .wa-bubble { transition: opacity .4s, transform .4s !important; }
html .rev-pop   { transition: opacity .45s, transform .45s cubic-bezier(.22,1,.36,1) !important; }
html .star-row svg { transition: fill .3s, transform .3s cubic-bezier(.34,1.56,.64,1) !important; }
html .gcard-spark i { transition: height .8s cubic-bezier(.22,1,.36,1) !important; }
html .sd-bar i   { transition: width 1.1s cubic-bezier(.22,1,.36,1) !important; }
html .fn-track i { transition: width 1.2s cubic-bezier(.22,1,.36,1) !important; }
html .bars i     { transition: height 1s cubic-bezier(.22,1,.36,1) !important; }
html .path-tab   { transition: border-color .25s, box-shadow .25s, transform .25s !important; }
html .flow-step  { transition: background .3s, border-color .3s !important; }
html .flow-num   { transition: background .3s, color .3s, border-color .3s !important; }
html .ben-card   { transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s !important; }
html .game-opt, html .reward-opt { transition: border-color .2s, box-shadow .2s, transform .2s !important; }

/* --- Componentes heredados de /c --- */
html .btn        { transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, background .3s !important; }
html .faq-a      { transition: max-height .4s cubic-bezier(.2,.8,.2,1) !important; }
html .faq-icon::after { transition: transform .3s !important; }
html .brief-progress-bar-fill { transition: width .4s cubic-bezier(.22,1,.36,1) !important; }

/* Quien pidió menos movimiento lo recupera: aquí sí respetamos la preferencia. */
@media (prefers-reduced-motion: reduce){
  html *, html *::before, html *::after{
    animation: none !important;
    transition: none !important;
  }
}

/* ===== Pantalla 1 del formulario: cómo funciona ===== */
.how-steps{ display:flex; flex-direction:column; margin: 4px 0 20px; }
.how-row{ display:flex; gap:14px; align-items:center; }
.how-ico{
  position:relative; flex:none; width:44px; height:44px; border-radius:14px;
  background:#EEF0FD; color:var(--cc-blue); display:flex; align-items:center; justify-content:center;
}
.how-ico svg{ width:22px; height:22px; }
.how-num{
  position:absolute; top:-5px; right:-5px; width:18px; height:18px; border-radius:50%;
  background:var(--cc-blue); color:#fff; font-size:10.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:2px solid #fff;
}
.how-txt b{ display:block; font-size:14.5px; font-weight:600; line-height:1.35; }
.how-txt span{ display:block; font-size:12.5px; color:var(--ink-soft); line-height:1.45; margin-top:1px; }
.how-link{ width:2px; height:14px; margin-left:21px; background:linear-gradient(#DDE1F5,#EEF0FD); border-radius:2px; }

/* ===== Mockups de la confirmación ===== */
.mock-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:16px auto 18px; max-width:330px; }
.mock{ margin:0; background:var(--cc-page); border:1px solid var(--cc-line); border-radius:12px; padding:8px 6px 7px; }
.mock svg{ width:100%; height:auto; display:block; }
.mock figcaption{ font-size:10.5px; color:var(--ink-soft); text-align:center; margin-top:5px; line-height:1.3; }
@media (max-width:520px){
  .how-ico{ width:40px; height:40px; border-radius:12px; }
  .how-link{ margin-left:19px; }
}

/* Juegos: básicos vs premium */
.tier-head{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-soft);
  margin:16px 0 8px; display:flex; align-items:baseline; gap:8px; }
.tier-head:first-of-type{ margin-top:6px; }
.tier-head span{ font-size:11px; font-weight:700; text-transform:none; letter-spacing:0; color:var(--brand);
  background:var(--brand-soft); border-radius:20px; padding:2px 9px; }
.tier-note{ margin-top:12px; background:var(--brand-soft); border-radius:12px; padding:11px 13px; font-size:12.5px;
  color:var(--ink); line-height:1.45; }
.game-opt .tagx.ready{ background:#EAFBF3; color:#047857; }