@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Albert+Sans:wght@400;500;600;700&display=swap');

:root{
  --carbon:#1b1410; --carbon-2:#241a14; --carbon-3:#2c2018;
  --ember:#e6622a; --ember-2:#ff8a4c; --gold:#d9a23b; --success:#3ecb52; --danger:#e0524a;
  --cream:#f3e7d6; --cream-dim:#b8a589;
  --line:rgba(243,231,214,0.10); --line-strong:rgba(243,231,214,0.18);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{ background:var(--carbon); color:var(--cream); font-family:'Albert Sans', sans-serif; }
body.sem-rolar{ overflow:hidden; }
button{ font-family:inherit; }

.top-banner{
  height:130px; position:relative; overflow:hidden;
  background:
    linear-gradient(100deg, rgba(27,20,16,0.96) 0%, rgba(27,20,16,0.55) 45%, rgba(27,20,16,0.15) 100%),
    radial-gradient(circle at 80% 30%, #8a3f1e, transparent 55%),
    linear-gradient(135deg, #3a1f12, #1b1410 70%);
  display:flex; align-items:center; padding:0 36px;
}
.top-banner h1{ font-family:'Fraunces', serif; font-weight:600; font-size:1.7rem; max-width:400px; line-height:1.2; }
.top-banner h1 em{ color:var(--ember-2); font-style:italic; }
.top-banner .tag{ font-size:0.74rem; letter-spacing:2px; text-transform:uppercase; color:var(--cream-dim); margin-bottom:8px; display:block; }

header{ position:sticky; top:0; z-index:60; background:rgba(27,20,16,0.96); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-strong); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 36px; gap:24px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand .mark{ width:38px; height:38px; border-radius:9px; background:linear-gradient(155deg,var(--ember-2),var(--ember)); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(230,98,42,0.4); }
.brand .mark svg{ width:19px; height:19px; }
.brand-text .name{ font-family:'Fraunces',serif; font-weight:600; font-size:1.12rem; line-height:1.1; }
.brand-text .status{ font-size:0.74rem; color:var(--success); display:flex; align-items:center; gap:5px; margin-top:2px; }
.brand-text .status .dot{ width:6px;height:6px;border-radius:50%;background:var(--success); }
.brand-text .status.status-cerrado{ color:#ff8b84; }
.brand-text .status .dot.dot-cerrado{ background:#ff8b84; }

.info-restaurante{ position:relative; display:flex; align-items:center; gap:14px; }
.info-restaurante-btn{
  background:var(--carbon-3); border:1px solid var(--line-strong); color:var(--cream-dim); border-radius:20px;
  padding:7px 14px; font-size:0.78rem; font-family:inherit; cursor:pointer;
}
.info-restaurante-btn:hover{ color:var(--cream); }
.info-restaurante-envio{ font-size:0.78rem; color:var(--cream-dim); white-space:nowrap; }
.info-horario-popover{
  display:none; position:absolute; top:calc(100% + 8px); left:0; z-index:50; min-width:220px;
  background:var(--carbon-2); border:1px solid var(--line-strong); border-radius:12px; padding:12px 16px; box-shadow:0 12px 30px rgba(0,0,0,0.4);
}
.info-horario-popover.aberto{ display:block; }
.linha-popover-horario{ display:flex; justify-content:space-between; gap:14px; font-size:0.8rem; padding:5px 0; color:var(--cream-dim); }
.linha-popover-horario.hoy{ color:var(--cream); font-weight:600; }

/* ===== Cerrado fuera de horario ===== */
.aviso-cerrado{
  display:block; text-align:center; background:var(--carbon-3); color:#ff8b84; font-weight:700; padding:13px;
  border-radius:30px; font-size:0.86rem; margin-top:10px; border:1px solid rgba(224,82,74,0.3);
}
.search-box{ flex:1; max-width:340px; display:flex; align-items:center; gap:8px; background:var(--carbon-2); border:1px solid var(--line-strong); border-radius:30px; padding:9px 18px; color:var(--cream-dim); font-size:0.85rem; }
.search-box input{ background:none; border:none; color:var(--cream); font-size:0.85rem; flex:1; outline:none; font-family:inherit; }
.search-box input::placeholder{ color:var(--cream-dim); }
.cart-btn{
  background:var(--ember); color:#1b1410; font-weight:700; padding:11px 20px; border-radius:30px;
  font-size:0.86rem; display:flex; align-items:center; gap:8px; white-space:nowrap; box-shadow:0 4px 16px rgba(230,98,42,0.35);
  border:none; cursor:pointer;
}

.conta-link{
  color:var(--cream-dim); font-size:0.84rem; font-weight:600; text-decoration:none; white-space:nowrap;
  padding:9px 16px; border:1px solid var(--line-strong); border-radius:30px;
}
.conta-link:hover{ color:var(--cream); border-color:var(--ember); }

.mobile-tabs{ display:none; }

.layout{ display:grid; grid-template-columns:230px 1fr; max-width:1180px; margin:0 auto; gap:0; }

.sidebar{ position:sticky; top:73px; align-self:start; height:calc(100vh - 73px); overflow-y:auto; padding:28px 14px 28px 36px; border-right:1px solid var(--line); }
.sidebar .label{ font-size:0.72rem; letter-spacing:2px; text-transform:uppercase; color:var(--cream-dim); margin-bottom:14px; padding-left:14px; }
.sidebar a{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:8px; color:var(--cream-dim); text-decoration:none; font-size:0.88rem; font-weight:500; margin-bottom:2px; border-left:2px solid transparent; }
.sidebar a.active{ background:rgba(230,98,42,0.12); color:var(--ember-2); border-left-color:var(--ember); }
.sidebar a .count{ margin-left:auto; font-size:0.74rem; color:var(--cream-dim); opacity:0.6; }

.content{ padding:32px 36px 120px; }
.cat-block{ margin-bottom:46px; }
.categoria-banner{ width:100%; height:160px; border-radius:14px; overflow:hidden; margin-bottom:18px; border:1px solid var(--line-strong); }
.categoria-banner img{ width:100%; height:100%; object-fit:cover; display:block; }
.cat-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:18px; }
.cat-head h2{ font-family:'Fraunces',serif; font-size:1.55rem; font-weight:600; }
.cat-head .line{ flex:1; height:1px; background:var(--line); }
.cat-head .qty{ font-size:0.78rem; color:var(--cream-dim); }

.item-row{ display:flex; align-items:center; gap:18px; padding:14px; border-radius:12px; border-bottom:1px solid var(--line); transition:background .15s; cursor:pointer; }
.item-row:hover{ background:rgba(243,231,214,0.035); }
.item-row:last-child{ border-bottom:none; }

.thumb{ width:108px; height:80px; border-radius:10px; flex-shrink:0; position:relative; background-size:cover; background-position:center; border:1px solid var(--line-strong); background-color:var(--carbon-3); }
.thumb .badge-destacado{ position:absolute; top:-6px; left:-6px; background:var(--gold); color:#1b1410; font-size:0.6rem; font-weight:700; padding:2px 7px; border-radius:20px; letter-spacing:0.3px; }

.item-info{ flex:1; min-width:0; }
.item-info h3{ font-family:'Fraunces',serif; font-weight:600; font-size:1.04rem; margin-bottom:4px; }
.item-info p{ font-size:0.83rem; color:var(--cream-dim); line-height:1.45; max-width:440px; }
.item-right{ display:flex; align-items:center; gap:18px; flex-shrink:0; }
.price{ font-family:'Fraunces',serif; color:var(--ember-2); font-weight:600; font-size:1.05rem; }
.add-btn{
  display:flex; align-items:center; gap:6px; background:transparent; border:1.5px solid var(--ember);
  color:var(--ember-2); padding:8px 16px; border-radius:30px; font-size:0.82rem; font-weight:700; cursor:pointer;
}
.add-btn:hover{ background:var(--ember); color:#1b1410; }

.float-cart{
  position:fixed; bottom:26px; right:36px; background:var(--ember); color:#1b1410; padding:16px 26px;
  border-radius:40px; display:flex; align-items:center; gap:14px; box-shadow:0 12px 32px rgba(230,98,42,0.45);
  font-weight:700; z-index:70; border:none; cursor:pointer;
}
.float-cart .count-badge{ background:#1b1410; color:var(--ember-2); width:24px; height:24px; border-radius:50%; font-size:0.78rem; display:flex; align-items:center; justify-content:center; }
.float-cart .total{ font-family:'Fraunces',serif; font-size:1.05rem; }

/* ===== Modal de producto (selección de adicionales) ===== */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.6); display:none; align-items:flex-end; justify-content:center; z-index:100; }
.modal-overlay.aberto{ display:flex; }
.modal-card{
  background:var(--carbon-2); border:1px solid var(--line-strong); border-radius:18px 18px 0 0; width:100%; max-width:520px;
  max-height:88vh; overflow-y:auto; padding:26px 26px 100px; position:relative;
}
@media (min-width:640px){ .modal-overlay{ align-items:center; } .modal-card{ border-radius:18px; max-height:80vh; } }
.modal-foto{ width:calc(100% + 52px); margin:-26px -26px 18px; height:200px; background-size:cover; background-position:center; background-color:var(--carbon-3); }
.modal-card h2{ font-family:'Fraunces',serif; font-size:1.3rem; margin-bottom:6px; }
.modal-descricao{ font-size:0.86rem; color:var(--cream-dim); line-height:1.5; margin-bottom:14px; }
.modal-card .modal-preco{ color:var(--ember-2); font-family:'Fraunces',serif; font-weight:600; margin-bottom:18px; }
.modal-fechar{ position:absolute; top:18px; right:18px; background:var(--carbon-3); border:1px solid var(--line-strong); color:var(--cream); width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:1rem; z-index:2; }

.grupo-adicional{ margin-bottom:18px; border-bottom:1px solid var(--line); padding-bottom:6px; }
.grupo-adicional .grupo-titulo{ display:flex; align-items:center; gap:8px; padding:8px 0; cursor:pointer; user-select:none; }
.grupo-adicional .grupo-titulo strong{ font-size:0.95rem; }
.grupo-adicional .chevron{ color:var(--cream-dim); font-size:0.78rem; width:14px; }
.grupo-adicional .obrigatorio-tag{ font-size:0.65rem; font-weight:700; color:var(--gold); background:rgba(217,162,59,0.15); padding:2px 8px; border-radius:20px; }
.grupo-adicional .selecao-resumo{ margin-left:auto; font-size:0.74rem; color:var(--ember-2); font-weight:600; }
.grupo-adicional .grupo-ajuda{ font-size:0.76rem; color:var(--cream-dim); margin-bottom:10px; padding-left:22px; }
.grupo-itens.colapsado{ display:none; }

.opcao-adicional{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.opcao-adicional:last-child{ border-bottom:none; }
.opcao-adicional .marcador{ width:20px; height:20px; border:1.5px solid var(--line-strong); flex-shrink:0; cursor:pointer; }
.opcao-adicional .marcador.radio{ border-radius:50%; }
.opcao-adicional .marcador.checkbox{ border-radius:5px; }
.opcao-adicional .marcador.selecionado{ background:var(--ember); border-color:var(--ember); }
.opcao-adicional .nome{ flex:1; font-size:0.9rem; cursor:pointer; }
.opcao-adicional .preco-extra{ font-size:0.84rem; color:var(--cream-dim); }
.opcao-adicional .stepper{ display:flex; align-items:center; gap:8px; }
.opcao-adicional .stepper button{ width:26px; height:26px; border-radius:6px; border:1px solid var(--line-strong); background:var(--carbon-3); color:var(--cream); cursor:pointer; }
.opcao-adicional .stepper span{ min-width:16px; text-align:center; font-size:0.86rem; }

.modal-rodape{
  position:fixed; bottom:0; left:0; right:0; max-width:520px; margin:0 auto; background:var(--carbon-2);
  border-top:1px solid var(--line-strong); padding:16px 26px; display:flex; gap:12px; align-items:center;
}
.qty-control{ display:flex; align-items:center; gap:10px; background:var(--carbon-3); border-radius:30px; padding:6px 10px; }
.qty-control button{ width:28px; height:28px; border-radius:50%; border:none; background:var(--ember); color:#1b1410; font-weight:700; cursor:pointer; }
.qty-control span{ min-width:18px; text-align:center; font-weight:600; }
.btn-confirmar{ flex:1; background:var(--ember); color:#1b1410; font-weight:700; padding:13px; border:none; border-radius:30px; font-size:0.92rem; cursor:pointer; }
.btn-confirmar:disabled{ opacity:0.4; cursor:not-allowed; }
.aviso-validacion{ font-size:0.76rem; color:#ff8b84; margin-top:6px; min-height:16px; }

/* ===== Drawer do carrinho ===== */
.cart-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.55); display:none; z-index:90; }
.cart-overlay.aberto{ display:block; }
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width:100%; max-width:400px; background:var(--carbon-2);
  border-left:1px solid var(--line-strong); z-index:95; transform:translateX(100%); transition:transform .25s ease;
  display:flex; flex-direction:column;
}
.cart-drawer.aberto{ transform:translateX(0); }
.cart-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line); }
.cart-drawer-head h2{ font-family:'Fraunces',serif; font-size:1.2rem; }
.cart-drawer-lista{ flex:1; overflow-y:auto; padding:10px 22px; }
.cart-linha{ display:flex; gap:12px; padding:16px 0; border-bottom:1px solid var(--line); }
.cart-linha .info{ flex:1; }
.cart-linha .info h4{ font-family:'Fraunces',serif; font-size:0.95rem; margin-bottom:4px; }
.cart-linha .info .adicionais-resumo{ font-size:0.76rem; color:var(--cream-dim); margin-bottom:6px; }
.cart-linha .acoes-linha{ display:flex; align-items:center; justify-content:space-between; }
.cart-linha .remover-linha{ background:none; border:none; color:#ff8b84; font-size:0.78rem; cursor:pointer; }
.cart-vazio{ text-align:center; color:var(--cream-dim); padding:60px 20px; font-size:0.9rem; }
.cart-drawer-rodape{ padding:20px 22px; border-top:1px solid var(--line-strong); }
.cart-drawer-rodape .total-linha{ display:flex; justify-content:space-between; margin-bottom:6px; font-size:0.92rem; }
.cart-drawer-rodape .total-linha strong{ font-family:'Fraunces',serif; color:var(--ember-2); font-size:1.1rem; }
.cart-drawer-rodape .aviso-checkout{ font-size:0.76rem; color:var(--cream-dim); text-align:center; margin-top:10px; }
.btn-checkout{
  display:block; text-align:center; background:var(--ember); color:#1b1410; font-weight:700; padding:13px;
  border-radius:30px; font-size:0.92rem; text-decoration:none; margin-top:10px;
}
.btn-checkout:hover{ background:var(--ember-2); }

/* ===== Checkout ===== */
.checkout-page{ max-width:560px; margin:0 auto; padding:32px 20px 80px; }
.checkout-page h1{ font-family:'Fraunces',serif; font-size:1.6rem; margin-bottom:4px; }
.checkout-page .sub{ color:var(--cream-dim); font-size:0.86rem; margin-bottom:24px; }
.checkout-page .painel{ background:var(--carbon-2); border:1px solid var(--line-strong); border-radius:14px; padding:22px; margin-bottom:18px; }
.checkout-page .painel h2{ font-family:'Fraunces',serif; font-size:1.05rem; margin-bottom:14px; }
.checkout-page .resumo-linha{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:0.88rem; }
.checkout-page .resumo-linha:last-child{ border-bottom:none; }
.checkout-page .resumo-linha .nome{ color:var(--cream); }
.checkout-page .resumo-linha .adicionais-resumo{ font-size:0.74rem; color:var(--cream-dim); margin-top:2px; }
.checkout-page .resumo-total{ display:flex; justify-content:space-between; padding-top:12px; margin-top:6px; border-top:1px solid var(--line-strong); font-size:1rem; }
.checkout-page .resumo-total strong{ font-family:'Fraunces',serif; color:var(--ember-2); font-size:1.15rem; }
.checkout-page .grade-campos{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.checkout-page .campo{ margin-bottom:14px; }
.checkout-page .campo.full{ grid-column:1 / -1; }
.checkout-page .campo label{ display:block; font-size:0.8rem; color:var(--cream-dim); margin-bottom:6px; }
.checkout-page .campo input, .checkout-page .campo textarea, .checkout-page .campo select{
  width:100%; background:var(--carbon-3); border:1px solid var(--line-strong); border-radius:8px;
  padding:11px 14px; color:var(--cream); font-size:0.9rem; font-family:inherit; resize:vertical;
}
.checkout-page .campo input:focus, .checkout-page .campo textarea:focus, .checkout-page .campo select:focus{ outline:none; border-color:var(--ember); }
.checkout-page .campo select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23b8a589' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px;
}
.checkout-page .campo select option{ background:var(--carbon-3); color:var(--cream); }
.checkout-page .alerta{ font-size:0.84rem; padding:11px 14px; border-radius:8px; margin-bottom:18px; }
.checkout-page .alerta.erro{ background:rgba(224,82,74,0.12); color:#ff8b84; border:1px solid rgba(224,82,74,0.3); }

.cupom-box{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.cupom-linha{ display:flex; gap:10px; }
.cupom-linha input{
  flex:1; background:var(--carbon-3); border:1px solid var(--line-strong); border-radius:8px;
  padding:10px 14px; color:var(--cream); font-size:0.86rem; font-family:inherit;
}
.cupom-linha button, .cupom-aplicado button{
  background:transparent; border:1px solid var(--line-strong); color:var(--cream); padding:10px 16px;
  border-radius:8px; font-size:0.84rem; cursor:pointer; font-family:inherit; white-space:nowrap;
}
.cupom-linha button:hover, .cupom-aplicado button:hover{ border-color:var(--ember); color:var(--ember-2); }
.cupom-aplicado{ display:flex; justify-content:space-between; align-items:center; font-size:0.86rem; color:var(--success); }
.cupom-erro{ font-size:0.78rem; color:#ff8b84; margin-top:8px; }
.resumo-descuento span{ color:var(--success); }
.checkout-page .carrinho-vazio{ text-align:center; padding:40px 0; color:var(--cream-dim); }
.checkout-page .carrinho-vazio a{ color:var(--ember-2); text-decoration:none; font-weight:600; }
@media (max-width:560px){ .checkout-page .grade-campos{ grid-template-columns:1fr; } }

/* ===== Rastreo del pedido ===== */
.rastreo-cabecera{ text-align:center; margin-bottom:24px; }
.rastreo-icono{ font-size:2.6rem; margin-bottom:8px; }
.rastreo-status{ font-family:'Fraunces',serif; color:var(--ember-2); font-size:1.6rem; margin-bottom:6px; }

.stepper-rastreo{ display:flex; align-items:flex-start; margin-bottom:26px; overflow-x:auto; padding-bottom:6px; }
.stepper-paso{ display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; width:64px; }
.stepper-circulo{
  width:30px; height:30px; border-radius:50%; border:2px solid var(--line-strong); display:flex; align-items:center;
  justify-content:center; font-size:0.82rem; color:var(--cream-dim); background:var(--carbon-2); flex-shrink:0;
}
.stepper-paso.completo .stepper-circulo{ background:var(--ember); border-color:var(--ember); color:#1b1410; }
.stepper-paso.atual .stepper-circulo{ box-shadow:0 0 0 3px rgba(230,98,42,0.25); }
.stepper-label{ font-size:0.68rem; color:var(--cream-dim); text-align:center; line-height:1.2; }
.stepper-paso.completo .stepper-label{ color:var(--cream); }
.stepper-linha{ height:2px; background:var(--line-strong); flex:1; margin-top:14px; min-width:14px; }
.stepper-linha.completa{ background:var(--ember); }

.btn-whatsapp{
  display:block; text-align:center; background:var(--success); color:#0d2412; font-weight:700; padding:13px;
  border-radius:30px; font-size:0.92rem; text-decoration:none; margin-bottom:10px;
}
.btn-whatsapp:hover{ filter:brightness(1.08); }

.repartidor-info{
  background:var(--carbon-2); border:1px solid var(--line-strong); border-radius:12px; padding:14px 18px;
  font-size:0.86rem; margin-bottom:22px; text-align:center;
}
.repartidor-info a{ display:block; margin-top:6px; color:var(--success); text-decoration:none; font-weight:600; font-size:0.82rem; }

.contador-entrega{
  text-align:center; background:var(--carbon-2); border:1px solid var(--line-strong); border-radius:14px;
  padding:16px; margin-bottom:22px;
}
.contador-entrega .contador-label{ font-size:0.76rem; color:var(--cream-dim); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:4px; }
.contador-entrega .contador-tempo{ font-family:'Fraunces',serif; font-size:1.8rem; color:var(--ember-2); font-weight:600; }
.contador-entrega.atrasado .contador-tempo{ color:var(--gold); font-size:1.1rem; }

.rodape-site{ border-top:1px solid var(--line); padding:28px 36px 90px; }
.rodape-conteudo{
  max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; font-size:0.82rem; color:var(--cream-dim);
}
.rodape-staff{ color:var(--cream-dim); text-decoration:none; border:1px solid var(--line-strong); border-radius:30px; padding:8px 16px; }
.rodape-staff:hover{ color:var(--cream); border-color:var(--ember); }

/* ===== Mobile ===== */
@media (max-width:768px){
  .top-banner{ height:110px; padding:0 20px; }
  .top-banner h1{ font-size:1.3rem; max-width:260px; }
  .nav{ padding:12px 18px; }
  .search-box{ display:none; }
  .layout{ grid-template-columns:1fr; }
  .sidebar{ display:none; }
  .mobile-tabs{
    display:flex; gap:8px; overflow-x:auto; padding:12px 16px; position:sticky; top:65px; z-index:55;
    background:rgba(27,20,16,0.96); border-bottom:1px solid var(--line-strong); backdrop-filter:blur(10px);
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .mobile-tabs::-webkit-scrollbar{ display:none; }
  .mobile-tabs a{ flex-shrink:0; padding:8px 16px; border-radius:30px; border:1px solid var(--line-strong); color:var(--cream-dim); text-decoration:none; font-size:0.82rem; font-weight:600; white-space:nowrap; }
  .mobile-tabs a.active{ background:var(--ember); color:#1b1410; border-color:var(--ember); }
  .content{ padding:24px 18px 110px; }
  .item-row{ padding:12px 8px; gap:12px; }
  .thumb{ width:84px; height:64px; }
  .item-info p{ display:none; }
  .float-cart{ right:18px; bottom:18px; left:18px; justify-content:center; }
  .cart-drawer{ max-width:100%; }
}