/* --- Estilos Generales y Reseteo --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background-color: #121212;
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* Seguro anti-desbordamiento */
    width: 100vw;
    max-width: 100vw;
}

/* --- Header y Navegación (Sin cambios) --- */
.main-header { background-color: #18191a; border-bottom: 1px solid #393a3b; padding: 15px 20px; display: flex; align-items: center; position: sticky; top: 0; z-index: 999; justify-content: center; }
.header-logo a { font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem; color: #e50914; text-decoration: none; letter-spacing: 1px; }
.header-search { display: none; position: relative; width: 100%; max-width: 400px; }
.header-search input { width: 100%; padding: 10px 15px; background-color: #3a3b3c; border: 1px solid #555; color: #e4e6eb; border-radius: 20px; font-size: 1rem; }
.header-search button { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); border: none; background: none; padding: 0 10px; cursor: pointer; font-size: 1.1rem; color: #b0b3b8; }
.header-menu { display: none; }
.hamburger-btn { width: 30px; height: 22px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; border: none; background: transparent; }
.hamburger-btn span { display: block; width: 100%; height: 3px; background-color: #e4e6eb; border-radius: 3px; transition: all 0.3s ease; }
.side-nav { position: fixed; top: 0; right: -100%; width: 280px; height: 100%; background-color: #1c1c1c; color: white; box-shadow: -5px 0 15px rgba(0,0,0,0.2); transition: right 0.4s ease-in-out; padding: 20px; z-index: 1000; }
.side-nav.is-open { right: 0; }
.close-btn { font-size: 2.5rem; color: white; background: none; border: none; cursor: pointer; position: absolute; top: 10px; right: 20px; }
.side-nav ul { list-style: none; margin-top: 60px; }
.side-nav ul li a { display: block; color: white; text-decoration: none; font-size: 1.2rem; padding: 15px 0; border-bottom: 1px solid #444; transition: background-color 0.2s; }
.side-nav ul li a:hover { background-color: #333; }

/* --- Contenido Principal y Footer --- */
main { flex-grow: 1; }
.main-footer { background-color: #18191a; border-top: 1px solid #393a3b; color: #888; text-align: center; padding: 20px; font-size: 0.9rem; }

/* ================================================== */
/* ---      NUEVA ESTRUCTURA RESPONSIVE (GRID)      --- */
/* ================================================== */

.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    padding: 10px;
    width: 100%;
    max-width: 100vw;
    transition: all 0.3s ease;
    overflow-x: hidden;
}

.frame-container {
    border: 2px solid #ffffff;
    border-radius: 10px;
    padding: 10px;
    background-color: #1c1c1c;
    background-repeat: repeat;
    background-size: 45px 45px;
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.08);
    transition: box-shadow 0.3s, transform 0.3s;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.frame-container:hover { transform: translateY(-5px); box-shadow: 0 12px 28px rgba(255, 255, 255, 0.12); }
.frame-header { width: 100%; min-height: 30px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.frame-header .title { margin: 0; font-size: 0.9rem; font-weight: 600; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame-header .icons { display: flex; gap: 12px; }
.frame-header .icons i { font-size: 1rem; color: #ffffff; cursor: pointer; transition: color 0.2s ease; }
.frame-header .icons i:hover { color: #e50914; }
.frame-container img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    border-radius: 6px;
    position: relative;
    z-index: 2;
    background-color: #1c1c1c;
    max-width: 100%;
}

/* --- Media Queries para header y menú (mantener) --- */
@media (min-width: 768px) {
    .main-header { justify-content: space-between; }
    .header-logo { flex: 1; }
    .header-search { display: block; flex: 2; text-align: center; }
    .header-menu { display: flex; flex: 1; justify-content: flex-end; }
}

/* Refuerzo para móviles: siempre 2 columnas en pantallas muy pequeñas */
@media (max-width: 480px) {
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
    padding-left: 0;
    padding-right: 0;
  }
}