/* Compatibilidad entre el HTML v1.0.0 y el CSS base publicado */
.brand{display:flex;align-items:center;gap:18px}
.brand-home{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none}
.brand-home:hover{color:inherit}
.brand-mark{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--wine);color:#fff;font-family:Georgia,serif;font-weight:700;flex:0 0 44px}
.brand-mark img{width:100%;height:100%;object-fit:cover;display:block}
.brand-home>div{display:grid}
.brand-home strong{letter-spacing:.14em;font-size:.92rem}
.brand-home small{color:var(--muted)}
.brand-phone{color:var(--wine);font-weight:800;text-decoration:none;white-space:nowrap}

/* Botón flotante de WhatsApp */
.floating-whatsapp{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:60;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:10px 18px 10px 11px;
  border-radius:999px;
  background:#168c54;
  color:#fff;
  text-decoration:none;
  font-weight:850;
  box-shadow:0 18px 42px rgba(22,140,84,.3);
  transition:transform .2s ease,background .2s ease;
}
.floating-whatsapp:hover{background:#107544;color:#fff;transform:translateY(-2px)}
.floating-whatsapp>span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  font-size:1.15rem;
}

/* Categorías */
.category-grid{
  max-width:1240px;
  margin:0 auto 56px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.category-card{
  min-height:210px;
  padding:26px;
  border:1px solid var(--line);
  border-radius:24px;
  background:#fff;
  color:var(--ink);
  text-align:left;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  cursor:pointer;
  box-shadow:0 10px 32px rgba(80,54,32,.07);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.category-card:hover{
  transform:translateY(-3px);
  border-color:#d7b996;
  box-shadow:0 18px 42px rgba(80,54,32,.12);
}
.category-card.active{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}
.category-card>span{font-size:2.2rem;margin-bottom:20px}
.category-card>strong{font-family:Georgia,serif;font-size:1.55rem;font-weight:500}
.category-card>small{display:block;margin:10px 0 22px;color:var(--muted);line-height:1.45}
.category-card.active>small{color:#ddd1c8}
.category-card>em{margin-top:auto;color:var(--wine);font-style:normal;font-weight:850}
.category-card.active>em{color:#efc58f}

/* Encabezado y estado inicial de productos */
.products-heading{
  max-width:1240px;
  margin:0 auto 28px;
  scroll-margin-top:100px;
}
.products-heading h2{
  margin:10px 0 0;
  font-family:Georgia,serif;
  font-size:clamp(2.2rem,4vw,3.8rem);
  font-weight:500;
  letter-spacing:-.035em;
}
.category-prompt{
  grid-column:1/-1;
  min-height:230px;
  border:1px dashed var(--line);
  border-radius:28px;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  padding:32px;
  color:var(--muted);
}
.category-prompt>span{font-size:2rem;color:var(--wine)}
.category-prompt h3{margin:12px 0 6px;color:var(--ink);font-size:1.35rem}
.category-prompt p{margin:0}

/* Tarjetas, cantidades y combos */
.product-card.no-visual{grid-template-columns:1fr}
.pre-add{display:grid;gap:10px;justify-items:end}
.pre-add label{display:grid;gap:6px;color:var(--muted);font-size:.82rem;font-weight:700}
.quantity-picker{
  display:grid;
  grid-template-columns:34px 48px 34px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.quantity-picker button{
  width:34px;
  height:36px;
  border:0;
  background:#f7f1e9;
  color:var(--ink);
  cursor:pointer;
  font-weight:900;
}
.quantity-picker input{
  width:48px;
  height:36px;
  padding:0;
  border:0;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  border-radius:0;
  text-align:center;
  appearance:textfield;
}
.quantity-picker input::-webkit-inner-spin-button,
.quantity-picker input::-webkit-outer-spin-button{appearance:none;margin:0}

.combo-builder{
  grid-column:1/-1;
  border:1px solid var(--line);
  border-radius:28px;
  padding:28px;
  background:#fff;
  box-shadow:0 12px 40px rgba(80,54,32,.08);
}
.combo-intro{display:flex;gap:18px;align-items:center;margin-bottom:22px}
.combo-intro>span{font-size:2.5rem}
.combo-intro h3{margin:0 0 5px;font-family:Georgia,serif;font-size:2rem;font-weight:500}
.combo-intro p{margin:0;color:var(--muted)}
.combo-list{display:grid;gap:10px;margin-bottom:22px}
.combo-list>label{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  gap:14px;
  align-items:center;
  padding:15px;
  border:1px solid var(--line);
  border-radius:16px;
  cursor:pointer;
}
.combo-list>label>input{width:20px;height:20px}
.combo-list>label>span:nth-of-type(1){display:grid;gap:4px}
.combo-list small{color:var(--muted)}
.combo-quantity{display:flex!important;align-items:center;gap:8px;color:var(--muted);font-size:.8rem}

.beverage-list{display:grid;gap:10px;margin:18px 0}
.beverage-list article{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:10px;
  align-items:center;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  text-align:left;
}
.beverage-list article>div{display:grid}
.beverage-list small{color:var(--muted)}
.beverage-list label{display:grid;gap:4px;font-size:.75rem;color:var(--muted)}
.beverage-list article>button{
  border:0;
  border-radius:999px;
  padding:10px 13px;
  background:var(--wine);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

@media(max-width:900px){
  .brand{gap:10px}
  .brand-home small{display:none}
  .brand-phone{font-size:.78rem}
  .category-grid{grid-template-columns:1fr 1fr;margin-bottom:42px}
  .category-card{min-height:180px;padding:20px}
  .floating-whatsapp{bottom:90px;right:14px}
  .combo-list>label{grid-template-columns:auto 1fr auto}
  .combo-quantity{grid-column:2/-1}
}
@media(max-width:600px){
  .category-grid{grid-template-columns:1fr}
  .category-card{min-height:155px}
  .pre-add{justify-items:stretch}
  .pre-add label{justify-items:start}
  .combo-builder{padding:20px}
  .combo-list>label{grid-template-columns:auto 1fr}
  .combo-list>label>b{grid-column:2}
  .combo-quantity{grid-column:2}
  .beverage-list article{grid-template-columns:1fr}
  .floating-whatsapp strong{display:none}
  .floating-whatsapp{width:54px;height:54px;padding:10px;justify-content:center}
}
@media(max-width:430px){
  .brand-home strong{font-size:.8rem}
  .brand-phone{display:none!important}
}