/* Feed vertical de Rapidines */
body.is-feed { background: #000; height: 100dvh; overflow: hidden; }

.feed-top {
    position: fixed; z-index: 10; top: 0; left: 0; right: 0;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
    background: linear-gradient(rgba(0,0,0,.65), transparent);
    pointer-events: none;
}
.feed-top > * { pointer-events: auto; }
.feed-back { display: inline-flex; align-items: center; gap: 4px; color: #fff; justify-self: start; }
.feed-back .logo { display: none; }
@media (min-width: 700px) { .feed-back .logo { display: inline; } }
.feed-title { font-family: var(--font-rotulo); font-weight: 800; font-size: 22px; letter-spacing: -.03em; color: var(--texto); }
.feed-sound { justify-self: end; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; }
.feed-sound .i-sound { display: none; }
.feed-sound[aria-pressed="true"] .i-sound { display: block; }
.feed-sound[aria-pressed="true"] .i-muted { display: none; }

.feed {
    height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
    scroll-snap-type: y mandatory; scrollbar-width: none;
}
.feed::-webkit-scrollbar { display: none; }

.slide {
    position: relative; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always;
    display: flex; justify-content: center; align-items: center; gap: 14px;
    overflow: hidden;
}
.slide-frame {
    position: relative; height: 100%; width: 100%;
    background: #0b0b0b;
}
@media (min-width: 700px) {
    .slide { padding: 64px 0 20px; }
    .slide-frame { width: auto; height: 100%; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; }
}
.slide-video, .slide-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; background: #000; }
@media (min-width: 700px) { .slide-video { object-fit: contain; } }

.slide-touch { position: absolute; inset: 0; z-index: 1; }
.slide-paused, .slide-heart { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; color: rgba(255,255,255,.9); opacity: 0; }
.slide.is-paused .slide-paused { opacity: 1; }
.slide-heart { color: var(--chicle); }
.slide-heart.is-pop { animation: heart-pop .7s ease-out; }
@keyframes heart-pop {
    0% { opacity: 0; transform: scale(.4); }
    25% { opacity: 1; transform: scale(1.15); }
    60% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.3) translateY(-30px); }
}

.slide-progress { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.2); }
.slide-progress span { display: block; height: 100%; width: 0; background: var(--mango); }

.slide-info {
    position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
    padding: 60px 80px calc(20px + env(safe-area-inset-bottom)) 14px;
    background: linear-gradient(transparent, rgba(0,0,0,.75));
    color: #fff; display: grid; gap: 6px; justify-items: start;
}
@media (min-width: 700px) { .slide-info { padding-right: 14px; } }
.slide-performer { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: #fff; }
.slide-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ciruela-600); border: 2px solid var(--mango); font-family: var(--font-rotulo); font-size: 14px; color: var(--mango); }
.slide-avatar img { width: 100%; height: 100%; object-fit: cover; }
.slide-caption { font-size: 15px; line-height: 1.4; max-width: 46ch; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.slide-credit { font-size: 14px; font-weight: 600; color: var(--mango); }

.slide-rail {
    position: absolute; z-index: 4; right: 8px; bottom: calc(90px + env(safe-area-inset-bottom));
    display: grid; gap: 18px; justify-items: center;
}
@media (min-width: 700px) { .slide-rail { position: static; align-self: flex-end; margin-bottom: 20px; } }
.rail-btn { display: grid; justify-items: center; gap: 4px; background: none; border: 0; padding: 0; color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.rail-btn svg { width: 50px; height: 50px; padding: 11px; border-radius: 50%; background: rgba(255,255,255,.14); }
@media (min-width: 700px) { .rail-btn svg { background: var(--ciruela-800); } }
.rail-btn:hover { color: #fff; }
.rail-btn:hover svg { background: rgba(255,255,255,.24); }
.rail-btn[aria-pressed="true"] svg { color: var(--chicle); }

.slide-end { background: radial-gradient(90% 60% at 50% 40%, var(--ciruela-700), #000); }
.slide-end-box { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 24px; max-width: 360px; color: var(--texto-2); }
.slide-end-box .rotulo { font-size: 28px; }
.slide-end-box .btn { width: 100%; }

.slide-error { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; color: var(--texto-2); text-align: center; padding: 24px; }

.feed-hint {
    position: fixed; z-index: 9; left: 50%; top: calc(70px + env(safe-area-inset-top)); transform: translateX(-50%); white-space: nowrap;
    background: rgba(0,0,0,.6); color: #fff; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
    pointer-events: none; transition: opacity .4s;
}
.feed-hint.is-hidden { opacity: 0; }
@media (min-width: 700px) { .feed-hint { display: none; } }

/* Pantalla de anuncio intercalada */
.slide-ad-frame { display: grid; place-items: center; }
.slide-ad-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.slide-ad-label { position: absolute; z-index: 2; top: calc(72px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: var(--texto-2); background: rgba(0,0,0,.55); padding: 4px 10px; border-radius: 999px; }
@media (min-width: 700px) { .slide-ad-label { top: 12px; } }

/* ---------- Medios dentro de la pantalla (feed de Humor) ---------- */
.slide-media { position: absolute; inset: 0; }
.slide-media.is-wide { inset: auto 0; top: 50%; transform: translateY(-50%); aspect-ratio: 16 / 9; background: #000; }
.slide-media .slide-embed, .slide-media .slide-video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.slide-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.slide-excerpt { font-size: 14px; color: rgba(255,255,255,.8); max-width: 60ch; }
.slide-title { font-weight: 700; font-size: 16px; }

/* Escritorio: marco ancho para videos horizontales, con el texto debajo */
@media (min-width: 700px) {
    .feed-wide .slide-frame {
        aspect-ratio: auto; width: min(calc(100vw - 180px), 1040px); height: 100%;
        background: transparent; overflow: visible; border-radius: 0;
        display: flex; flex-direction: column; justify-content: center; gap: 14px;
    }
    .feed-wide .slide-media { position: relative; inset: auto; transform: none; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100dvh - 230px); border-radius: 14px; overflow: hidden; background: #000; }
    .feed-wide .slide-media.is-fill { aspect-ratio: 16 / 9; }
    .feed-wide .slide-media.is-fill .slide-video { object-fit: contain; }
    .feed-wide .slide-info { position: static; padding: 0; background: none; }
    .feed-wide .slide-rail { margin-bottom: 0; align-self: center; }
}