/* ===========================================================
   SHALON — Delivery page (cena animada da coleta)
   =========================================================== */

/* ---------- HERO da delivery ---------- */
.dhero{
  position:relative; overflow:hidden;
  background:linear-gradient(165deg,#2A1311 0%,#3A1A16 55%,#4a201a 100%);
  color:#fff; padding:48px 0 0;
  min-height:calc(100vh - 84px);
  display:flex; flex-direction:column;
}
.dhero__glow{ position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; }
.dhero__glow.g1{ width:560px; height:560px; background:radial-gradient(circle,rgba(200,30,23,.55),transparent 70%); top:-200px; right:-120px; opacity:.7; }
.dhero__glow.g2{ width:420px; height:420px; background:radial-gradient(circle,rgba(255,138,130,.30),transparent 70%); bottom:120px; left:-160px; opacity:.6; }
.dhero .wrap{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:center; }

.dhero__grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:50px; align-items:center; padding:30px 0 56px; }

.dhero__chip{
  display:inline-flex; align-items:center; gap:10px; padding:9px 17px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); border-radius:999px;
  font-weight:700; font-size:.86rem; backdrop-filter:blur(6px);
}
.dhero__chip .pulse{ width:9px; height:9px; border-radius:50%; background:#34e07b; box-shadow:0 0 0 0 rgba(52,224,123,.7); animation:dotPulse 1.8s infinite; }
@keyframes dotPulse{ 0%{box-shadow:0 0 0 0 rgba(52,224,123,.7)} 70%{box-shadow:0 0 0 10px rgba(52,224,123,0)} 100%{box-shadow:0 0 0 0 rgba(52,224,123,0)} }

.dhero h1{
  color:#fff; font-size:clamp(2.8rem,6.2vw,5rem); margin:24px 0 0; line-height:1.02;
}
.dhero h1 .hl{ color:#FF8A82; position:relative; white-space:nowrap; }
.dhero h1 .hl::after{
  content:""; position:absolute; left:0; right:0; bottom:.08em; height:.14em; border-radius:6px;
  background:rgba(255,138,130,.32); transform:scaleX(0); transform-origin:left;
  animation:underline 1s var(--ease) .7s forwards;
}
@keyframes underline{ to{ transform:scaleX(1); } }
.dhero__sub{ font-size:1.24rem; color:rgba(255,255,255,.82); margin-top:22px; max-width:500px; }
.dhero__sub b{ color:#fff; }

.dhero__actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:36px; }
.btn--call{ background:#fff; color:var(--red); box-shadow:0 14px 30px rgba(0,0,0,.25); }
.btn--call:hover{ transform:translateY(-3px); box-shadow:0 20px 40px rgba(0,0,0,.35); }
.btn--green{ background:#25D366; color:#fff; box-shadow:0 14px 30px rgba(37,211,102,.4); }
.btn--green:hover{ transform:translateY(-3px); box-shadow:0 20px 44px rgba(37,211,102,.5); }

.dhero__trust{ display:flex; flex-wrap:wrap; gap:14px 26px; margin-top:34px; }
.dhero__trust .t{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:.96rem; color:rgba(255,255,255,.9); }
.dhero__trust .t svg{ width:22px; height:22px; color:#FF8A82; flex:none; }

/* ---------- CENA ANIMADA ---------- */
.scene{
  position:relative; aspect-ratio:1/1; max-width:520px; margin:0 auto; width:100%;
}
.scene__ring{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, rgba(255,138,130,.16), transparent 62%);
}
.scene__dash{
  position:absolute; inset:8%; border-radius:50%;
  border:2px dashed rgba(255,255,255,.18);
  animation:spin 60s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* casa (cliente) — canto sup. esquerdo */
.spot{ position:absolute; display:flex; flex-direction:column; align-items:center; gap:8px; z-index:3; }
.spot__bubble{
  width:108px; height:108px; border-radius:28px; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; box-shadow:0 16px 40px rgba(0,0,0,.3);
}
.spot__bubble svg{ width:52px; height:52px; }
.spot__label{ font-weight:700; font-size:.84rem; background:rgba(0,0,0,.3); padding:5px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.16); }
.spot.home{ top:8%; left:4%; animation:bob 5s ease-in-out infinite; }
.spot.home .spot__bubble svg{ color:#FFD27D; }
.spot.shop{ bottom:8%; right:4%; animation:bob 5s ease-in-out infinite 1.2s; }
.spot.shop .spot__bubble svg{ color:#FF8A82; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

/* caminho da moto */
.route{ position:absolute; inset:0; z-index:1; overflow:visible; }
.route__path{ fill:none; stroke:rgba(255,138,130,.55); stroke-width:2.4; stroke-dasharray:7 9; stroke-linecap:round; }
.route__progress{ fill:none; stroke:#FF8A82; stroke-width:3.4; stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(255,138,130,.7)); }

/* moto */
.rider{ position:absolute; top:0; left:0; z-index:4; transform-origin:center; }
.rider__badge{
  width:74px; height:74px; border-radius:50%; background:var(--red);
  display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px rgba(200,30,23,.55);
  border:3px solid rgba(255,255,255,.9);
}
.rider__badge svg{ width:40px; height:40px; color:#fff; }
.rider::after{ /* escapamento */
  content:""; position:absolute; left:-6px; top:60%; width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.5); animation:puff 1s ease-out infinite;
}
@keyframes puff{ 0%{opacity:.5; transform:scale(.6) translateX(0)} 100%{opacity:0; transform:scale(1.6) translateX(-14px)} }

/* mini cards flutuantes na cena */
.scene__tag{
  position:absolute; z-index:5; background:#fff; color:var(--ink); border-radius:14px;
  padding:10px 14px; box-shadow:var(--shadow-md); display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:.86rem;
}
.scene__tag svg{ width:20px; height:20px; flex:none; }
.scene__tag small{ display:block; color:var(--ink-3); font-weight:500; font-size:.74rem; }
.scene__tag.t1{ top:46%; left:-6%; animation:bob 6s ease-in-out infinite; }
.scene__tag.t2{ bottom:30%; left:38%; animation:bob 7s ease-in-out infinite .8s; }

/* ---------- BARRA DE ETAPAS RÁPIDAS ---------- */
.dquick{ background:#fff; border-top:1px solid var(--line); }
.dquick__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.dquick__item{ display:flex; align-items:center; gap:16px; padding:26px 28px; border-right:1px solid var(--line); }
.dquick__item:last-child{ border-right:none; }
.dquick__n{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:2rem; color:var(--red-100); -webkit-text-stroke:1.5px var(--red); line-height:1; flex:none; }
.dquick__t b{ display:block; font-family:"Bricolage Grotesque"; font-size:1.06rem; }
.dquick__t span{ font-size:.88rem; color:var(--ink-2); }

@media (max-width:900px){
  .dhero{ min-height:0; padding:36px 0 0; }
  .dhero__grid{ grid-template-columns:1fr; gap:20px; padding:10px 0 44px; }
  .dhero__visual{ order:-1; }
  .scene{ max-width:360px; }
  .dquick__grid{ grid-template-columns:1fr; }
  .dquick__item{ border-right:none; border-bottom:1px solid var(--line); }
  .dquick__item:last-child{ border-bottom:none; }
}
@media (max-width:680px){
  .scene{ max-width:300px; }
  .spot__bubble{ width:84px; height:84px; border-radius:22px; }
  .spot__bubble svg{ width:42px; height:42px; }
  .rider__badge{ width:60px; height:60px; }
  .rider__badge svg{ width:32px; height:32px; }
}
@media (prefers-reduced-motion: reduce){
  .scene__dash, .rider, .spot, .scene__tag, .dhero h1 .hl::after, .pulse{ animation:none !important; }
  .route__progress{ stroke-dasharray:none !important; }
}