/* ============================================================
   LUMA Pub&Beer · responsive.css
   Ampliaciones mobile first de la estructura general:
   · 480px  móviles grandes
   · 768px  tablets
   · 1024px portátiles (navegación de escritorio)
   · 1440px monitores grandes
   (La carta y las reservas tienen sus propios puntos de corte en
   css/menu.css y css/reservations.css.)
   ============================================================ */

/* Ajustes del header cuando el menú móvil está abierto:
   backdrop-filter crea un nuevo bloque contenedor para elementos
   fixed, así que se desactiva para que el panel ocupe la pantalla. */
.site-header.nav-open {
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
  transform: none;
}
.site-header.nav-open::before { opacity: 0; }
.site-header.nav-open .site-header__cta { opacity: 0; pointer-events: none; }

/* En móvil la barra inferior (.dock) sustituye al botón flotante */
.float-wa { display: none; }

/* ---------- Móviles pequeños (< 360px) ---------- */
@media (max-width: 359px) {
  :root { --gutter: 1rem; }
  .site-header__cta { --btn-pad-x: 0.9rem; letter-spacing: 0.14em; }
  .hero__actions .btn { width: 100%; min-width: 0; }
}

/* ---------- Móviles grandes ---------- */
@media (min-width: 480px) {
  :root { --gutter: 1.5rem; }
}

/* ---------- Tablets ---------- */
@media (min-width: 768px) {
  :root { --gutter: 2.5rem; --header-h: 5rem; }

  .hero__lead { font-size: var(--fs-md); }
  .hero__footer { justify-content: space-between; align-items: center; bottom: var(--space-6); }
  .hero__place { display: block; }

  .about__grid {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-8) var(--space-5);
    align-items: center;
  }
  .about__intro { grid-column: 1 / 7; }
  .about__gallery { grid-column: 7 / -1; }

  /* «Visítanos»: titular visible; mapa a la izquierda, datos a la derecha */
  .visit__header { margin-bottom: var(--space-7); }
  .visit__header .section-title { display: block; }
  .visit__grid {
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "map place"
      "map details";
    gap: 0 var(--space-7);
    align-items: stretch;
  }
  .visit__map { grid-area: map; aspect-ratio: auto; min-height: 26rem; }
  .visit__place { grid-area: place; }
  .visit__details { grid-area: details; }
  .visit__details .info-block:first-child { border-top: 0; }

  .footer-links { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
  .site-footer__bottom { display: flex; justify-content: space-between; gap: var(--space-2); text-align: left; }

  /* En tablet y escritorio, botón flotante en lugar de la barra inferior */
  .dock { display: none; }
  .float-wa { display: grid; width: 3.5rem; height: 3.5rem; }
}

/* ---------- Portátiles / escritorio ---------- */
@media (min-width: 1024px) {
  :root { --gutter: 3rem; }

  /* Navegación horizontal */
  .menu-toggle,
  .site-header__cta,
  .main-nav__contact { display: none; }

  .main-nav {
    position: static;
    z-index: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--space-7);
    padding: 0;
    background: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .main-nav__list { flex-direction: row; gap: var(--space-6); }
  .main-nav.is-open .main-nav__list li { animation: none; }
  .main-nav__link {
    position: relative;
    padding-block: var(--space-2);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-soft);
  }
  .main-nav__link.is-active { font-style: normal; }
  .main-nav__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--champagne);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s var(--ease-out);
  }
  .main-nav__link:hover::after,
  .main-nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
  .main-nav__cta { align-self: auto; }

  .hero__title { max-width: 16ch; }

  .about__intro { grid-column: 1 / 6; }
  .about__gallery { grid-column: 7 / -1; }

  /* Footer: marca a la izquierda, accesos rápidos a la derecha */
  .site-footer__inner {
    display: grid;
    grid-template-columns: 4fr 8fr;
    column-gap: var(--space-8);
  }
  .site-footer__brand { align-items: flex-start; text-align: left; padding-bottom: 0; }
  .site-footer__cols {
    padding-top: 0;
    border-top: 0;
  }
  .site-footer__signature,
  .site-footer__bottom { grid-column: 1 / -1; }
  .site-footer__glow { left: 18%; }

  .visit__grid { grid-template-columns: 7fr 5fr; gap: 0 var(--space-8); }
  .visit__map { min-height: 32rem; }
}

/* ---------- Pantallas grandes ---------- */
@media (min-width: 1440px) {
  :root { --container: 86rem; }
}

/* Pantallas bajas en horizontal (móvil apaisado) */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 32rem; }
  .hero__brand { margin-block: var(--space-4); }
  .hero__brand .logo-img { height: 4.5rem; }
  .wordmark--hero .wordmark__name { font-size: 3rem; }
  .main-nav { justify-content: flex-start; gap: var(--space-5); overflow-y: auto; }
  .main-nav__link { font-size: 1.8rem; }
}

/* Dispositivos táctiles: sin efectos hover dependientes del ratón */
@media (hover: none) {
  .feature:hover .feature__media img,
  .dish__btn:hover .dish__media img,
  .exp-card:hover img { transform: none; }
}