/* ===========================================================
   ARKHAM — MÓVIL (≤760px). Archivo NUEVO, paralelo a main.
   Spec: HANDOFF-MOBILE.md + ARKHAM Mobile Manual.
   Todo vive dentro del media query: el desktop no se toca.
   El grano anti-banding de .m-poster::after / .am-hero::after
   ya viene de styles.css (main) — aquí solo se usan las clases.
   =========================================================== */
@media (max-width: 760px) {

  /* el desktop se apaga; manda la raíz móvil (#m-root) */
  #root { display: none !important; }
  #m-root { display: block; }
  /* los overlays del desktop oculto no deben dejar el body sin scroll */
  body { overflow-y: auto !important; }

  .m-app { min-height: 100vh; background: var(--bg); padding-bottom: 56px; }

  /* ---------------- barra superior ---------------- */
  .m-top {
    position: sticky; top: 0; z-index: 30;
    display: flex; justify-content: center; align-items: center;
    padding: 56px 18px 14px;
    background: linear-gradient(180deg, rgba(10,10,10,.96) 40%, rgba(10,10,10,0));
  }
  .m-wm-btn { padding: 0; display: block; }
  .m-wm { height: 28px; width: auto; display: block; }
  .m-top-actions {
    position: absolute; right: 16px; bottom: 12px;
    display: flex; align-items: center; gap: 16px;
  }
  .m-top-ic {
    color: #fff; display: grid; place-items: center; padding: 0;
    width: 26px; height: 26px;
  }
  .m-top-ic.on { color: var(--red); }
  /* botón Mi lista con etiqueta cuando hay proyectos guardados */
  .m-top-list { width: auto; display: flex; align-items: center; gap: 5px; }
  .m-top-list-lbl { font-size: 11px; letter-spacing: .3px; font-weight: 500; }

  /* ---------------- chips de categoría ---------------- */
  .m-chips {
    display: flex; gap: 8px; overflow-x: auto;
    padding: 4px 18px 14px; scrollbar-width: none;
  }
  .m-chips::-webkit-scrollbar { display: none; }
  .m-chip {
    flex: none; white-space: nowrap;
    border: 1px solid rgba(255,255,255,.28); border-radius: 18px;
    padding: 6px 14px; font-size: 12.5px; color: #e8e2d8; background: none;
  }
  .m-chip.on { background: #fff; border-color: #fff; color: #111; font-weight: 600; }

  /* ---------------- tarjeta vertical 2:3 ---------------- */
  .m-card { flex: none; width: 118px; padding: 0; text-align: left; }
  .m-grid .m-card { width: 100%; }
  .m-poster {
    position: relative; width: 100%; aspect-ratio: 2/3; border-radius: 6px;
    overflow: hidden; background-size: cover; background-position: center;
    background-color: #111;
  }
  /* scrim de tarjeta con paradas intermedias (anti-banding, como main) — z1,
     debajo del grano (.m-poster::after, z2) y del lockup (z3) */
  .m-vig {
    position: absolute; inset: 0; z-index: 1;
    background: radial-gradient(120% 90% at 50% 30%,
                  transparent 30%, rgba(0,0,0,0.10) 48%, rgba(0,0,0,0.22) 62%,
                  rgba(0,0,0,0.35) 76%, rgba(0,0,0,0.46) 88%, rgba(0,0,0,0.55) 100%),
                linear-gradient(0deg,
                  rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.36) 22%, rgba(0,0,0,0.22) 45%,
                  rgba(0,0,0,0.12) 68%, rgba(0,0,0,0.05) 100%);
  }
  .m-iso { position: absolute; top: 7px; left: 8px; height: 13px; opacity: .85; z-index: 4; }
  .m-poster .lockup {
    position: absolute; inset: 0; z-index: 3;
    display: flex; align-items: center; justify-content: center; padding: 0 8px;
  }
  .m-badge-nuevo {
    position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); z-index: 5;
    background: var(--red); color: #fff; font-size: 9.5px; font-weight: 700;
    padding: 2px 8px; border-radius: 3px; white-space: nowrap;
  }
  .m-badge-top {
    position: absolute; top: 0; right: 9px; z-index: 5;
    background: var(--red); color: #fff; text-align: center;
    padding: 2px 4px 3px; border-radius: 0 0 3px 3px; line-height: 1;
  }
  .m-badge-top b { font-size: 7px; font-weight: 700; display: block; letter-spacing: .5px; }
  .m-badge-top i { font-size: 12px; font-weight: 800; display: block; font-style: normal; }
  .m-prog {
    position: absolute; left: 8px; right: 8px; bottom: 6px; height: 3px;
    background: rgba(255,255,255,.3); border-radius: 2px; z-index: 4;
    overflow: hidden; display: block;
  }
  .m-prog i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--red); display: block; }
  .m-cap { font-size: 12px; color: #a39c92; margin-top: 8px; }
  .m-cap b { color: #efe9df; font-weight: 500; }

  .m-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 4px 18px 8px; }

  /* ---------------- billboard destacado (Inicio) ---------------- */
  .m-bill {
    position: relative; margin: 2px 18px 22px; border-radius: 10px; overflow: hidden;
    aspect-ratio: 5 / 6.4; background-size: cover; background-position: center;
    background-color: #111;
  }
  .m-bill .m-iso { top: 12px; left: 12px; height: 18px; opacity: .9; }
  .m-bill-scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(0deg,
        rgba(10,10,10,.82) 0%, rgba(10,10,10,.55) 12%, rgba(10,10,10,.32) 24%,
        rgba(10,10,10,.16) 36%, rgba(10,10,10,.06) 48%, rgba(10,10,10,0) 60%),
      linear-gradient(180deg, rgba(10,10,10,.42) 0%, rgba(10,10,10,.16) 11%, rgba(10,10,10,0) 24%);
  }
  .m-bill-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
  .m-bill-video.clickable { cursor: pointer; }
  .m-bill-sound {
    position: absolute; top: 10px; right: 10px; z-index: 5;
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(20,20,20,.55); border: 1px solid rgba(255,255,255,.55); color: #fff;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
  .m-bill.has-vid .m-bill-dots { right: 50px; }
  .m-bill-body {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 0 16px 16px;
  }
  .m-bill-tags { font-size: 12.5px; color: #e6e0d6; letter-spacing: .2px; }
  .m-bill-tags i { font-style: normal; color: #9d968b; padding: 0 7px; }
  .m-bill-btns { display: flex; gap: 10px; width: 100%; }

  /* ---- slides conceptuales del billboard (intro · favoritos · speaker · premios) ---- */
  .m-bill-slide .m-bill-body { align-items: flex-start; text-align: left; gap: 10px; }
  .m-bill-iso { height: 46px; width: auto; margin-bottom: 2px; }
  .m-bill-kicker { color: var(--red); font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
  .m-bill-title { font-size: 25px; font-weight: 700; color: #ece6dc; line-height: 1.1; margin: 0; }
  .m-bill-title.big { font-size: 34px; letter-spacing: .3px; }
  .m-bill-sub { font-size: 13px; color: #b7b0a5; margin-top: -4px; }
  .m-bill-desc { font-size: 13.5px; line-height: 1.55; color: #cfc8be; margin: 0; max-width: 92%; }
  .m-bill-favs { display: flex; gap: 8px; }
  .m-bill-fav { width: 46px; aspect-ratio: 2 / 3; border-radius: 6px; background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,.12); }
  .m-bill-dots { position: absolute; top: 12px; right: 12px; z-index: 4; display: flex; gap: 6px; }
  .m-bill-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.38); }
  .m-bill-dot.on { background: #fff; }

  .m-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 14.5px; font-weight: 600; padding: 11px 12px; border-radius: 5px;
  }
  .m-btn.light { background: #fff; color: #111; }
  .m-btn.dark { background: rgba(64,64,64,.72); color: #fff; }
  .m-btn.red { background: var(--red); color: #fff; }
  /* botón apagado (p. ej. sin lámina conceptual) */
  .m-btn:disabled { background: #2a2a2a; color: #6b655d; cursor: default; }
  .m-dact:disabled { opacity: .38; cursor: default; }
  .m-dact:disabled svg { color: #6b655d; }

  /* ---------------- filas horizontales ---------------- */
  .m-row { margin: 8px 0 20px; }
  .m-row-t { font-size: 16.5px; font-weight: 600; color: #e9e4dc; margin: 0 0 10px; padding: 0 18px; }
  .m-row-track { display: flex; gap: 8px; overflow-x: auto; padding: 0 18px 6px; scrollbar-width: none; }
  .m-row-track::-webkit-scrollbar { display: none; }

  /* ---------------- explorar ---------------- */
  .m-head { padding: 0 18px 12px; font-size: 13px; color: #a39c92; }
  .m-head b { color: #efe9df; font-weight: 500; }

  /* ---------------- buscar ---------------- */
  .m-search-view {
    position: fixed; inset: 0; z-index: 70; background: var(--bg);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .m-searchbar {
    position: sticky; top: 0; z-index: 31;
    display: flex; align-items: center; gap: 12px;
    padding: 56px 18px 12px; background: var(--bg);
  }
  .m-searchbar input {
    flex: 1; min-width: 0; background: #1c1c1c; border: none; border-radius: 5px;
    color: #fff; font-size: 15px; padding: 10px 12px; outline: none;
  }
  .m-searchbar input::placeholder { color: #8d877d; }
  .m-search-cancel { flex: none; color: #cfc8be; font-size: 14px; padding: 0; }

  /* ---------------- proyecto (detalle) ---------------- */
  .m-detail {
    position: fixed; inset: 0; z-index: 60; background: var(--bg);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .m-dhero {
    position: relative; width: 100%; aspect-ratio: 16 / 10;
    background-size: cover; background-position: center; background-color: #111;
  }
  /* scrim del detalle, paradas intermedias (anti-banding) — el grano va en
     .am-hero::after (z2, heredado de main) */
  .m-dhero-scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(0deg,
        #0a0a0a 0%, rgba(10,10,10,.72) 10%, rgba(10,10,10,.42) 22%,
        rgba(10,10,10,.20) 34%, rgba(10,10,10,.07) 46%, rgba(10,10,10,0) 58%),
      linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.14) 12%, rgba(0,0,0,0) 26%);
  }
  .m-dx {
    position: absolute; top: 14px; right: 14px; z-index: 5;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(10,10,10,.62); color: #fff;
    display: grid; place-items: center; padding: 0;
  }
  .m-dmute {
    position: absolute; right: 14px; bottom: 16px; z-index: 5;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.3); color: #fff;
    display: grid; place-items: center; padding: 0;
  }
  .m-dprog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.25); z-index: 4; }
  .m-dprog i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--red); display: block; }

  .m-dbody { padding: 16px 18px 4px; }
  /* lockup del detalle alineado a la izquierda (manual §02) */
  .m-dbody .lockup { align-items: flex-start; text-align: left; }
  .m-dmeta { font-size: 13px; color: #a39c92; margin: 12px 0 14px; }
  .m-dbtns { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
  .m-dbtns .m-btn { width: 100%; }
  .m-ddesc { font-size: 14.5px; line-height: 1.5; color: #ddd6cc; margin: 0 0 12px; }
  .m-dcred { font-size: 13px; color: #a39c92; line-height: 1.65; }
  .m-dcred b { color: #ddd6cc; font-weight: 500; }
  /* aviso (frase entre comillas, bajo los metadatos) */
  .m-dcaution { font-size: 13px; font-style: italic; color: #7a736a; margin: -6px 0 14px; line-height: 1.5; }
  /* "Este proyecto es" — la experiencia va en su propia línea */
  .m-dexpl { margin-top: 8px; }
  .m-dexpl span { display: block; margin-top: 3px; color: #e6ded6; }

  .m-dacts {
    display: flex; justify-content: space-around;
    padding: 14px 8px 4px; margin-top: 16px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .m-dact {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: #cfc8be; font-size: 11px; padding: 4px 8px;
  }
  .m-dact svg { color: #fff; }
  .m-dact.on svg { color: var(--green); }

  /* ---------------- el concepto (banda full-width) ---------------- */
  .m-concept {
    position: relative; min-height: clamp(320px, 52vh, 460px); margin-top: 10px;
    background-size: cover; background-position: center;
    display: flex; align-items: center;
  }
  .m-concept-scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg,
      rgba(7,7,8,.92) 0%, rgba(7,7,8,.78) 34%, rgba(7,7,8,.55) 58%,
      rgba(7,7,8,.34) 78%, rgba(7,7,8,.44) 100%);
  }
  .m-concept-text { position: relative; z-index: 3; padding: 40px 18px; max-width: 520px; }
  .m-kicker {
    display: flex; align-items: center; gap: 10px;
    color: var(--red); font-size: 12px; font-weight: 700; letter-spacing: 3px;
    margin-bottom: 14px;
  }
  .m-kicker i { width: 34px; height: 2px; background: var(--red); display: inline-block; }
  .m-concept-text h2 {
    font-family: "Playfair Display", Georgia, serif; font-size: 32px; line-height: 1.06;
    color: #ece6dc; margin: 0 0 14px; font-weight: 700;
  }
  .m-concept-text p { font-size: 15.5px; line-height: 1.6; color: #cec8be; font-weight: 300; margin: 0; }

  /* grano anti-banding también en el concepto y en las fotos del mosaico
     (spec móvil §5 — mismo recurso del scrim; z2, bajo el texto z3) */
  .m-detail .pp-mosaic .pp-full,
  .m-detail .pp-mosaic .pp-row > div { position: relative; }
  .m-concept::after,
  .m-detail .pp-mosaic .pp-full::after,
  .m-detail .pp-mosaic .pp-row > div::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
    opacity: .10; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 150px 150px;
  }

  /* ---------------- más proyectos / ficha técnica ---------------- */
  .m-sect-h { font-size: 18px; font-weight: 700; color: #ece6dc; margin: 0; padding: 24px 18px 12px; }

  .m-ft { padding: 28px 18px 48px; }
  .m-ft-h { color: var(--red); font-size: 16px; font-weight: 700; letter-spacing: 6px; margin-bottom: 16px; }
  .m-ft-row { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 10px 0; border-top: 1px solid #221f1d; }
  .m-ft-row .k { font-size: 12px; letter-spacing: 1.4px; color: #8c857c; text-transform: uppercase; }
  .m-ft-row .v { font-size: 15.5px; color: #e6ded6; }
  /* advertencias de contenido — chips redondeados (como desktop) */
  .m-warnrow .m-warns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
  .m-warn-chip {
    border: 1px solid rgba(140,133,124,.55); color: #e6ded6;
    font-size: 13px; padding: 6px 13px; border-radius: 30px;
  }
  /* remate — frase de cierre, cursiva en gris apagado (mismo tono que desktop) */
  .m-ft-punch { margin-top: 22px; font-size: 15.5px; font-style: italic; color: #8c857c; line-height: 1.45; }

  .m-empty { padding: 40px 18px; text-align: center; color: #6b655d; font-size: 14px; }
}