/* Página Juegos Educativos · Parada 004
       Paleta T314 (crema / negro / mostaza / cobre), mismo patrón de variables
       locales que css/pages/papeleria.css. Hoja autónoma (esta página no carga
       papeleria.css), así que los componentes que se reutilizan visualmente
       (hero partido, tarjetas de necesidad, botones, trust items, bloques con
       foto) se redeclaran con la misma receta, escopeados a .juegos-page. */
    .juegos-page {
        --mostaza: var(--accent-color, #c9a227);
        --mostaza-oscuro: #b3901f;
        --crema: var(--bg-cream, #f9f7f2);
        --negro: var(--text-color, #2D2D2D);
        --texto-suave: #6b6558;
        --cobre: #a8622e;
        font-family: var(--font-secondary);
    }
    .juegos-page .font-display {
        font-family: var(--font-primary);
    }
    .juegos-page .eyebrow {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-weight: 600;
        color: var(--mostaza-oscuro);
    }

    /* Hero split: texto + imagen, con espacio para la cabecera fija */
    .juegos-page .hero-split {
        padding-top: calc(var(--header-height, 110px) + 2.5rem);
        padding-bottom: 3rem;
        background: var(--crema);
    }
    .juegos-page .hero-split-media {
        aspect-ratio: 4/3;
        overflow: hidden;
        border-radius: 0.25rem;
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
    }
    .juegos-page .hero-split-media picture {
        display: contents;
    }
    .juegos-page .hero-split-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Botones (misma receta que Home 314 / Papelería) */
    .juegos-page .btn-accent {
        display: inline-block;
        background: var(--mostaza);
        color: #1f1a08;
        font-weight: 600;
        padding: 12px 28px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        transition: all 0.2s;
        box-shadow: 0 4px 14px rgba(201, 162, 39, 0.3);
    }
    .juegos-page .btn-accent:hover {
        background: var(--mostaza-oscuro);
        color: #fff;
        transform: scale(1.02);
    }
    .juegos-page .btn-outline-dark {
        display: inline-block;
        border: 1px solid rgba(0, 0, 0, 0.15);
        color: var(--texto-suave);
        font-weight: 500;
        padding: 11px 26px;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        transition: all 0.2s;
    }
    .juegos-page .btn-outline-dark:hover {
        border-color: var(--mostaza-oscuro);
        color: var(--mostaza-oscuro);
    }
    .juegos-page .btn-outline-light {
        display: inline-block;
        border: 1px solid rgba(255, 255, 255, 0.6);
        color: #fff;
        font-weight: 500;
        padding: 11px 26px;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        transition: all 0.2s;
    }
    .juegos-page .btn-outline-light:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: #fff;
    }

    /* "¿Para quién buscas un juego?": tarjetas mostaza, mismo patrón que
       need-card de Papelería. */
    .juegos-page .need-card {
        display: block;
        background: linear-gradient(135deg, var(--mostaza) 0%, var(--mostaza-oscuro) 100%);
        border-radius: 0.25rem;
        padding: 1.5rem 1.25rem;
        min-height: 150px;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .juegos-page .need-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    }
    .juegos-page .need-card-icon {
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 9999px;
        background: rgba(255, 255, 255, 0.92);
        color: var(--mostaza-oscuro);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }
    .juegos-page .need-card h3 {
        font-family: var(--font-primary);
        font-weight: 700;
        font-size: 1.05rem;
        color: #fff;
        margin-bottom: 0.35rem;
    }
    .juegos-page .need-card p {
        font-size: 0.78rem;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.85);
    }

    /* "¿Qué quieres trabajar?": tratamiento distinto (pastillas, no tarjetas
       grandes) para no repetir el mismo bloque visual dos veces seguidas. */
    .juegos-page .skill-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 9999px;
        padding: 0.6rem 1.1rem;
        font-size: 0.82rem;
        font-weight: 500;
        color: var(--negro);
        transition: border-color 0.2s ease, color 0.2s ease;
    }
    .juegos-page .skill-chip:hover {
        border-color: var(--mostaza-oscuro);
        color: var(--mostaza-oscuro);
    }
    .juegos-page .skill-chip .icon-svg {
        color: var(--cobre);
        font-size: 0.95rem;
    }

    /* Listas de "familias" dentro de bloques partidos (compartir, puzzles,
       creatividad): pastillas simples sobre crema. */
    .juegos-page .tag-chip {
        display: inline-block;
        background: var(--crema);
        border-radius: 9999px;
        padding: 0.45rem 0.95rem;
        font-size: 0.78rem;
        color: var(--negro);
    }

    /* Bloque "Leer, escribir, jugar y crear": lista de conexiones con icono */
    .juegos-page .connection-item {
        display: flex;
        align-items: flex-start;
        gap: 0.65rem;
        font-size: 0.9rem;
        color: var(--texto-suave);
        line-height: 1.4;
    }
    .juegos-page .connection-item .icon-svg {
        color: var(--mostaza-oscuro);
        margin-top: 0.15rem;
        flex-shrink: 0;
    }

    /* Visual fotográfico de bloques partidos (creatividad, barrio) */
    .juegos-page .block-visual {
        aspect-ratio: 14/9;
        overflow: hidden;
        border-radius: 0.25rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }
    .juegos-page .block-visual picture {
        display: contents;
    }
    .juegos-page .block-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Recomendaciones Tranvía314 */
    .juegos-page .reco-card {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        background: var(--crema);
        border-radius: 0.25rem;
        padding: 1.1rem 1.25rem;
    }
    .juegos-page .reco-icon {
        font-size: 1.2rem;
        color: var(--cobre);
        flex-shrink: 0;
    }
    .juegos-page .reco-card p {
        font-size: 0.85rem;
        color: var(--negro);
        line-height: 1.35;
    }

    /* Confianza local (mismo patrón .trust-item de Home / Papelería) */
    .juegos-page .trust-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .juegos-page .trust-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(201, 162, 39, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--mostaza-oscuro);
        margin-bottom: 8px;
    }