/* Grupo Event's — ajustes de teléfono.
 *
 * El diseño llega con todo el estilo en atributos `style`, y un estilo en
 * línea le gana a cualquier clase: aquí `!important` no es opcional.
 *
 * El diseño se pensó para pantalla ancha y no trae media queries. Estas
 * reglas sólo corrigen lo que en un teléfono quedaba fuera de la pantalla;
 * no cambian el aspecto en escritorio.
 */

@media (max-width: 759px) {

  /* --- El encabezado, en dos filas en vez de tres -------------------
   * Venía repartido en tres: logotipo, luego las pestañas, y el botón de
   * WhatsApp solo en una tercera. Con display:contents el envoltorio del
   * logotipo deja de ser una caja y sus hijos pasan a repartirse en el
   * mismo flex que el teléfono y el WhatsApp, así que se puede ordenar
   * todo junto: marca a la izquierda, botones a la derecha, pestañas
   * debajo ocupando el ancho. El diseño trae display:flex en el atributo,
   * y un estilo en línea gana a una clase: !important no es opcional. */
  [data-cabecera] {
    display: contents !important;
  }
  [data-sep] { display: none !important; }

  [data-pestanas] {
    flex: 1 0 100% !important;
    order: 9 !important;
    justify-content: space-between !important;
    overflow-x: auto !important;
    margin-top: 12px !important;
  }

  /* Con cinco pestañas (entró Contacto) el texto va justo: se aprieta lo
   * mínimo para que quepan sin tener que deslizar. */
  [data-pestanas] > button,
  [data-pestanas] > a {
    letter-spacing: 0.03em !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 10px !important;
    flex: 0 0 auto !important;
  }

  /* Teléfono y WhatsApp: dos botones redondos del mismo tamaño, arriba a
   * la derecha, donde se alcanzan con el pulgar. */
  [data-tel-btn], [data-wa-btn] {
    order: 5 !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    gap: 0 !important;
  }
  [data-tel-btn] { border: 1px solid currentColor !important; margin-left: auto !important; }
  [data-tel-txt] { display: none !important; }
  [data-wa-btn] > span { display: none !important; }
  [data-tel-btn] svg, [data-wa-btn] svg { width: 16px !important; height: 16px !important; }

  /* La nota de lo que incluye el banquete se salía 18 px por la derecha:
   * flex:0 0 auto la dejaba a su ancho natural, mayor que la pantalla. */
  [data-nota] {
    flex: 0 1 auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ---------------------------------------------------------------------
 * La tira de miniaturas: sin salto al cambiar de pestaña.
 *
 * Con los 12 salones la tira desborda y el navegador saca su barra
 * horizontal (15 px); con los 7 jardines no. El contenedor pasaba de 64 a
 * 49 px de alto, así que toda la página daba un brinco al cambiar de
 * pestaña. Se oculta la barra: deslizar con el dedo, el trackpad o
 * shift+rueda sigue funcionando, y las miniaturas cortadas en el borde ya
 * dicen que hay más.
 * --------------------------------------------------------------------- */
[data-tira]{
  scrollbar-width:none;            /* Firefox */
  -ms-overflow-style:none;         /* Edge viejo */
  overscroll-behavior-x:contain;   /* que no arrastre la página al llegar al final */
}
[data-tira]::-webkit-scrollbar{width:0;height:0;display:none}