/* Estilos añadidos al migrar de WordPress a HTML estático */

/* Filas a ancho completo: WPBakery las estiraba con JavaScript, aquí basta CSS */
.vc_row[data-vc-full-width] {
  position: relative;
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
body { overflow-x: hidden; }

/* Página 404 */
.error-404 { padding: 10rem 1.5rem 4rem; text-align: center; color: #3D1B00; }
.error-404 h2 { font-size: 2.2rem; margin-bottom: 1rem; }
.error-404 a { color: #3D1B00; text-decoration: underline; }

/* Platos destacados de la home (antes una rejilla de WPBakery cargada por AJAX) */
.platos-destacados {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
.platos-destacados li { margin: 0; padding: 0; }
.platos-destacados img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.platos-destacados h4 {
  margin: 10px 10px 0;
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.29;
  color: #3D1B00;
}
@media (max-width: 767px) {
  .platos-destacados { grid-template-columns: 1fr; }
}

/* Carta de vinos en móvil: columnas de ancho fijo para que todas las tablas
   queden alineadas y ninguna sobresalga de la tarjeta */
@media (max-width: 767px) {
  .tablepress { width: 100%; table-layout: fixed; }
  .tablepress th,
  .tablepress td { padding-left: 4px; padding-right: 4px; word-wrap: break-word; }
  .tablepress .column-1 { width: 40%; }
  .tablepress .column-2,
  .tablepress .column-3,
  .tablepress .column-4 { width: 20%; text-align: right; }
}
@media (max-width: 400px) {
  .tablepress td.column-2,
  .tablepress td.column-3,
  .tablepress td.column-4 { font-size: 1rem; }
}

/* Menú lateral cerrado: en móvil queda pegado al borde y su sombra se veía
   como una franja oscura a la izquierda de la página */
#menu__toggle:not(:checked) ~ .menu__box { box-shadow: none; }

/* Nuestra historia: el texto largo sobre el azul cansaba la vista, así que va
   sobre una tarjeta crema (como en Contacto), con letra algo mayor */
.page-id-152 .vc_col-sm-6 > .vc_column-inner {
  background-color: #EFE3D3;
  border-radius: 24px;
  padding: 0 48px 40px;
  margin: 2rem 0 3rem;
}
.page-id-152 .wpb_text_column p {
  font-size: 1.125rem;
  line-height: 1.7;
}
@media (max-width: 767px) {
  .page-id-152 .vc_col-sm-6 > .vc_column-inner {
    border-radius: 16px;
    padding: 0 20px 28px;
    width: auto;
    margin: 1.5rem 15px 2rem;
  }
}

/* Dirección del pie: enlace a Google Maps */
.site-footer a.direccion {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Teléfono, email y dirección: más zona táctil en móvil (área invisible
   alrededor del enlace, sin cambiar la maquetación) */
a[href^="tel:"],
a[href^="mailto:"],
a.direccion { position: relative; }
a[href^="tel:"]::after,
a[href^="mailto:"]::after,
a.direccion::after {
  content: "";
  position: absolute;
  top: -8px;
  right: -6px;
  bottom: -8px;
  left: -6px;
}

/* Nuestra historia: la foto ocupa siempre todo el ancho del contenedor
   (antes lo hacía porque el original era mayor que el contenedor) */
.page-id-152 .vc_single_image-wrapper { display: block; }
.page-id-152 .vc_single_image-img { display: block; width: 100%; height: auto; }

/* Título h1 solo para buscadores y lectores de pantalla */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }