/* Abecedario fijo y compacto */
/* Abecedario fijo y compacto */
.filtro-alfabeto-fixed {
    position: fixed;
    left: 0.5rem;
    top: 6.5rem;
    z-index: 1100; /* Updated z-index for responsive layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    background: #f4f6fa;
    border-radius: 10px;
    padding: 0.2rem 0.1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    min-width: 2rem;
    max-height: 90vh;
    overflow-y: auto;
}
/* ======================================================================
   Unified mobile override for the abecedario
   Ensure on small screens the full alphabet is visible: wrap into rows,
   center the letters, keep the bar sticky at the top and avoid any
   horizontal clipping caused by earlier conflicting rules.
   This block intentionally uses strong rules to override previous sections.
   ====================================================================== */
@media (max-width: 900px) {
    .filtro-alfabeto-fixed {
        position: sticky !important;
        top: 3.4rem; /* leave room for header - adjust if you have a taller header */
        left: 0.5rem;
        right: 0.5rem;
        width: calc(100% - 1rem);
        margin: 0.25rem auto 0.5rem auto;
        padding: 0.35rem 0.35rem;
        display: flex !important;
        flex-direction: row !important;
    /* Responsive layout for juegos page: cards grid and sidebar alphabet */
    /* Desktop: alphabet in left column, cards grid to the right */
        flex-wrap: wrap !important; /* allow letters to wrap to new rows so all are visible */
        justify-content: center !important;
        gap: 0.28rem !important;
        background: #f4f6fa !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
        z-index: 9999 !important;
        overflow: visible !important;
        max-height: none !important;
    }

    .filtro-alfabeto-fixed .filtro-letra {
        font-size: 0.95rem !important;
        padding: 0.12rem 0.36rem !important;
        margin: 0.12rem !important;
        min-width: auto !important;
        display: inline-block !important;
        letter-spacing: 0 !important;
    }

    /* Ensure main content doesn't get hidden under the sticky bar */
    main {
        padding-top: 4.6rem; /* increases top padding on mobile to account for wrapped bar */
    }
}
.filtro-alfabeto-fixed .filtro-letra {
    font-size: 0.92rem;
    padding: 0.08rem 0.3rem;
    margin: 1px 0;
    min-width: 1.7rem;
}
@media (max-width: 900px) {
    .filtros-contenedor-abecedario {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .filtro-alfabeto-fixed {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 2.8rem; /* bajar la barra un poco más */
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        padding: 0.25rem 0.18rem; /* más padding para botones más grandes */
        margin: 0 auto;
        border-radius: 8px;
        box-shadow: 0 1px 6px rgba(0,0,0,0.08);
        background: #f4f6fa;
        justify-content: flex-start;
        z-index: 999;
        scrollbar-width: thin;
        scrollbar-color: #bbb #f4f6fa;
    }
    .filtro-alfabeto-fixed .filtro-letra {
        font-size: 0.85rem;
        min-width: 1.2rem;
        margin: 0 1px;
        padding: 0.08rem 0.18rem;
        display: inline-block;
        letter-spacing: -0.5px;
    }
    .filtro-alfabeto-fixed::-webkit-scrollbar {
        height: 6px;
    }
    .filtro-alfabeto-fixed::-webkit-scrollbar-thumb {
        background: #bbb;
        border-radius: 4px;
    }
    .filtro-alfabeto-fixed::-webkit-scrollbar-track {
        background: #f4f6fa;
    }
}
@media (max-width: 900px) {
    main {
        padding-top: 3.4rem; /* espacio para la barra sticky */
    }
}
/* Abecedario vertical a lo largo de las publicaciones */
/* Abecedario siempre al lado de publicaciones */
.filtros-contenedor-abecedario {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    gap: 0.5rem;
}
.filtro-alfabeto-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    position: sticky;
    top: 2rem;
    height: 100%;
    min-width: 2.5rem;
    z-index: 2;
    background: #f4f6fa;
    border-radius: 10px;
    padding: 0.5rem 0.2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
/* Abecedario vertical grande en desktop */
/* Abecedario vertical compacto y scrollable en PC, horizontal en móvil */
.filtro-alfabeto-fixed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    background: #f4f6fa;
    border-radius: 10px;
    padding: 0.08rem 0.01rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    min-width: 1.7rem;
    max-width: 2.2rem;
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    position: sticky;
    top: 2.2rem;
    z-index: 10;
}
.filtro-alfabeto-fixed .filtro-letra {
    font-size: 0.95rem;
    padding: 0.07rem 0.22rem;
    margin: 1px 0;
    min-width: 1.3rem;
}
@media (max-width: 900px) {
    .filtros-contenedor-abecedario {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .filtro-alfabeto-fixed {
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100vw;
        max-width: 100vw;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        padding: 0 0.01rem;
        margin: 0;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 40vh;
        min-width: unset;
        max-height: unset;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        justify-content: flex-start;
        z-index: 1002;
        scrollbar-width: thin;
        scrollbar-color: #bbb #f4f6fa;
    }
    .filtro-alfabeto-fixed .filtro-letra {
        font-size: 0.68rem;
        min-width: 0.85rem;
        margin: 0 0.5px;
        padding: 0.01rem 0.07rem;
        display: inline-block;
        letter-spacing: -0.5px;
    }
    .filtro-alfabeto-fixed::-webkit-scrollbar {
        height: 6px;
    }
    .filtro-alfabeto-fixed::-webkit-scrollbar-thumb {
        background: #bbb;
        border-radius: 4px;
    }
    .filtro-alfabeto-fixed::-webkit-scrollbar-track {
        background: #f4f6fa;
    }
}
@media (max-width: 900px) {
    .filtros-contenedor-abecedario {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .filtro-alfabeto-fixed {
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100vw;
        max-width: 100vw;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        padding: 0.13rem 0.01rem;
        margin-bottom: 0.5rem;
        position: static;
        top: unset;
        min-width: unset;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        justify-content: flex-start;
        scrollbar-width: thin;
        scrollbar-color: #bbb #f4f6fa;
    }
    .filtro-alfabeto-fixed .filtro-letra {
        font-size: 1.15rem;
        min-width: 2.1rem;
        margin: 2px 2px;
        padding: 0.13rem 0.35rem;
        display: inline-block;
    }
    .filtro-alfabeto-fixed::-webkit-scrollbar {
        height: 6px;
    }
    .filtro-alfabeto-fixed::-webkit-scrollbar-thumb {
        background: #bbb;
        border-radius: 4px;
    }
    .filtro-alfabeto-fixed::-webkit-scrollbar-track {
        background: #f4f6fa;
    }
}
@media (max-width: 900px) {
    .filtros-contenedor-abecedario {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .filtro-alfabeto-fixed {
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100vw;
        max-width: 100vw;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        padding: 0.08rem 0.01rem;
        margin-bottom: 0.5rem;
        position: static;
        top: unset;
        min-width: unset;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        justify-content: flex-start;
        scrollbar-width: thin;
        scrollbar-color: #bbb #f4f6fa;
    }
    .filtro-alfabeto-fixed .filtro-letra {
        font-size: 0.85rem;
        min-width: 1.3rem;
        margin: 1px 2px;
        padding: 0.05rem 0.2rem;
        display: inline-block;
    }
    /* Scrollbar para abecedario horizontal */
    .filtro-alfabeto-fixed::-webkit-scrollbar {
        height: 6px;
    }
    .filtro-alfabeto-fixed::-webkit-scrollbar-thumb {
        background: #bbb;
        border-radius: 4px;
    }
    .filtro-alfabeto-fixed::-webkit-scrollbar-track {
        background: #f4f6fa;
    }
}
@media (max-width: 900px) {
    .filtros-contenedor-abecedario {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .filtro-alfabeto-fixed {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        max-width: unset;
        max-height: unset;
        padding: 0.1rem 0.1rem;
        margin-bottom: 0.5rem;
        position: static;
        top: unset;
        min-width: unset;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        justify-content: center;
    }
    .filtro-alfabeto-fixed .filtro-letra {
        font-size: 0.95rem;
        min-width: 1.7rem;
        margin: 1px 2px;
        padding: 0.08rem 0.3rem;
    }
}
.filtro-alfabeto-fixed .filtro-letra {
    font-size: 0.92rem;
    padding: 0.08rem 0.3rem;
    margin: 1px 0;
    min-width: 1.7rem;
}
@media (max-width: 900px) {
    .filtros-contenedor-abecedario {
        flex-direction: row;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .filtro-alfabeto-fixed {
        flex-direction: column;
        flex-wrap: nowrap;
        width: auto;
        max-height: 80vw;
        overflow-y: auto;
        overflow-x: visible;
        margin-bottom: 0;
        position: static;
        min-width: 2rem;
    }
    .filtro-alfabeto-fixed .filtro-letra {
        font-size: 1.05rem; /* más grande en móvil */
        min-width: 1.6rem;
        margin: 0 4px;
        padding: 0.2rem 0.5rem;
        display: inline-block;
        letter-spacing: 0;
        border-radius: 6px;
    }
}
/* Filtro alfabético fijo lateral */
/* Filtro alfabético fijo lateral */
.filtros-contenedor {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 2rem;
}
.filtros-vertical {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 120px;
    align-items: flex-end;
    position: sticky;
    top: 2rem;
    height: fit-content;
}
.filtro-alfabeto {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
}
.filtro-letra {
    background: #f4f6fa;
    color: #222;
    border: 1px solid #bbb;
    border-radius: 4px;
    margin: 1px;
    padding: 0.2rem 0.6rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, opacity 0.2s;
    min-width: 2.2rem;
}
.filtro-letra[disabled] {
    cursor: not-allowed;
    background: #eee;
    color: #aaa;
}
.filtro-letra:hover:not([disabled]), .filtro-letra:focus:not([disabled]) {
    background: #0078d7;
    color: #fff;
}
@media (max-width: 900px) {
    .filtros-contenedor {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .filtros-vertical {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 1.5rem;
        position: static;
    }
    .filtro-alfabeto {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.2rem;
        justify-content: center;
        align-items: center;
    }
}
/* Filtros verticales y alfabeto para juegos */
.filtros-contenedor {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 2rem;
}
.filtros-vertical {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 120px;
    align-items: center;
}
.filtro-alfabeto {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}
.filtro-letra {
    background: #f4f6fa;
    color: #222;
    border: 1px solid #bbb;
    border-radius: 4px;
    margin: 1px;
    padding: 0.2rem 0.6rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.filtro-letra:hover, .filtro-letra:focus {
    background: #0078d7;
    color: #fff;
}
@media (max-width: 900px) {
    .filtros-contenedor {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .filtros-vertical {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 1.5rem;
    }
    .filtro-alfabeto {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.2rem;
        justify-content: center;
    }
}
.main-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    justify-content: center;
    align-items: start;
    margin: 0 auto 2rem auto;
    max-width: 600px;
}
@media (max-width: 700px) {
    .main-cards {
        padding-top: 4.6rem; /* espacio para la barra sticky más grande */
        max-width: 98vw;
        gap: 1.2rem;
        padding: 0 2vw;
    }
}
@media (max-width: 500px) {
    .main-cards {
        grid-template-columns: 1fr;
        max-width: 100vw;
        gap: 0.7rem;
        padding: 0 1vw;
    }
    .main-card {
        width: 98vw !important;
        max-width: 99vw !important;
        min-width: 0 !important;
    }
    .main-card img {
        height: 110px !important;
    }
    .main-card-title {
        font-size: 1rem !important;
    }
}
/* Botón flotante para volver a la página principal */
.btn-float-home {
    position: fixed;
    bottom: 32px;
    right: 32px;
    background: #0078d7;
    color: #fff;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    text-decoration: none;
    z-index: 1000;
    transition: background 0.2s, box-shadow 0.2s;
}
.btn-float-home:hover {
    background: #005fa3;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
body {
/* Responsividad global */
@media (max-width: 900px) {
    main {
        max-width: 98vw;
        margin: 1rem auto;
        padding: 0.5rem;
    }
    .content-section {
        gap: 1rem;
    }
    .card {
        width: 98vw;
        max-width: 340px;
    }
}
@media (max-width: 700px) {
    header {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
        gap: 0.5rem;
    }
    h1 {
        font-size: 1.5rem;
    }
    .card img {
        height: 120px;
    }
    .card-title {
        font-size: 1rem;
    }
    .btn-float-home {
        width: 44px;
        height: 44px;
        font-size: 1.4rem;
        bottom: 16px;
        right: 16px;
    }
}
@media (max-width: 500px) {
    main {
        padding: 0.2rem;
    }
    .card {
        max-width: 98vw;
    }
    .card img {
        height: 90px;
    }
    .card-title {
        font-size: 0.95rem;
    }
    header {
        padding: 0.5rem;
    }
}
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #f4f6fa;
    margin: 0;
    color: #222;
}
header {
    background: #222;
    color: #fff;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
nav button {
    background: #0078d7;
    color: #fff;
    border: none;
    margin: 0 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}
nav button:hover {
    background: #005fa3;
}
main {
    max-width: 900px;
    margin: 2rem auto;
    padding: 1rem;
}
.content-section {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    width: 260px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow 0.2s;
}
.card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}
.card-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin: 1rem 0 0.5rem 0;
    text-align: center;
}

/* Shared publication card styles (used by proyectos and comunicados) */
.img-cajon {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.7rem;
}
.img-cajon img {
    max-width: 120px;
    max-height: 80px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 1px 6px rgba(0,0,0,0.10);
}
.publicaciones {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 2rem;
    align-items: stretch; /* make children equal height within a row */
}
.cajon-publicacion {
    background: var(--card-bg, #fff);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    width: 320px;
    max-width: 90vw;
    min-height: 160px; /* align visually */
    padding: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center; /* center content horizontally */
    justify-content: space-between; /* space elements vertically so heights match */
    text-align: center; /* center text inside card */
    transition: box-shadow 0.2s, transform 0.2s;
    margin-bottom: 1rem;
}
.cajon-publicacion h2 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--text, #222);
}
.cajon-publicacion p {
    font-size: 0.98rem;
    color: #555;
    margin: 0;
    white-space: normal;
    overflow-wrap: break-word;
    max-width: 100%;
}
@media (max-width: 500px) {
    .cajon-publicacion {
        width: 98vw;
        min-height: 100px;
    }
}

/* -----------------------------
   UNIFIED: Abecedario styles
   - Single source of truth: vertical sticky on desktop, horizontal sticky on mobile
   - Keeps sizes legible, avoids duplicated/conflicting rules
------------------------------ */
.filtros-contenedor-abecedario {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    width: 100%;
}
.filtro-alfabeto-fixed {
    background: #f4f6fa;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    z-index: 1100;
    padding: 0.2rem 0.12rem;
}
.filtro-alfabeto-fixed .filtro-letra {
    background: transparent;
    border: none;
    color: #222;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, transform 0.12s;
}
.filtro-alfabeto-fixed .filtro-letra[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}
.filtro-alfabeto-fixed .filtro-letra:focus {
    outline: none;
    transform: translateY(-1px);
}

/* Desktop: vertical sticky left column */
@media (min-width: 901px) {
    .filtros-contenedor-abecedario {
        align-items: flex-start;
    }
    .filtro-alfabeto-fixed {
        position: sticky !important;
        top: 2rem;
        left: 0;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        width: 2.6rem;
        max-height: 86vh;
        overflow-y: auto;
        padding: 0.12rem 0.06rem;
    }
    .filtro-alfabeto-fixed .filtro-letra {
        font-size: 0.95rem;
        padding: 0.06rem 0.14rem;
        min-width: 1.4rem;
        margin: 0.2rem 0;
        text-align: center;
    }
}

/* Desktop page layout: aside (abecedario) + content */
@media (min-width: 1100px) {
    main {
        max-width: 1200px;
        margin: 1.8rem auto;
        display: flex;
        gap: 1.5rem;
        align-items: flex-start;
    }
    .filtros-contenedor-abecedario {
        width: 100%;
        display: flex;
        gap: 1.5rem;
    }
    .filtro-alfabeto-fixed {
        width: 3.0rem;
        flex-shrink: 0;
        margin-left: 0.5rem;
    }
    .filtros-publicaciones {
        flex: 1 1 auto;
    }
    .main-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        justify-items: center;
        max-width: calc(100% - 3.6rem);
    }
    .main-card {
        width: 320px !important;
    }
}

/* Large desktop: more columns and larger cards */
@media (min-width: 1400px) {
    main { max-width: 1400px; }
    .main-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        justify-items: start;
    }
    .main-card { max-width: 420px; }
    .filtro-alfabeto-fixed { width: 3.4rem; padding: 0.8rem 0.4rem; }
}

/* Mobile/tablet: horizontal sticky top bar */
@media (max-width: 900px) {
    .filtros-contenedor-abecedario {
        flex-direction: column;
        align-items: stretch;
    }
    .filtro-alfabeto-fixed {
        position: sticky !important;
        top: 0.6rem; /* small offset from top */
        left: 0;
        right: 0;
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 0.35rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.22rem 0.5rem;
        border-radius: 0 0 10px 10px;
    }
    .filtro-alfabeto-fixed .filtro-letra {
        font-size: 1.06rem;
        padding: 0.25rem 0.5rem;
        margin: 0 0.3rem;
        white-space: nowrap;
        border-radius: 6px;
    }
}

/* Active state */
.filtro-alfabeto-fixed .filtro-letra.active,
.filtro-alfabeto-fixed .filtro-letra[aria-pressed="true"] {
    background: #0078d7;
    color: #fff;
}

/* Card styling for juegos list */
.main-card {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(20,30,50,0.06);
    overflow: hidden;
    transition: transform 160ms ease, box-shadow 160ms ease;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.main-card:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(20,30,50,0.10); }
.main-card h3 { margin: 0.8rem 0 0.4rem 0; padding: 0 0.9rem; font-size:1.05rem; }
.main-card p { padding: 0 0.9rem 0.6rem 0.9rem; margin: 0; color: #333; font-size:0.95rem; }
.main-card img { width:100%; height:160px; object-fit:cover; display:block; }
.main-card a { display:inline-block; margin:0.8rem 0.9rem 1rem 0.9rem; padding:0.5rem 0.9rem; background:#0078d7;color:#fff;border-radius:8px;text-decoration:none;font-weight:600; }

/* Grid gap default for main-cards */
.main-cards { gap: 1rem; display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* Make search input look native and clear on all sizes */
#busqueda-juegos {
    border: 1px solid #d0d7de;
    background: #fff;
    padding: 0.55rem 0.9rem;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(16,24,40,0.04);
    outline: none;
}
#busqueda-juegos:focus { box-shadow: 0 6px 20px rgba(16,24,40,0.08); border-color: #8ab4ff; }

/* Card sizes tuned per breakpoint */
@media (min-width:1100px) {
    .main-card { max-width: 340px; }
}
@media (min-width:700px) and (max-width:1099px) {
    .main-card { max-width: 300px; }
}
@media (max-width:699px) {
    .main-card { width: 100%; }
}


/* Aviso modal styles */
.aviso-overlay {
    position: fixed;
    inset: 0;
    display: none; /* shown via JS */
    align-items: center;
    justify-content: center;
    background: rgba(10,12,20,0.55);
    z-index: 99999;
    padding: 1rem;
}

/* When aviso is active, block interaction on the page */
body.aviso-locked *:not(.aviso-overlay):not(.aviso-overlay *) {
    pointer-events: none !important;
    user-select: none !important;
}
body.aviso-locked { overflow: hidden !important; }
.aviso-box {
    background: #fff;
    max-width: 720px;
    width: 100%;
    border-radius: 12px;
    padding: 1.25rem 1.25rem;
    box-shadow: 0 12px 36px rgba(10,20,40,0.25);
    color: #111;
}
.aviso-box h2 { margin: 0 0 0.5rem 0; font-size:1.15rem; }
.aviso-box p { margin: 0; line-height:1.45rem; }
.btn-aviso {
    background: #0078d7;
    color: white;
    border: none;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}
.btn-aviso:active { transform: translateY(1px); }

@media (max-width: 480px) {
    .aviso-box { padding: 1rem; border-radius: 10px; }
    .aviso-box h2 { font-size: 1rem; }
}