/* ===========================================================
   site.css — chrome compartido (header + footer) en TODA la web.
   Mismas reglas responsive que la home (extraídas de horizontal-page.css)
   para que header y footer sean idénticos en todas las páginas.
=========================================================== */
@media (max-width: 767px) {
  /* Header 6vh en móvil (override del inline style height:10vh) */
  header nav { height: 6vh !important; }

  /* Hamburguesa pegada a la derecha del header */
  .nav-actions { margin-left: auto; }

  /* Botón RESERVAR MESA en el header — tamaño cómodo en móvil */
  .reservar-header-btn {
    font-size: 11px !important;
    padding: 6px 8px !important;
    margin-left: 0 !important;
    letter-spacing: 0.05em;
    line-height: 1;
  }

  /* Footer — estático en móvil (no sigue al scroll) */
  footer[role="contentinfo"] {
    position: static !important;
    height: auto !important;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  /* Footer — Instagram visible en móvil */
  footer a[aria-label="VRRO en Instagram"] { display: inline-flex; align-items: center; }
  footer a[aria-label="VRRO en Instagram"] svg { width: 24px !important; height: 24px !important; }

  /* Footer LEGAL legible en móvil */
  #legal-toggle { font-size: 12px !important; }
}

/* Nav right-align: mueve ul a la derecha empujando con margin-left:auto */
ul.hidden.items-center.gap-8.uppercase.md\:flex {
    margin-right: 0;
    margin-left: auto;
}
/* Pagina producto centra el selctor de tallas */

fieldset.mt-8, .mt-8{
  margin-left: auto;
  margin-right: auto;}

/* Fondo transparente del footer */
  footer.flex.items-center.justify-end.px-6.bg-white {
    background-color: transparent;
}

/* RESERVA TU MESA — hover animation (páginas de reservar, desktop) */
.reserva-word {
  display: block;
  height: 0.88em;
  overflow: hidden;
}
.reserva-word-inner-1 {
  display: block;
  margin-top: -0.88em;
  transition: margin-top 0.5s ease;
}
.reserva-word:hover .reserva-word-inner-1 {
  margin-top: 0;
}
.reserva-word-inner-2 {
  display: block;
}

/* About us — factura: 54% ancho solo en móvil */
@media (max-width: 767px) {
  img.absolute.right-0.top-\[28vw\].mt-\[5vw\].z-\[18\].w-\[54\%\].h-auto.object-cover {
    width: 54%;
  }
}

/* ===========================================================
   <picture> — envoltorio para servir WebP
   No debe generar caja propia: sólo envuelve a la <img> para
   ofrecer la versión WebP. Sin esto, una imagen posicionada en
   absoluto deja detrás un hueco de línea vacío donde antes no
   había nada, y el maquetado se descuadra (pasaba en /about-us).
   Con display:contents la <img> se comporta como si siguiera
   siendo hija directa de su contenedor. Un navegador antiguo que
   no lo entienda vuelve al comportamiento anterior.
=========================================================== */
picture { display: contents; }

/* Y la <source> tiene que desaparecer del todo. Con display:contents en el
   <picture>, sus hijos pasan a ser hijos del contenedor real; si ese
   contenedor es una rejilla o un flex, la <source> ocuparía una celda vacía
   y correría todo lo demás una posición (pasaba en /eventos). */
picture > source { display: none; }