/* Roka Delivery 2.0 — design system
   Capa visual no transaccional. No modifica APIs ni reglas de negocio. */
:root{
 --roka-navy:#063B73;--roka-navy-2:#0A4D8C;--roka-red:#E30613;--roka-yellow:#FFD500;
 --roka-bg:#F5F8FC;--roka-surface:#FFF;--roka-text:#172033;--roka-muted:#667085;
 --roka-border:#DCE5EF;--roka-success:#16803B;--roka-danger:#B42318;
 --roka-radius:16px;--roka-shadow:0 8px 24px rgba(6,59,115,.08);
}
html{scroll-behavior:smooth}body{background:var(--roka-bg);color:var(--roka-text);-webkit-font-smoothing:antialiased}
button,a,input,select,textarea{touch-action:manipulation}button,a{transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(255,213,0,.75);outline-offset:2px}
.roka-card{background:var(--roka-surface);border:1px solid var(--roka-border);border-radius:var(--roka-radius);box-shadow:var(--roka-shadow)}
.roka-primary{min-height:52px;border:0;border-radius:14px;background:var(--roka-red)!important;color:#fff!important;font-weight:900;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 20px;box-shadow:0 10px 22px rgba(227,6,19,.18)}
.roka-primary:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(227,6,19,.22)}
.roka-secondary{min-height:48px;border:1px solid var(--roka-border);border-radius:14px;background:#fff;color:var(--roka-navy);font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px}
.roka-progress{display:flex;align-items:center;gap:6px;margin:0 auto 18px;max-width:560px;color:var(--roka-muted);font-size:.78rem;font-weight:800}
.roka-progress span{display:flex;align-items:center;gap:6px;white-space:nowrap}.roka-progress i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#E7EEF6;color:var(--roka-navy);font-style:normal;font-size:.68rem}.roka-progress .active{color:var(--roka-navy)}.roka-progress .active i,.roka-progress .done i{background:var(--roka-navy);color:#fff}.roka-progress b{height:1px;background:var(--roka-border);flex:1;min-width:8px}
.roka-mobile-cart{display:none;position:fixed;left:12px;right:12px;bottom:12px;z-index:90;background:var(--roka-navy);color:#fff;border-radius:16px;min-height:58px;padding:9px 14px;box-shadow:0 16px 38px rgba(6,59,115,.28);align-items:center;justify-content:space-between;font-weight:900;text-decoration:none}
.roka-mobile-cart small{display:block;font-weight:600;opacity:.8}
.roka-search-shell{position:sticky;top:0;z-index:30;background:rgba(245,248,252,.94);backdrop-filter:blur(10px);padding:10px 0}
.roka-state{border-radius:14px;padding:14px;background:#fff;border:1px solid var(--roka-border);color:var(--roka-muted)}
.roka-section-label{font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:var(--roka-navy);font-weight:900}
.roka-page-cart main,.roka-page-checkout main{max-width:760px!important;margin-left:auto!important;margin-right:auto!important}
.roka-page-cart .bg-white.rounded-lg.shadow,.roka-page-checkout .bg-white.rounded-lg.shadow,.roka-page-merchant .bg-white.rounded-lg.shadow{border:1px solid var(--roka-border);box-shadow:var(--roka-shadow)!important;border-radius:16px!important}
.roka-page-merchant #productos-grid{gap:12px!important}
.roka-page-merchant #productos-grid>div{border:1px solid var(--roka-border);box-shadow:0 5px 16px rgba(6,59,115,.06)!important;border-radius:16px!important}
.roka-page-catalog #comercios-grid>a{border:1px solid var(--roka-border);box-shadow:0 5px 18px rgba(6,59,115,.07)!important;border-radius:16px!important}
.roka-page-catalog #comercios-grid>a:hover,.roka-page-merchant #productos-grid>div:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(6,59,115,.12)!important}
.roka-page-cart input[type=radio],.roka-page-checkout input[type=radio]{accent-color:var(--roka-red);width:18px;height:18px}
.roka-page-cart input,.roka-page-checkout input,.roka-page-checkout select,.roka-page-checkout textarea{min-height:48px;border-radius:12px}
.roka-page-cart .sticky,.roka-page-checkout>div:first-child,.roka-page-merchant>div:first-child{backdrop-filter:blur(10px)}
.roka-toast{position:fixed;left:50%;bottom:84px;transform:translate(-50%,15px);opacity:0;z-index:120;background:#172033;color:#fff;padding:11px 15px;border-radius:12px;font-size:.86rem;pointer-events:none;transition:.2s}.roka-toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:640px){
 .roka-progress{padding:0 4px}.roka-progress span{font-size:.7rem}.roka-progress span em{display:none}
 .roka-mobile-cart.visible{display:flex}
 .roka-page-catalog #comercios-grid{grid-template-columns:1fr!important}
 .roka-page-catalog #comercios-grid>a{display:grid!important;grid-template-columns:112px 1fr;min-height:112px}
 .roka-page-catalog #comercios-grid>a>img{width:112px!important;height:100%!important;min-height:112px;object-fit:cover}
 .roka-page-merchant #productos-grid{grid-template-columns:1fr 1fr!important}
 .roka-page-cart main,.roka-page-checkout main{padding-bottom:24px!important}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Motion layer 2026 */
body:before{content:"";position:fixed;inset:-20vh -15vw auto auto;width:58vw;height:58vw;border-radius:50%;background:radial-gradient(circle,rgba(10,77,140,.12),transparent 68%);pointer-events:none;z-index:-1;animation:rokaAura 14s ease-in-out infinite alternate}
.home-nav,.marketplace-brandbar{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.82)!important;backdrop-filter:blur(18px) saturate(150%);border-bottom:1px solid rgba(220,229,239,.8);box-shadow:0 8px 30px rgba(6,59,115,.05)!important}
.roka-page-home .hero{position:relative;overflow:hidden;min-height:clamp(560px,74vh,760px);display:grid;align-items:center;background:linear-gradient(135deg,#fff 0%,#f3f8fd 42%,#dcecff 100%)}
.roka-page-home .hero:before,.roka-page-home .hero:after{content:"";position:absolute;border-radius:999px;filter:blur(1px);pointer-events:none}
.roka-page-home .hero:before{width:420px;height:420px;right:-90px;top:-140px;background:radial-gradient(circle,rgba(255,213,0,.24),transparent 66%);animation:rokaFloat 9s ease-in-out infinite}
.roka-page-home .hero:after{width:360px;height:360px;left:-130px;bottom:-190px;background:radial-gradient(circle,rgba(227,6,19,.12),transparent 68%);animation:rokaFloat 12s ease-in-out infinite reverse}
.roka-page-home .hero-grid{position:relative;z-index:1}
.roka-page-home .hero-title{font-size:clamp(3rem,7vw,6.4rem)!important;letter-spacing:-.055em!important;background:linear-gradient(100deg,var(--roka-navy),#0d65ad 65%,var(--roka-navy));-webkit-background-clip:text;background-clip:text;color:transparent}
.roka-page-home .hero-official-logo{animation:rokaLogoFloat 5.5s ease-in-out infinite;filter:drop-shadow(0 28px 38px rgba(6,59,115,.2))}
.roka-page-home .hero-panel{background:linear-gradient(145deg,rgba(6,59,115,.96),rgba(10,77,140,.9));backdrop-filter:blur(16px);border:1px solid rgba(255,213,0,.55);border-radius:24px!important;box-shadow:0 30px 70px rgba(6,59,115,.22)!important}
.roka-page-home .flow-step{transition:transform .22s ease,background .22s ease;padding-inline:10px;border-radius:14px}.roka-page-home .flow-step:hover{transform:translateX(5px);background:rgba(255,255,255,.06)}
.role-card{border-radius:22px!important;box-shadow:0 12px 36px rgba(6,59,115,.07);transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease}.role-card:hover{transform:translateY(-7px);box-shadow:0 24px 54px rgba(6,59,115,.14)}
.primary-action,.roka-primary{position:relative;overflow:hidden}.primary-action:after,.roka-primary:after{content:"";position:absolute;inset:0;transform:translateX(-120%) skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transition:transform .55s ease}.primary-action:hover:after,.roka-primary:hover:after{transform:translateX(120%) skewX(-20deg)}
.marketplace-hero{position:relative;overflow:hidden;border-radius:28px;padding:clamp(22px,4vw,40px)!important;background:linear-gradient(125deg,#fff 0%,#edf6ff 62%,#e4f0fc 100%);border:1px solid rgba(220,229,239,.9);box-shadow:0 18px 50px rgba(6,59,115,.08)}
.marketplace-title{font-size:clamp(2.2rem,6vw,4.8rem)!important;letter-spacing:-.045em;line-height:.96!important;color:var(--roka-navy)!important;max-width:780px}
.marketplace-search{min-height:58px!important;border:1px solid rgba(6,59,115,.16)!important;border-radius:17px!important;box-shadow:0 12px 30px rgba(6,59,115,.08)!important;transition:box-shadow .2s ease,transform .2s ease}.marketplace-search:focus-within{transform:translateY(-2px);box-shadow:0 18px 42px rgba(6,59,115,.14)!important;border-color:var(--roka-navy)!important}
.roka-page-catalog #comercios-grid>a{overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}.roka-page-catalog #comercios-grid>a img{transition:transform .55s cubic-bezier(.2,.8,.2,1)}.roka-page-catalog #comercios-grid>a:hover{transform:translateY(-7px) scale(1.01)}.roka-page-catalog #comercios-grid>a:hover img{transform:scale(1.055)}
.roka-reveal{opacity:0;transform:translateY(24px) scale(.985);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.2,1)}.roka-reveal.roka-visible{opacity:1;transform:none}
.roka-scroll-progress{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--roka-red),var(--roka-yellow));z-index:200;box-shadow:0 0 14px rgba(227,6,19,.3)}
@keyframes rokaAura{to{transform:translate(-5vw,7vh) scale(1.08)}}@keyframes rokaFloat{50%{transform:translate3d(18px,24px,0) scale(1.08)}}@keyframes rokaLogoFloat{50%{transform:translateY(-10px) rotate(.6deg)}}
@media(max-width:640px){.roka-page-home .hero{min-height:auto}.roka-page-home .hero-title{font-size:3.25rem!important}.roka-page-home .hero-panel{border-radius:20px!important}.marketplace-hero{border-radius:22px;padding:22px!important}.marketplace-title{font-size:2.65rem!important}.roka-page-catalog #comercios-grid>a:hover{transform:none}}
@media(prefers-reduced-motion:reduce){body:before,.roka-page-home .hero:before,.roka-page-home .hero:after,.roka-page-home .hero-official-logo{animation:none!important}.roka-reveal{opacity:1!important;transform:none!important}}