/* Vessa & Humo — componentes compartidos */

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  /* text-align centra también la 2ª línea cuando el texto del botón se parte;
     justify-content solo centra el bloque completo, no cada línea. */
  text-align: center;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.97); }

.btn-primary {
  background: var(--vino);
  color: #fff;
}
.btn-primary:hover { background: var(--vino-oscuro); box-shadow: var(--sombra-sm); }

.btn-secondary {
  background: transparent;
  border-color: var(--marron);
  color: var(--marron);
}
.btn-secondary:hover { background: var(--marron); color: var(--crema); }

.btn-ocre {
  background: var(--ocre);
  color: var(--tinta);
}
.btn-ocre:hover { background: #c68d3c; }

.btn-beige {
  background: var(--beige);
  color: var(--tinta);
}
.btn-beige:hover { background: var(--ocre); }

.btn-whatsapp {
  background: var(--tinta);
  color: #fff;
}
.btn-whatsapp:hover { background: #1f0d05; }
.btn-whatsapp svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn-block { width: 100%; }
.btn-lg { padding: 16px 36px; font-size: 1rem; }
.btn-sm { padding: 10px 20px; font-size: .85rem; }

.btn[disabled] { opacity: .5; cursor: not-allowed; }
/* El display de .btn le gana al display:none que trae el atributo hidden: sin
   esta regla, un botón con hidden se sigue viendo y ocupando su lugar. */
.btn[hidden] { display: none; }

/* ---------- Encabezado / navegación ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 249, 244, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: 14px;
  padding-inline: var(--gutter);
  max-width: var(--container-max);
  margin: 0 auto;
}
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo img { height: 30px; width: auto; }
@media (min-width: 1024px) {
  .nav-logo img { height: 42px; }
}

.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  color: var(--marron);
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--vino);
  text-decoration: none;
  border-bottom-color: var(--ocre);
}

.nav-cta { display: flex; align-items: center; gap: var(--space-2); }

/* Insignia del pedido en curso (carrito) */
.nav-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--linea);
  border-radius: var(--radius-sm);
  color: var(--marron);
  background: var(--papel);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-cart:hover { color: var(--vino); border-color: var(--ocre); text-decoration: none; }
.nav-cart[hidden] { display: none; }
.nav-cart svg { width: 20px; height: 20px; }
.nav-cart-count {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--vino);
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}
/* En pantallas angostas el botón de WhatsApp deja solo el ícono: con el carrito
   en la barra, el texto empujaba la hamburguesa fuera de la pantalla. */
@media (max-width: 480px) {
  .nav-bar .btn-whatsapp span { display: none; }
  .nav-bar .btn-whatsapp { padding-inline: 12px; }
}

.nav-cart.is-pulsing { animation: cart-pulse .45s var(--ease-out) 1; }
@keyframes cart-pulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: none;
  border: 1px solid var(--linea);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  display: block;
  width: 18px; height: 2px;
  background: var(--marron);
  position: relative;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle::before { position: absolute; transform: translateY(-6px); }
.nav-toggle::after { position: absolute; transform: translateY(6px); }
body.nav-open .nav-toggle span { opacity: 0; }
body.nav-open .nav-toggle::before { transform: rotate(45deg); }
body.nav-open .nav-toggle::after { transform: rotate(-45deg); }

.nav-links-mobile {
  display: none;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0; padding: var(--space-2) var(--gutter) var(--space-3);
  border-top: 1px solid var(--linea);
  background: var(--papel);
}
body.nav-open .nav-links-mobile { display: flex; }
.nav-links-mobile a {
  /* display:block es indispensable: como inline, el padding no genera altura y
     el border-bottom se dibujaba encima del texto del ítem siguiente. */
  display: block;
  color: var(--marron);
  padding: 14px 4px;
  font-weight: 500;
}
.nav-links-mobile li + li { border-top: 1px solid var(--linea); }
.nav-links-mobile a[aria-current="page"] { color: var(--vino); }

/* La acción de pedir, destacada dentro de la hamburguesa: en móvil no cabe un
   botón más en la barra (el de WhatsApp ya esconde su texto por lo mismo). */
.nav-mobile-cta a {
  background: var(--ocre);
  color: var(--marron);
  font-weight: 600;
  text-align: center;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}
.nav-mobile-cta a:hover { text-decoration: none; }
/* Es un botón, no una fila más de la lista: la línea divisoria le sobra. */
.nav-mobile-cta + li { border-top: 0; }

/* El botón del header solo existe donde hay lugar: a partir de 1024px, que es
   justo donde la hamburguesa desaparece y aparece la navegación completa. */
.nav-order-cta { display: none; }

@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .nav-links-mobile { display: none !important; }
  .nav-order-cta { display: inline-flex; }
}

/* ---------- Pie de página ---------- */
.site-footer {
  background: var(--marron);
  color: var(--beige);
  padding-block: var(--space-6) var(--space-4);
}
.site-footer a { color: var(--crema); }
.site-footer a:hover { color: var(--ocre); }
.footer-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
.footer-brand img { height: 40px; margin-bottom: var(--space-3); }
.footer-brand p { color: var(--beige); opacity: .85; max-width: 34ch; }
.footer-col h4 { color: var(--ocre); font-size: .95rem; margin-bottom: var(--space-2); }
.footer-col ul li { margin-bottom: 10px; }

.footer-social { display: flex; flex-direction: column; gap: 10px; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--crema);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-social a:hover { color: var(--ocre); text-decoration: none; }
.footer-social svg { width: 20px; height: 20px; flex-shrink: 0; }
.footer-bottom {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  font-size: .82rem;
  color: var(--beige);
  opacity: .75;
}

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* ---------- Botones de las apps de delivery ----------
   Compartidos por Inicio y el Menú. Vivían en pages/inicio.css, que no se carga
   en menu.html: allá los botones se quedaban sin layout. */
.app-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: var(--space-2) 0 var(--space-3);
}
.app-btn { width: 100%; }

/* Desde tablet caben las tres en una fila, repartidas por igual. */
@media (min-width: 640px) {
  .app-buttons { flex-direction: row; flex-wrap: wrap; }
  .app-btn { flex: 1 1 0; width: auto; min-width: 130px; padding-inline: 20px; }
}

/* ---------- Stepper de cantidad ----------
   Compartido: el checklist de pedidos.html y las tarjetas del menú. La regla de
   "apagado hasta que se marque el platillo" es propia del formulario y vive en
   css/pages/formularios.css. */
.qty-stepper {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
/* display:flex gana sobre el display:none que trae el atributo hidden, así que
   sin esta regla el stepper del menú se vería aunque esté oculto. */
.qty-stepper[hidden] { display: none; }
.qty-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linea);
  background: #fff;
  border-radius: var(--radius-sm);
  color: var(--vino);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.qty-btn:hover { background: var(--crema); border-color: var(--vino); }
.qty-btn:active { transform: scale(.94); }
.qty-value {
  min-width: 26px;
  text-align: center;
  font-weight: 600;
  color: var(--marron);
  font-variant-numeric: tabular-nums;
}

/* ---------- Barra flotante del pedido (js/cart-float.js) ----------
   Acompaña al cliente por el menú para que no tenga que subir hasta el header.
   Muestra solo la cuenta: el subtotal depende de los aderezos incluidos y solo
   es correcto en pedidos.html. */
.pedido-float {
  position: fixed;
  left: 50%;
  bottom: var(--space-3);
  /* En una variable porque el keyframe del pulse también la necesita: si ahí se
     escribiera -50% fijo, la barra saltaría al centro del viewport al animarse. */
  --float-x: -50%;
  transform: translateX(var(--float-x));
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: calc(100% - (var(--gutter) * 2));
  /* min-height en vez de padding vertical: así iguala exactamente al flotante
     de WhatsApp, que es un círculo de lado fijo. */
  min-height: 54px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--marron);
  color: var(--crema);
  font-size: .95rem;
  font-weight: 600;
  white-space: nowrap; /* "Ver mi pedido" en una sola línea, también en 375px */
  box-shadow: var(--sombra-lg);
  transition: background var(--dur-fast) var(--ease-out);
}
.pedido-float:hover { background: var(--vino); color: #fff; text-decoration: none; }
.pedido-float[hidden] { display: none; }
.pedido-float svg { width: 18px; height: 18px; opacity: .8; }
.pedido-float-count {
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ocre);
  color: var(--marron);
  font-size: .88rem;
  line-height: 26px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Mismo gesto que la insignia del header y también una sola vez, pero con su
   propio keyframe: la barra ya usa translateX(-50%) para centrarse y el
   cart-pulse del header lo pisaría, descuadrándola a media animación. */
.pedido-float.is-pulsing { animation: pedido-float-pulse .45s var(--ease-out) 1; }
@keyframes pedido-float-pulse {
  0%   { transform: translateX(var(--float-x)) scale(1); }
  45%  { transform: translateX(var(--float-x)) scale(1.06); }
  100% { transform: translateX(var(--float-x)) scale(1); }
}

/* En móvil la barra se centra en el espacio que deja el flotante de WhatsApp,
   no en el viewport: centrada a secas, con los tamaños nuevos, su esquina
   derecha se metía debajo del círculo en 375px. El desplazamiento es la mitad
   de lo que ocupa el círculo más su separación. En escritorio sobra ancho y se
   queda centrada de verdad. */
@media (max-width: 767px) {
  .pedido-float { --float-x: calc(-50% - 33px); }
}

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-float {
  position: fixed;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 90;
  /* Comparte el fondo con la barra del pedido, a la misma altura, y ninguno se
     mueve cuando aparece el otro. 54px: probado en el teléfono, 44 se sentía
     chico para pulsar con el pulgar sin apuntar. */
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--vino);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-lg);
  transition: transform var(--dur-fast) var(--ease-out);
}
.whatsapp-float:hover { transform: scale(1.06); text-decoration: none; }
.whatsapp-float svg { width: 26px; height: 26px; }

/* ---------- Tarjetas ---------- */
.card {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sombra-lg); }
.card-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--linea); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--marron), var(--vino));
}
.card-media--placeholder img { width: 44px; height: auto; object-fit: contain; opacity: .9; filter: brightness(0) invert(1); }
.card-badge {
  position: absolute;
  margin: 10px;
  padding: 5px 12px;
  background: var(--ocre);
  color: var(--tinta);
  font-size: .74rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
}
.card-media-wrap { position: relative; }
.card-body { padding: var(--space-3); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.card-title h3 { margin: 0; }
.card-price { font-family: var(--font-display); color: var(--vino); font-weight: 600; white-space: nowrap; }
.card-desc { color: var(--humo); font-size: .92rem; flex: 1; }
.card-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

.grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .grid--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Pasos numerados ---------- */
.steps {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  text-align: center;
}
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step-number {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--beige);
  -webkit-text-stroke: 1px var(--vino);
  margin-bottom: var(--space-1);
}

/* ---------- Insignia / etiqueta de categoría ---------- */
.badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--crema);
  border: 1px solid var(--linea);
  color: var(--marron);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.badge[aria-pressed="true"] {
  background: var(--vino);
  border-color: var(--vino);
  color: #fff;
}
.badge-group { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Formularios ---------- */
.field { margin-bottom: var(--space-3); }
.field label {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  color: var(--marron);
  margin-bottom: 6px;
}
.field .hint { font-size: .8rem; color: var(--humo); margin-top: 4px; }
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="date"],
.field input[type="time"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--linea);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--tinta);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ocre);
}
.field textarea { min-height: 110px; resize: vertical; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--peligro); }
.field .error-msg { display: none; color: var(--peligro); font-size: .82rem; margin-top: 4px; }
.field.has-error .error-msg { display: block; }

.radio-group, .checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.radio-pill {
  position: relative;
}
.radio-pill input { position: absolute; opacity: 0; }
.radio-pill span {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--linea);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: .88rem;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.radio-pill input:checked + span {
  background: var(--vino);
  border-color: var(--vino);
  color: #fff;
}
.radio-pill input:focus-visible + span { outline: 2px solid var(--ocre); outline-offset: 2px; }

/* ---------- Indicador de pasos (cuestionario catering) ---------- */
.step-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-4);
}
.step-indicator .dot {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--linea);
  transition: background var(--dur-base) var(--ease-out);
}
.step-indicator .dot.is-active,
.step-indicator .dot.is-done { background: var(--vino); }
.step-label { font-size: .82rem; color: var(--humo); margin-bottom: var(--space-3); }

.form-step { display: none; }
.form-step.is-active { display: block; }
.form-nav { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-4); }
/* El hueco que empuja "Siguiente" a la derecha cuando no hay botón "Atrás". */
.form-nav > span:empty { display: none; }
/* En móvil los dos botones no caben en una línea: "Enviar pedido por WhatsApp"
   se salía del contenedor. Se apilan a todo el ancho, en el mismo orden que en
   escritorio (Atrás arriba, la acción principal abajo). */
@media (max-width: 520px) {
  .form-nav { flex-direction: column; }
  .form-nav .btn { width: 100%; }
}

/* ---------- Acordeón (FAQ) ---------- */
.accordion-item {
  border-bottom: 1px solid var(--linea);
}
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) 4px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--marron);
  cursor: pointer;
}
.accordion-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  position: relative;
}
.accordion-icon::before,
.accordion-icon::after {
  content: "";
  position: absolute;
  background: var(--vino);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.accordion-icon::before { width: 14px; height: 2px; }
.accordion-icon::after { width: 2px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
.accordion-item[data-open="true"] .accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.accordion-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur-base) var(--ease-out);
}
.accordion-panel-inner { padding: 0 4px var(--space-3); color: var(--humo); }

/* ---------- Notas / avisos ---------- */
.notice {
  background: var(--crema);
  border: 1px solid var(--linea);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: .92rem;
  color: var(--marron);
}
.notice strong { color: var(--vino); }