/* Kigo design system — colores de kigo-consoles/kigo-theme.css + kigo-zones tokens */
:root{
  --orange:#FF6900; --orange-600:#E15700; --orange-300:#FEA778;
  --ink:#8D2F00; --tint:#FFF0E8; --tint-2:#FFF8F4; --wash:#FEF9F8;
  --text:#0F172B; --muted:#62748E; --muted-2:#5C5C5C; --border:#E3E4E8;
  --surface:#F5F5F5; --green:#3FC168; --red:#E62C2C; --slate:#90A1B9;
  --radius:12px; --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; scroll-padding-top:78px}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--text); background:#fff; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.9em;
  background:var(--tint); color:var(--ink); padding:.1em .38em; border-radius:5px}

/* ── nav ─────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:28px;
  padding:14px 32px; background:rgba(255,255,255,.88); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-brand img{display:block}
.nav-links{display:flex; gap:22px; margin-left:auto}
.nav-links a{
  color:var(--muted-2); text-decoration:none; font-size:13.5px; font-weight:600;
  letter-spacing:.01em; transition:color .18s;
}
.nav-links a:hover{color:var(--orange)}
.nav-badge{
  font-size:11.5px; font-weight:700; color:var(--ink); background:var(--tint);
  padding:6px 12px; border-radius:100px; white-space:nowrap;
}

/* ── hero ────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; background:linear-gradient(180deg,#fff 0%,var(--tint-2) 100%);
  border-bottom:1px solid var(--border)}
.hero::before{content:""; position:absolute; width:900px; height:900px; right:-260px; top:-320px; border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,105,0,.14),transparent); pointer-events:none}
.hero-in{position:relative; max-width:var(--maxw); margin:0 auto; padding:72px 32px 80px;
  display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:center; min-height:calc(100vh - 63px)}
.hero-left{min-width:0}
.kicker{
  font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange); margin-bottom:14px;
}
h1{font-size:clamp(46px,6.4vw,92px); line-height:.98; font-weight:900; letter-spacing:-.045em; margin-bottom:22px; text-wrap:balance}
h1 span{color:var(--orange)}
.hero-sub{font-size:clamp(18px,1.8vw,24px); font-weight:600; color:var(--text); line-height:1.35; max-width:26ch}
.hero-meta{margin-top:14px; font-size:15.5px; color:var(--muted-2); max-width:44ch}
.hero-stats{display:grid; grid-template-columns:repeat(3,1fr); margin-top:40px; border-top:1px solid var(--border)}
.hero-stats div{padding:18px 18px 0 0}
.hero-stats div + div{padding-left:18px; border-left:1px solid var(--border)}
.hero-stats dt{font-size:clamp(24px,2.6vw,34px); font-weight:800; letter-spacing:-.03em; color:var(--text); font-variant-numeric:tabular-nums}
.hero-stats dd{font-size:13px; color:var(--muted); margin-top:4px; line-height:1.4}
.hero-right{min-width:0}
.scan{position:relative; margin:0; border-radius:22px; overflow:visible}
.scan-media{position:relative; overflow:hidden; border-radius:22px; box-shadow:0 40px 90px -40px rgba(15,23,43,.6)}
.scan img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover}
.scan-box{position:absolute; left:57.6%; top:53.8%; width:15%; height:15%; border-radius:6px;
  background:
    linear-gradient(var(--orange),var(--orange)) top left/18px 3px no-repeat,
    linear-gradient(var(--orange),var(--orange)) top left/3px 18px no-repeat,
    linear-gradient(var(--orange),var(--orange)) top right/18px 3px no-repeat,
    linear-gradient(var(--orange),var(--orange)) top right/3px 18px no-repeat,
    linear-gradient(var(--orange),var(--orange)) bottom left/18px 3px no-repeat,
    linear-gradient(var(--orange),var(--orange)) bottom left/3px 18px no-repeat,
    linear-gradient(var(--orange),var(--orange)) bottom right/18px 3px no-repeat,
    linear-gradient(var(--orange),var(--orange)) bottom right/3px 18px no-repeat;
  box-shadow:0 0 0 9999px rgba(15,23,43,.18); overflow:hidden}
.scan-box i{position:absolute; left:6%; right:6%; top:0; height:2px; background:var(--orange);
  box-shadow:0 0 12px 2px rgba(255,105,0,.8); animation:scanline 2.4s ease-in-out infinite}
@keyframes scanline{0%,100%{top:8%} 50%{top:88%}}
.readout{position:absolute; left:-28px; bottom:-34px; width:min(270px,62%); background:#fff; border:1px solid var(--border);
  border-radius:16px; padding:16px 18px; box-shadow:0 30px 60px -28px rgba(15,23,43,.45)}
.readout-head{display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--orange); margin-bottom:10px}
.readout .dot{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(63,193,104,.18)}
.readout dl{display:grid; gap:7px}
.readout dl div{display:flex; justify-content:space-between; align-items:center; gap:12px}
.readout dt{font-size:12.5px; color:var(--muted)}
.readout dd{font-size:14.5px; font-weight:700; display:flex; align-items:center; gap:6px}
.readout dd.plate{font-family:ui-monospace,'SF Mono',Menlo,monospace; letter-spacing:.06em; background:var(--tint);
  color:var(--ink); padding:2px 8px; border-radius:6px}
.swatch{width:12px; height:12px; border-radius:50%; background:#111; border:1px solid var(--border)}
@media (prefers-reduced-motion:reduce){ .scan-box i{animation:none; top:50%} }

/* ── sections ───────────────────────────────────────── */
.sec{max-width:var(--maxw); margin:0 auto; padding:104px 32px}
.sec.alt{background:var(--wash)}
.sec h2{font-size:clamp(28px,3.6vw,44px); font-weight:800; letter-spacing:-.03em; margin-bottom:14px}
.lead{color:var(--muted-2); font-size:16.5px; margin-bottom:34px; max-width:70ch}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.bullets{list-style:none; display:flex; flex-direction:column; gap:14px}
.bullets li{position:relative; padding-left:26px; font-size:16.5px; color:var(--text)}
.bullets li::before{
  content:""; position:absolute; left:0; top:.62em; width:9px;height:9px;
  border-radius:50%; background:var(--orange);
}
.bullets.two{columns:2; column-gap:56px}
.bullets.tight li{font-size:15px}
.bullets li b{font-weight:700}
.cards{display:grid; gap:14px}
.cards.wide{grid-template-columns:repeat(3,1fr); margin-top:26px}
.card{
  position:relative; background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 22px 20px 26px; overflow:hidden;
}
.card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--orange)}
.card b{display:block; font-size:30px; font-weight:800; color:var(--orange); letter-spacing:-.02em; line-height:1.15}
.card span{display:block; font-size:13px; color:var(--muted-2); margin-top:5px}
.cards.wide.two{grid-template-columns:repeat(2,1fr)}
.note{
  margin-top:30px; padding:16px 20px; background:var(--tint); border-radius:var(--radius);
  font-size:15px; color:var(--ink);
}

/* ── layers ─────────────────────────────────────────── */
.layers{display:grid; gap:12px; margin-top:30px}
.layer{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 24px; display:grid; grid-template-columns:300px 1fr; gap:26px; align-items:center;
}
.layer-head{display:flex; align-items:center; gap:11px; flex-wrap:wrap}
.layer-num{
  width:28px;height:28px;border-radius:8px;background:var(--orange);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:14px;
}
.layer-head b{font-size:16.5px}
.layer p{color:var(--muted-2); font-size:15px}

/* ── tabla ──────────────────────────────────────────── */
.table-wrap{margin-top:30px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:#fff}
table{width:100%; border-collapse:collapse; font-size:14.5px}
th{background:var(--orange); color:#fff; text-align:left; padding:13px 18px; font-weight:700; font-size:13px; letter-spacing:.02em}
td{padding:13px 18px; border-top:1px solid var(--border)}
tbody tr:nth-child(even){background:var(--tint-2)}
td:first-child{font-weight:600; color:var(--ink)}

/* ── mock de la app ─────────────────────────────────── */
.phone{
  background:#fff; border:1px solid var(--border); border-radius:22px; overflow:hidden;
  box-shadow:0 24px 60px -34px rgba(15,23,43,.45); max-width:400px;
}
.phone-top{background:var(--wash); border-bottom:1px solid var(--border); padding:15px 20px; font-weight:700; font-size:15px}
.prow{display:flex; align-items:center; gap:12px; padding:15px 20px; border-bottom:1px solid var(--border)}
.prow span{width:78px; font-size:13.5px; color:var(--muted)}
.prow b{flex:1; font-size:16px; text-align:right}
.prow em{font-style:normal; font-size:11.5px; font-weight:700; color:#8A5A00; background:#FFF4D6; padding:3px 8px; border-radius:6px}
.prow.warn{background:#FFFCF5}
.pen{width:26px;height:26px;border-radius:7px;background:var(--tint); display:inline-block; position:relative}
.pen::after{content:""; position:absolute; inset:7px 9px; border-bottom:2px solid var(--orange); transform:rotate(-45deg)}
.warnpen{background:#FFF0D6}
.pbtn{margin:16px 20px 20px; background:var(--orange); color:#fff; text-align:center; padding:13px; border-radius:12px; font-weight:700}

/* ── steps ──────────────────────────────────────────── */
.steps{display:grid; gap:16px; margin-top:30px}
.step{display:flex; gap:18px; align-items:flex-start; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:20px 24px}
.step span{
  flex:0 0 auto; width:34px;height:34px;border-radius:50%;background:var(--orange);color:#fff;
  display:grid;place-items:center;font-weight:800;
}
.step p{font-size:16.5px; color:var(--text)}

/* ── charts ─────────────────────────────────────────── */
.chart{margin:34px 0 0; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:22px}
.chart img{width:100%; display:block; border-radius:8px}
.chart figcaption{margin-top:14px; font-size:13px; color:var(--muted)}

/* ── gtm ────────────────────────────────────────────── */
.col h3{font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px}
.col h3.live{color:var(--green)} .col h3.next{color:var(--orange)}
.col + .col{margin-top:0}

/* ── cierre ─────────────────────────────────────────── */
.close{background:var(--wash)}
.team{margin-top:26px; font-size:13.5px; color:var(--muted); max-width:70ch}
.footer-cta{
  margin-top:34px; background:var(--orange); color:#fff; padding:22px 28px; border-radius:var(--radius);
  font-size:20px; font-weight:800; text-align:center;
}
.close-logo{height:34px; margin-top:34px}

/* ── reveal ─────────────────────────────────────────── */
.js .rv{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.js .rv.in{opacity:1; transform:none}

@media (max-width:980px){
  .hero-in{grid-template-columns:1fr; min-height:0; padding:48px 24px 64px; gap:40px}
  .readout{position:relative; left:auto; bottom:auto; width:100%; margin-top:14px; box-shadow:none}
  .nav-links{display:none}
  .grid-2{grid-template-columns:1fr; gap:34px}
  .layer{grid-template-columns:1fr; gap:10px}
  .bullets.two{columns:1}
  .cards.wide,.cards.wide.two{grid-template-columns:1fr}
  .sec{padding:72px 24px}
}

/* ── adopción: video slots ─────────────────────────── */
.media-grid{margin-top:8px; align-items:center}
.video-slot{position:relative; margin:0; border-radius:22px; overflow:hidden; background:var(--text);
  box-shadow:0 24px 60px -34px rgba(15,23,43,.45); max-width:100%}
.video-slot.portrait{aspect-ratio:9/16; width:min(340px,100%); justify-self:center}
.video-slot.wide{aspect-ratio:16/9; width:100%; margin-top:30px}
.video-slot video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; background:#000}
.video-slot.has-video video{display:block}
.video-slot.has-video .video-empty{display:none}
.video-empty{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:24px; text-align:center; color:#fff;
  background:linear-gradient(150deg,#1E293B 0%,#0F172B 60%,#3A1A06 100%)}
.video-empty b{font-size:17px}
.video-empty span{font-size:13.5px; color:rgba(255,255,255,.72); max-width:28ch}
.video-empty code{margin-top:6px; background:rgba(255,255,255,.1); color:var(--orange-300); font-size:12px; word-break:break-all}
.video-play{width:62px; height:62px; border-radius:50%; background:var(--orange); position:relative; margin-bottom:8px;
  box-shadow:0 0 0 10px rgba(255,105,0,.18)}
.video-play::after{content:""; position:absolute; left:25px; top:19px; border-left:17px solid #fff;
  border-top:12px solid transparent; border-bottom:12px solid transparent}

/* ── adopción: pasos del conductor ─────────────────── */
.col{min-width:0}
.flow{list-style:none; counter-reset:flow; display:grid; gap:12px; margin-bottom:26px}
.flow li{counter-increment:flow; display:grid; grid-template-columns:34px 1fr; column-gap:14px; align-items:start}
.flow li::before{content:counter(flow); grid-row:span 2; width:30px; height:30px; border-radius:50%;
  background:var(--tint); color:var(--ink); display:grid; place-items:center; font-weight:800; font-size:14px}
.flow b{font-size:16px}
.flow span{font-size:14.5px; color:var(--muted-2)}
.status{margin-top:22px; display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700;
  letter-spacing:.04em; padding:7px 13px; border-radius:100px}
.status::before{content:""; width:8px; height:8px; border-radius:50%}
.status.live{color:#1D7A3D; background:#E7F7EC} .status.live::before{background:var(--green)}
.status.next{color:var(--ink); background:var(--tint)} .status.next::before{background:var(--orange)}

/* ── adopción: panel de verificación (mock) ────────── */
.sheet{background:#fff; border:1px solid var(--border); border-radius:18px; padding:22px;
  box-shadow:0 24px 60px -34px rgba(15,23,43,.45); display:flex; flex-direction:column; gap:14px; min-width:0}
.sheet-head b{display:block; font-size:17px}
.sheet-head span{font-size:13px; color:var(--muted)}
.sheet-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 18px}
.sheet-grid dt{font-size:11.5px; color:var(--muted)}
.sheet-grid dd{font-size:14.5px; font-weight:600}
.sheet-label{font-size:13px; font-weight:700}
.sheet-photos{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.shot{aspect-ratio:4/3; border-radius:10px; position:relative; overflow:hidden;
  background:radial-gradient(120% 90% at 30% 20%,#64748B 0%,#334155 55%,#1E293B 100%)}
.shot.alt-shot{background:radial-gradient(120% 90% at 70% 30%,#94A3B8 0%,#475569 55%,#1E293B 100%)}
.shot-plate{position:absolute; left:50%; top:62%; transform:translate(-50%,-50%); background:#F8FAFC; color:#0F172B;
  font:800 12px/1 ui-monospace,'SF Mono',Menlo,monospace; letter-spacing:.08em; padding:6px 9px; border-radius:4px;
  border:2px solid #CBD5E1; white-space:nowrap}
.sheet-map{height:110px; border-radius:10px; position:relative; background-color:#EEF2F6;
  background-image:linear-gradient(#DCE3EA 1px,transparent 1px),linear-gradient(90deg,#DCE3EA 1px,transparent 1px);
  background-size:26px 26px}
.pin{position:absolute; left:55%; top:42%; width:16px; height:16px; border-radius:50% 50% 50% 0; background:var(--orange);
  transform:rotate(-45deg); box-shadow:0 0 0 6px rgba(255,105,0,.18)}
.sheet-note{font-size:11.5px; color:var(--muted)}

/* ── adopción: rediseño ────────────────────────────── */
.facets{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:22px}
.facet{border-top:3px solid var(--orange); padding-top:14px}
.facet b{display:block; font-size:15.5px; margin-bottom:4px}
.facet span{font-size:14px; color:var(--muted-2)}
@media (max-width:980px){
  .facets{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .facets{grid-template-columns:1fr}
}

/* ── mini app: capacidades ─────────────────────────── */
.caps{display:grid; grid-template-columns:repeat(4,1fr); gap:24px 22px; margin-top:34px}
.cap{display:flex; flex-direction:column; gap:4px; padding-left:16px; border-left:2px solid var(--orange-300)}
.cap b{font-size:15.5px}
.cap span{font-size:14px; color:var(--muted-2)}

/* ── adopción: gráfica y municipios ────────────────── */
.chart-title{font-size:14px; font-weight:700; margin-bottom:10px}
.bars{display:block; width:100%; height:auto; max-width:100%; overflow:visible}
.bars .g{stroke:var(--border); stroke-width:1}
.bars .ax{fill:var(--muted); font-size:12px; font-variant-numeric:tabular-nums}
.bars .val{fill:var(--text); font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums}
.bars .b{fill:var(--orange); transition:fill .15s}
.bars .b.dim{fill:var(--orange-300)}
.bars .hit{fill:transparent}
.bars .bar:hover .b{fill:var(--orange-600)}
.munis{margin-top:30px}
.munis-title{font-size:14px; font-weight:700; margin-bottom:12px}
.chips{list-style:none; display:flex; flex-wrap:wrap; gap:8px}
.chips li{font-size:13.5px; font-weight:600; color:var(--ink); background:#fff; border:1px solid var(--border);
  padding:6px 12px; border-radius:100px}
.chips li:first-child{background:var(--orange); border-color:var(--orange); color:#fff}
.munis-note{margin-top:12px; font-size:13.5px; color:var(--muted)}

/* ── cómo está construido (franja oscura) ──────────── */
.showcase{background:#0F172B; color:#fff; position:relative; overflow:hidden}
.showcase::before{content:""; position:absolute; width:720px; height:720px; right:-260px; top:-300px; border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,105,0,.28),transparent); pointer-events:none}
.showcase-in{position:relative; max-width:var(--maxw); margin:0 auto; padding:72px 32px}
.showcase h2{font-size:clamp(28px,3.6vw,44px); font-weight:800; letter-spacing:-.03em; margin-bottom:28px; color:#fff}
.showcase code{background:rgba(255,105,0,.16); color:var(--orange-300)}
.showcase-grid{display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:stretch}
.showcase-video.portrait{width:auto; height:min(600px,calc(100vh - 230px)); min-height:420px; aspect-ratio:9/16;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 50px 120px -50px rgba(255,105,0,.6)}
.showcase-lead{color:rgba(255,255,255,.72); font-size:16.5px; margin:-14px 0 28px; max-width:70ch}
.showcase-grid.wide-video{grid-template-columns:1.45fr 1fr; align-items:center}
.showcase-grid.wide-video .showcase-video{margin:0; width:100%}
.wins.one-col{grid-template-columns:1fr; grid-template-rows:none; gap:10px}
.wins.one-col .win{padding:14px 18px}
.wins{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,1fr); gap:14px; min-width:0}
.win{display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; min-width:0;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:18px 20px;
  transition:border-color .2s, background .2s}
.win:hover{border-color:rgba(255,105,0,.5); background:rgba(255,105,0,.06)}
.win b{font-size:16px; color:#fff; line-height:1.3}
.win span{font-size:13.5px; line-height:1.45; color:rgba(255,255,255,.7)}
.win a{padding-top:2px; font-size:13px; font-weight:700; color:var(--orange-300); text-decoration:none; word-break:break-all}
.win a:hover{text-decoration:underline}
.win a:focus-visible{outline:2px solid var(--orange); outline-offset:3px; border-radius:4px}

@media (max-width:1240px){ .nav-badge{display:none} }
@media (max-width:980px){
  .caps{grid-template-columns:1fr 1fr}
  .showcase-grid, .showcase-grid.wide-video{grid-template-columns:1fr}
  .showcase-video.portrait{height:auto; min-height:0; width:min(340px,100%); justify-self:center}
  .wins{grid-template-rows:none}
  .showcase-in{padding:72px 24px}
}
@media (max-width:520px){ .caps, .wins{grid-template-columns:1fr} .hero-stats{grid-template-columns:1fr} .hero-stats div + div{padding-left:0; border-left:0; border-top:1px solid var(--border)} .hero-stats div{padding:14px 0} }

/* ── pruébalo en vivo (pensado para proyector) ─────── */
.live{min-height:100vh; display:flex; flex-direction:column; justify-content:center}
.live h2{font-size:clamp(32px,4.4vw,56px)}
.live-grid{display:grid; grid-template-columns:minmax(280px,1fr) 2fr; gap:40px; align-items:stretch; margin-top:18px}
.live-side{display:flex; flex-direction:column; gap:26px; min-width:0}
.qr-card{background:#fff; border:2px solid var(--orange); border-radius:24px; padding:26px 26px 22px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  box-shadow:0 30px 70px -36px rgba(255,105,0,.55)}
.qr{display:block; width:100%; max-width:380px; height:auto; aspect-ratio:1; image-rendering:pixelated}
.qr-label{margin-top:12px; font-size:14px; font-weight:700; color:var(--orange); letter-spacing:.04em; text-transform:uppercase}
.qr-num{font-size:clamp(22px,2.2vw,30px); font-weight:800; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.live-steps{list-style:none; counter-reset:live; display:grid; gap:12px}
.live-steps li{counter-increment:live; display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:start; font-size:17px}
.live-steps li::before{content:counter(live); width:32px; height:32px; border-radius:50%; background:var(--orange); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:15px}
.live-car{aspect-ratio:16/9; width:100%; align-self:center; border-radius:24px; background:#000}
.live-car img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .3s}
.live-car.has-video img{opacity:1}
.live-cam::after{left:18px; top:20px; width:26px; height:20px; border:3px solid #fff; border-radius:5px; box-sizing:border-box}
@media (max-width:980px){
  .live{min-height:0}
  .live-grid{grid-template-columns:1fr}
  .qr-card{max-width:420px; width:100%; justify-self:center; margin:0 auto}
}