/* canasta cr · homepage (ux-aaa, 2026-11). Built on ui.css (tokens + components); header, tab bar and
   freshness classes come from chrome.css. One job on the first screen: buscar (or escanear). Then the
   returning visitor's list, the same product in two stores, verified deals, the canasta and the aisles.
   The mascot is static; nothing on this page moves on its own. Rendered by home-view.js. */

/* the header search docks in only once the hero search has scrolled away (never two search boxes) */
.home .hdr-search{opacity:0;visibility:hidden;transform:translateY(calc(-6px * var(--move)));
  transition:opacity var(--t-base) ease,transform var(--t-base) var(--ease-out),visibility 0s var(--t-base)}
.home.dock .hdr-search{opacity:1;visibility:visible;transform:none;transition-delay:0s}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--band);color:#fff;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 45% at 84% 12%,rgba(255,255,255,.16),rgba(255,255,255,0) 70%),
    repeating-conic-gradient(from -2deg at 84% 14%,rgba(255,255,255,.055) 0deg 6deg,rgba(255,255,255,0) 6deg 12deg)}
.hero-in{position:relative;padding-top:16px;padding-bottom:22px}
.hero h1{margin-top:4px;max-width:8.6em;font:400 2.375rem/.98 var(--display);letter-spacing:0;color:#fff;text-shadow:0 3px 0 rgba(4,22,64,.28)}
.hero h1 em{display:block;font-style:normal;color:var(--sun)}
.hero h1 .h1-k{display:block;margin-bottom:8px;font:700 15px/1.3 var(--font);letter-spacing:0;color:#fff;text-shadow:none}
.hero-sub{margin-top:12px;max-width:31ch;font:500 16px/1.45 var(--font);color:#fff}
.hero-sub b{font-weight:800;font-variant-numeric:tabular-nums}
.hero-search{display:flex;align-items:center;gap:6px;margin-top:16px;height:58px;padding:5px 5px 5px 16px;
  background:var(--surface);border:2px solid var(--line-ink);border-radius:var(--r-pill);box-shadow:0 4px 0 rgba(4,22,64,.6);color:var(--ink-4)}
.hero-search:focus-within{box-shadow:0 4px 0 rgba(4,22,64,.6),0 0 0 4px rgba(255,255,255,.45)}
.hero-search input{flex:1;min-width:0;height:44px;border:0;outline:0;background:none;font:500 17px/1.2 var(--font);color:var(--ink)}
.hero-search input::placeholder{color:var(--ink-4);opacity:1}
.hero-search .btn{min-height:44px;padding:0 18px;border-width:0;box-shadow:none}
.hero-search .btn:active{box-shadow:none}
.hero .chips{margin-top:12px}
.hero-scan{margin-top:12px}
.hero-fresh{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hero-art{position:absolute;right:-6px;top:2px;width:132px;pointer-events:none}
.hero-mascot{width:100%;height:auto;filter:drop-shadow(0 10px 14px rgba(4,22,64,.3))}
.bubble{display:none}
@media (max-width:899px){.hero h1 .h1-k{max-width:calc(100vw - 150px)}}
@media (max-width:359px){.hero-art{width:104px}.hero h1{font-size:2.125rem}}
@media (min-width:900px){
  .hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:32px;align-items:center;padding-top:40px;padding-bottom:48px}
  .hero h1{font-size:var(--fs-52);max-width:11em}
  .hero-sub{font-size:18px;max-width:40ch}
  .hero-search{max-width:560px;height:62px}
  .hero-art{position:relative;right:auto;top:auto;width:min(440px,100%);justify-self:center;margin:-24px 0 -48px}
  .bubble{display:grid;gap:2px;position:absolute;left:-12%;top:8%;max-width:240px;padding:12px 16px 13px;background:#fff;color:#1B2233;
    border:2.5px solid #14161B;border-radius:18px;box-shadow:0 14px 28px -14px rgba(4,22,64,.55)}
  .bubble[hidden]{display:none}
  .bubble::after{content:"";position:absolute;right:30px;bottom:-12px;width:18px;height:18px;background:#fff;border-right:2.5px solid #14161B;border-bottom:2.5px solid #14161B;border-bottom-right-radius:5px;transform:rotate(45deg)}
  .bubble small{font:600 13px/1.3 var(--font);color:#4A556E}
  .bubble b{font:400 30px/1.05 var(--display);color:#0A5E40}
  .bubble span{font:500 13.5px/1.35 var(--font);color:#2F3A52}
}

/* ---------- returning visitor: the list, one tap away ---------- */
.resume{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 14px;align-items:center;margin-top:16px;padding:14px 12px 14px 14px;
  color:inherit;text-decoration:none;transition:transform var(--t-press) var(--ease-out)}
.resume:active{transform:scale(.99)}
.resume-disc{grid-row:1/4;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--blue-50);color:var(--blue-700)}
.resume-k{font:700 13.5px/1.2 var(--font);color:var(--ink-3)}
.resume-v{font:700 16px/1.3 var(--font);color:var(--ink)}
.resume-v .price{font-size:inherit;color:var(--save-ink)}
.resume .tag{justify-self:start;margin-top:4px}
.resume>.ico{grid-row:1/4;grid-column:3;color:var(--link)}

/* ---------- campaign module (Black Friday) and the install card: one action each ---------- */
.promo{display:grid;gap:10px;margin-top:16px;padding:16px;background:var(--sun-50)}
.promo h2{font:400 var(--fs-24)/1.05 var(--display);color:var(--navy)}
.promo p{font:500 15px/1.45 var(--font);color:var(--ink-2)}
.promo p b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.promo .btn{justify-self:start}
.install{display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 14px;align-items:center;margin-top:16px;padding:14px 16px}
.install img{grid-row:1/3;width:52px;height:52px}
.install b{font:800 16px/1.3 var(--font)}
.install p{font:500 14px/1.4 var(--font);color:var(--ink-3)}
.install-acts{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:8px}
.link-quiet{color:var(--ink-3)}

/* ---------- the duel: same product, two stores ---------- */
.duel{padding:16px}
.duel-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.duel-t{min-width:0;font:800 17px/1.3 var(--font);color:var(--ink)}
.duel-sides{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.side{display:grid;gap:8px;align-content:start;min-height:120px;padding:12px;border-radius:var(--r-md);color:inherit;text-decoration:none;border:1px solid var(--line);
  transition:transform var(--t-press) var(--ease-out)}
.side:active{transform:scale(.98)}
.side.win{background:var(--save-bg);border-color:transparent}
.side.lose{background:var(--surface-2)}
.side .price{font-size:var(--fs-28)}
.side .unit{margin-top:-4px}
.side .ext{display:inline-flex;align-items:center;gap:4px;font:600 12.5px/1.2 var(--font);color:var(--ink-3)}
.side .store{flex-wrap:wrap}
.duel-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin-top:12px}
.duel-save{font:600 15px/1.4 var(--font);color:var(--ink-2)}
.duel-save b{font-weight:800;color:var(--save-ink);font-variant-numeric:tabular-nums}
.duel-sk-sides{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.duel-sk-sides .sk{height:178px;border-radius:var(--r-md)}
.duel-body{transition:opacity var(--t-base) ease,filter var(--t-base) ease}
.duel-body.swap{opacity:0;filter:blur(2px)}

/* ---------- deals rail ---------- */
.deal-note{margin:-4px 0 12px}
.pc .was{margin-left:2px}
.pc .ok-tick{display:inline-flex;align-items:center;gap:4px;font:700 12.5px/1.2 var(--font);color:var(--save-ink)}
.pc .ok-tick .ico{width:14px;height:14px;stroke-width:2.6}

/* ---------- canasta scoreboard ---------- */
.board{padding:4px 16px}
.brow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.brow:first-child{border-top:0}
.brow-l{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.brow .bar{height:6px;border-radius:3px;background:var(--line-2)}
.brow.win .bar{background:var(--save)}
.brow-r{grid-row:1/3;grid-column:2;display:grid;justify-items:end;gap:6px}
.board-foot{display:flex;flex-wrap:wrap;gap:0 16px;margin-top:8px}

/* ---------- aisles ---------- */
.aisles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.aisle{display:grid;gap:4px;align-content:start;padding:12px 14px 14px;color:inherit;text-decoration:none;transition:transform var(--t-press) var(--ease-out)}
.aisle:active{transform:scale(.98)}
.aisle i{display:grid;place-items:center;width:38px;height:38px;margin-bottom:4px;border-radius:50%;background:var(--sun-50);font-style:normal;font-size:19px}
.aisle b{font:700 15.5px/1.25 var(--font);color:var(--ink)}
.aisle span{font:500 13px/1.2 var(--font);color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (min-width:900px){
  .aisles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .two{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;align-items:start}
  .resume{max-width:560px}
  .duel{max-width:760px}
}
.ft .credit,.ft .coffee{color:#fff}
/* Soto Apex "a" mark in Crimson #F2385A: 3.6:1 on the footer navy (graphic AA is 3:1) */
.sd-mark{display:inline-block;width:.78em;height:.9em;margin:0 .3em 0 .1em;vertical-align:-.1em;color:#f2385a}

/* ---------- productos (from the box): four real products as doors into the catalog + one CTA ---------- */
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pcard{display:grid;gap:6px;align-content:start;padding:10px 10px 12px;color:inherit;text-decoration:none;transition:transform var(--t-press) var(--ease-out)}
.pcard:active{transform:scale(.98)}
.pimg{display:grid;place-items:center;aspect-ratio:1;padding:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.pimg img{width:100%;height:100%;object-fit:contain}
.pcard .store{font-size:12.5px}
.ptl{min-height:2.6em;font:700 14px/1.3 var(--font);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod-cta{display:flex;width:100%;margin-top:14px}
@media (min-width:900px){.pgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.prod-cta{display:inline-flex;width:auto}}