/* ==========================================================================
   BENVOLENTIERI — pedido y plato animado
   ========================================================================== */

/* ==========================================================================
   El plato animado de la carta
   ========================================================================== */

.carta-plato {
  display: grid;
  place-items: center;
  padding: .4rem 0 .2rem;
}
.plato-svg {
  width: min(100%, 170px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 10px 22px rgba(22, 24, 15, .13));
}

/* La comida entra al cambiar de categoría: se nota el cambio sin marear. */
.pl-comida { animation: platoEntra .62s cubic-bezier(.34, 1.3, .64, 1) both; }
@keyframes platoEntra {
  from { opacity: 0; transform: translateY(14px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
.pl-comida { transform-box: fill-box; transform-origin: 50% 78%; }

/* Los ingredientes brotan uno detrás de otro. */
.pl-brota > * {
  transform-box: fill-box;
  transform-origin: center;
  animation: platoBrota .5s cubic-bezier(.34, 1.56, .64, 1) both;
}
.pl-brota > :nth-child(1) { animation-delay: .28s; }
.pl-brota > :nth-child(2) { animation-delay: .36s; }
.pl-brota > :nth-child(3) { animation-delay: .44s; }
.pl-brota > :nth-child(4) { animation-delay: .52s; }
@keyframes platoBrota { from { transform: scale(0); } to { transform: scale(1); } }

.pl-hoja > * {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: platoHoja .7s var(--suave) .5s both;
}
@keyframes platoHoja {
  from { transform: scale(.2) rotate(-18deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* Vapor: tres hilos que suben y se desvanecen, desfasados para que se lea
   como ambiente y no como una animación sincronizada. */
.pl-vapor path {
  stroke-dasharray: 46;
  animation: vapor 3.4s ease-in-out infinite;
  opacity: 0;
}
.pl-vapor .v1 { animation-delay: .2s; }
.pl-vapor .v2 { animation-delay: 1.1s; }
.pl-vapor .v3 { animation-delay: 1.9s; }
@keyframes vapor {
  0%   { opacity: 0;   transform: translateY(10px) scaleY(.7); }
  25%  { opacity: .75; }
  70%  { opacity: .35; }
  100% { opacity: 0;   transform: translateY(-16px) scaleY(1.15); }
}
.pl-vapor path { transform-box: fill-box; transform-origin: 50% 100%; }

/* El tenedor de la pasta gira despacio, como si enrollara. */
.pl-tenedor { transform-box: fill-box; transform-origin: 50% 0; animation: enrollar 5s ease-in-out infinite; }
@keyframes enrollar {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(9deg); }
}

/* Burbujas del spritz. */
.pl-burbujas circle { animation: burbuja 3s ease-in-out infinite; }
.pl-burbujas .b2 { animation-delay: .9s; }
.pl-burbujas .b3 { animation-delay: 1.7s; }
@keyframes burbuja {
  0%   { transform: translateY(6px); opacity: 0; }
  30%  { opacity: .8; }
  100% { transform: translateY(-22px); opacity: 0; }
}

.pl-salsa { transform-box: fill-box; transform-origin: 50% 0; animation: salsa 4.5s ease-in-out infinite; }
@keyframes salsa {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.06); }
}

/* ==========================================================================
   Botón de añadir en cada plato de la carta
   ========================================================================== */

.plato { position: relative; }

.plato-add {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(30, 91, 55, .32);
  border-radius: 50%;
  color: var(--verde);
  font-family: var(--sans);
  font-size: 1.15rem;
  line-height: 1;
  background: rgba(250, 245, 233, .7);
  transition: background var(--corto) var(--seco),
              color var(--corto) var(--seco),
              transform var(--corto) var(--suave),
              opacity var(--corto) var(--seco);
}
.plato-add:hover, .plato-add:focus-visible {
  background: var(--verde);
  color: var(--marfil);
  transform: scale(1.1);
}
/* Al añadir: pasa a marca de visto un instante. */
.plato-add.puesto {
  background: var(--verde);
  color: var(--marfil);
  transform: scale(1.18);
}
.plato-add.puesto::after { content: '✓'; font-size: .85rem; }
.plato-add.puesto span { display: none; }

/* En escritorio aparece al acercarse a la fila; en táctil está siempre. */
@media (hover: hover) and (pointer: fine) {
  .plato-add { opacity: 0; }
  .plato:hover .plato-add,
  .plato:focus-within .plato-add,
  .plato-add:focus-visible { opacity: 1; }
}

/* La fila del plato: dibujo · texto · precio · añadir. */
.plato {
  grid-template-columns: auto 1fr auto auto;
  column-gap: .85rem;
  align-items: center;
}
.plato-txt { grid-column: 2; }
.plato-p { grid-column: 3; }
.plato-add { grid-row: 1; grid-column: 4; }

/* ==========================================================================
   El dibujo de cada plato
   ========================================================================== */

.plato-mini {
  grid-row: 1;
  grid-column: 1;
  display: block;
  width: clamp(42px, 5vw, 52px);
  flex-shrink: 0;
}
.mini-svg { width: 100%; height: auto; overflow: visible; }

.mi-cuerpo {
  transform-box: fill-box;
  transform-origin: 50% 70%;
  /* Entrada escalonada al abrir la categoría. El retardo lo pone el CSS de
     abajo por posición, para no tener que tocar el JS. */
  animation: miniEntra .5s cubic-bezier(.34, 1.4, .64, 1) both;
  transition: transform var(--medio) var(--suave), filter var(--medio) var(--seco);
}
@keyframes miniEntra {
  from { opacity: 0; transform: scale(.55) translateY(6px) rotate(-8deg); }
  to   { opacity: 1; transform: none; }
}
.plato:nth-child(1)  .mi-cuerpo { animation-delay: .04s; }
.plato:nth-child(2)  .mi-cuerpo { animation-delay: .09s; }
.plato:nth-child(3)  .mi-cuerpo { animation-delay: .14s; }
.plato:nth-child(4)  .mi-cuerpo { animation-delay: .19s; }
.plato:nth-child(5)  .mi-cuerpo { animation-delay: .24s; }
.plato:nth-child(6)  .mi-cuerpo { animation-delay: .29s; }
.plato:nth-child(7)  .mi-cuerpo { animation-delay: .34s; }
.plato:nth-child(8)  .mi-cuerpo { animation-delay: .39s; }

/* Al pasar por la fila, el plato se acerca y se inclina un poco. */
.plato:hover .mi-cuerpo {
  transform: scale(1.16) rotate(-5deg);
  filter: drop-shadow(0 4px 8px rgba(22, 24, 15, .22));
}

/* Las burbujas de la soda suben siempre: es lo único que se mueve solo, y
   con un solo plato en pantalla no cansa. */
.mi-burbujas circle { animation: miBurbuja 3.2s ease-in-out infinite; }
.mi-burbujas circle:nth-child(2) { animation-delay: 1s; }
.mi-burbujas circle:nth-child(3) { animation-delay: 1.9s; }
@keyframes miBurbuja {
  0%   { transform: translateY(4px); opacity: 0; }
  35%  { opacity: .7; }
  100% { transform: translateY(-10px); opacity: 0; }
}

/* ==========================================================================
   Botón flotante del pedido
   ========================================================================== */

.pedido-flota {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  /* Justo encima del de WhatsApp, que mide 58 px. */
  bottom: calc(clamp(1rem, 3vw, 2rem) + 58px + .8rem);
  z-index: 71;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem 1.1rem .7rem .85rem;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--oro-claro), var(--oro));
  color: var(--carbon);
  box-shadow: 0 14px 34px -12px rgba(201, 162, 74, .85);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.92);
  transition: opacity var(--medio) var(--seco),
              visibility var(--medio),
              transform var(--medio) var(--suave);
}
.pedido-flota.dentro { opacity: 1; visibility: visible; transform: none; }
.pedido-flota:hover { transform: scale(1.04); }

.pedido-flota svg { width: 20px; height: 20px; }
.pedido-flota-n {
  min-width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--carbon);
  color: var(--oro-claro);
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  padding-inline: .3rem;
}
.pedido-flota-t {
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pedido-flota.late { animation: latePedido .7s var(--suave); }
@keyframes latePedido {
  0%   { transform: none; }
  35%  { transform: scale(1.14); }
  100% { transform: none; }
}

/* ==========================================================================
   Panel del pedido
   ========================================================================== */

.pedido {
  position: fixed;
  inset: 0;
  z-index: 210;
  visibility: hidden;
  pointer-events: none;
}
.pedido.abierto { visibility: visible; pointer-events: auto; }

.pedido-velo {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 5, .74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--medio) var(--seco);
}
.pedido.abierto .pedido-velo { opacity: 1; }

.pedido-caja {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--pergamino);
  color: var(--tinta);
  box-shadow: -30px 0 70px -40px rgba(0, 0, 0, .9);
  transform: translateX(102%);
  transition: transform .55s var(--suave);
}
.pedido.abierto .pedido-caja { transform: none; }

.pedido-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem clamp(1.1rem, 4vw, 1.7rem);
  border-bottom: 1px solid rgba(22, 24, 15, .14);
  flex-shrink: 0;
}
.pedido-titulo {
  font-family: var(--display);
  font-size: 1.55rem;
  letter-spacing: -.01em;
}
.pedido-cuenta {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7A7B69;
  display: block;
  margin-top: .2rem;
}
.pedido-cerrar {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid rgba(22, 24, 15, .2);
  border-radius: 50%;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: background var(--corto) var(--seco), transform var(--corto) var(--suave);
}
.pedido-cerrar:hover { background: var(--borgona); color: var(--marfil); transform: rotate(90deg); }

/* -- Lista */
.pedido-cuerpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(1rem, 3vw, 1.4rem) clamp(1.1rem, 4vw, 1.7rem);
}

.pedido-linea {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: .5rem .8rem;
  padding: .85rem 0;
  border-bottom: 1px dashed rgba(22, 24, 15, .16);
}
.pedido-linea-txt b {
  display: block;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.25;
}
.pedido-linea-txt span {
  font-family: var(--sans);
  font-size: .72rem;
  color: #7A7B69;
}
.pedido-cant {
  display: flex;
  align-items: center;
  gap: .1rem;
  border: 1px solid rgba(22, 24, 15, .18);
  border-radius: 999px;
  overflow: hidden;
}
.pedido-cant button {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  font-size: 1rem;
  color: var(--verde);
  transition: background var(--corto) var(--seco), color var(--corto) var(--seco);
}
.pedido-cant button:hover { background: var(--verde); color: var(--marfil); }
.pedido-cant span {
  min-width: 24px;
  text-align: center;
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pedido-linea-p {
  font-family: var(--sans);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--verde);
  min-width: 3.4rem;
  text-align: right;
}
.pedido-quita {
  width: 28px; height: 28px;
  border-radius: 50%;
  color: #9A9B8A;
  font-size: 1rem;
  transition: background var(--corto) var(--seco), color var(--corto) var(--seco);
}
.pedido-quita:hover { background: rgba(158, 47, 38, .12); color: var(--borgona); }

.pedido-vacio {
  display: grid;
  justify-items: center;
  gap: .7rem;
  text-align: center;
  padding: 2.5rem 1rem;
}
.pedido-vacio p { font-family: var(--serif); font-size: 1.15rem; }
.pedido-vacio-ayuda { font-family: var(--sans); font-size: .88rem; color: #7A7B69; max-width: 26ch; }
.pedido-vacio .btn { margin-top: .6rem; }

/* -- Total */
.pedido-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(22, 24, 15, .18);
}
.pedido-total-et {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #7A7B69;
}
.pedido-total-n {
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--verde);
  font-variant-numeric: tabular-nums;
}
.pedido-vaciar {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9A9B8A;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pedido-vaciar:hover { color: var(--borgona); }

/* -- Tipo de pedido */
.pedido-tipo-et {
  display: block;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6B6C5C;
  margin: 1.4rem 0 .6rem;
}
.pedido-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pedido-tipos button {
  padding: .8rem .85rem;
  border: 1px solid rgba(22, 24, 15, .18);
  border-radius: 4px;
  text-align: left;
  background: rgba(250, 245, 233, .55);
  transition: border-color var(--corto) var(--seco), background var(--corto) var(--seco);
}
.pedido-tipos button b {
  display: block;
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 600;
}
.pedido-tipos button span {
  font-family: var(--sans);
  font-size: .7rem;
  color: #7A7B69;
  line-height: 1.4;
  display: block;
  margin-top: .15rem;
}
.pedido-tipos button.viva {
  border-color: var(--verde);
  background: rgba(30, 91, 55, .1);
  box-shadow: inset 0 0 0 1px var(--verde);
}
.pedido-tipos button.viva b { color: var(--verde); }

.pedido-solo {
  font-family: var(--sans);
  font-size: .76rem;
  line-height: 1.5;
  color: var(--oro-hondo, #8A6520);
  background: #FBF4E6;
  border: 1px solid #EEDDBB;
  border-radius: 4px;
  padding: .6rem .75rem;
  margin-top: .6rem;
}

/* -- Campos */
.pedido-campos { display: grid; gap: .9rem; margin-top: 1.2rem; }
.pedido-fila { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }

/* -- Pie fijo */
.pedido-pie {
  flex-shrink: 0;
  padding: 1rem clamp(1.1rem, 4vw, 1.7rem) clamp(1.1rem, 4vw, 1.5rem);
  border-top: 1px solid rgba(22, 24, 15, .14);
  background: rgba(250, 245, 233, .75);
  display: grid;
  gap: .7rem;
}
.pedido-enviar { width: 100%; }
.pedido-envio-nota,
.pedido-aviso-txt {
  font-family: var(--sans);
  font-size: .72rem;
  line-height: 1.5;
  color: #7A7B69;
}
/* Sin nada en el carrito no hay nada que enviar. */
.pedido.sin-nada .pedido-pie,
.pedido.sin-nada .pedido-total,
.pedido.sin-nada .pedido-tipo-et,
.pedido.sin-nada .pedido-tipos,
.pedido.sin-nada .pedido-solo,
.pedido.sin-nada .pedido-campos { display: none; }

/* ==========================================================================
   Móvil: el panel sube desde abajo
   ========================================================================== */

@media (max-width: 640px) {
  .pedido-caja {
    top: auto;
    left: 0;
    width: 100%;
    height: min(92svh, 100%);
    border-radius: 18px 18px 0 0;
    transform: translateY(102%);
  }
  .pedido.abierto .pedido-caja { transform: none; }

  /* Asa para que se lea como una hoja que sube. */
  .pedido-cab::before {
    content: '';
    position: absolute;
    top: .5rem; left: 50%;
    width: 42px; height: 4px;
    border-radius: 999px;
    background: rgba(22, 24, 15, .2);
    transform: translateX(-50%);
  }
  .pedido-cab { position: relative; padding-top: 1.6rem; }

  .pedido-flota { left: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); justify-content: center; }
  .pedido-fila { grid-template-columns: 1fr; }

  /* El botón de añadir, siempre visible y algo mayor.
   *
   * El `opacity: 1` es obligatorio y no sobra: la regla que lo esconde cuelga
   * de `(hover: hover)`, y un portátil táctil —o simplemente una ventana de
   * escritorio estrechada— cumple las dos condiciones a la vez. Sin esto, en
   * esos casos el botón queda invisible y no hay forma de pedir nada. */
  .plato-add { width: 38px; height: 38px; opacity: 1; }
}

/* ==========================================================================
   Movimiento reducido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .pl-comida, .pl-brota > *, .pl-hoja > * { animation: none; opacity: 1; transform: none; }
  .pl-vapor, .pl-burbujas, .pl-tenedor, .pl-salsa { animation: none; }
  .pl-vapor path { opacity: .4; animation: none; }
  .pedido-caja { transition: none; }
  .pedido-flota.late { animation: none; }
}

/* ==========================================================================
   Las bebidas dibujadas de «Aperitivo»
   Misma receta que su fila de la carta, pero sobre el fondo oscuro de la
   sección del bar. Los trazos ya son dorados y crema, así que se leen sin
   tocar nada; lo único que cambia es el tamaño y la posición en la fila.
   ========================================================================== */

.copa {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 1rem;
}
.copa-mini {
  grid-row: 1 / span 2;
  grid-column: 1;
  display: block;
  width: 46px;
  flex-shrink: 0;
}
.copa-mini svg { width: 100%; height: auto; overflow: visible; }
.copa-n { grid-column: 2; }
.copa-d { grid-column: 2; }
.copa-p { grid-row: 1; grid-column: 3; }

/* Un halo cálido detrás, como la luz de la barra. */
.copa-mini .mi-cuerpo {
  filter: drop-shadow(0 0 10px rgba(201, 162, 74, .28));
  transition: transform var(--medio) var(--suave);
}
.copa:hover .copa-mini .mi-cuerpo { transform: scale(1.14) rotate(-4deg); }

@media (max-width: 720px) {
  .copa { column-gap: .8rem; }
  .copa-mini { width: 40px; }
}