/* ==========================================================================
   GOA 007 — Pestañas y menú en hoja (nació como "propuesta 3")
   Va encima de goa.css y goa-v2.css. En el teléfono y la tableta (hasta 980 px,
   donde la barra de arriba ya no tiene enlaces) se maneja como una aplicación:
   barra de pestañas abajo y el menú en una hoja que sube desde abajo. La barra
   de arriba queda con el logo y el idioma. Las páginas: goa-app.css.
   ========================================================================== */

.tabbar, .hoja-ui { display: none; }

@media (max-width: 980px) {
  :root { --tabbar-h: 64px; --tabbar-gap: calc(10px + env(safe-area-inset-bottom)); }

  /* Lo último de la página no queda debajo de la barra */
  body { padding-bottom: calc(var(--tabbar-h) + var(--tabbar-gap) + 12px); }

  /* Arriba solo el logo y el idioma: reservar y el menú están abajo */
  .nav__burger, .nav .btn--gold { display: none; }

  /* ------------------------------------------------------------ Pestañas */
  .tabbar {
    position: fixed; z-index: 85; left: 50%; bottom: var(--tabbar-gap);
    width: min(560px, calc(100% - 20px)); transform: translateX(-50%);
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch;
    height: var(--tabbar-h); padding: 0 4px; border-radius: 24px;
    background: rgba(14, 13, 18, 0.82); border: 1px solid var(--line-2);
    -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.85);
  }
  .tabbar__item {
    position: relative; display: grid; justify-items: center; align-content: center; gap: 5px;
    font-size: 10.5px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-3);
    -webkit-tap-highlight-color: transparent; transition: color 0.3s;
  }
  .tabbar__item svg { width: 22px; height: 22px; transition: transform 0.25s var(--ease); }
  .tabbar__item:active svg, .tabbar__item:active .tabbar__fab { transform: scale(0.9); }
  .tabbar__item.is-on { color: var(--gold-2); }
  .tabbar__item.is-on::after {
    content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%;
    background: var(--gold-2); box-shadow: 0 0 10px var(--gold-2);
  }

  /* Reservar: el botón dorado del centro, un poco más alto que la barra */
  .tabbar__item--main { color: var(--gold-2); align-content: end; padding-bottom: 9px; }
  .tabbar__fab {
    width: 54px; height: 54px; margin-top: -30px; border-radius: 50%;
    display: grid; place-items: center; color: #140f04;
    background: var(--gold-grad); background-size: 200% 100%;
    box-shadow: 0 0 0 5px var(--ink), 0 12px 30px -6px rgba(212, 175, 55, 0.7);
    transition: transform 0.25s var(--ease);
  }
  .tabbar__fab svg { width: 24px; height: 24px; }

  /* El hero deja sitio para la barra */
  .hero__bar { padding-bottom: calc(var(--tabbar-h) + var(--tabbar-gap) + 14px); }

  .toast { bottom: calc(var(--tabbar-h) + var(--tabbar-gap) + 16px); }
}

@media (max-width: 760px) {
  /* En el teléfono la tarjeta del próximo evento va en una fila, con la flecha
     dorada (el botón grande de reservar ya está abajo) */
  .hero__content { padding-bottom: calc(150px + var(--tabbar-h)); }
  .hero .next { flex-wrap: nowrap; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 20px; }
  .hero .next__info { flex: 1 1 auto; }
  .hero .next .btn { flex: none; width: 46px; --h: 46px; padding: 0; font-size: 0; gap: 0; border-radius: 50%; }
  .hero .next .btn svg { width: 18px; height: 18px; }
}

@media (max-width: 980px) {
  /* --------------------------------------------------------- Menú en hoja */
  .hoja-ui { display: block; }
  .hoja-scrim {
    position: fixed; inset: 0; z-index: 99; background: rgba(4, 4, 6, 0.6);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0s linear 0.5s;
  }
  .hoja-scrim.is-open { opacity: 1; visibility: visible; transition: opacity 0.5s; }
  .hoja {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; max-height: 90svh;
    width: min(640px, 100%); margin-inline: auto;
    display: grid; grid-template-rows: auto minmax(0, 1fr);
    background: var(--ink-2); border-top: 1px solid var(--line-2); border-radius: 24px 24px 0 0;
    box-shadow: 0 -30px 80px -20px rgba(0, 0, 0, 0.85);
    transform: translateY(104%); transition: transform 0.7s var(--ease-io);
    overscroll-behavior: contain; visibility: hidden;
  }
  .hoja.is-open { transform: none; visibility: visible; }
  .hoja:not(.is-open) { transition: transform 0.7s var(--ease-io), visibility 0s linear 0.7s; }
  .hoja::before {
    content: ""; position: absolute; top: 9px; left: 50%; width: 44px; height: 4px; margin-left: -22px;
    border-radius: 4px; background: rgba(243, 236, 224, 0.28);
  }
  .hoja__head { display: flex; justify-content: space-between; align-items: center; padding: 26px 20px 14px; touch-action: none; }
  .hoja__head img { height: 36px; width: auto; }
  .hoja__head-right { display: flex; align-items: center; gap: 10px; }
  .hoja__body { overflow-y: auto; display: grid; gap: 12px; padding: 4px 20px calc(22px + env(safe-area-inset-bottom)); }

  .hoja__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hoja__tile {
    display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 96px; padding: 12px 6px;
    border-radius: 16px; border: 1px solid var(--line); background: rgba(243, 236, 224, 0.03);
    font-size: 12.5px; font-weight: 500; line-height: 1.2; text-align: center;
    -webkit-tap-highlight-color: transparent; transition: background-color 0.25s, border-color 0.25s, transform 0.25s var(--ease);
  }
  .hoja__tile svg { width: 26px; height: 26px; color: var(--gold-2); }
  .hoja__tile:active { transform: scale(0.96); background: rgba(212, 175, 55, 0.1); border-color: rgba(235, 206, 115, 0.4); }

  .hoja__fila {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px;
    border-radius: 16px; border: 1px solid var(--line); font-size: 15px;
  }
  .hoja__fila svg { width: 16px; height: 16px; color: var(--gold-2); }
  .hoja__redes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hoja__redes .btn { width: 100%; justify-content: center; }
  .hoja__dir { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); text-align: center; padding-top: 4px; }
}