/* =========================================================
   Página Links Úteis
   Usa a mesma base do style.css. Aqui só o que é exclusivo:
   o hero centralizado e os botões de pedido.
   ========================================================= */

/* ---- Hero centralizado ---- */
.lk-hero{min-height:auto;padding-top:70px}
.lk-hero-in{text-align:center;display:flex;flex-direction:column;align-items:center}

.lk-hero .hero-logo{
  width:clamp(124px,26vw,190px);margin-bottom:18px;
}

.lk-h1{
  font-family:var(--ff-disp);
  font-size:clamp(1.9rem,7.6vw,3.4rem);
  line-height:1.02;letter-spacing:-.5px;color:var(--cream);
  margin-bottom:14px;
  text-shadow:0 4px 22px rgba(0,0,0,.7);
}
.lk-h1 em{
  display:block;font-style:normal;color:var(--gold);
  text-shadow:0 5px 0 rgba(0,0,0,.35),0 12px 30px rgba(0,0,0,.55);
}

.lk-eyebrow{justify-content:center;margin-bottom:16px}

.lk-sub{
  max-width:440px;margin-left:auto;margin-right:auto;margin-bottom:22px;
}

.lk-hero-btn{align-self:center}

/* ---- Botões de pedido dentro do hero ---- */
.lk-hero{padding-bottom:74px}
.lk-hero-orders{
  width:100%;max-width:560px;margin:0 auto;
  text-align:left;gap:16px;
}

/* ---- Botões de pedido — estilo Linktree, dourado, hover premium ---- */
.order-grid{display:grid;grid-template-columns:1fr;gap:16px}

.order{
  position:relative;
  display:flex;align-items:center;gap:15px;
  background:linear-gradient(135deg,var(--gold-l),var(--gold) 65%);
  border:1px solid rgba(255,255,255,.25);
  border-radius:20px;
  padding:19px 22px;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .4s cubic-bezier(.22,1,.36,1),
             box-shadow .4s cubic-bezier(.22,1,.36,1),
             border-color .4s;
}
.order::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.55) 42%,transparent 64%);
  transform:translateX(-120%);
  transition:transform .7s ease;
  pointer-events:none;
}
.order:hover{
  transform:translateY(-9px) scale(1.015);
  border-color:rgba(255,255,255,.5);
  box-shadow:0 26px 48px rgba(0,0,0,.4),0 0 0 1px rgba(240,144,0,.35),0 0 34px rgba(240,144,0,.35),inset 0 1px 0 rgba(255,255,255,.4);
}
.order:hover::before{transform:translateX(120%)}
.order:active{transform:translateY(-4px) scale(1.005)}

.order-feat{
  box-shadow:0 10px 26px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.35),0 0 0 2px rgba(255,244,228,.55);
}
.order-feat:hover{
  box-shadow:0 26px 48px rgba(0,0,0,.4),0 0 0 2px rgba(255,244,228,.7),0 0 34px rgba(240,144,0,.4),inset 0 1px 0 rgba(255,255,255,.4);
}

.order-ic{
  width:52px;height:52px;flex:none;border-radius:14px;
  display:grid;place-items:center;font-size:22px;
  background:rgba(20,12,12,.14);color:var(--wine-d);
  transition:transform .4s;
}
.order:hover .order-ic{transform:rotate(-8deg) scale(1.08)}
.order-wa{background:rgba(255,255,255,.55);color:#1c8a45}
.order-ifood{background:rgba(255,255,255,.55);color:#c4142f}
.order-99{background:rgba(255,255,255,.55);color:#D4A017}

.order-txt{flex:1;min-width:0}
.order-txt b{
  display:block;font-family:var(--ff-disp);
  font-size:1.05rem;color:var(--wine-d);line-height:1.25;
}
.order-txt small{
  display:block;color:rgba(20,12,12,.65);font-size:13px;
  line-height:1.45;margin-top:4px;
}

.order-go{
  color:var(--wine-d);font-size:14px;opacity:.55;flex:none;
  transition:transform .3s,opacity .3s;
}
.order:hover .order-go{opacity:1;transform:translateX(6px)}

/* ---- Responsivo ---- */
@media(max-width:768px){
  .lk-hero{padding-top:56px;padding-bottom:64px}
  .lk-hero-orders{max-width:100%}
}
@media(max-width:400px){
  .order{padding:15px 16px;gap:12px}
  .order-ic{width:46px;height:46px;font-size:19px}
  .order-txt b{font-size:1rem}
}