/* Css temti 2026 */
:root {
    --fondo1: #f3f4f6;
    --fondo2: #ffffff;
    --fondo3: #dee2e6;
    --texto1: #495057;
    --texto2: #adb5bd;
    --texto3: #009e87;
    --coral: #ff735c;
    --ink: #202321;
    --muted: #7c7f74;
    --line: #d8d7d1;
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--fondo1);
    color: var(--texto1);
    font-family: 'DM Sans', sans-serif
}

a {
    color: var(--texto3);
    text-decoration: none
}

.topbar {
    background: var(--fondo2);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--fondo3);
    height: 78px;
    display: flex;
    align-items: center;
    padding: 0 4vw;
    gap: 44px;

    position: sticky;
    top: 0;
    z-index: 3
}

.brand {
    font: 700 30px 'Space Grotesk', sans-serif;
    letter-spacing: -1px
}

.brand span {
    color: var(--texto1)
}

.search {
    background: var(--fondo3);
    border-radius: 30px;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    max-width: 300px;
    flex: 1;
    color: var(--texto1)
}

.search input {
    border: 0;
    background: transparent;
    outline: 0;
    padding: 0 10px;
    width: 100%;
    font: inherit
}

.topbar nav {
    margin-left: auto;
    display: flex;
    gap: 23px;
    align-items: center
}

.nav-link {
    font-size: 14px
}

.quiet {
    border: 0;
    background: none;
    font: inherit;
    color: var(--fondo3);
    cursor: pointer
}

.bell {
    font-size: 23px;
    position: relative
}

.bell b {
    background: var(--texto3);
    color: #fff;
    border-radius: 20px;
    font-size: 10px;
    padding: 2px 5px;
    position: absolute;
    top: -6px;
    right: -8px
}

.button,
.outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    border: 0;
    border-radius: 3px;
    background: var(--fondo3);
    color: var(--texto1);
    padding: 14px 20px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit
}

.button span {
    color: var(--texto3)
}

.button.small {
    padding: 10px 17px
}

.outline {
    background: transparent;
    border: 1px solid var(--fondo3);
    color: var(--texto1)
}

.outline:hover {
    border-color: var(--texto3);
    color: var(--texto3)
}

main {
    max-width: 1400px;
    margin: auto;
    padding: 0 4vw
}

.intro {
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding: 90px 0 75px;
    border-bottom: 1px solid var(--fondo2)
}

.eyebrow {
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--texto3);
    font-weight: 700;
    margin: 0 0 18px
}

.intro h1,
.token-page h1,
.auth-art h1 {
    font: 700 clamp(48px, 6vw, 83px)/.95 'Space Grotesk', sans-serif;
    letter-spacing: -4px;
    margin: 0
}

.intro em,
.token-page em,
.auth-art em {
    font-style: normal;
    color: var(--texto3);
}

.user-menu-categories {
    padding: 1em;
}
.feed-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 28px 22px 22px
}

.feed-head h2,
.new-post h2 {
    font: 700 25px 'Space Grotesk', sans-serif;
    margin: 0
}

.feed-head span,
.stamp {
    font-size: 13px;
    color: var(--texto2);
    position:absolute;
    margin-top: -15px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 13px
}

.post-card {
    background: var(--fondo1);
    border: 1px solid var(--fondo2);
    min-width: 0
}

.card-image {
    height: 190px;
    position: relative;
    overflow: hidden
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s
}

.card-music-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2a2d33 0%, #1a1c20 100%);
    color: #fff;
    font-size: 56px
}

.card-music-placeholder .bx {
    opacity: .95
}

.view-list .card-music-placeholder {
    font-size: 42px
}

@media(max-width:600px) {
    .card-music-placeholder {
        font-size: 44px
    }
}

.post-card:hover img {
    transform: scale(1.04)
}

.date {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--fondo2);
    padding: 5px 8px;
    font-size: 11px
}

.card-copy {
    padding: 17px 15px 14px
}

.card-copy h3 {
    font: 700 17px 'Space Grotesk', sans-serif;
    margin: 0 0 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.card-copy p {
    font-size: 13px;
    line-height: 1.45;
    color: var(--fondo2);
    height: 38px;
    overflow: hidden;
    margin: 0 0 19px
}

.meta {
    border-top: 1px solid var(--fondo3);
    padding-top: 11px;
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--fondo3)
}

.new-post {
    margin: 100px 0 40px;
    background: var(--texto3);
    padding: 45px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px
}

.new-post h2 {
    font-size: 38px;
    line-height: 1.05
}

.new-post em {
    font-style: normal;
    color: var(--texto3)
}

.new-post input,
.new-post textarea,
.auth-box input,
.comment-form textarea {
    display: block;
    border: 0;
    border-bottom: 1px solid #819650;
    background: transparent;
    padding: 14px 0;
    width: 100%;
    font: inherit;
    outline: 0
}

.new-post textarea {
    height: 90px;
    resize: vertical
}

.form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px
}

.file-label {
    font-size: 13px;
    cursor: pointer
}

.file-label input {
    display: none
}

footer {
    max-width: 1400px;
    margin: auto;
    padding: 45px 4vw 25px;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--fondo3);
    letter-spacing: .5px
}

.auth-page {
    display: grid;
    grid-template-columns: 1fr 410px;
    gap: 12vw;
    align-items: center;
    min-height: calc(100vh - 160px);
    max-width: 950px;
    margin: auto
}

.auth-art>p:last-child {
    max-width: 300px;
    color: var(--texto2);
    line-height: 1.6;
    margin-top: 30px
}

.auth-box {
    background: var(--fondo2);
    padding: 38px;
    border: 1px solid var(--fondo3)
}

.auth-box h2 {
    font: 700 28px 'Space Grotesk', sans-serif;
    margin: 0 0 9px
}

.auth-box>p {
    font-size: 13px;
    color: var(--texto2);
    margin: 0 0 30px
}

.auth-box label {
    font-size: 11px;
    color: var(--texto2)
}

.auth-box input {
    font-size: 18px;
    letter-spacing: 2px;
    margin: 4px 0 15px;
    color: var(--texto1);
    caret-color: var(--texto3)
}

.auth-box input::placeholder {
    color: var(--texto2);
    opacity: 1
}

.full {
    width: 100%;
    margin-top: 14px
}

.error {
    color: var(--texto3);
    font-size: 12px
}

.divider {
    border-top: 1px solid var(--fondo3);
    text-align: center;
    margin: 28px 0 14px
}

.divider span {
    background: var(--fondo2);
    padding: 0 12px;
    position: relative;
    top: -9px;
    color: var(--fondo3);
    font-size: 12px
}

.token-page {
    min-height: calc(100vh - 160px);
    padding: 110px 10vw
}

.token-page>p:not(.eyebrow) {
    color: var(--texto2);
    max-width: 400px;
    line-height: 1.6
}

.token {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--fondo2);
    border: 1px solid var(--fondo2);
    padding: 20px;
    margin: 35px 0;
    width: max-content;
    max-width: 100%
}

.token code {
    font-size: 18px;
    letter-spacing: 2px;
    word-break: break-all
}

.copy {
    border: 0;
    background: var(--texto3);
    padding: 10px;
    cursor: pointer
}

.post-detail {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 7vw;
    padding: 10px 5vw
}

.post-story img {
    width: 100%;
    max-height: 450px;
    height: auto;
    object-fit: cover;
    object-position: top;
    margin: 25px 0 35px;
    cursor: pointer;
    transition: max-height .4s cubic-bezier(.22,.9,.32,1), object-fit .4s
}
.post-story img.is-expanded {
    max-height: none;
    height: auto !important
}

.back {
    font-size: 13px;
    color: var(--texto2)
}

.post-story h1 {
    font: 700 clamp(35px, 5vw, 65px)/.98 'Space Grotesk', sans-serif;
    letter-spacing: -3px;
    margin: 0 0 20px
}

.story-text {
    font-size: 18px;
    line-height: 1.6;
    max-width: 650px
}

.comments {
    padding-top: 65px
}

.comments-head {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--fondo2);
    padding-bottom: 17px
}

.comments-head h2 {
    font: 700 23px 'Space Grotesk', sans-serif;
    margin: 0
}

.comments-head span {
    background: var(--texto3);
    padding: 4px 8px;
    font-size: 12px
}

.comment-form {
    margin: 20px 0 30px
}

.comment-form textarea {
    height: 65px;
    resize: vertical
}

.comment-form .button {
    float: right;
    margin-top: 10px;
    padding: 9px 14px;
    font-size: 12px
}

.comment-list {
    clear: both;
    padding-top: 24px
}

.comment {
    display: flex;
    gap: 12px;
    border-bottom: 1px solid var(--fondo2);
    padding: 17px 0
}

.avatar {
    width: 28px;
    height: 28px;
    background: var(--texto3);
    border-radius: 50%;
    flex: none
}

.comment p {
    font-size: 14px;
    margin: 0 0 7px;
    line-height: 1.4
}

.comment small {
    font-size: 10px;
    color: var(--fondo3)
}

.login-note {
    display: block;
    background: var(--fondo3);
    padding: 17px;
    margin: 20px 0;
    font-size: 13px
}
.login-note:hover {
    display: block;
    background: var(--fondo2);
    padding: 17px;
    margin: 20px 0;
    font-size: 13px
}

.profile-head {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 70px 0 60px;
    border-bottom: 1px solid var(--fondo2)
}

.profile-mark {
    font-size: 47px;
    background: var(--texto3);
    width: 90px;
    height: 90px;
    display: grid;
    place-items: center
}

.profile-head h1 {
    font: 700 42px 'Space Grotesk', sans-serif;
    margin: 0 0 8px
}

.profile-head p:last-child {
    color: var(--fondo3);
    margin: 0
}

.empty {
    padding: 70px 0;
    text-align: center;
    color: var(--fondo3)
}

.empty a {
    color: var(--fondo1);
    text-decoration: underline
}

.page-empty h1 {
    font: 700 70px 'Space Grotesk';
    color: var(--texto3)
}

@media(max-width:1000px) {
    .grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .card-image {
        height: 220px
    }

    .topbar {
        gap: 20px
    }

    .post-detail {
        grid-template-columns: 1fr
    }

    .comments {
        padding-top: 0
    }

    .post-story img {
        height: 380px
    }
}

@media(max-width:600px) {
    .topbar {
        height: auto;
        min-height: 70px;
        flex-wrap: wrap;
        padding: 14px 5vw;
        gap: 14px
    }

    .search {
        order: 3;
        flex-basis: 100%;
        max-width: none
    }

    .topbar nav {
        gap: 12px
    }

    .nav-link {
        display: none
    }

    .intro {
        padding: 60px 0 45px;
        display: block
    }

    .intro .button {
        margin-top: 30px
    }

    .intro h1 {
        font-size: 51px;
        letter-spacing: -3px
    }

    .grid {
        grid-template-columns: 1fr 1fr
    }

    .card-image {
        height: 145px
    }

    .card-copy {
        padding: 12px 10px
    }

    .card-copy h3 {
        font-size: 14px
    }

    .card-copy p {
        font-size: 11px
    }

    .meta {
        font-size: 9px
    }

    .meta span:last-child {
        display: none
    }

    .new-post {
        display: block;
        padding: 25px;
        margin-top: 60px
    }

    .new-post h2 {
        font-size: 31px;
        margin-bottom: 30px
    }

    .auth-page {
        display: block;
        padding: 65px 0
    }

    .auth-art {
        margin-bottom: 45px
    }

    .auth-art h1 {
        font-size: 54px
    }

    .auth-box {
        padding: 25px
    }

    .token-page {
        padding: 70px 0
    }

    .token-page h1 {
        font-size: 55px
    }

    .token {
        width: 100%;
        display: block
    }

    .token code {
        font-size: 13px
    }

    .token .copy {
        margin-top: 14px
    }

    .post-detail {
        padding: 10px 0
    }

    .post-story img {
        height: 270px;
        margin: 20px 0 25px
    }

    .post-story h1 {
        font-size: 42px
    }

    .profile-head {
        padding: 50px 0 40px
    }

    .profile-head h1 {
        font-size: 29px
    }

    footer {
        padding-left: 0;
        padding-right: 0
    }
}

@media(min-width:1001px) {
    .post-story {
        position: sticky;
        top: 100px;
        align-self: start;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        padding-right: 12px
    }

    .post-story::-webkit-scrollbar {
        width: 6px
    }

    .post-story::-webkit-scrollbar-thumb {
        background: var(--fondo2);
        border-radius: 6px
    }
}

.post-card {
    aspect-ratio: 1;
    overflow: hidden;
    position: relative;
    border: 0;
    background: var(--fondo1)
}

.post-card>a,
.card-image {
    display: block;
    width: 100%;
    height: 100%
}

.card-image img {
    display: block;
    transition: transform .55s ease
}

.post-card:hover .card-image img {
    transform: scale(1.1)
}

.card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px 14px 13px;
    color: #fff;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .48) 0%, transparent 34%, transparent 48%, rgba(0, 0, 0, .84) 100%)
}

.card-overlay h3 {
    font: 700 18px/1.1 'Space Grotesk', sans-serif;
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45)
}

.card-overlay .meta {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 8px;
    color: #fff;
    font-size: 11px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55)
}

.card-overlay .date {
    position: static;
    background: none;
    padding: 0;
    font-size: 11px;
    color: #fff
}

@media(max-width:600px) {
    .card-overlay {
        padding: 12px 10px 10px
    }

    .card-overlay h3 {
        font-size: 14px
    }

    .card-overlay .meta {
        font-size: 9px
    }
}

.grid {
    gap: 0
}

.card-list-content {
    display: none
}





.card-overlay {
    justify-content: flex-start
}

.card-overlay h3 {
    order: 1
}

.card-overlay .meta {
    order: 2;
    margin-top: auto
}

.grid:not(.view-list):not(.view-masonry) .card-overlay {
    justify-content: flex-end
}

.grid:not(.view-list):not(.view-masonry) .card-overlay h3 {
    order: 2
}

.grid:not(.view-list):not(.view-masonry) .card-overlay .meta {
    order: 1;
    margin-top: 0;
    margin-bottom: 8px
}

.grid:not(.view-list) .card-overlay {
    justify-content: flex-end
}

.grid:not(.view-list) .card-overlay h3 {
    order: 1
}

.grid:not(.view-list) .card-overlay .meta {
    order: 2;
    margin-top: 8px;
    margin-bottom: 0
}

.grid:not(.view-list) .card-overlay h3 {
    margin: 0 0 8px
}

.grid:not(.view-list) .card-overlay .meta {
    margin-top: 0
}

.card-image .card-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s ease
}

.post-card:hover .card-video {
    transform: scale(1.1)
}

.story-text blockquote {
    margin: 18px 0;
    padding: 14px 18px;
    border-left: 3px solid var(--texto3);
    background: var(--fondo2);
    color: var(--texto2);
    white-space: pre-line
}

.publication-code {
    margin: 18px 0;
    padding: 12px;
    background: var(--fondo2);
    color: var(--texto1);
    border-radius: 6px
}

.publication-code-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 8px
}

.publication-code-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid #777d78;
    border-radius: 3px;
    background: transparent;
    color: #fff;
    padding: 4px 9px;
    font: 11px 'DM Sans', sans-serif;
    cursor: pointer
}

.publication-code-copy:hover {
    background: #777d78
}

.publication-code-copy .bx {
    font-size: 13px;
    line-height: 1
}

.publication-code-src {
    display: none
}

.publication-code-body {
    overflow-x: auto;
    overflow-y: hidden
}

.publication-code-body.is-scrollable {
    max-height: 130px;
    overflow-y: auto;
    overflow-x: auto;
    padding-right: 6px
}

.code-line {
    display: flex;
    gap: 12px;
    font: 13px/1.55 'Courier New', monospace;
    white-space: pre;
    min-height: 20px
}

.code-line-number {
    flex: 0 0 auto;
    min-width: 24px;
    text-align: right;
    color: #a9b0ab;
    user-select: none
}

.code-line-content {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere
}

.publication-code-body::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

.publication-code-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .08);
    border-radius: 8px
}

.publication-code-body::-webkit-scrollbar-thumb {
    background: #f4f2ed;
    border-radius: 8px
}

.publication-code-body::-webkit-scrollbar-thumb:hover {
    background: var(--texto3)
}

.grid:not(.view-list) .card-overlay {
    display: block
}

.grid:not(.view-list) .card-overlay h3 {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 40px;
    margin: 0
}

.grid:not(.view-list) .card-overlay .meta {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 13px;
    margin: 0
}

@media(max-width:600px) {
    .grid:not(.view-list) .card-overlay h3 {
        left: 10px;
        right: 10px;
        bottom: 31px
    }

    .grid:not(.view-list) .card-overlay .meta {
        left: 10px;
        right: 10px;
        bottom: 10px
    }
}

.card-last-comment {
    margin-top: auto;
    padding: 12px 13px;
    border: 1px solid var(--fondo3);
    border-radius: 5px;
    background: var(--fondo1)
}

.card-comment-label {
    display: block;
    margin-bottom: 6px;
    color: var(--texto1);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px
}

.card-last-comment p {
    margin: 0;
    color: var(--fondo1);
    font-size: 13px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden
}

.view-list {
    display: flex;
    flex-direction: column
}

.view-list .card-image {
    display: flex;
    background: #fff
}

.view-list .card-image>img {
    width: 42%;
    height: 100%;
    flex: 0 0 42%;
    object-fit: cover
}

.view-list .card-overlay {
    display: none
}

.view-list .card-list-content {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px 28px;
    color: var(--fondo1);
    background: var(--fondo2)
}

.view-list .card-list-content h3 {
    font: 700 25px/1.1 'Space Grotesk', sans-serif;
    margin: 0 0 18px;
    white-space: normal;
    overflow-wrap: anywhere
}

.card-list-meta {
    display: flex;
    gap: 16px;
    color: var(--texto2);
    font-size: 11px
}

.view-list .card-list-content p {
    margin: 14px 0 0;
    color: var(--texto2);
    font-size: 13px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden
}

.view-list .post-card {
    height: 300px
}

.view-list .card-image img {
    transform: none
}

.view-list .post-card:hover .card-image img {
    transform: scale(1.04)
}

.view-list .card-list-content p:empty {
    display: none
}

.view-list .card-list-content .card-list-meta {
    margin-bottom: 16px
}

.view-list .card-list-content .card-last-comment {
    width: 100%
}

.view-list .card-image>img {
    width: clamp(180px, 28vw, 300px);
    height: 100%;
    flex: 0 0 clamp(180px, 28vw, 300px);
    aspect-ratio: 1;
    object-fit: cover
}

.view-list .card-list-content {
    justify-content: space-between
}

.view-list .card-list-content h3 {
    margin-top: auto;
    color: var(--texto1);
}

.view-list .card-list-content p {
    margin-top: 14px
}

.view-list .card-image {
    overflow: hidden
}

.view-list .card-image>img {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    transform-origin: center center
}

.view-list .card-list-content {
    position: relative;
    z-index: 2
}

@media(max-width:600px) {
    .view-list .card-image>img {
        width: clamp(120px, 34vw, 220px);
        flex-basis: clamp(120px, 34vw, 220px);
        height: auto;
        aspect-ratio: 1;
        align-self: stretch
    }
    .view-list .post-card {
        height: 220px
    }
    .view-list .card-list-content {
        padding: 16px
    }
    .view-list .card-list-content h3 {
        font-size: 18px;
        margin-bottom: 10px
    }
    .view-list .card-list-content p {
        font-size: 11px;
        margin-top: 8px
    }
    .card-list-meta {
        gap: 8px;
        font-size: 9px
    }
}

.view-masonry {
    display: block;
    column-count: 4;
    column-gap: 0
}

.view-masonry .post-card {
    display: block;
    width: 100%;
    aspect-ratio: auto;
    break-inside: avoid
}

.view-masonry .card-image {
    height: auto;
    aspect-ratio: auto
}

.view-masonry .card-image img {
    height: auto;
    max-height: 420px;
    object-fit: cover
}

.view-masonry .card-overlay {
    min-height: 180px
}

@media(max-width:1000px) {
    .view-masonry {
        column-count: 3
    }
}

.view-switcher {
    display: flex;
    gap: 4px;
    align-items: center
}

.view-button {
    width: 34px;
    height: 32px;
    border: 1px solid var(--fondo2);
    background: transparent;
    color: var(--texto2);
    font-size: 20px;
    line-height: 1;
    cursor: pointer
}

.view-button:hover,
.view-button.active {
    background: var(--transparent);
    border-color: var(--fondo2);
    color: var(--texto3)
}

@media(max-width:600px) {
    .feed-head {
        align-items: center
    }

    .view-button {
        width: 31px;
        height: 30px;
        font-size: 18px
    }


    .view-masonry {
        column-count: 2
    }

    .view-masonry .card-overlay {
        min-height: 130px
    }
}
/* === Actividad en vivo: destello + zoom de la foto en las tarjetas de la home === */
@keyframes card-activity-shine {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 115, 92, .7);
        filter: brightness(1)
    }

    15% {
        filter: brightness(1.22)
    }

    70% {
        box-shadow: 0 0 0 18px rgba(255, 115, 92, 0);
        filter: brightness(1.08)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 115, 92, 0);
        filter: brightness(1)
    }
}

@keyframes card-activity-zoom {
    0% {
        transform: scale(1)
    }

    35% {
        transform: scale(1.09)
    }

    100% {
        transform: scale(1)
    }
}

.post-card.activity-flash {
    animation: card-activity-shine 1.8s ease-out;
    z-index: 2
}

.post-card.activity-flash .card-image img,
.post-card.activity-flash .card-image video {
    animation: card-activity-zoom 1.8s ease-out
}

/* === Entrada suave de una nueva publicacion en la home === */
@keyframes card-enter {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(.94)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.post-card.is-new {
    animation: card-enter .55s cubic-bezier(.22, .9, .32, 1) both,
    card-activity-shine 1.8s ease-out
}

/* === Modal de nueva publicación === */
#new-post {
    display: none
}

#new-post.modal-open {
    display: flex;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 20px;
    align-items: center;
    justify-content: center;
    background: rgba(23, 27, 25, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    overflow-y: auto
}

#new-post .modal-close {
    display: none
}

#new-post.modal-open .modal-close {
    display: grid;
    place-items: center;
    position: absolute;
    top: 34px;
    right: 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease
}

#new-post.modal-open .modal-close:hover {
    background: rgba(255, 255, 255, .28);
    transform: rotate(90deg)
}

#new-post.modal-open .new-post-panel {
    width: min(620px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--fondo2);
    border: 1px solid var(--fondo3);
    border-radius: 16px;
    padding: 30px 32px 32px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .28);
    position: relative
}

#new-post.modal-open .new-post-heading h2 {
    font-size: 30px;
    margin: 0 0 22px
}

@media(max-width:600px) {
    #new-post.modal-open {
        padding: 0;
        align-items: flex-end
    }

    #new-post.modal-open .new-post-panel {
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
        padding: 24px 20px 28px
    }

    #new-post.modal-open .modal-close {
        top: 14px;
        right: 14px;
        bottom: auto;
        border-color: var(--fondo3);
        background: var(--fondo1);
        color: var(--texto1)
    }
}

/* === Cita flotante (hover sobre >>CÓDIGO) === */
#citation-popup.citation-preview {
    position: fixed;
    z-index: 1002;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: min(400px, 92vw);
    max-width: calc(100vw - 24px);
    max-height: min(460px, 60vh);
    overflow: auto;
    padding: 14px 16px;
    background: var(--fondo2);
    border: 1px solid var(--fondo3);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(32, 35, 33, .2);
    color: var(--texto1);
    font-size: 13px;
    line-height: 1.5
}

#citation-popup.citation-preview .avatar {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--ink);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px
}

#citation-popup.citation-preview .comment-content {
    min-width: 0;
    flex: 1;
    color: var(--texto1)
}

#citation-popup.citation-preview .comment-content p {
    margin: 0
}

#citation-popup .citation-unavailable {
    color: var(--texto2);
    font-style: italic
}

@media(max-width:600px) {
    #citation-popup.citation-preview {
        width: calc(100vw - 24px);
        max-height: 50vh
    }
}


/* === Portadas locales para publicaciones sin medios (solo tarjetas) === */
.card-image .entry-verde {
    filter: grayscale(1) sepia(1) hue-rotate(70deg) saturate(3.2)
}

.card-image .entry-azul {
    filter: grayscale(1) sepia(1) hue-rotate(190deg) saturate(3.2)
}

.card-image .entry-rojo {
    filter: grayscale(1) sepia(1) hue-rotate(-45deg) saturate(3.6)
}

.card-image .entry-amarillo {
    filter: grayscale(1) sepia(1) hue-rotate(-5deg) saturate(3) brightness(1.04)
}

/* === Carga progresiva del feed (infinite scroll) === */
.feed-methods-area {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 0 46px;
    max-width: 1400px;
    margin: 0 auto
}

.feed-methods-area[hidden] {
    display: none
}

.feed-sentinel {
    width: 1px;
    height: 1px
}

.feed-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--texto2);
    padding: 14px 0 30px
}

.feed-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    flex: none;
    border: 2px solid var(--fondo3);
    border-top-color: var(--texto3);
    border-radius: 50%;
    animation: feed-spin .75s linear infinite
}

@keyframes feed-spin {
    to {
        transform: rotate(360deg)
    }
}

.feed-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--fondo3);
    background: var(--fondo2);
    color: var(--texto1);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 11px 22px;
    border-radius: 22px;
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .2s
}

.feed-more:hover {
    border-color: var(--texto3);
    background: var(--fondo3);
    transform: translateY(-1px)
}

.feed-more:disabled {
    opacity: .65;
    cursor: default;
    transform: none
}

.feed-end {
    font-size: 12px;
    color: var(--texto2);
    padding: 10px 0 22px;
    text-align: center
}

/* === Paginación del feed === */
.feed-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px
}

.feed-pager button {
    min-width: 36px;
    height: 36px;
    border: 1px solid var(--fondo3);
    background: var(--fondo2);
    color: var(--texto1);
    font: inherit;
    font-size: 13px;
    border-radius: 9px;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, transform .2s
}

.feed-pager button:hover:not(:disabled) {
    border-color: var(--texto3);
    transform: translateY(-1px)
}

.feed-pager button.active {
    background: var(--texto3);
    border-color: var(--texto3);
    color: var(--fondo2);
    font-weight: 700
}

.feed-pager button:disabled {
    opacity: .45;
    cursor: default
}

.feed-pager-dots {
    color: var(--texto2);
    padding: 0 2px
}

/* === Transiciones suaves === */
@keyframes feed-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.grid.feed-fade-in,
.com-posts-grid.feed-fade-in {
    animation: feed-fade-in .4s ease both
}

.grid.feed-fade-out,
.com-posts-grid.feed-fade-out {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none
}

.post-card.feed-loaded,
.community-post.feed-loaded {
    animation: feed-fade-in .4s ease both
}



/* === Compositor global de publicaciones (modal flotante) === */
		.new-post .category-picker {
			display: grid;
			grid-template-columns: 1fr;
			margin-top: 14px
		}

		.new-post .category-picker select,
		.new-post form > input[name="title"],
		.new-post form > textarea[name="message"],
		.new-post .poll-builder input[type="text"] {
			width: 100%;
			border: 1px solid var(--fondo3);
			border-radius: 4px;
			background: var(--fondo2);
			padding: 12px 14px;
			font: inherit;
			font-size: 13px;
			outline: 0;
			color: var(--texto1);
		}

		.new-post .category-picker select:focus,
		.new-post form > input[name="title"]:focus,
		.new-post form > textarea[name="message"]:focus,
		.new-post .poll-builder input[type="text"]:focus {
			border-color: var(--fondo3);
			box-shadow: 0 0 0 3px var(--fondo3)
		}

		html[data-theme="dark"] .new-post .category-picker select,
		html[data-theme="dark"] .new-post form > input[name="title"],
		html[data-theme="dark"] .new-post form > textarea[name="message"],
		html[data-theme="dark"] .new-post .poll-builder input[type="text"] {
			color: var(--texto2)
		}

		@media(max-width:600px) {
			.new-post .category-picker {
				grid-template-columns: 1fr
			}
		}

		.new-post .category-picker {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 12px;
			margin-top: 12px
		}

		.picker-label {
			display: block;
			font-size: 10px;
			font-weight: 700;
			letter-spacing: 1px;
			text-transform: uppercase;
			color: var(--texto2);
			margin-bottom: 6px
		}

		@media(max-width:700px) {
			.new-post .category-picker {
				grid-template-columns: 1fr
			}
		}

		.feed-clear {
			font-size: 12px;
			text-decoration: underline;
			color: var(--muted);
			white-space: nowrap
		}

		.feed-clear:hover {
			color: var(--coral)
		}

		.poll-activate {
			display: flex;
			align-items: center;
			gap: 8px;
			width: 100%;
			margin-top: 14px;
			padding: 10px 12px;
			border-radius: 4px;
			background: transparent;
			font: inherit;
			font-size: 13px;
			color: var(--texto1);
			cursor: pointer;
			text-align: left;
			border: 1px solid var(--fondo3);
		}

		.poll-activate:hover,
		.poll-activate.active {
			border-color: var(--fondo3);
			background: var(--fondo1)
		}

		.poll-toggle-row {
			display: flex;
			align-items: stretch;
			gap: 1px;
			margin-top: 14px
		}

		.poll-toggle-row .poll-activate {
			flex: 1;
			min-width: 0;
			margin-top: 0
		}

		.poll-activate-label {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap
		}

		.poll-clear {
			display: inline-grid;
			place-items: center;
			width: 38px;
			flex: none;
			padding: 0;
			border: 1px solid var(--fondo3);
			border-radius: 4px;
			background: var(--fondo2);
			color: var(--texto1);
			font: inherit;
			font-size: 16px;
			line-height: 1;
			cursor: pointer;
			transition: background .15s ease, border-color .15s ease, color .15s ease
		}

		.poll-clear:hover {
			background: var(--coral);
			border-color: var(--coral);
			color: #fff
		}

		.poll-builder {
			margin-top: -3px;
			padding: 14px;
			border: 1px solid var(--fondo3);
			border-radius: 0px 0px 5px 5px;
			background: var(--fondo1);
		}



		.poll-builder input {
			margin-top: 10px
		}

		.poll-builder .poll-question-input {
			margin-top: 0
		}

		.poll-option-row {
			display: flex;
			gap: 8px;
			margin-top: 10px;
			align-items: center
		}

		.poll-option-row input {
			flex: 1;
			margin-top: 0
		}

		.poll-remove-option {
			flex: 0 0 34px;
			width: 34px;
			height: 36px;
			border: 1px solid var(--fondo1);
			border-radius: 4px;
			background: var(--fondo2);
			font-size: 16px;
			line-height: 1;
			cursor: pointer;
			color: var(--texto1)
		}

		.poll-remove-option:disabled {
			opacity: .35;
			cursor: not-allowed
		}

		.poll-add-option {
			margin-top: 10px;
			padding: 6px 10px;
			border: 0;
			background: none;
			font: inherit;
			font-size: 12px;
			color: var(--texto3);
			cursor: pointer;
			text-decoration: underline
		}

		.poll-add-option:disabled {
			opacity: .5;
			cursor: not-allowed
		}

		.poll-multiple {
			display: flex;
			align-items: center;
			gap: 8px;
			margin-top: 12px;
			font-size: 13px;
			color: var(--ink)
		}

		.poll-multiple input {
			width: auto;
			margin: 0;
			accent-color: var(--texto3)
		}

		.poll-error {
			display: block;
			margin-top: 10px;
			font-size: 12px;
			color: var(--coral)
		}

		.heading-dropdown {
			position: relative
		}

		.heading-toggle {
			font-weight: 700
		}

		.heading-icon {
			font-weight: 700;
			font-size: 15px;
			line-height: 1;
			font-family: 'Space Grotesk', sans-serif
		}

		.heading-menu {
			position: absolute;
			left: 0;
			top: 40px;
			z-index: 6;
			display: grid;
			background: var(--fondo2);
			border: 1px solid var(--fondo3);
			border-radius: 5px;
			min-width: 160px;
			overflow: hidden
		}

		.heading-menu[hidden] {
			display: none
		}


		.heading-menu button {
			display: flex;
			align-items: center;
			gap: 9px;
			border: 0;
			background: none;
			font: inherit;
			font-size: 12px;
			padding: 9px 12px;
			cursor: pointer;
			color: var(--texto1);
			text-align: left
		}

		.heading-menu button:hover {
			background: var(--fondo3);
			color: var(--texto1)
		}

		.heading-preview {
			display: inline-grid;
			place-items: center;
			flex: none;
			width: 28px;
			height: 22px;
			border-radius: 3px;
			background: var(--texto1);
			color: var(--fondo2);
			font-family: 'Space Grotesk', sans-serif;
			font-weight: 700
		}

		.heading-preview.h1 {
			font-size: 13px
		}

		.heading-preview.h2 {
			font-size: 11px
		}

		.heading-preview.h3 {
			font-size: 10px
		}

		.post-media-preview .image-preview {
			position: relative;
			line-height: 0
		}

		.post-media-preview .image-preview img,
		.post-media-preview .image-preview video {
			display: block;
			width: 100%;
			object-fit: cover
		}

		.post-media-preview .image-preview video {
			object-fit: contain;
			max-height: 420px;
			background: var(--fondo1)
		}

		.post-media-preview .image-preview img[hidden],
		.post-media-preview .image-preview video[hidden] {
			display: none !important
		}

		.post-media-preview .youtube-preview {
			position: relative;
			margin-top: 10px;
			border-radius: 4px;
			overflow: hidden;
			background: #202321;
			line-height: 0
		}

		.post-media-preview .youtube-preview-thumb {
			display: block;
			width: 100%;
			aspect-ratio: 16/9;
			object-fit: cover
		}

		.post-media-preview .youtube-play-icon {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: grid;
			place-items: center;
			width: 54px;
			height: 54px;
			border-radius: 50%;
			background: rgba(32, 35, 33, .82);
			color: #fff;
			font-size: 23px;
			line-height: 1;
			pointer-events: none
		}

		.post-media-preview .remove-preview {
			position: absolute;
			top: 8px;
			right: 8px;
			z-index: 1;
			width: 30px;
			height: 30px;
			padding: 0;
			border: 0;
			border-radius: 50%;
			background: rgba(32, 35, 33, .78);
			color: #fff;
			font: inherit;
			font-size: 16px;
			line-height: 1;
			cursor: pointer
		}

		.post-media-preview .remove-preview:hover {
			background: #202321
		}

		.post-media-preview .audio-preview {
			display: flex;
			flex-direction: column;
			gap: 10px;
			margin-top: 10px
		}

		.post-media-preview .audio-preview-row {
			display: flex;
			align-items: center;
			gap: 10px;
			width: 100%
		}

		.post-media-preview .audio-preview audio {
			flex: 1;
			min-width: 0;
			height: 36px
		}

		.post-media-preview .audio-preview .remove-preview {
			position: static;
			flex: 0 0 30px
		}

		.post-media-preview .audio-cover-zone {
			display: flex;
			align-items: center;
			gap: 10px
		}

		.post-media-preview .audio-cover-add {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			border: 1px dashed var(--fondo3);
			border-radius: 4px;
			background: var(--fondo2);
			color: var(--texto1);
			padding: 7px 12px;
			font: inherit;
			font-size: 12px;
			cursor: pointer
		}

		.post-media-preview .audio-cover-add:hover {
			border-color: var(--texto3);
			color: var(--texto3)
		}

		.post-media-preview .audio-cover-box {
			position: relative;
			line-height: 0;
			flex: none
		}

		.post-media-preview .audio-cover-box img {
			display: block;
			width: 96px;
			height: 56px;
			object-fit: cover;
			border: 1px solid var(--fondo3);
			border-radius: 4px
		}

		.post-media-preview .audio-cover-remove {
			position: absolute;
			top: -7px;
			right: -7px;
			width: 20px;
			height: 20px;
			padding: 0;
			border: 0;
			border-radius: 50%;
			background: rgba(32, 35, 33, .8);
			color: #fff;
			font-size: 12px;
			line-height: 1;
			cursor: pointer
		}

		.post-media-preview .audio-cover-remove:hover {
			background: #202321
		}

		.post-media-preview .audio-cover-box[hidden],
		.post-media-preview .audio-cover-zone[hidden],
		.post-media-preview .audio-cover-add[hidden] {
			display: none !important
		}

		.post-media-preview .music-preview {
			display: flex;
			align-items: center;
			gap: 8px;
			margin-top: 10px;
			padding: 8px 10px;
			border: 1px solid var(--fondo3);
			border-radius: 5px;
			background: var(--fondo1);
			font-size: 12px;
			color: var(--texto1)
		}

		.post-media-preview .music-preview .bx {
			flex: none;
			font-size: 16px
		}

		.post-media-preview .music-preview .music-provider {
			flex: none;
			font-weight: 700
		}

		.post-media-preview .music-preview .music-url {
			flex: 1;
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap
		}

		.post-media-preview .music-preview .remove-preview {
			position: static;
			flex: 0 0 26px;
			width: 26px;
			height: 26px;
			font-size: 14px
		}

		.post-media-preview .image-preview[hidden],
		.post-media-preview .youtube-preview[hidden],
		.post-media-preview .audio-preview[hidden],
		.post-media-preview .music-preview[hidden] {
			display: none !important
		}

		#post-audio,
		#post-image,
		#post-image-capture,
		.post-media-toolbar #post-audio,
		.post-media-toolbar #post-image,
		.post-media-toolbar #post-image-capture,
		.new-post form #post-audio,
		.new-post form #post-image,
		.new-post form #post-image-capture {
			display: none !important
		}
	/* === Toolbar de medios del editor de publicación === */
		.post-media-toolbar {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			gap: 8px;
			flex-wrap: wrap;
			margin: 14px 0 0;
			padding: 8px;
			background: var(--fondo1);
			border: 1px solid var(--fondo3);
			border-bottom: 0;
			border-radius: 4px 4px 0 0
		}

		.toolbar-button {
			display: inline-grid;
			place-items: center;
			width: 38px;
			height: 36px;
			flex: 0 0 38px;
			padding: 0;
			border: 1px solid var(--fondo3);
			border-radius: 4px;
			background: var(--fondo2);
			color: var(--texto1);
			font: inherit;
			font-size: 17px;
			line-height: 1;
			cursor: pointer;
			transition: border-color .15s ease, background .15s ease, color .15s ease
		}

		.toolbar-button:hover {
			border-color: var(--texto3);
			background: var(--fondo3);
			color: var(--texto1)
		}

		.toolbar-button:disabled {
			opacity: .45;
			cursor: not-allowed
		}

		.toolbar-button.is-recording {
			background: var(--coral);
			border-color: var(--coral);
			color: #fff;
			animation: audio-pulse 1.1s ease-in-out infinite
		}

		.toolbar-button.is-recording:hover {
			background: var(--coral);
			border-color: var(--coral);
			color: #fff
		}

		@keyframes audio-pulse {
			0%,
			100% {
				box-shadow: 0 0 0 0 rgba(255, 115, 92, .55)
			}
			50% {
				box-shadow: 0 0 0 8px rgba(255, 115, 92, 0)
			}
		}

		.sr-only {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border: 0
		}

		/* === Texto del mensaje enlazado con la toolbar === */
		.new-post form > textarea[name="message"] {
			display: block;
			width: 100%;
			max-width: none;
			border: 1px solid var(--fondo3);
			border-top: 0;
			border-radius: 0 0 4px 4px;
			background: var(--fondo2);
			padding: 12px 14px;
			margin: 0;
			font: inherit;
			font-size: 13px;
			outline: 0;
			height: 110px;
			min-height: 90px;
			resize: vertical;
			color: var(--texto1)
		}

		.character-count {
			display: block;
			margin-top: 6px;
			font-size: 11px;
			color: var(--muted)
		}

		.character-count.warning {
			color: #d9a514
		}

		.character-count.danger {
			color: var(--coral)
		}

		/* === Acciones y previsualización del formulario === */
		.new-post form .post-actions {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 10px;
			margin-top: 18px
		}

		.new-post form .post-actions .button {
			border-radius: 4px
		}

		.new-post form .post-draft-status {
			margin-right: auto;
			align-self: center;
			font-size: 11px;
			font-weight: 600;
			color: var(--texto2)
		}

		.new-post form .post-draft-status[hidden] {
			display: none
		}

		.new-post form .post-preview-toggle {
			background: var(--fondo2);
			border: 1px solid var(--fondo3);
			color: var(--texto3)
		}

		.new-post form .post-preview-toggle:hover {
			background: var(--fondo3);
			border-color: var(--texto3)
		}

		.new-post form .post-submit {
			background: var(--texto3);
			color: var(--fondo2)
		}

		.new-post form .post-submit:hover {
			background: var(--texto3)
		}

		.new-post form.is-previewing > *:not(.post-actions):not(#post-preview-panel) {
			display: none !important
		}

		#post-preview-panel {
			margin-top: 18px;
			padding: 22px 24px;
			border: 1px solid var(--fondo3);
			border-radius: 12px;
			background: var(--fondo1)
		}

		.post-preview-cat {
			display: block;
			margin-bottom: 6px;
			font-size: 10px;
			font-weight: 700;
			letter-spacing: 1.5px;
			text-transform: uppercase;
			color: var(--texto3)
		}

		.post-preview-title {
			margin: 0 0 14px;
			font: 700 24px/1.2 'Space Grotesk', sans-serif;
			color: var(--texto1);
			overflow-wrap: anywhere
		}

		.post-preview-body {
			margin: 14px 0 0;
			font: 16px/1.6 'DM Sans', sans-serif;
			color: var(--texto1);
			overflow-wrap: anywhere
		}

		.post-preview-body p {
			margin: 0 0 10px;
			white-space: pre-line
		}

		.post-preview-body h1,
		.post-preview-body h2,
		.post-preview-body h3 {
			font-family: 'Space Grotesk', sans-serif;
			font-weight: 700;
			line-height: 1.25;
			letter-spacing: -.5px;
			margin: 18px 0 8px;
			color: var(--texto1)
		}

		.post-preview-body h1 {
			font-size: 26px
		}

		.post-preview-body h2 {
			font-size: 21px
		}

		.post-preview-body h3 {
			font-size: 17px
		}

		.post-preview-body blockquote {
			margin: 10px 0;
			padding: 8px 14px;
			border-left: 3px solid var(--texto3);
			background: rgba(0, 158, 135, .08);
			color: var(--texto1)
		}

		.post-preview-body a {
			color: var(--texto3);
			text-decoration: underline;
			overflow-wrap: anywhere
		}

		.post-preview-body .publication-code {
			margin: 10px 0;
			padding: 10px 12px;
			border-radius: 6px;
			background: var(--texto1);
			color: var(--fondo2)
		}

		.post-preview-body .publication-code-head {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-bottom: 6px
		}

		.post-preview-body .publication-code-copy {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 5px;
			border: 1px solid var(--fondo2);
			border-radius: 3px;
			background: transparent;
			color: var(--fondo2);
			padding: 4px 9px;
			font: 11px 'DM Sans', sans-serif;
			cursor: pointer
		}

		.post-preview-body .publication-code-copy:hover {
			background: var(--fondo2);
			color: var(--texto1)
		}

		.post-preview-body .publication-code-copy .bx {
			font-size: 13px;
			line-height: 1
		}

		.post-preview-body .publication-code-body {
			overflow-x: auto;
			overflow-y: hidden
		}

		.post-preview-body .publication-code-body.is-scrollable {
			max-height: 130px;
			overflow-y: auto;
			overflow-x: auto;
			padding-right: 6px
		}

		.post-preview-body .publication-code-src {
			display: none
		}

		.post-preview-body .code-line {
			display: flex;
			gap: 12px;
			font: 13px/1.55 'Courier New', monospace;
			white-space: pre
		}

		.post-preview-body .code-line-number {
			flex: 0 0 auto;
			min-width: 24px;
			text-align: right;
			color: var(--fondo3);
			user-select: none
		}

		.post-preview-body .code-line-content {
			flex: 1;
			min-width: 0;
			overflow-wrap: anywhere
		}

		.post-preview-body .publication-code-body::-webkit-scrollbar {
			width: 8px;
			height: 8px
		}

		.post-preview-body .publication-code-body::-webkit-scrollbar-track {
			background: rgba(255, 255, 255, .08);
			border-radius: 8px
		}

		.post-preview-body .publication-code-body::-webkit-scrollbar-thumb {
			background: var(--fondo2);
			border-radius: 8px
		}

		.post-preview-body .publication-code-body::-webkit-scrollbar-thumb:hover {
			background: var(--texto3)
		}

		.post-preview-body .story-spoiler {
			display: inline;
			border-radius: 4px;
			padding: 0 6px;
			background: var(--texto1);
			color: transparent;
			cursor: pointer;
			transition: background .18s ease, color .18s ease;
			user-select: none
		}

		.post-preview-body .story-spoiler .story-spoiler-content {
			white-space: pre-line
		}

		.post-preview-body .story-spoiler a {
			color: transparent
		}

		.post-preview-body .story-spoiler.revealed {
			background: var(--fondo3);
			color: var(--texto1);
			cursor: auto;
			user-select: text
		}

		.post-preview-body .story-spoiler.revealed a {
			color: var(--texto3)
		}

		.post-preview-media {
			display: grid;
			gap: 12px;
			margin-top: 14px
		}

		.post-preview-media img,
		.post-preview-media video {
			display: block;
			width: 100%;
			max-height: 400px;
			object-fit: contain;
			border-radius: 6px;
			background: var(--texto1)
		}

		.post-preview-media iframe {
			width: 100%;
			aspect-ratio: 16/9;
			border: 0;
			border-radius: 6px
		}

		.post-preview-media audio {
			width: 100%;
			height: 40px
		}

		.post-preview-poll {
			margin-top: 16px;
			padding: 16px;
			border: 1px solid var(--fondo3);
			border-radius: 8px;
			background: var(--fondo2)
		}

		.post-preview-poll-label {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			font-size: 11px;
			font-weight: 700;
			color: var(--texto3)
		}

		.post-preview-poll-question {
			margin: 8px 0 4px;
			font: 700 17px/1.3 'Space Grotesk', sans-serif;
			color: var(--texto1)
		}

		.post-preview-poll-hint {
			margin: 0 0 8px;
			font-size: 11px;
			color: var(--texto2)
		}

		.post-preview-poll ul {
			display: grid;
			gap: 6px;
			margin: 8px 0 0;
			padding: 0;
			list-style: none
		}

		.post-preview-poll li {
			padding: 7px 10px;
			border: 1px solid var(--fondo3);
			border-radius: 4px;
			background: var(--fondo1);
			font-size: 13px;
			color: var(--texto1)
		}

/* === Vista lista: feed tipo "publicacion social" (estilo Twitter) === */
#home-feed.view-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 880px;
    margin: 0 auto
}

#home-feed.view-list .post-card {
    height: clamp(176px, 25vh, 240px);
    min-height: 176px;
    aspect-ratio: auto;
    overflow: hidden;
    border: 1px solid var(--fondo3);
    border-radius: 14px;
    background: var(--fondo2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
    transition: border-color .18s ease, box-shadow .18s ease
}

#home-feed.view-list .post-card:hover {
    border-color: var(--texto3);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .07)
}

#home-feed.view-list .post-card-link {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 100%;
    color: inherit
}

#home-feed.view-list .card-image {
    display: block;
    position: relative;
    width: clamp(118px, 15vw, 200px);
    height: 100%;
    flex: 0 0 clamp(118px, 15vw, 200px);
    min-width: 118px;
    overflow: hidden;
    background: var(--fondo1);
    border-right: 1px solid var(--fondo3)
}

#home-feed.view-list .card-image img,
#home-feed.view-list .card-image video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

#home-feed.view-list .card-image .card-music-placeholder {
    font-size: 30px
}

#home-feed.view-list .card-overlay {
    display: none
}

#home-feed.view-list .card-list-content {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    padding: 13px 16px 12px 18px;
    background: transparent;
    color: var(--texto1)
}

#home-feed.view-list .card-list-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    font-size: 11px;
    color: var(--texto2)
}

#home-feed.view-list .card-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 48%;
    min-width: 0;
    padding: 3px 10px;
    border: 1px solid var(--fondo3);
    border-radius: 999px;
    background: var(--fondo1);
    color: var(--texto1);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#home-feed.view-list a.card-tag.card-tag-community {
    color: var(--texto3);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700
}

#home-feed.view-list a.card-tag.card-tag-community:hover {
    border-color: var(--texto3);
    background: var(--fondo2)
}

#home-feed.view-list .card-tag .bx {
    font-size: 13px;
    flex: none
}

#home-feed.view-list .card-tag span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis
}

#home-feed.view-list .card-list-spacer {
    flex: 1
}

#home-feed.view-list .card-list-count,
#home-feed.view-list .card-list-date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    color: var(--texto2);
    font-size: 11px;
    white-space: nowrap
}

#home-feed.view-list .card-list-count .bx,
#home-feed.view-list .card-list-date .bx {
    font-size: 14px
}

#home-feed.view-list .card-list-count .bx {
    color: var(--coral)
}

#home-feed.view-list .card-list-title {
    font: 700 clamp(17px, 1.55vw, 21px)/1.18 'Space Grotesk', sans-serif;
    color: var(--texto1);
    margin: 2px 0 0;
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 0
}

#home-feed.view-list .post-card-link:hover .card-list-title {
    color: var(--texto3)
}

#home-feed.view-list .card-last-comment {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    min-height: 0;
    padding: 7px 11px;
    border: 1px solid var(--fondo3);
    border-left: 3px solid var(--texto3);
    border-radius: 8px;
    background: var(--fondo1)
}

#home-feed.view-list .card-comment-label {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--texto2);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase
}

#home-feed.view-list .card-comment-label .bx {
    font-size: 12px;
    color: var(--texto3)
}

#home-feed.view-list .card-last-comment p {
    margin: 0;
    color: var(--texto2);
    font-size: 12.5px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden
}

#home-feed.view-list .card-last-comment p:empty {
    display: none
}

@media(max-width:720px) {
    #home-feed.view-list {
        gap: 10px
    }

    #home-feed.view-list .post-card {
        height: clamp(152px, 23vh, 196px);
        min-height: 152px;
        border-radius: 12px
    }

    #home-feed.view-list .card-image {
        width: clamp(88px, 23vw, 128px);
        flex-basis: clamp(88px, 23vw, 128px);
        min-width: 88px
    }

    #home-feed.view-list .card-list-content {
        padding: 10px 12px 10px 14px;
        gap: 4px
    }

    #home-feed.view-list .card-list-head {
        gap: 5px
    }

    #home-feed.view-list .card-tag {
        padding: 2px 7px;
        font-size: 9px
    }

    #home-feed.view-list .card-list-title {
        font-size: 16px;
        -webkit-line-clamp: 2
    }

    #home-feed.view-list .card-last-comment p {
        font-size: 11.5px;
        -webkit-line-clamp: 1
    }

    #home-feed.view-list .card-list-count,
    #home-feed.view-list .card-list-date {
        font-size: 10px
    }
}


/* Centra cabecera y zona de paginacion cuando la home esta en vista lista */
body:has(#home-feed.view-list) .feed-head,
body:has(#home-feed.view-list) .feed-methods-area {
    width: 100%;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px
}

@media(max-width:720px) {
    body:has(#home-feed.view-list) .feed-head,
    body:has(#home-feed.view-list) .feed-methods-area {
        padding-left: 14px;
        padding-right: 14px
    }
}


/* === Ajuste vista lista: contenido hermano del enlace (sin <a> anidados) === */
#home-feed.view-list .post-card {
    display: flex;
    flex-direction: row;
    align-items: stretch
}

#home-feed.view-list .post-card-link {
    display: block;
    position: relative;
    flex: 0 0 clamp(118px, 15vw, 200px);
    width: clamp(118px, 15vw, 200px);
    min-width: 118px;
    height: 100%;
    overflow: hidden;
    border-right: 1px solid var(--fondo3);
    border-radius: 14px 0 0 14px;
    background: var(--fondo1);
    color: inherit
}

#home-feed.view-list .card-image {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    flex: none;
    overflow: hidden;
    background: var(--fondo1)
}

#home-feed.view-list .card-list-content {
    position: relative
}

#home-feed.view-list .card-list-open {
    position: absolute;
    inset: 0;
    z-index: 1
}

#home-feed.view-list .card-list-content > .card-list-head,
#home-feed.view-list .card-list-content > .card-list-title,
#home-feed.view-list .card-list-content > .card-last-comment {
    position: relative;
    z-index: 2;
    pointer-events: none
}

#home-feed.view-list .card-list-content .card-tag-community {
    pointer-events: auto
}

#home-feed.view-list .post-card:hover .card-list-title {
    color: var(--texto3)
}

@media(max-width:720px) {
    #home-feed.view-list .post-card-link {
        flex-basis: clamp(88px, 23vw, 128px);
        width: clamp(88px, 23vw, 128px);
        min-width: 88px
    }

    #home-feed.view-list .card-image {
        width: 100%;
        flex: none
    }
}

/* Contenido multimedia retirado por incumplir las normas */
.is-media-removed {
    display: grid !important;
    place-items: center;
    position: relative;
    background: linear-gradient(135deg, #23262b, #101216);
}

.media-removed-note {
    color: rgba(255, 255, 255, .9);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    padding: 14px 10px;
    letter-spacing: .2px;
    line-height: 1.4;
}

.card-image.is-media-removed {
    height: 100%;
    min-height: 90px;
}

.card-image.is-media-removed .media-removed-note {
    max-width: 90%;
}

.is-media-removed .comment-media {
    width: 100%;
}

.post-throttle {
    color: var(--coral, #ff735c);
    font-size: 12px;
    font-weight: 700;
}

.file-too-big-note {
    color: var(--coral, #ff735c);
    font-size: 12px;
    font-weight: 600;
    background: rgba(255, 115, 92, .09);
    border: 1px solid rgba(255, 115, 92, .35);
    border-radius: 10px;
    padding: 9px 12px;
    margin: 8px 0;
}