/* ============================================================================
   mobile-app.css — Capa "App-Like" para móvil en TODA la web pública.
   MURALLA DE FUEGO: TODO está dentro de @media (max-width:768px); el escritorio
   (>768px) queda EXACTAMENTE igual. La barra inferior se inyecta siempre en el
   DOM (mobile-app.js) pero aquí está oculta fuera de móvil.
   Cargado por: index, tienda, helados, carta, obrador, historia, blog.
   El neutralizado del DORADO se limita a la HOME (body.fl-home) para no romper
   estados de color de otras páginas (p. ej. el botón de tamaño activo de tienda).
   ============================================================================ */

/* Barra inferior oculta por defecto (escritorio NO la ve). */
.fl-mobnav { display: none; }

@media (max-width: 768px) {

  /* ── 1. Quitar el "cromo web" en móvil ───────────────────────────────── */
  .marquee-bar      { display: none !important; }   /* marquee fuera */
  .temporada-banner { display: none !important; }   /* banda kiosko fija fuera */
  /* Especificidad alta para ganar a enhancements.css (nav.nav .nav-hamburger). */
  body nav.nav .nav-hamburger { display: none !important; }   /* la barra inferior sustituye al menú */

  /* Hueco inferior para que el contenido no quede bajo la barra fija. */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  /* El botón flotante de WhatsApp se eleva por encima de la barra inferior. */
  #fl-wa-widget { bottom: calc(80px + env(safe-area-inset-bottom)) !important; }

  /* Áreas de toque mínimas. */
  .nav-logo, .btn, .helados-preview-btn, .nav-icons a { min-height: 44px; }
  .section { padding: 56px 0; }

  /* ── 2. Neutralizar el DORADO → flat/limpio · SOLO HOME (body.fl-home) ── */
  body.fl-home {
    --dorado:        #3A2715;
    --dorado-claro:  #6B4A2A;
    --dorado-oscuro: #2A1C10;
  }
  /* En el HERO (fondo oscuro) los acentos legibles en crema, no chocolate. */
  body.fl-home .hero-title em  { color: var(--crema) !important; }
  body.fl-home .hero-desde     { color: var(--crema) !important; }
  body.fl-home .hero-line      { background: rgba(245,240,232,.55) !important; }
  body.fl-home .hero-icon path { stroke: var(--crema) !important; }

  /* ── 3. BOTTOM NAVIGATION BAR (flat, app nativa) · 6 destinos ────────── */
  .fl-mobnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
    background: #ffffff;
    border-top: 1px solid rgba(58,39,21,.10);
    box-shadow: 0 -2px 18px rgba(58,39,21,.07);
    padding: 5px 2px calc(5px + env(safe-area-inset-bottom));
    justify-content: space-around; align-items: stretch;
    /* Footer fijo LIMPIO: SIN transform / will-change.
       CAUSA RAÍZ del "se esconde al bajar": en Android Chrome un transform (o
       will-change:transform) sobre un position:fixed lo ANCLA al viewport de
       LAYOUT, no al VISUAL. Al deslizar hacia abajo, el navegador oculta su barra
       de URL y el viewport cambia: el elemento anclado al layout se va con la
       página y desaparece; al subir reaparece. Sin transform, el navegador lo
       mantiene pegado al viewport VISIBLE. (translateZ/will-change/backface se
       habían añadido como "fix" y eran precisamente lo que rompía el anclaje.) */
  }

  /* ── BARRA SUPERIOR (.nav) EN MÓVIL: sin blur y SIN transform ─────────────
     mobile-app.js convierte .nav de sticky→fixed en móvil. Un position:fixed YA
     se compone en su propia capa GPU, así que NO necesita translateZ(0) para
     aislarse del scroll. Y un transform (translateZ/will-change incluidos) sobre
     un position:fixed dispara en Android Chrome el anclaje al viewport de LAYOUT
     (no al VISUAL): al deslizar y ocultarse la barra de URL, el nav fijo se va
     con la página y "SE ESCONDE" —y al estar en su capa, "tira" también de la
     barra inferior fija—. Es EXACTAMENTE la causa raíz ya eliminada de
     .fl-mobnav. Por eso aquí SOLO quitamos el backdrop-filter (su blur repinta
     en cada frame y satura el compositor) y NO aplicamos ningún transform: el
     nav queda fijo, quieto y deja de arrastrar la barra inferior. */
  .nav, nav.nav, #mainNav, header .nav, .navbar {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
  .fl-mobnav a {
    position: relative; flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-height: 48px; padding: 2px 0; text-decoration: none;
    color: #9a8c7e; font-family: 'DM Sans', system-ui, sans-serif;
    font-size: .58rem; letter-spacing: .01em; font-weight: 600; text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease, transform .12s ease;
  }
  .fl-mobnav a svg { width: 21px; height: 21px; stroke: currentColor; fill: none; }
  .fl-mobnav a.active { color: #3A2715; }
  .fl-mobnav a.active svg { stroke-width: 2; }
  .fl-mobnav a:active { transform: scale(.9); }

  /* ── 4. Bottom-sheet genérico (menús/modales suben desde abajo) ──────── */
  .fl-sheet-backdrop {
    position: fixed; inset: 0; z-index: 9500; background: rgba(20,12,6,.45);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  .fl-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
  .fl-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9600;
    background: #fff; border-radius: 18px 18px 0 0;
    padding: 10px 18px calc(22px + env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform .3s cubic-bezier(.32,.72,0,1);
    box-shadow: 0 -8px 40px rgba(0,0,0,.22); max-height: 82vh; overflow: auto;
  }
  .fl-sheet.open { transform: translateY(0); }
  .fl-sheet::before {
    content: ''; display: block; width: 40px; height: 4px; border-radius: 2px;
    background: rgba(58,39,21,.18); margin: 0 auto 14px;
  }
}