/* ============================================================
 * El Buffet de Lomas — menu.css
 * Estilos del menú público.
 * ============================================================ */

:root {
  --navy:        #0e1f45;
  --navy-mid:    #132558;
  --navy-light:  #1c3272;
  --silver:      #c8d0dc;
  --silver-light: #e8ecf2;
  --gold:        #c9a84c;
  --cream:       #eef0f5;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--cream);
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  min-height: 100vh;
}

[v-cloak] { display: none !important; }

/* ── HEADER ── */
header { animation: fadeDown 0.9s ease both; }

.logo-wrap img {
  width: 100%;
  max-width: 320px;
  height: auto;
  filter: drop-shadow(0 4px 16px rgba(14, 31, 69, .18));
}

.header-rule {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-rule span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--silver), transparent);
}

.header-rule svg {
  flex-shrink: 0;
  opacity: .55;
}

/* ── LOADING / ERROR ── */
.estado {
  text-align: center;
  padding: 60px 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.4rem;
  color: #8090b2;
  letter-spacing: .06em;
}

/* ── SECTION ── */
.section { animation: fadeUp 0.7s ease both; }

.section-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.section-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--silver), transparent);
}

.section-title {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(.9rem, 2.5vw, 1.5rem);
  font-weight: 500;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--navy-mid);
  white-space: nowrap;
}

.section-icon-label {
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ── ITEM ── */
.item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 6px;
  transition: background .18s;
}

.item:hover { background: rgba(14, 31, 69, .05); }

.item-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  margin-top: 8px;
}

.item-body {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.item-body-text {
  flex: 2;
  min-width: 0;
}

.item-name {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.05rem, 2.5vw, 1.7rem);
  font-weight: 400;
  color: var(--navy);
  line-height: 1.4;
}

.item-note {
  font-size: .72rem;
  color: #637092;
  font-style: italic;
  margin-top: 1px;
  line-height: 1.4;
}

.item-dots-line {
  flex: 1;
  border-bottom: 1px dotted var(--silver);
  margin-bottom: 4px;
  min-width: 16px;
}

.item-price {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1rem, 2.5vw, 1.7rem);
  font-weight: 600;
  color: var(--navy-mid);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── VEGGIE BADGE ── */
.badge-veggie {
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 20px;
  background: #d4edda;
  color: #286940;
  border: 1px solid #a8d5b5;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* ── DIVIDER ORNAMENT ── */
.divider      { opacity: .4; }
.divider svg  { width: 80px; }

/* ── FOOTER ── */
footer {
  border-top: 1px solid var(--silver);
  color: #8090b2;
  font-size: .7rem;
  letter-spacing: .1em;
}

/* ── ANIMATIONS ── */
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media print {
  body { background: white; }
  .item:hover { background: transparent; }
}