:root{
    --base:#FFFFFF;
    --surface:#F0F0F0;
    --surface-active:#E6E6E6;
    --accent:#3E6E96;
    --text:#1C1F22;
    --muted:#8A8F94;
    --line:#DEDEDE;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  *{box-sizing:border-box;}

  /* ---- IMPORTANTE: no tocar html/body al integrar esto en tu sitio ----
     Todo vive dentro de .mobile-gallery-wrap, que sí puede tener su
     propia altura sin bloquear el scroll del resto de la página. ---- */
  .mobile-gallery-wrap{
    min-height:100dvh;
    background:var(--base);
    color:var(--text);
    font-family:'Space Grotesk', sans-serif;
    -webkit-tap-highlight-color:transparent;
    display:flex; flex-direction:column;
    padding:24px 0 20px;
  }

  .page{ max-width:480px; margin:0 auto; width:100%; padding:0 20px; flex:1; display:flex; flex-direction:column; }

  .kicker{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--accent); }
  h1{ margin:6px 0 4px; font-size:24px; font-weight:700; line-height:1.15; }
  p.lede{ margin:0 0 20px; color:var(--muted); font-size:14px; max-width:36ch; }

  .accordion{
    display:flex; flex-direction:column; gap:5px;
    height:min(78vh, 680px);
    min-height:340px;
  }
  .panel{
    position:relative;
    flex-grow:1; flex-basis:0; min-height:40px;
    border-radius:9px;
    background:var(--surface);
    border:1px solid var(--line);
    overflow:hidden;
    cursor:pointer;
    transition:flex-grow 0.45s cubic-bezier(.2,.7,.2,1), border-color 0.3s;
  }
  .panel.active{
    flex-grow:40;
    border-color:var(--accent);
  }

  .panel-inner{ position:absolute; inset:0; }

  .panel-art{ position:absolute; inset:0; overflow:hidden; }
  .panel-art img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    filter:grayscale(55%) brightness(0.72);
    transition:filter 0.4s ease;
  }
  .panel.active .panel-art img{ filter:none; }

  .panel-label{
    position:absolute; left:0; right:0; bottom:0;
    display:flex; align-items:center; gap:10px;
    padding:9px 12px;
    background:linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0));
  }
  .panel-idx{
    font-family:'IBM Plex Mono', monospace; font-size:11px;
    color:rgba(255,255,255,0.75); flex-shrink:0;
  }
  .panel.active .panel-idx{ color:#fff; }
  .panel-name{
    font-size:13.5px; font-weight:500; color:#fff;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .panel-meta{
    font-family:'IBM Plex Mono', monospace; font-size:10.5px;
    color:rgba(255,255,255,0.8); margin-left:auto; white-space:nowrap;
    opacity:0; transition:opacity 0.25s ease 0.15s;
  }
  .panel.active .panel-meta{ opacity:1; }

  .foot-hint{
    margin-top:16px;
    font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--muted);
    text-align:center;
  }


   /* Por defecto (tablet y escritorio): oculta */
.page-gallery { display: none; }



@media (max-width: 767px) {
  .page-gallery { display: block; }   /* solo aparece en móvil */
}


.mobile-gallery-wrap {
  display: none; /* oculto por defecto (desktop) */
}

@media (max-width: 767px) {
  .mobile-gallery-wrap {
    display: block; /* visible solo en móvil */
  }
}