/* ==========================================================================
   WILBERT'S SMOKEHOUSE - SISTEMA DE ESTILOS
   ========================================================================== */

:root {
  --color-bg: #F8FAF9;
  --color-surface: #FFFFFF;
  --color-dark: #1C1917;
  --color-dark-light: #292524;
  --color-primary: #991B1B; /* Rojo ahumado */
  --color-primary-hover: #7F1D1D;
  --color-accent: #A16207; /* Bronce / Mezquite */
  --color-accent-light: #FEF3C7;
  --color-text: #27272A;
  --color-text-muted: #71717A;
  --color-border: #E4E4E7;
  --color-border-subtle: #F4F4F5;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md: 0 4px 12px -2px rgba(0,0,0,0.08), 0 2px 6px -2px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 25px -5px rgba(28,25,23,0.15), 0 8px 10px -6px rgba(28,25,23,0.1);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}

* { 
  box-sizing: border-box; 
}

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   APP BAR / HEADER
   ========================================================================== */

.appbar {
  background: linear-gradient(135deg, var(--color-dark) 0%, #2a2421 100%);
  color: white;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 3px solid var(--color-primary);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-icon {
  font-size: 1.8rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.appbar h1 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

.brand-subtitle {
  display: block;
  font-size: 0.72rem;
  color: #D4D4D8;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* .pill: la "píldora" de conexión */
.pill {
  background: rgba(34, 197, 94, 0.2);
  color: #4ADE80;
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: var(--radius-full);
  padding: 0.25rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.pill::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #4ADE80;
  border-radius: 50%;
}

.pill.sin-conexion { 
  background: rgba(239, 68, 68, 0.2); 
  color: #FCA5A5; 
  border-color: rgba(252, 165, 165, 0.3);
}
.pill.sin-conexion::before {
  background: #FCA5A5;
}

/* ==========================================================================
   LAYOUT PRINCIPAL & HERO BANNER
   ========================================================================== */

main {
  max-width: 800px;
  margin: 1.5rem auto 3rem;
  padding: 0 1rem;
}

.hero-banner {
  background: linear-gradient(135deg, #27201C 0%, #181311 100%);
  color: white;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}

.hero-banner::after {
  content: "🔥";
  position: absolute;
  right: -10px;
  bottom: -20px;
  font-size: 9rem;
  opacity: 0.06;
  pointer-events: none;
}

.tag-estrella {
  display: inline-block;
  background: var(--color-accent);
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.6rem;
}

.hero-banner h2 {
  margin: 0 0 0.4rem;
  font-size: 1.4rem;
  font-weight: 800;
  color: #FFFFFF;
}

.hero-banner p {
  margin: 0;
  font-size: 0.88rem;
  color: #A1A1AA;
  line-height: 1.5;
}

section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.section-header h2 {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-dark);
}

.section-desc {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  margin: -0.5rem 0 1rem;
}

/* ==========================================================================
   CATÁLOGO DE PRODUCTOS (GRID)
   ========================================================================== */

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.producto {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.producto:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: #CBD5E1;
}

.producto__foto {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: 0.6rem;
  background: var(--color-border-subtle);
}

.producto strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 0.2rem;
}

.producto .precio {
  display: inline-block;
  color: var(--color-primary);
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}

.producto button {
  margin-top: auto;
  width: 100%;
}

/* Tarjetas Esqueleto */
.producto--cargando strong,
.producto--cargando .precio,
.producto--cargando p {
  background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
  background-size: 200% 100%;
  animation: esqueletoAnim 1.5s infinite;
  border-radius: 4px;
  color: transparent !important;
}
.producto--cargando strong { width: 80%; height: 1.1rem; }
.producto--cargando .precio { width: 40%; height: 1rem; margin-top: 0.3rem; }
.producto--cargando p { width: 60%; height: 0.9rem; }
.producto--cargando button { visibility: hidden; }

@keyframes esqueletoAnim {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================================================
   BOTONES
   ========================================================================== */

button, .btn-primary {
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  transition: background-color 0.15s ease, transform 0.1s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

button:hover, .btn-primary:hover { 
  background: var(--color-primary-hover); 
}

button:active, .btn-primary:active {
  transform: scale(0.98);
}

.btn-secondary {
  background: var(--color-dark);
  color: white;
}
.btn-secondary:hover {
  background: var(--color-dark-light);
}

.btn-block {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
}

/* ==========================================================================
   CARRITO DE COMPRAS
   ========================================================================== */

#carrito-lista { 
  list-style: none; 
  padding: 0; 
  margin: 0 0 1rem;
}

#carrito-lista li {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--color-border-subtle);
  padding: 0.75rem 0;
}

.carrito-nombre { 
  font-weight: 600; 
  font-size: 0.9rem;
  color: var(--color-dark);
}

.carrito-cantidad {
  display: flex;
  align-items: center;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  padding: 0.15rem;
}

.carrito-cantidad button {
  padding: 0.2rem 0.5rem;
  font-size: 0.85rem;
  background: transparent;
  color: var(--color-dark);
  border-radius: 4px;
}
.carrito-cantidad button:hover {
  background: #E4E4E7;
}

.carrito-cantidad__valor {
  min-width: 1.6rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.carrito-precio { 
  font-weight: 800; 
  color: var(--color-primary); 
  white-space: nowrap; 
  font-size: 0.95rem;
}

.carrito-quitar {
  background: transparent;
  color: #DC2626;
  border: 1px solid #FECDD3;
  padding: 0.25rem 0.55rem;
  font-size: 0.78rem;
  border-radius: var(--radius-sm);
}
.carrito-quitar:hover { 
  background: #FEF2F2; 
  color: #991B1B; 
  border-color: #FCA5A5;
}

.carrito-resumen {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 1rem;
  border: 1px solid var(--color-border);
}

.total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
  font-size: 1rem;
  color: var(--color-dark);
}

.monto-total {
  font-size: 1.3rem;
  color: var(--color-primary);
  font-weight: 800;
}

.mensaje { 
  color: var(--color-text-muted); 
  font-size: 0.85rem; 
  margin: 0.6rem 0 0;
  min-height: 1.2em; 
}
.mensaje a { color: var(--color-primary); font-weight: 600; }

.sucursal-info { 
  color: var(--color-text); 
  font-size: 0.88rem; 
  margin: 0 0 0.8rem; 
}

/* ==========================================================================
   MAPA Y FOOTER
   ========================================================================== */

.mapa {
  height: 280px;
  border-radius: var(--radius-md);
  margin-top: 0.85rem;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

footer {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

footer p {
  margin: 0 0 0.25rem;
}

.footer-sub {
  font-size: 0.78rem;
  color: #A1A1AA;
}

/* Responsive ajustado */
@media (max-width: 520px) {
  .appbar {
    padding: 0.85rem 1rem;
  }
  .brand-subtitle {
    display: none;
  }
  #carrito-lista li { 
    grid-template-columns: 1fr auto; 
    grid-template-areas: "nombre nombre" "cantidad precio" "quitar quitar"; 
  }
  .carrito-nombre { grid-area: nombre; }
  .carrito-cantidad { grid-area: cantidad; }
  .carrito-precio { grid-area: precio; justify-self: end; }
  .carrito-quitar { grid-area: quitar; justify-self: start; width: 100%; text-align: center; }
}
/* Identidad Smokehouse: carbón, papel cálido y brasa. */
:root { --color-bg:#f5efe4; --color-border:#dfd5c6; --color-text-muted:#756b60; --color-border-subtle:#eee7dc; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { background:radial-gradient(ellipse at 0 20%,#d9a45d18,transparent 45%),repeating-linear-gradient(45deg,#7c583b03 0 1px,transparent 1px 7px),var(--color-bg); }
[hidden] { display:none !important; }
a { text-decoration:none; }
.appbar { padding:20px max(24px,calc((100vw - 1200px)/2)); border-bottom:1px solid #b388493d; background:#1c1917; gap:24px; }
.brand-icon { border-radius:50%; background:#a162071c; border-color:#b3884966; }
.header-nav { display:flex; gap:28px; margin-left:auto; }
.header-nav a { color:#e9dfcf; font-size:13px; font-weight:700; }
.header-nav a:hover { color:#efb85e; }
main { max-width:1248px; margin:28px auto 64px; padding:0 24px; }
.hero-banner { min-height:510px; display:flex; align-items:center; padding:54px; border-radius:24px; background:linear-gradient(90deg,#171411fa 0%,#171411e8 34%,#17141166 68%,#17141130),url('../img/brisket-250-g.jpg') center 55%/cover; box-shadow:0 20px 45px #33201020; }
.hero-banner::after { content:''; inset:0; font-size:initial; opacity:1; background:linear-gradient(0deg,#17141166,transparent 40%); }
.hero-content { max-width:530px; position:relative; z-index:1; }
.tag-estrella { color:#eab464; background:transparent; border:1px solid #eab46466; border-radius:999px; padding:8px 14px; font-size:10px; letter-spacing:2px; margin-bottom:22px; }
.hero-banner h2 { font-family:Georgia,'Times New Roman',serif; font-size:clamp(42px,5vw,68px); line-height:1.04; letter-spacing:-2px; margin-bottom:22px; }
.hero-banner h2 em { color:#eab464; font-weight:normal; }
.hero-banner p { max-width:420px; color:#d7cbbb; font-size:14px; line-height:1.8; }
.hero-cta { margin-top:26px; padding:14px 22px; background:#991b1b; border:1px solid #d0573e; box-shadow:0 8px 20px #0003; }
.hero-cta span { margin-left:24px; font-size:20px; }
.hero-details { display:flex; gap:16px; margin-top:26px; font-size:10px; color:#e3d4bf; flex-wrap:wrap; }
.hero-details span + span { border-left:1px solid #b3884970; padding-left:16px; }
.hero-stamp { position:absolute; z-index:1; right:36px; bottom:36px; width:164px; height:164px; border:1px dashed #ebbd77; outline:6px solid #241a13d9; border-radius:50%; background:#241a13e8; display:flex; flex-direction:column; justify-content:center; align-items:center; color:#ebbd77; transform:rotate(-9deg); }
.hero-stamp span { font-size:8px; letter-spacing:1px; }
.hero-stamp strong { font-family:Georgia,serif; font-size:32px; color:#fff5e4; }
.hero-stamp b { font-size:24px; margin-top:5px; }
.smoke-strip { display:flex; justify-content:center; gap:30px; padding:5px 0 30px; color:#806139; font-size:10px; font-weight:800; letter-spacing:2px; }
section { scroll-margin-top:20px; padding:28px; border-radius:20px; background:#fffaf2; box-shadow:0 8px 24px #39241006; }
.menu-section { background:transparent; padding:18px 0 32px; border:0; box-shadow:none; }
.section-header { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.eyebrow { font-size:10px; font-weight:800; letter-spacing:2px; color:#991b1b; display:block; margin-bottom:9px; }
.section-header h2 { font-family:Georgia,serif; font-size:32px; margin-bottom:12px; }
.menu-note { font-size:12px; color:#756b60; }
.section-desc { margin:0 0 22px; line-height:1.7; }
.menu-filters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.filter { background:transparent; border:1px solid #d7caba; color:#685b4b; border-radius:999px; padding:10px 18px; font-size:12px; }
.filter.active,.filter:hover { background:#1c1917; color:#fff5e4; border-color:#1c1917; }
.grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.producto { padding:0; overflow:hidden; border-radius:18px; background:#fffaf2; border-color:#dfd5c6; box-shadow:0 5px 16px #39241008; }
.producto:hover { transform:translateY(-5px); border-color:#b78b50; box-shadow:0 16px 30px #39241018; }
.producto__visual { position:relative; overflow:hidden; }
.producto__foto { aspect-ratio: 4/3; border-radius:0; margin:0; transition:transform .4s; }
.producto:hover .producto__foto { transform:scale(1.045); }
.producto__categoria { position:absolute; left:16px; bottom:14px; color:#fff2db; background:#1c1917de; backdrop-filter:blur(6px); padding:6px 10px; border-radius:6px; font-size:9px; text-transform:uppercase; letter-spacing:1px; font-weight:700; }
.producto strong { margin:20px 20px 8px; font-size:17px; }
.producto .precio { margin:0 20px; color:#991b1b; font-size:25px; }
.producto__stock { margin:10px 20px 20px; font-size:11px; color:#70644f; }
.producto button { margin: auto 20px 20px; width:calc(100% - 40px); padding:12px; border-radius:9px; }
button:focus-visible,a:focus-visible { outline:3px solid #c28c32; outline-offset:4px; }
button:disabled { cursor:default; opacity:.5; }
.order-section { border-top:4px solid #991b1b; }
.empty-cart { border:1px dashed #cebda6; padding:26px; border-radius:12px; color:#756b60; text-align:center; }
.carrito-resumen { background:#f1e8d9; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.info-grid section { margin:0; }
.info-grid h2 { font-family:inherit; font-size:20px; }
.promo-section { background:radial-gradient(circle at top right,#a1620730,transparent 65%),#241e19; border-color:#241e19; }
.promo-section h2 { color:#fff3de; }
.promo-section .section-desc,.promo-section .mensaje { color:#cbbda9; }
.promo-section .btn-secondary { background:#f0ba65; color:#241e19; }
footer { background:#1c1917; border-top:3px solid #991b1b; color:#dfc9ab; padding:32px; }
.footer-sub { color:#b3a390; }
.footer-contacto { margin-top:20px; padding-top:18px; border-top:1px solid #b388493d; display:flex; justify-content:center; flex-wrap:wrap; gap:12px 28px; font-size:12px; color:#dfc9ab; }
.footer-contacto p { margin:0; }
.producto--cargando { padding:16px; }
@media(max-width:900px) { .header-nav { gap:16px; } .hero-banner { padding:36px; } .hero-stamp { width:130px; height:130px; right:24px; bottom:24px; } .grid { gap:16px; } .producto strong { font-size:15px; } }
@media(max-width:700px) { .header-nav { display:none; } .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .info-grid { grid-template-columns:1fr; } .hero-banner { background-position:60% center; } .hero-stamp { display:none; } .smoke-strip { gap:12px; font-size:8px; letter-spacing:1px; } .menu-note { display:none; } }
@media(max-width:440px) { main { padding:0 16px; margin-top:16px; } .appbar { padding:16px; gap:10px; } .appbar h1 { font-size:14px; } .pill { font-size:9px; padding:5px 8px; } .brand-icon { font-size:23px; padding:4px; } .hero-banner { padding:28px 22px; min-height:470px; border-radius:18px; } .hero-banner h2 { font-size:46px; } .hero-banner p { font-size:13px; } .tag-estrella { font-size:8px; letter-spacing:1px; } .hero-details { font-size:9px; gap:8px; } .hero-details span + span { padding-left:8px; } .grid { gap:12px; } .producto strong { margin:14px 12px 8px; font-size:14px; } .producto .precio { margin:0 12px; font-size:22px; } .producto__stock { margin:8px 12px 14px; font-size:9px; } .producto button { margin:auto 12px 12px; width:calc(100% - 24px); font-size:11px; padding:11px 5px; } .producto__categoria { left:8px; bottom:8px; font-size:7px; padding:5px 6px; letter-spacing:.4px; } .section-header h2 { font-size:28px; } section { padding:22px; } .info-grid h2 { font-size:19px; } .smoke-strip { flex-wrap:wrap; padding-bottom:20px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } }

/* Logo original de la tienda, sin recortar ni deformar. */
.brand-logo { display:block; width:80px; height:80px; object-fit:contain; flex-shrink:0; }
.footer-logo { display:block; width:140px; height:140px; object-fit:contain; margin:0 auto 12px; }
@media(max-width:440px) { .brand-logo { width:56px; height:56px; } .brand { gap:8px; } }

/* Aviso de sincronización visible desde cualquier sección. */
.aviso-sincronizacion {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 16px 22px;
  border: 1px solid #d6a355;
  border-radius: 12px;
  background: #241e19;
  color: #fff3de;
  box-shadow: 0 8px 30px #0004;
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
}
.aviso-sincronizacion[hidden] { display: none; }
/* Tarjetas del menú: lectura y controles cómodos en pantallas táctiles. */
@media (max-width: 700px) {
  #catalogo { gap: 18px; }
  #catalogo .producto { min-width: 0; border-radius: 18px; }
  #catalogo .producto__foto { height: auto; aspect-ratio: 4 / 3; }
  #catalogo .producto strong {
    margin: 18px 16px 8px;
    font-size: 17px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  #catalogo .producto .precio { margin: 0 16px; font-size: 25px; }
  #catalogo .producto__categoria {
    left: 12px;
    bottom: 12px;
    max-width: calc(100% - 24px);
    padding: 7px 10px;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: .5px;
  }
  #catalogo .producto__stock {
    margin: 10px 16px 18px;
    font-size: 12px;
    line-height: 1.6;
  }
  #catalogo .producto button {
    width: calc(100% - 32px);
    min-height: 48px;
    margin: auto 16px 16px;
    padding: 12px;
    font-size: 14px;
    line-height: 1.4;
  }
  .menu-filters { gap: 8px; }
  .menu-filters .filter { min-height: 44px; padding: 10px 14px; }
}
@media (max-width: 520px) {
  #catalogo { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #catalogo .producto__foto { aspect-ratio: 16 / 10; }
  #catalogo .producto strong { font-size: 19px; }
  #catalogo .producto .precio { font-size: 28px; }
  #catalogo .producto button { font-size: 15px; }
  #menu.menu-section { padding: 18px 0 32px; }
}
@media (hover: none) {
  #catalogo .producto:hover { transform: none; }
  #catalogo .producto:hover .producto__foto { transform: none; }
}