/* ★ 36 webfeed — Explorar estilo Instagram (img 327/328), historias (img 329), hoja de compartir (img 338), menú propio
   del clic derecho (img 326), menú lateral plegado con botón para expandir (img 315), franja de la app en el teléfono
   (img 336) e íconos de acción de la app. Sólo tokens de app.css (--acento, --fondo…): claro y oscuro salen solos. */

/* ── Íconos de la app (rellenos, lienzo 48) ── */
.ico.ico-app { fill: currentColor; stroke: none; }
.ico-lleno { display: none; }
.on > .circ > .ico-lleno, .on > .ico-lleno { display: block; }
.on > .circ > .ico-vacio, .on > .ico-vacio { display: none; }
.accion.on .circ { color: var(--acento); }

/* ── Menú lateral plegado: botón claro para expandir (img 315) ── */
.btn-expandir { display: none; }
body.mini .btn-expandir { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 auto 8px; border-radius: 12px; color: var(--tinta-2); background: var(--fondo-2); }
body.mini .btn-expandir:hover { color: var(--acento); background: var(--acento-suave); }
@media (max-width: 900px) { body.mini .btn-expandir { display: none; } }

/* ── Explorar: centro + columna derecha ── */
.x36 { display: flex; justify-content: center; gap: 56px; padding: 24px 24px 60px; max-width: 1100px; margin: 0 auto; }
.x36-centro { width: min(630px, 100%); min-width: 0; }
.x36-lado { width: 320px; flex: none; padding-top: 56px; position: sticky; top: 16px; align-self: flex-start; font-size: 14px; }
@media (max-width: 1160px) { .x36-lado { display: none; } .x36 { gap: 0; } }

/* Fila de historias */
.h36-rail-wrap { position: relative; margin-bottom: 14px; }
.h36-rail-wrap.vacio-rail { display: none; }
.h36-rail { display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 2px 6px; }
.h36-rail::-webkit-scrollbar { display: none; }
.h36-p { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px; flex: none; }
.h36-aro { position: relative; width: 74px; height: 74px; border-radius: 50%; padding: 3px; display: flex; align-items: center; justify-content: center; background: var(--fondo-3); }
.h36-aro.nuevo { background: conic-gradient(from 210deg, var(--acento), #E8A0FF, #FF6FB5, var(--acento)); }
.h36-aro > .avatar, .h36-aro > img { border: 3px solid var(--fondo); width: 68px !important; height: 68px !important; border-radius: 50%; object-fit: cover; }
.h36-p.sin .h36-aro { background: transparent; }
.h36-mas { position: absolute; inset-inline-end: 2px; bottom: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--acento); color: #fff; border: 2px solid var(--fondo); font-weight: 800; line-height: 17px; text-align: center; font-size: 16px; }
.h36-n { font-size: 12px; max-width: 76px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tinta); }
.h36-flecha { position: absolute; top: 30px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; background: var(--fondo); color: var(--tinta); box-shadow: var(--sombra); display: flex; align-items: center; justify-content: center; }
.h36-flecha.izq { inset-inline-start: -6px; } .h36-flecha.der { inset-inline-end: -6px; }
.h36-flecha[hidden] { display: none; }
.h36-p.esq .esq-c { width: 66px; height: 66px; border-radius: 50%; display: block; }
.esq-c, .esq-l { background: var(--fondo-2); animation: brillo36 1.2s ease-in-out infinite; }
.esq-l { display: block; height: 12px; border-radius: 6px; width: 60%; }
.esq-l.larga { width: 90%; }
@keyframes brillo36 { 50% { opacity: .55; } }

/* Pestañas Para ti / Siguiendo */
.x36-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--borde); margin-bottom: 18px; position: sticky; top: 0; background: var(--fondo); z-index: 3; }
.x36-tab { padding: 12px 18px; font-weight: 700; color: var(--tinta-3); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.x36-tab.on { color: var(--tinta); border-color: var(--tinta); }

/* Publicación */
.x36-post { border-bottom: 1px solid var(--borde); padding-bottom: 16px; margin: 0 auto 18px; max-width: 470px; }
.x36-post > header { display: flex; align-items: center; gap: 10px; padding: 6px 0 10px; }
.x36-av .avatar { width: 36px !important; height: 36px !important; }
.x36-quien { flex: 1; min-width: 0; line-height: 1.25; }
.x36-quien small { display: block; color: var(--tinta-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x36-u { font-weight: 700; }
.x36-u:hover { opacity: .75; }
.x36-ver { display: inline-flex; width: 14px; height: 14px; border-radius: 50%; background: var(--acento); color: #fff; align-items: center; justify-content: center; margin-inline-start: 4px; vertical-align: -2px; }
.x36-ver .ico { stroke-width: 3.2; }
.x36-t { color: var(--tinta-3); }
.x36-mas { color: var(--tinta); padding: 4px; border-radius: 50%; }
.x36-mas:hover { background: var(--fondo-2); }
.x36-seguir, button.x36-seguir.btn { background: none !important; color: var(--acento) !important; font-weight: 700; padding: 0 6px; min-height: 0; font-size: 14px; }
.x36-medio { position: relative; width: 100%; border-radius: 6px; overflow: hidden; background: #000; border: 1px solid var(--borde); }
.x36-medio.vertical { aspect-ratio: 4 / 5; }
.x36-medio.horizontal { aspect-ratio: 16 / 9; }
.x36-medio.foto { aspect-ratio: 4 / 5; background: var(--fondo-2); }
.x36-medio.foto.horizontal { aspect-ratio: auto; }
.x36-medio.foto.horizontal img { height: auto; max-height: 585px; }
.x36-medio video, .x36-medio > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.x36-medio.horizontal video { object-fit: contain; }
.x36-medio.foto > img { object-fit: cover; }
.x36-resp { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--tinta-3); }
.x36-son { position: absolute; inset-inline-end: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; display: flex; align-items: center; justify-content: center; }
.x36-medio.carrusel { aspect-ratio: 4 / 5; background: var(--fondo-2); }
.x36-pista { display: flex; height: 100%; transition: transform .28s ease; }
.x36-pista img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; }
.x36-car { position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.85); color: #161823; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 6px rgba(0,0,0,.25); }
.x36-car.izq { inset-inline-start: 10px; } .x36-car.der { inset-inline-end: 10px; }
.x36-car[hidden] { display: none; }
.x36-puntos { position: absolute; bottom: 10px; inset-inline-start: 0; inset-inline-end: 0; display: flex; justify-content: center; gap: 4px; }
.x36-puntos i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); }
.x36-puntos i.on { background: #fff; }
.x36-n-fotos { position: absolute; top: 10px; inset-inline-end: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; border-radius: 999px; padding: 2px 8px; display: inline-flex; align-items: center; gap: 2px; }
.x36-accs { display: flex; align-items: center; gap: 14px; padding: 10px 0 6px; }
.x36-acc { color: var(--tinta); display: inline-flex; padding: 2px; }
.x36-acc:hover { opacity: .6; }
.x36-acc.der { margin-inline-start: auto; }
.x36-acc.on[data-acc="mg"], .x36-acc.der.on { color: var(--acento); }
.x36-acc.late, .accion.late .circ { animation: late36 .35s ease; }
@keyframes late36 { 40% { transform: scale(1.25); } }
.x36-pie { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.x36-ley { word-wrap: break-word; }
.x36-ley .mencion { color: var(--acento); }
.x36-masTxt { color: var(--tinta-3); }
.x36-vercom { color: var(--tinta-3); }
.x36-priv { color: var(--tinta-3); display: inline-flex; align-items: center; }
.x36-esq header { display: flex; gap: 10px; align-items: center; }
.x36-esq header .esq-c { width: 36px; height: 36px; border-radius: 50%; display: block; }
.x36-esq .x36-medio { aspect-ratio: 4 / 5; background: var(--fondo-2); border: 0; animation: brillo36 1.2s ease-in-out infinite; margin-bottom: 12px; }
.x36-esq .esq-l { margin-top: 8px; }
.x36-fin { text-align: center; color: var(--tinta-3); padding: 18px; min-height: 40px; }

/* Columna derecha */
.x36-yo, .x36-sug { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.x36-yo > div, .x36-sug > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.x36-yo small, .x36-sug small { color: var(--tinta-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x36-link, .x36-sug .btn.x36-link { color: var(--acento) !important; background: none !important; font-weight: 700; font-size: 13px; padding: 0; min-height: 0; }
.x36-sug .btn:not(.x36-link) { background: none; color: var(--tinta-3); font-size: 13px; padding: 0; min-height: 0; }
.x36-sec { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 6px; color: var(--tinta-2); }
.x36-sec a { color: var(--tinta); font-weight: 700; font-size: 13px; }
.x36-sug.esq .esq-c { width: 40px; height: 40px; border-radius: 50%; display: block; flex: none; }
.x36-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.x36-app { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 12px; text-align: center; font-size: 12px; }
.x36-app:hover { background: var(--fondo-2); }
.x36-app img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: var(--fondo-2); }
.x36-app span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x36-legal { margin-top: 26px; color: var(--tinta-3); font-size: 12px; line-height: 1.8; }
.x36-entra p { color: var(--tinta-2); margin: 0 0 10px; }

@media (max-width: 900px) {
  .x36 { padding: 8px 0 70px; }
  .x36-post { max-width: none; }
  .x36-post > header, .x36-accs, .x36-pie { padding-inline-start: 12px; padding-inline-end: 12px; }
  .x36-medio { border-radius: 0; border-inline-start: 0; border-inline-end: 0; }
  .h36-rail { padding-inline-start: 10px; }
  .x36-tabs { padding: 0 8px; }
}

/* ── Visor de historias (img 329) ── */
body.con-h36v { overflow: hidden; }
.h36v { position: fixed; inset: 0; z-index: 70; background: #1a1a1a; color: #fff; display: flex; align-items: center; justify-content: center; }
.h36v-logo { position: absolute; top: 18px; inset-inline-start: 22px; display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 20px; color: #fff; }
.h36v-logo img { border-radius: 8px; background: #000; }
.h36v-cerrar { position: absolute; top: 14px; inset-inline-end: 18px; color: #fff; padding: 6px; z-index: 3; }
.h36v-escena { display: flex; align-items: center; justify-content: center; gap: 22px; height: 100%; width: 100%; padding: 20px 0; }
.h36v-carta { position: relative; height: min(calc(100vh - 40px), 900px); aspect-ratio: 9 / 16; max-width: calc(100vw - 32px); border-radius: 10px; overflow: hidden; background: #000; flex: none; }
.h36v-lienzo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.h36v-lienzo video, .h36v-lienzo img { width: 100%; height: 100%; object-fit: contain; background: #000; }
.h36v-texto { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 30px; text-align: center; }
.h36v-texto p { font-size: 26px; font-weight: 700; white-space: pre-wrap; word-break: break-word; margin: 0; text-shadow: 0 1px 4px rgba(0,0,0,.3); }
.h36v-tit { position: absolute; inset-inline-start: 16px; inset-inline-end: 16px; bottom: 86px; margin: 0; text-align: center; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.h36v-arriba { position: absolute; top: 0; inset-inline-start: 0; inset-inline-end: 0; padding: 12px 12px 30px; background: linear-gradient(rgba(0,0,0,.45), transparent); z-index: 2; pointer-events: none; }
.h36v-arriba button, .h36v-arriba a { pointer-events: auto; }
.h36v-barras { display: flex; gap: 3px; margin-bottom: 10px; }
.h36v-barra { flex: 1; height: 2px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; }
.h36v-barra i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.h36v-cab { display: flex; align-items: center; gap: 8px; }
.h36v-av .avatar { width: 32px !important; height: 32px !important; }
.h36v-nom { font-weight: 700; font-size: 14px; color: #fff; }
.h36v-hace { color: rgba(255,255,255,.75); font-size: 13px; }
.h36v-esp { flex: 1; }
.h36v-b { color: #fff; padding: 4px; display: inline-flex; }
.h36v-b.on { color: #E8A0FF; }
.h36v-b.late { animation: late36 .35s ease; }
.h36v-zona { position: absolute; top: 70px; bottom: 80px; width: 35%; z-index: 1; }
.h36v-zona.izq { inset-inline-start: 0; } .h36v-zona.der { inset-inline-end: 0; }
.h36v-pie { position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; padding: 14px; display: flex; align-items: center; gap: 12px; background: linear-gradient(transparent, rgba(0,0,0,.5)); z-index: 2; }
.h36v-resp { flex: 1; min-width: 0; background: transparent; border: 1px solid rgba(255,255,255,.8); border-radius: 999px; padding: 11px 18px; color: #fff; outline: 0; }
.h36v-resp::placeholder { color: rgba(255,255,255,.85); }
.h36v-enlace { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 2; background: #fff; color: #161823; border-radius: 10px; padding: 8px 14px; font-weight: 700; font-size: 14px; display: inline-flex; gap: 6px; align-items: center; max-width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h36v-flecha { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.85); color: #161823; display: flex; align-items: center; justify-content: center; flex: none; }
.h36v-flecha[hidden] { visibility: hidden; display: flex; }
.h36v-lado { width: 220px; display: flex; justify-content: center; flex: none; }
.h36v-mini { position: relative; width: 200px; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff; background: #333; }
.h36v-mini-fondo { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(.55); }
.h36v-mini > *:not(.h36v-mini-fondo) { position: relative; }
.h36v-mini-av { padding: 3px; border-radius: 50%; background: conic-gradient(from 210deg, var(--acento), #E8A0FF, #FF6FB5, var(--acento)); }
.h36v-mini-av .avatar { border: 3px solid #333; }
.h36v-mini small { color: rgba(255,255,255,.8); }
.h36v-cargando { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.girar { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; animation: girar36 .8s linear infinite; }
@keyframes girar36 { to { transform: rotate(360deg); } }
@media (max-width: 1180px) { .h36v-lado { width: 150px; } .h36v-mini { width: 140px; } }
@media (max-width: 900px) {
  .h36v-lado, .h36v-flecha, .h36v-logo { display: none; }
  .h36v-escena { padding: 0; }
  .h36v-carta { height: 100%; width: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; }
  .h36v-cerrar { top: 26px; inset-inline-end: 6px; }
  .h36v-cab { padding-inline-end: 40px; }
}

/* ── Menú propio del clic derecho (img 326) ── */
.mv-menu { position: fixed; z-index: 80; min-width: 230px; background: var(--fondo); color: var(--tinta); border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 10px 34px rgba(0,0,0,.22); padding: 6px; }
.mv-menu hr { border: 0; border-top: 1px solid var(--borde); margin: 4px 6px; }
.mv-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border-radius: 8px; font-weight: 600; font-size: 14px; text-align: start; }
.mv-item:hover, .mv-item:focus { background: var(--fondo-2); outline: 0; }
.mv-item.peligro { color: #E5484D; }
.mv-modal .cuerpo { padding: 30px 28px 24px; }
.mv-modal h2 { font-size: 22px; margin: 4px 0 12px; }
.mv-sub { color: var(--tinta-2); margin: 0 0 10px; }
.mv-motivos { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.mv-motivo { display: flex; gap: 10px; align-items: center; padding: 9px 6px; border-radius: 8px; cursor: pointer; }
.mv-motivo:hover { background: var(--fondo-2); }
.mv-extra { width: 100%; border: 1px solid var(--borde); border-radius: 8px; padding: 10px; background: var(--fondo); margin-bottom: 12px; resize: vertical; }
.mv-modal .btn { width: 100%; }
.mv-privs { display: flex; flex-direction: column; gap: 6px; }
.mv-priv { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; border: 1px solid var(--borde); font-weight: 600; text-align: start; }
.mv-priv span { flex: 1; }
.mv-priv.on { border-color: var(--acento); color: var(--acento); }

/* ── Hoja de compartir (img 338) ── */
.cp-velo { position: fixed; inset: 0; z-index: 75; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 16px; animation: entra36 .14s ease; }
.cp-velo.saliendo { opacity: 0; transition: opacity .15s; }
@keyframes entra36 { from { opacity: 0; } }
.cp-hoja { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--fondo); color: var(--tinta); border-radius: 14px; box-shadow: 0 14px 44px rgba(0,0,0,.3); padding: 14px 18px 18px; }
.cp-cab { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; margin-bottom: 10px; }
.cp-cab h3 { margin: 0; text-align: center; font-size: 18px; }
.cp-cerrar { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.cp-cerrar:hover { background: var(--fondo-2); }
.cp-contactos, .cp-ops { display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px 10px; scrollbar-width: thin; }
.cp-ops { flex-wrap: wrap; overflow: visible; }
.cp-hoja:focus { outline: 0; }
.cp-contacto { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; flex: none; font-size: 12px; text-align: center; border-radius: 12px; padding: 4px 0; }
.cp-contacto .avatar { width: 56px !important; height: 56px !important; }
.cp-contacto.sel .cp-av { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 50%; }
.cp-contacto.enviado { opacity: .55; }
.cp-contacto.enviado .cp-nom::after { content: ' ✓'; color: var(--acento); }
.cp-nom { max-width: 72px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.cp-av-esq { width: 56px; height: 56px; border-radius: 50%; background: var(--fondo-2); animation: brillo36 1.2s infinite; }
.cp-l-esq { width: 48px; height: 10px; border-radius: 5px; background: var(--fondo-2); }
.cp-nadie { color: var(--tinta-3); margin: 6px 0; font-size: 14px; }
.cp-sep { border: 0; border-top: 1px solid var(--borde); margin: 4px 0 8px; }
.cp-op { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; flex: none; font-size: 12px; text-align: center; }
.cp-circ { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--tinta-3); }
.cp-op:hover .cp-circ { filter: brightness(1.08); transform: scale(1.04); }
.cp-op.rep .cp-circ { background: #F5B731; }
.cp-op.cop .cp-circ { background: #4C6EF5; }
.cp-op.wa .cp-circ { background: #25D366; }
.cp-op.fb .cp-circ { background: #1877F2; }
.cp-op.x .cp-circ { background: #000; }
.cp-op.tg .cp-circ { background: #2AABEE; }
.cp-op.co .cp-circ { background: #8a8b91; }
.cp-op.in .cp-circ { background: #3F8F9C; }
:root[data-theme="dark"] .cp-op.x .cp-circ { background: #333; }
.cp-envio { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.cp-envio .cp-a { width: 100%; color: var(--tinta-2); font-size: 13px; }
.cp-envio input { flex: 1; min-width: 160px; border: 1px solid var(--borde); border-radius: 999px; padding: 10px 14px; background: var(--fondo); }
.cp-insertar { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.cp-codigo { width: 100%; font: 12px/1.4 ui-monospace, Menlo, monospace; border: 1px solid var(--borde); border-radius: 8px; padding: 8px; background: var(--fondo-2); color: var(--tinta); resize: vertical; }
@media (max-width: 900px) {
  .cp-velo { align-items: flex-end; padding: 0; }
  .cp-hoja { border-radius: 16px 16px 0 0; width: 100%; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}

/* ── Buscar (antes Explorar): video horizontal en tarjeta horizontal + «En vivo ahora» ── */
.ex-rej .ex-t.ancho36 { grid-column: span 2; }
.ex-rej .ex-t.ancho36 .ex-medio { aspect-ratio: 3 / 2; background: #000; }
.ex-vivos36 { margin: 14px 0 4px; }
.ex-vivos36-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ex-vivos36-cab a { margin-inline-start: auto; color: var(--acento); font-weight: 700; font-size: 14px; }
.ex-vivos36-fila { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.ex-vivo36 { flex: none; width: 150px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.ex-vivo36-img { position: relative; width: 150px; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--fondo-2); display: flex; align-items: center; justify-content: center; color: var(--tinta-3); }
.ex-vivo36-img img { width: 100%; height: 100%; object-fit: cover; }
.ex-vivo36-img .et-live { position: absolute; inset-inline-start: 8px; top: 8px; }
.ex-vivo36 small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .ex-rej .ex-t.ancho36 { grid-column: span 2; } }

/* En vivo: horizontales anchos en el computador */
.rejilla-4 > .live-ancho36 { grid-column: span 2; }
.rejilla-4 > .live-ancho36 .celda { aspect-ratio: 16 / 9; }

/* ── Franja de la app en el teléfono (img 336) ── */
.banner36 { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 8px 10px; padding-top: calc(8px + env(safe-area-inset-top)); background: var(--fondo); border-bottom: 1px solid var(--borde); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.banner36 img { border-radius: 10px; background: #000; flex: none; }
.banner36-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.banner36-txt small { color: var(--tinta-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banner36-x { color: var(--tinta-3); padding: 4px; flex: none; }
.banner36-bajar { font-size: 13px; font-weight: 700; color: var(--acento); padding: 6px 4px; flex: none; }
.banner36-abrir { background: var(--acento); color: #fff; font-weight: 700; font-size: 13px; padding: 8px 12px; border-radius: 999px; flex: none; }
@media (max-width: 900px) {
  /* El feed vertical ocupa la pantalla: con la franja, se le resta su alto (56 px) para no tapar nada. */
  body.con-banner36 .feed, body.con-banner36 .tarjeta-feed { height: calc(100vh - 60px - 58px); }
  body.con-banner36 .panel { top: 58px; }
}