/* -------------------------------------------------------------------------
   Añadidos propios sobre el diseño exportado de Webflow.
   Fichero aparte a propósito: el CSS de Webflow lleva hash en el nombre y se
   reemplaza entero en cada exportación, así que cualquier regla escrita ahí
   dentro se perdería.
   ------------------------------------------------------------------------- */

/* Nombre visible de cada bebida, debajo de la foto.
   En el diseño original el nombre solo vivía en el atributo alt de la imagen:
   no se leía en la carta y el buscador del navegador no lo encontraba nunca. */
.nombre_bebida {
  display: block;
  width: 100%;
  margin: 7px 0 3px;
  font-family: Quicksand, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--negro);
  overflow-wrap: break-word;
}

/* Las tarjetas de bebida encogen a 100px y 78px; el nombre las acompaña. */
@media screen and (max-width: 991px) { .nombre_bebida { font-size: 12px } }
@media screen and (max-width: 767px) { .nombre_bebida { font-size: 11px; margin-top: 5px } }
@media screen and (max-width: 479px) { .nombre_bebida { font-size: 10.5px } }

/* -------------------------------------------------------------------------
   Carta de septiembre de 2026: copas y cachimbas por familias.

   .carta_seccion es un flex con wrap, así que un hijo sin ancho se coloca AL LADO
   del siguiente: el rótulo «WHISKY» acababa pegado a la primera columna de botellas.
   Con esto, cada rótulo y cada lista ocupan su propia fila.
   ------------------------------------------------------------------------- */
.carta_seccion.negra > .categoria-shisha,
.carta_seccion.negra > .w-dyn-list {
  width: 100%;
}

/* Un poco de aire entre una familia y la anterior. */
.carta_seccion.negra > .categoria-shisha {
  margin-top: 18px;
}

/* En la carta de copas el segundo campo es el PRECIO (en las cachimbas era la marca
   del tabaco, y por eso el diseño lo pinta diminuto y gris). Aquí se lee. */
.carta_seccion.negra .producto-precio {
  color: var(--blanco);
  font-size: 17px;
  line-height: 1.2;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .carta_seccion.negra .producto-precio { font-size: 15px }
}