/* ============================================================
   A HORA DO VINHO — CATÁLOGO DE ENTREGA
   Paleta tirada da marca (#9F1E49). Uma família tipográfica só,
   grotesca, como o logotipo. O único elemento com voz alta é o
   relógio: a marca se chama A Hora do Vinho.
   ============================================================ */

:root{
  --carmim:#9F1E49;
  --carmim-esc:#6E1234;
  --carmim-suave:#C4536F;
  --tinta:#2B1A21;
  --fundo:#FAF6F7;
  --papel:#FFFFFF;
  --linha:#ECE0E4;
  --suave:#7B6870;
  --zap:#128C7E;
  --verde:#0F8A4D;
  --erro:#B02A37;

  --raio:12px;
  --raio-g:18px;
  --sombra:0 1px 2px rgba(43,26,33,.04), 0 10px 24px -14px rgba(43,26,33,.20);
  --sombra-alta:0 2px 4px rgba(43,26,33,.05), 0 18px 36px -18px rgba(43,26,33,.30);
  --fonte:"Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tempo:.22s cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--fundo);
  color:var(--tinta);
  font-family:var(--fonte);
  font-size:15px;
  line-height:1.5;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button{font-family:inherit;font-size:inherit;cursor:pointer;color:inherit}
input,select,textarea{font-family:inherit;font-size:16px;color:inherit}
[hidden]{display:none !important}

:focus-visible{outline:2.5px solid var(--carmim);outline-offset:2px;border-radius:4px}

.container{width:100%;max-width:1180px;margin:0 auto;padding:0 18px}

/* ============================ TOPO ============================ */
.topo{
  background:var(--carmim-esc);
  background:linear-gradient(168deg,var(--carmim) 0%,var(--carmim-esc) 78%);
  color:#fff;
  padding:16px 0 0;
}
.topo__inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.topo__logo{display:block}
.topo__logo img{height:38px;width:auto}
.topo__acoes{display:flex;align-items:center;gap:8px}
.topo__conta{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.13);color:#fff;
  border:1px solid rgba(255,255,255,.26);border-radius:999px;
  padding:7px 14px;font-size:13px;font-weight:600;
  transition:background var(--tempo);
}
.topo__conta:hover{background:rgba(255,255,255,.24)}
.topo__insta{
  color:rgba(255,255,255,.8);
  width:36px;height:36px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.28);border-radius:50%;
  transition:background var(--tempo),color var(--tempo);
  flex:0 0 auto;
}
.topo__insta:hover{background:rgba(255,255,255,.14);color:#fff}

/* ------------------ repetir último pedido ------------------ */
.repetir{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--papel);border:1px solid var(--linha);
  border-left:3px solid var(--zap);
  border-radius:var(--raio);padding:13px 15px;margin-bottom:14px;
  flex-wrap:wrap;
}
.repetir__texto{min-width:0;flex:1 1 210px}
.repetir__titulo{margin:0;font-size:15px;font-weight:700;letter-spacing:-.02em}
.repetir__itens{
  margin:3px 0 0;font-size:12.5px;color:var(--suave);
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.repetir__btn{flex:0 0 auto;padding:11px 18px;font-size:14px}

/* ------------------------ pop-up --------------------------- */
.popup{
  position:fixed;inset:0;z-index:70;
  background:rgba(43,26,33,.55);
  display:grid;place-items:center;padding:20px;
  animation:fade .22s ease;
}
.popup__caixa{
  position:relative;
  background:var(--papel);border-radius:var(--raio-g);
  max-width:390px;width:100%;padding:30px 26px 24px;
  text-align:center;
  box-shadow:0 24px 60px -20px rgba(43,26,33,.5);
  animation:popIn .34s cubic-bezier(.22,1,.36,1);
}
@keyframes popIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.popup__fechar{
  position:absolute;top:11px;right:11px;
  width:30px;height:30px;border:none;background:transparent;color:var(--suave);
  font-size:22px;line-height:1;border-radius:50%;
}
.popup__fechar:hover{background:var(--linha);color:var(--tinta)}
.popup__selo{
  display:inline-block;margin:0 0 14px;
  background:var(--verde);color:#fff;
  font-size:26px;font-weight:800;letter-spacing:-.03em;
  border-radius:999px;padding:6px 20px;
}
.popup__titulo{
  margin:0 0 9px;font-size:23px;font-weight:800;
  letter-spacing:-.035em;line-height:1.15;
}
.popup__texto{margin:0 0 20px;font-size:14.5px;color:var(--suave);line-height:1.5}
.popup__btn{width:100%}
.popup__link{
  display:block;width:100%;margin-top:11px;
  background:none;border:none;color:var(--suave);
  font-size:13.5px;text-decoration:underline;text-underline-offset:3px;
}
.popup__link:hover{color:var(--carmim)}

/* ------------------------ conta ---------------------------- */
.conta__intro{margin:0 0 16px;font-size:13.5px;color:var(--suave);line-height:1.5}
.conta__nota{margin:14px 0 0;font-size:11.5px;color:var(--suave);line-height:1.45}
.ok{
  margin:0 0 12px;font-size:13px;font-weight:600;
  color:#0B5F36;background:#EAF7EF;border:1px solid #BEE5CE;
  border-radius:9px;padding:9px 12px;
}

/* ---------------------------- HERO --------------------------- */
.hero{padding:26px 18px 30px}
.hero__claim{
  font-size:clamp(27px,7.4vw,42px);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.02;
  margin:0 0 10px;
  max-width:13ch;
}
.hero__texto{
  margin:0;
  font-size:14.5px;
  line-height:1.5;
  color:rgba(255,255,255,.78);
  max-width:46ch;
}

/* relógio: o único elemento com voz alta da página */
.relogio{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:18px;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.20);
  border-radius:999px;
  padding:7px 15px 7px 12px;
  backdrop-filter:blur(4px);
}
.relogio__ponto{
  width:8px;height:8px;border-radius:50%;
  background:#5FD08A;
  box-shadow:0 0 0 0 rgba(95,208,138,.6);
  animation:pulso 2.4s ease-out infinite;
  flex:0 0 auto;
}
.relogio--fechado .relogio__ponto{background:#E8A33D;animation:none}
@keyframes pulso{
  0%{box-shadow:0 0 0 0 rgba(95,208,138,.55)}
  70%{box-shadow:0 0 0 9px rgba(95,208,138,0)}
  100%{box-shadow:0 0 0 0 rgba(95,208,138,0)}
}
.relogio__hora{
  font-weight:800;font-size:15px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.relogio__msg{font-size:13.5px;color:rgba(255,255,255,.86)}

/* oferta de boas-vindas */
.oferta{
  margin:14px 0 0;
  display:inline-block;
  background:#EAF7EF;color:#0B5F36;
  border-radius:9px;padding:9px 14px;
  font-size:13.5px;line-height:1.4;
  max-width:44ch;
}
.oferta strong{font-weight:700;color:#0B5F36}

/* ========================== FILTROS =========================== */
.filtros{
  position:sticky;top:0;z-index:30;
  background:rgba(250,246,247,.93);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--linha);
  padding:11px 0 9px;
}
.busca{position:relative;display:flex;align-items:center}
.busca__icone{position:absolute;left:14px;color:var(--suave);pointer-events:none}
#busca{
  width:100%;padding:11px 40px 11px 40px;
  border:1px solid var(--linha);border-radius:999px;
  background:var(--papel);
  outline:none;
  transition:border-color var(--tempo),box-shadow var(--tempo);
  appearance:none;-webkit-appearance:none;
}
#busca::-webkit-search-cancel-button{display:none}
#busca:focus{border-color:var(--carmim);box-shadow:0 0 0 3px rgba(159,30,73,.13)}
.busca__limpar{
  position:absolute;right:7px;width:28px;height:28px;
  border:none;background:transparent;color:var(--suave);
  font-size:21px;line-height:1;border-radius:50%;
}
.busca__limpar:hover{background:var(--linha);color:var(--tinta)}

.chips{
  display:flex;gap:6px;margin-top:9px;
  overflow-x:auto;scrollbar-width:none;
  padding-bottom:1px;
  scroll-snap-type:x proximity;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;scroll-snap-align:start;
  border:1px solid var(--linha);background:var(--papel);
  color:var(--suave);border-radius:999px;
  padding:6px 14px;font-size:13.5px;font-weight:500;
  white-space:nowrap;
  transition:background var(--tempo),color var(--tempo),border-color var(--tempo);
}
.chip:hover{border-color:var(--carmim-suave);color:var(--tinta)}
.chip[aria-pressed="true"]{
  background:var(--carmim);border-color:var(--carmim);color:#fff;font-weight:600;
}

.selects{display:flex;gap:7px;margin-top:8px}
.select{
  flex:1 1 0;min-width:0;
  padding:9px 28px 9px 11px;
  border:1px solid var(--linha);border-radius:9px;
  background:var(--papel) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1L5.5 5.5L10 1' stroke='%237B6870' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-size:13.5px;
  appearance:none;-webkit-appearance:none;outline:none;
  text-overflow:ellipsis;
  transition:border-color var(--tempo),box-shadow var(--tempo);
}
.select:focus{border-color:var(--carmim);box-shadow:0 0 0 3px rgba(159,30,73,.13)}
.select--bloco{width:100%;flex:none;padding:11px 30px 11px 12px;font-size:15px}

/* ========================= CONTEÚDO =========================== */
.conteudo{padding:16px 18px 118px}
.linha-resultado{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-bottom:12px;
}
.contador{margin:0;font-size:13px;color:var(--suave);font-weight:500}
.contador strong{color:var(--tinta);font-weight:700}
.ordenar{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.ordenar__rotulo{font-size:13px;color:var(--suave)}
.ordenar select{
  border:none;background:transparent;
  font-size:13px;font-weight:600;color:var(--carmim);
  padding:3px 16px 3px 3px;
  appearance:none;-webkit-appearance:none;outline:none;
  background:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1L4.5 4.5L8 1' stroke='%239F1E49' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right center;
  cursor:pointer;
}

.grade{display:grid;gap:10px;grid-template-columns:1fr}

/* esqueleto de carregamento */
.skel{
  height:150px;border-radius:var(--raio);
  background:linear-gradient(100deg,var(--linha) 30%,#F6EDF0 46%,var(--linha) 62%);
  background-size:280% 100%;
  animation:brilho 1.25s ease-in-out infinite;
}
@keyframes brilho{to{background-position:-160% 0}}

/* =========================== CARD ============================= */
.card{
  background:var(--papel);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  box-shadow:var(--sombra);
  padding:12px;
  display:grid;
  grid-template-columns:74px 1fr;
  gap:13px;
  content-visibility:auto;
  contain-intrinsic-size:auto 168px;
  transition:border-color var(--tempo),box-shadow var(--tempo);
}
.card:hover{border-color:#DCC8D0;box-shadow:var(--sombra-alta)}
.card--noPedido{border-color:var(--carmim);box-shadow:0 0 0 1px var(--carmim), var(--sombra)}
.card--esgotado{opacity:.58}

.card__foto{
  position:relative;
  background:#F6F0F2;
  border-radius:8px;
  align-self:stretch;min-height:112px;
  display:grid;place-items:center;
  overflow:hidden;
}
.card__foto img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:contain;
  padding:6px 4px;
  background:#F6F0F2;
}
.garrafa{height:88%;width:auto;max-width:76%;display:block}
/* o catálogo É um ranking de vendas, então a posição real vale como informação */
.card__linha{display:flex;align-items:center;gap:8px;margin:0 0 3px;flex-wrap:wrap}
.card__rank{
  font-size:10.5px;font-weight:700;color:var(--carmim);
  background:rgba(159,30,73,.09);
  border-radius:5px;padding:2px 6px;white-space:nowrap;
}

.card__info{min-width:0;display:flex;flex-direction:column}
.card__tipo{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:600;color:var(--suave);
}
.card__tipo::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ponto,var(--carmim))}
.card__nome{
  font-size:17.5px;font-weight:700;letter-spacing:-.025em;
  line-height:1.14;margin:0 0 3px;
}
.card__meta{margin:0;font-size:12.5px;color:var(--suave);line-height:1.35}
.card__uva{margin:2px 0 0;font-size:12.5px;font-weight:500}
.card__desc{
  margin:6px 0 0;font-size:12.8px;color:var(--suave);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card__harm{
  display:inline-block;margin:7px 0 0;
  font-size:11.5px;color:var(--carmim);
  background:rgba(159,30,73,.07);
  border-radius:6px;padding:3px 8px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.card__acao{
  grid-column:1/-1;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:10px;margin-top:2px;border-top:1px solid var(--linha);
}
.card__precos{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.card__de{font-size:12.5px;color:var(--suave);text-decoration:line-through}
.card__preco{
  font-size:19px;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.card__preco--desc{color:var(--verde)}
.card__esgotadoTxt{font-size:13px;font-weight:600;color:var(--suave)}

.btn-add{
  border:1px solid var(--carmim);background:var(--carmim);color:#fff;
  border-radius:999px;padding:9px 19px;font-size:13.5px;font-weight:600;
  transition:background var(--tempo),transform .08s;
  white-space:nowrap;
}
.btn-add:hover{background:var(--carmim-esc)}
.btn-add:active{transform:scale(.96)}
.btn-add[disabled]{background:var(--linha);border-color:var(--linha);color:var(--suave);cursor:not-allowed}

.stepper{
  display:flex;align-items:center;
  border:1.5px solid var(--carmim);border-radius:999px;overflow:hidden;
  background:var(--carmim);
}
.stepper button{
  width:36px;height:36px;border:none;background:var(--carmim);color:#fff;
  font-size:19px;line-height:1;display:grid;place-items:center;
  transition:background var(--tempo);
}
.stepper button:hover{background:var(--carmim-esc)}
.stepper span{
  min-width:34px;text-align:center;font-weight:700;font-size:14.5px;
  color:var(--carmim);background:var(--papel);align-self:stretch;
  display:grid;place-items:center;
  font-variant-numeric:tabular-nums;
}

/* ========================== VAZIO ============================= */
.vazio{
  text-align:center;padding:46px 22px;color:var(--suave);
  background:var(--papel);border:1px dashed var(--linha);border-radius:var(--raio-g);
}
.vazio p{margin:0 0 8px}
.vazio__titulo{color:var(--tinta);font-size:17px;font-weight:700;letter-spacing:-.02em}
.vazio .btn{margin-top:8px}

/* ========================== RODAPÉ ============================ */
.rodape{
  background:var(--carmim-esc);color:rgba(255,255,255,.72);
  padding:36px 0 108px;text-align:center;
}
.rodape__logo{height:40px;width:auto;margin:0 auto 16px;opacity:.95}
.rodape__texto{margin:0 0 18px;font-size:13.5px;line-height:1.6}
.rodape__mini{
  margin:0 auto;font-size:11.5px;color:rgba(255,255,255,.48);
  border-top:1px solid rgba(255,255,255,.13);padding-top:15px;
  max-width:42ch;
}

/* ======================= BARRA DO PEDIDO ====================== */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:10px 18px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--fundo) 62%,rgba(250,246,247,0));
  pointer-events:none;
  animation:sobeBarra .3s cubic-bezier(.22,1,.36,1);
}
@keyframes sobeBarra{from{transform:translateY(120%)}to{transform:translateY(0)}}
.barra__btn{
  pointer-events:auto;
  width:100%;max-width:520px;margin:0 auto;
  display:flex;align-items:center;gap:11px;
  background:var(--carmim);color:#fff;border:none;
  border-radius:999px;padding:13px 20px;
  box-shadow:0 8px 26px -6px rgba(159,30,73,.55);
  transition:background var(--tempo),transform .1s;
}
.barra__btn:hover{background:var(--carmim-esc)}
.barra__btn:active{transform:scale(.985)}
.barra__qtd{
  background:rgba(255,255,255,.22);font-weight:700;font-size:13px;
  min-width:25px;height:25px;border-radius:999px;display:grid;place-items:center;
  font-variant-numeric:tabular-nums;
}
.barra__qtd.pulsa{animation:pop .32s cubic-bezier(.34,1.6,.64,1)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.32)}100%{transform:scale(1)}}
.barra__label{flex:1;text-align:left;font-weight:600;font-size:14.5px}
.barra__total{font-weight:800;font-size:16px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ========================== PAINEL ============================ */
.overlay{
  position:fixed;inset:0;z-index:50;
  background:rgba(43,26,33,.5);
  animation:fade .2s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}

.painel{
  position:fixed;z-index:60;left:0;right:0;bottom:0;
  max-height:92vh;
  background:var(--fundo);
  border-radius:var(--raio-g) var(--raio-g) 0 0;
  display:flex;flex-direction:column;
  box-shadow:0 -8px 40px rgba(43,26,33,.28);
  animation:sobe .3s cubic-bezier(.22,1,.36,1);
}
@keyframes sobe{from{transform:translateY(100%)}to{transform:translateY(0)}}

.painel__topo{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 18px 12px;border-bottom:1px solid var(--linha);flex:0 0 auto;
}
.painel__titulo{font-size:20px;font-weight:800;letter-spacing:-.03em;margin:0}
.painel__fechar{
  width:32px;height:32px;border:none;background:var(--linha);
  border-radius:50%;font-size:21px;line-height:1;display:grid;place-items:center;
  transition:background var(--tempo);
}
.painel__fechar:hover{background:#DFCFD5}
.painel__corpo{flex:1 1 auto;overflow-y:auto;padding:15px 18px;-webkit-overflow-scrolling:touch}
.painel__base{
  flex:0 0 auto;display:flex;gap:8px;
  padding:11px 18px calc(13px + env(safe-area-inset-bottom));
  border-top:1px solid var(--linha);background:var(--papel);
}

/* itens */
.lista{display:flex;flex-direction:column;gap:9px}
.item{
  display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  background:var(--papel);border:1px solid var(--linha);
  border-radius:var(--raio);padding:11px 12px;
  animation:entraItem .22s ease;
}
@keyframes entraItem{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.item__nome{font-size:15.5px;font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.2}
.item__meta{margin:2px 0 0;font-size:12px;color:var(--suave)}
.item__preco{margin:5px 0 0;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.item__cada{font-weight:400;color:var(--suave);font-size:12px}
.item__stepper{display:flex;align-items:center;border:1px solid var(--linha);border-radius:999px;overflow:hidden}
.item__stepper button{
  width:31px;height:31px;border:none;background:var(--fundo);color:var(--carmim);
  font-size:17px;line-height:1;display:grid;place-items:center;
}
.item__stepper button:hover{background:var(--linha)}
.item__stepper span{min-width:28px;text-align:center;font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums}

.vazio-carrinho{text-align:center;color:var(--suave);padding:44px 12px}
.vazio-carrinho__emoji{font-size:34px;margin:0 0 10px}
.vazio-carrinho strong{color:var(--tinta);font-size:16px;display:block;margin-bottom:5px}

/* resumo */
.resumo{
  margin-top:14px;background:var(--papel);
  border:1px solid var(--linha);border-radius:var(--raio);padding:13px 14px;
}
.resumo__linha{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:3px 0;color:var(--suave)}
.resumo__linha strong{color:var(--tinta);font-weight:600;font-variant-numeric:tabular-nums}
.resumo__linha--verde strong{color:var(--verde)}
.resumo__linha--verde span{color:var(--verde)}
.resumo__total{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:8px;padding-top:10px;border-top:1px solid var(--linha);
}
.resumo__total span{font-size:14px;font-weight:600}
.resumo__total strong{font-size:22px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.resumo__nota{margin:9px 0 0;font-size:12px;color:var(--suave);line-height:1.4}
.resumo__nota strong{color:var(--carmim)}

/* barra de progresso do frete */
.trilho{height:4px;background:var(--linha);border-radius:999px;margin:9px 0 0;overflow:hidden}
.trilho__preenche{height:100%;background:var(--carmim);border-radius:999px;transition:width .45s cubic-bezier(.22,1,.36,1)}

/* formulário */
.campo{margin-bottom:13px}
.campo label{display:block;font-size:13px;font-weight:600;color:var(--tinta);margin-bottom:5px}
.opcional{font-weight:400;color:var(--suave);font-size:12px}
.campo input[type=text],.campo input[type=tel],.campo textarea{
  width:100%;padding:11px 12px;
  border:1px solid var(--linha);border-radius:9px;
  background:var(--papel);outline:none;resize:vertical;
  transition:border-color var(--tempo),box-shadow var(--tempo);
}
.campo input:focus,.campo textarea:focus{border-color:var(--carmim);box-shadow:0 0 0 3px rgba(159,30,73,.13)}
.campo input.invalido,.select.invalido{border-color:var(--erro);box-shadow:0 0 0 3px rgba(176,42,55,.12)}

.chegada{
  margin:8px 0 0;font-size:13px;
  background:var(--papel);border:1px solid var(--linha);
  border-left:3px solid var(--carmim);
  border-radius:0 8px 8px 0;padding:8px 11px;line-height:1.4;
}
.chegada strong{color:var(--carmim);font-weight:700}
.nota-pagamento{
  margin:8px 0 0;font-size:12.5px;line-height:1.45;
  color:#1B5E3C;background:rgba(27,122,75,.07);
  border:1px solid rgba(27,122,75,.2);border-radius:9px;padding:9px 11px;
}
.erro{
  margin:0 0 12px;font-size:13px;color:var(--erro);font-weight:500;
  background:rgba(176,42,55,.06);border:1px solid rgba(176,42,55,.22);
  border-radius:9px;padding:9px 12px;
}

.radios{display:flex;gap:7px}
.radio{flex:1}
.radio input{position:absolute;opacity:0;pointer-events:none}
.radio span{
  display:block;text-align:center;
  border:1px solid var(--linha);background:var(--papel);
  border-radius:9px;padding:10px 8px;font-size:14px;font-weight:500;
  color:var(--suave);
  transition:border-color var(--tempo),background var(--tempo),color var(--tempo);
}
.radio input:checked + span{border-color:var(--carmim);background:var(--carmim);color:#fff;font-weight:600}
.radio input:focus-visible + span{outline:2.5px solid var(--carmim);outline-offset:2px}

/* botões */
.btn{
  border-radius:999px;padding:13px 22px;
  font-size:15px;font-weight:600;border:1px solid transparent;
  transition:background var(--tempo),color var(--tempo),border-color var(--tempo),transform .08s;
}
.btn:active{transform:scale(.985)}
.btn--cheio{flex:1;background:var(--carmim);color:#fff;border-color:var(--carmim)}
.btn--cheio:hover{background:var(--carmim-esc)}
.btn--cheio[disabled]{background:var(--linha);border-color:var(--linha);color:var(--suave);cursor:not-allowed}
.btn--linha{background:transparent;color:var(--carmim);border-color:var(--linha)}
.btn--linha:hover{border-color:var(--carmim);background:rgba(159,30,73,.05)}
.btn--zap{background:var(--zap);border-color:var(--zap);display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.btn--zap:hover{background:#0E7365}

/* ========================= DESKTOP ============================ */
@media (min-width:640px){
  body{font-size:15.5px}
  .selects{max-width:660px}
  .grade{grid-template-columns:repeat(2,1fr);gap:14px}
  .card{grid-template-columns:1fr;padding:0;overflow:hidden}
  .card__foto{aspect-ratio:7/5;border-radius:0;min-height:0;align-self:auto}
  .garrafa{height:96%}
  .card__info{padding:14px 15px 0}
  .card__acao{padding:12px 15px;margin-top:auto}
  .hero{padding:34px 18px 40px}
}
@media (min-width:980px){
  .grade{grid-template-columns:repeat(3,1fr)}
  .conteudo{padding-top:22px}
  .topo__logo img{height:44px}
  .painel{
    left:auto;right:0;top:0;bottom:0;width:430px;
    max-height:100vh;border-radius:0;
    animation:entraLado .3s cubic-bezier(.22,1,.36,1);
  }
  @keyframes entraLado{from{transform:translateX(100%)}to{transform:translateX(0)}}
}
@media (min-width:1240px){
  .grade{grid-template-columns:repeat(4,1fr)}
}

/* ==================== MOVIMENTO REDUZIDO ====================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}