/* Contenedor Opcional para toda la lista (si quieres controlar el layout general) */
/* .colaboradores-lista { ... } */

/* Estilo base para cada tarjeta de colaborador */
.colaborador-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 2.5em;
    padding: 1.5em;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #f9f9f9;
    gap: 1.5em; /* Espacio entre imagen e info */
    overflow: hidden; /* Ayuda a contener floats o elementos desbordados */
}

/* Estilo para la figura (contenedor de la imagen) */
.colaborador-imagen {
    flex: 0 0 150px; /* Ajusta este valor base para el tamaño de imagen deseado */
    margin: 0;
}

/* Estilo para la imagen */
.colaborador-imagen img {
    display: block;
    width: 100%;
    height: auto; /* Mantiene proporción inicial */
    aspect-ratio: 1 / 1; /* Fuerza a ser cuadrada */
    object-fit: cover; /* Cubre el espacio sin distorsionar */
    border-radius: 50%; /* Imagen redonda */
    /* O usa border-radius: 8px; para esquinas redondeadas */
    border: 2px solid #fff; /* Opcional: borde blanco alrededor */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra sutil */
}

/* Estilo para el bloque de información */
.colaborador-info {
    flex: 1;
    min-width: 250px; /* Ancho mínimo antes de que envuelva en flex-wrap */
}

/* Estilo para el nombre */
.colaborador-nombre {
    margin-top: 0;
    margin-bottom: 0.25em;
    color: #2c3e50; /* Azul oscuro/gris */
    font-size: 1.5em; /* Tamaño más grande */
    font-weight: 600;
}

/* Estilo para el título */
.colaborador-titulo {
    margin-top: 0;
    margin-bottom: 1.2em;
    font-style: italic;
    color: #3498db; /* Azul claro */
    font-size: 1.1em;
    font-weight: 500;
}

/* Estilos para las secciones de contacto y bio */
.colaborador-contacto,
.colaborador-bio {
    margin-bottom: 1em;
}

.colaborador-contacto h4,
.colaborador-bio h4 {
    margin-bottom: 0.6em;
    color: #7f8c8d; /* Gris */
    font-size: 0.9em; /* Más pequeño */
    text-transform: uppercase; /* Mayúsculas */
    letter-spacing: 0.5px;
    border-bottom: 1px solid #ecf0f1; /* Línea divisoria sutil */
    padding-bottom: 0.3em;
}

/* Estilos para las listas de contacto */
.colaborador-contacto ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.colaborador-contacto ul ul { /* Lista anidada de webs */
     padding-left: 1.5em;
     margin-top: 0.3em;
}

.colaborador-contacto li {
    margin-bottom: 0.6em;
    font-size: 0.95em;
    line-height: 1.5;
    color: #34495e; /* Azul/gris oscuro */
}

.colaborador-contacto li strong {
    margin-right: 0.5em;
    color: #555; /* Gris oscuro para las etiquetas */
    font-weight: 600;
}

.colaborador-contacto a {
    color: #3498db; /* Mismo azul que el título */
    text-decoration: none;
    word-break: break-all; /* Evita que URLs largas rompan el layout */
}

.colaborador-contacto a:hover {
    text-decoration: underline;
    color: #2980b9; /* Azul más oscuro al pasar el ratón */
}

/* Estilo para los párrafos de la biografía */
.colaborador-bio p {
    margin-bottom: 1em;
    line-height: 1.6;
    color: #34495e; /* Azul/gris oscuro */
    font-size: 0.95em;
}
.colaborador-bio p:last-child {
    margin-bottom: 0;
}

/* Estilo para listas dentro de la bio (ej: roles de Thelonius) */
.colaborador-bio ul.roles-lista {
    list-style: disc; /* Puntos normales */
    padding-left: 1.8em; /* Indentación */
    margin-top: 0.5em;
    margin-bottom: 1em;
    font-size: 0.95em;
    color: #34495e;
}
.colaborador-bio ul.roles-lista li {
     margin-bottom: 0.4em;
     line-height: 1.5;
}


/* Media Query para pantallas pequeñas (móviles) */
@media (max-width: 650px) { /* Ajustado el breakpoint un poco */
    .colaborador-card {
        flex-direction: column;
        align-items: center;
        text-align: center; /* Centra imagen y títulos */
    }

    .colaborador-imagen {
        flex-basis: 120px; /* Imagen un poco más pequeña */
        margin-bottom: 1em;
    }

    .colaborador-info {
        min-width: 100%;
    }

    /* En móvil, puede que prefieras el texto alineado a la izquierda */
    .colaborador-info,
    .colaborador-contacto,
    .colaborador-bio,
    .colaborador-contacto li,
    .colaborador-bio p,
    .colaborador-bio ul.roles-lista {
         text-align: left; /* Alinea el texto de info a la izquierda */
    }
    .colaborador-contacto h4, /* Centra los títulos de sección si quieres */
    .colaborador-bio h4 {
         text-align: center;
         /* O déjalos a la izquierda: text-align: left; */
    }


     .colaborador-contacto ul ul {
        padding-left: 1em; /* Menos indentación en listas anidadas */
     }
     .colaborador-bio ul.roles-lista {
         padding-left: 1.5em; /* Menos indentación en listas de bio */
     }
}



/* --- Estilos Generales para la Sección Intro Revista --- */
.revista-intro-seccion {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* O la fuente de tu web */
    line-height: 1.7;
    color: #333;
    padding: 2em 1em; /* Espaciado interno */
    background-color: #f8f9fa; /* Fondo muy suave */
    border-radius: 8px;
    margin-bottom: 2em; /* Espacio debajo de la sección */
}

/* --- Cabeceras --- */
.revista-intro-seccion h2 {
    color: #0056b3; /* Un azul atractivo */
    text-align: center;
    margin-bottom: 1em;
    font-size: 1.8em;
    font-weight: 600;
}

.revista-intro-seccion h3 {
    color: #17a2b8; /* Un turquesa/cyan para subsecciones */
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    font-size: 1.4em;
    font-weight: 600;
    border-bottom: 2px solid #e9ecef; /* Línea sutil debajo */
    padding-bottom: 0.3em;
}

/* --- Párrafos --- */
.revista-intro-seccion p {
    margin-bottom: 1em;
    color: #495057; /* Gris oscuro legible */
}

/* --- Sección Bienvenida --- */
.intro-bienvenida {
    text-align: center; /* Centrar el texto inicial */
    margin-bottom: 2em;
}
.intro-bienvenida h2 {
     margin-bottom: 0.5em;
}
.intro-bienvenida p {
    font-size: 1.1em;
    color: #555;
    max-width: 800px; /* Limitar ancho para mejor lectura */
    margin-left: auto;
    margin-right: auto;
}


/* --- Sección Explorar Temas --- */
.lista-temas-clave {
    list-style: none;
    padding-left: 0;
}

.lista-temas-clave li {
    background-color: #ffffff; /* Fondo blanco para cada item */
    border: 1px solid #e9ecef;
    border-left: 5px solid #17a2b8; /* Borde izquierdo de color */
    padding: 1em 1.5em;
    margin-bottom: 1em;
    border-radius: 5px;
    display: flex; /* Para alinear icono y texto */
    align-items: flex-start; /* Alinear al inicio */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.lista-temas-clave li:hover {
    transform: translateY(-3px); /* Efecto ligero al pasar el ratón */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.lista-temas-clave .icono-tema {
    font-size: 1.5em; /* Tamaño del icono/emoji */
    margin-right: 0.8em;
    margin-top: -0.1em; /* Ajuste vertical fino */
    color: #17a2b8;
}

.lista-temas-clave li strong {
    color: #0056b3; /* Azul para el título del tema */
    display: block; /* Para que el texto fluya debajo */
    margin-bottom: 0.2em;
    font-size: 1.1em;
}

/* --- Separador --- */
hr.separador-elegante {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 86, 179, 0), rgba(0, 86, 179, 0.75), rgba(0, 86, 179, 0)); /* Gradiente azul */
    margin: 3em 0; /* Buen espacio alrededor */
}

/* --- Sección Quiénes Somos --- */
.intro-quienes-somos h2 {
    text-align: left; /* Alinear a la izquierda esta sección */
}

/* --- Misión y Valores (Layout lado a lado en pantallas grandes) --- */
.mision-valores {
    display: flex;
    flex-wrap: wrap; /* Para que se apilen en móvil */
    gap: 2em; /* Espacio entre misión y valores */
    margin-bottom: 1.5em;
    background-color: #e9f5ff; /* Fondo azul muy claro */
    padding: 1.5em;
    border-radius: 8px;
    border: 1px solid #cce5ff;
}

.mision, .valores {
    flex: 1; /* Que ocupen espacio disponible */
    min-width: 250px; /* Ancho mínimo antes de apilar */
}

.mision h3, .valores h3 {
    margin-top: 0; /* Quitar margen superior si es el primer elemento */
    color: #0056b3; /* Mismo azul que h2 */
    border-bottom-color: #cce5ff; /* Línea acorde al fondo */
}

.lista-valores {
    list-style: none;
    padding-left: 0;
}

.lista-valores li {
    margin-bottom: 0.7em;
    font-size: 1.05em;
    color: #333;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.lista-valores .icono-valor {
    font-size: 1.2em; /* Icono ligeramente más pequeño */
    margin-right: 0.6em;
    color: #28a745; /* Verde para los valores */
}
.valores p em {
    font-size: 0.9em;
    color: #555;
    display: block;
    margin-top: 1em;
}


/* --- Llamadas a la Acción (CTA) --- */
.cta-suscribete, .cta-unete {
    background-color: #007bff; /* Azul brillante */
    color: #ffffff;
    text-align: center;
    padding: 0.8em 1.5em;
    border-radius: 25px; /* Bordes redondeados tipo píldora */
    margin-top: 1.5em;
    font-weight: 500;
    display: block; /* O inline-block si prefieres */
    max-width: 400px; /* Limitar ancho */
    margin-left: auto;
    margin-right: auto;
    text-decoration: none; /* Si fueran enlaces */
    transition: background-color 0.2s ease;
}
.cta-suscribete strong, .cta-unete strong {
    font-weight: 700; /* Hacer la primera palabra más fuerte */
}

.cta-suscribete:hover, .cta-unete:hover {
    background-color: #0056b3; /* Azul más oscuro al pasar el ratón */
    cursor: pointer; /* Si fueran clickables */
}
/* Ajuste específico para el CTA de suscripción (menos prominente quizás) */
.cta-suscribete {
     background-color: #e9ecef; /* Fondo gris claro */
     color: #333; /* Texto oscuro */
     border: 1px solid #ced4da;
     max-width: 100%; /* Ancho completo en su sección */
}
.cta-suscribete strong {
    color: #007bff; /* Destacar la palabra clave en azul */
}
.cta-suscribete:hover {
    background-color: #d6dade;
}


/* --- Responsividad Básica --- */
@media (max-width: 768px) {
    .revista-intro-seccion h2 {
        font-size: 1.6em;
    }
    .revista-intro-seccion h3 {
        font-size: 1.3em;
    }
    .intro-bienvenida p {
        font-size: 1em;
    }
    .lista-temas-clave li {
         padding: 0.8em 1em; /* Menos padding en móvil */
    }
    .lista-temas-clave .icono-tema {
         font-size: 1.3em;
         margin-right: 0.5em;
    }
     .mision-valores {
         flex-direction: column; /* Apilar misión y valores */
         gap: 1.5em;
         padding: 1em;
     }
}

/* --- Contenedor Principal Perfil CEO --- */
.ceo-profile-section {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Fuente limpia y moderna */
    background: linear-gradient(to bottom, #ffffff 0%, #f7f9fc 100%); /* Fondo gradiente sutil */
    padding: 2em 1.5em;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 50, 100, 0.08);
    margin-bottom: 3em;
    border-top: 5px solid #0056b3; /* Borde superior color corporativo */
}

/* --- Cabecera --- */
.ceo-header {
    text-align: center;
    margin-bottom: 1.5em;
    padding-bottom: 1em;
    border-bottom: 1px solid #e0e7ff;
}
.ceo-main-title {
    font-size: 2.2em; /* Tamaño impactante */
    color: #1a253c; /* Azul oscuro casi negro */
    margin-bottom: 0.2em;
    font-weight: 700;
}
.ceo-subtitle {
    font-size: 1.2em;
    color: #5a6a85; /* Gris azulado */
    font-weight: 400;
    margin-top: 0;
}

/* --- Placeholder Imagen --- */
.ceo-image-placeholder.horizontal img {
    /* El estilo inline ya aplica lo básico, CSS puede refinar */
    border: 3px solid white; /* Borde blanco para destacar */
    box-shadow: 0 6px 16px rgba(0, 50, 100, 0.12); /* Sombra más pronunciada */
    margin-bottom: 2.5em; /* Más espacio después de la imagen */
}

/* --- Grid Layout Principal (Bio + Stats) --- */
.ceo-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2/3 para la bio, 1/3 para stats */
    gap: 2.5em; /* Espacio generoso entre columnas */
}

/* --- Bio Principal --- */
.ceo-bio-main h3 {
    font-size: 1.5em;
    color: #0056b3; /* Azul primario */
    margin-top: 1.5em;
    margin-bottom: 0.6em;
    padding-bottom: 0.3em;
    border-bottom: 2px solid #e0e7ff; /* Línea sutil azulada */
    font-weight: 600;
}
.ceo-bio-main h3:first-of-type {
    margin-top: 0; /* Sin margen superior para el primer h3 */
}

.ceo-bio-main p {
    line-height: 1.75; /* Buena legibilidad */
    color: #344054; /* Gris oscuro */
    margin-bottom: 1.2em;
    font-size: 1.05em; /* Ligeramente más grande */
}
.ceo-bio-main strong {
    color: #1a253c; /* Más oscuro para destacar */
    font-weight: 600;
}
.ceo-bio-main em { /* Para títulos de libros */
    font-style: italic;
    color: #007bff; /* Azul brillante */
}
.ceo-impacto {
    font-style: italic;
    color: #0056b3;
    border-left: 4px solid #0056b3;
    padding-left: 1em;
    margin-top: 1.5em;
    font-size: 1.1em;
    background-color: #f0f5ff;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border-radius: 0 4px 4px 0;
}


/* --- Sidebar de Estadísticas --- */
.ceo-stats-sidebar {
    /* background-color: #f8f9fa; */ /* Fondo opcional para la sidebar */
    /* padding: 1.5em; */
    /* border-radius: 8px; */
    /* border: 1px solid #e9ecef; */
}

.stats-container {
     background-color: #eaf2ff; /* Fondo azul muy claro */
     padding: 1.5em;
     border-radius: 8px;
     border: 1px solid #cce5ff;
     position: sticky; /* Para que se quede fija al hacer scroll (si la página es larga) */
     top: 20px; /* Espacio desde arriba al quedarse fija */
}

.stats-container h3 {
    text-align: center;
    color: #0056b3;
    font-size: 1.4em;
    margin-top: 0;
    margin-bottom: 1em;
    font-weight: 600;
}

.stats-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dos columnas para las stats */
    gap: 1.2em 1em; /* Espacio vertical y horizontal */
}

.stats-list li {
    background-color: #ffffff;
    padding: 0.8em;
    border-radius: 6px;
    text-align: center;
    border: 1px solid #dbeaff;
    box-shadow: 0 2px 5px rgba(0, 86, 179, 0.07);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stats-list li:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 86, 179, 0.12);
}


.stat-number {
    display: block;
    font-size: 1.8em; /* Números grandes y llamativos */
    font-weight: 700;
    color: #007bff; /* Azul brillante */
    line-height: 1.1;
    margin-bottom: 0.1em;
}

.stat-label {
    display: block;
    font-size: 0.85em; /* Etiqueta más pequeña */
    color: #5a6a85; /* Gris azulado */
    line-height: 1.3;
}

/* --- Legado Final --- */
.ceo-legacy {
    text-align: center;
    margin-top: 2em;
    font-size: 1.1em;
    font-weight: 500;
    color: #0056b3;
    padding: 0.8em;
    background-color: #eaf2ff;
    border-radius: 6px;
}

/* --- Responsividad --- */
@media (max-width: 992px) { /* Tablets y pantallas medianas */
    .ceo-content-grid {
        grid-template-columns: 1fr; /* Apilar bio y stats */
        gap: 2em;
    }
    .ceo-stats-sidebar .stats-container {
        position: static; /* Quitar sticky en pantallas pequeñas */
    }
    .stats-list {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Más columnas si caben */
    }
}

@media (max-width: 768px) { /* Móviles grandes */
     .ceo-main-title {
        font-size: 1.9em;
    }
    .ceo-subtitle {
        font-size: 1.1em;
    }
    .ceo-profile-section {
        padding: 1.5em 1em;
    }
    .stats-list {
        grid-template-columns: repeat(2, 1fr); /* Forzar 2 columnas en móvil */
    }
     .stat-number {
        font-size: 1.6em;
    }
    .stat-label {
        font-size: 0.8em;
    }
}

@media (max-width: 480px) { /* Móviles pequeños */
     .ceo-main-title {
        font-size: 1.6em;
    }
    .ceo-subtitle {
        font-size: 1em;
    }
     .stats-list {
        /* Podrías considerar 1 columna si 2 se ven muy apretadas */
        /* grid-template-columns: 1fr; */
     }
}

/* --- Contenedor Principal de la Comunidad --- */
.comunidad-wrapper {
    font-family: 'Nunito Sans', sans-serif; /* Fuente amigable y moderna (si no la tienes, usa sans-serif) */
    background-color: #f0f8ff; /* Azul cielo muy pálido (AliceBlue) */
    padding: 2.5em 2em;
    border-radius: 15px;
    border: 1px solid #d6eaff;
    box-shadow: 0 5px 15px rgba(0, 100, 200, 0.08);
    margin-bottom: 2.5em;
}

/* --- Cabecera Principal --- */
.comunidad-header-main {
    text-align: center;
    margin-bottom: 2em;
}
.comunidad-header-main h1 {
    color: #0077cc; /* Azul corporativo/principal */
    font-size: 2.4em;
    font-weight: 800;
    margin-bottom: 0.1em;
}
.comunidad-tagline {
    font-size: 1.4em;
    color: #ff9900; /* Naranja vibrante para el tagline */
    font-weight: 600;
    margin-top: 0.2em;
}
.comunidad-tagline strong {
    color: #00aaff; /* Un azul más claro para "juntos" */
}
.comunidad-tagline .emoji-icon { /* Si usas clases para emojis */
    vertical-align: middle;
}

/* --- Intro / Hook --- */
.comunidad-intro-hook {
    text-align: center;
    margin-bottom: 2em;
    font-size: 1.1em;
    color: #334e68; /* Gris azulado oscuro */
}
.comunidad-intro-hook p {
    margin-bottom: 0.8em;
}
.comunidad-intro-hook strong {
    color: #0077cc;
}
.comunidad-bienvenida {
    font-weight: 700;
    font-size: 1.15em;
    margin-top: 1.5em;
    color: #10ac84; /* Verde azulado para la bienvenida */
}

/* --- Descripción General --- */
.comunidad-descripcion-general {
    text-align: center;
    margin-bottom: 2.5em;
    padding: 1em;
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px dashed #cceeff; /* Borde discontinuo suave */
}
.comunidad-descripcion-general p {
    margin-bottom: 0;
    color: #486581; /* Gris azulado medio */
    font-size: 1.05em;
}
.comunidad-descripcion-general strong {
    color: #ff9900; /* Naranja */
    font-weight: 700;
}

/* --- Actividad Central (El Juego) --- */
.comunidad-actividad-central {
    background-color: #ffffff;
    padding: 2em;
    border-radius: 10px;
    margin-bottom: 2.5em;
    text-align: center;
    position: relative;
    border: 1px solid #e0f0ff;
    box-shadow: 0 4px 10px rgba(0, 100, 200, 0.06);
}
.actividad-icono { /* Icono del puzzle */
    font-size: 3em;
    line-height: 1;
    margin-bottom: 0.3em;
    color: #0077cc;
}
.comunidad-actividad-central h2 {
    color: #0077cc;
    font-size: 1.8em;
    margin-bottom: 0.8em;
}
.comunidad-actividad-central p {
    color: #486581;
    line-height: 1.7;
    margin-bottom: 1em;
}
.comunidad-actividad-central strong { /* Nombre del juego */
    color: #10ac84; /* Verde azulado */
    font-weight: 700;
}
.comunidad-mas-que-juego { /* Cita destacada */
    background-color: #e6f7ff; /* Azul muy pálido */
    border-left: 5px solid #00aaff; /* Borde azul claro */
    padding: 1em 1.5em;
    margin: 1.5em 0 0 0;
    border-radius: 0 8px 8px 0;
    text-align: left;
}
.comunidad-mas-que-juego p {
    margin-bottom: 0;
    font-style: italic;
    color: #00568f; /* Azul más oscuro */
}
.comunidad-mas-que-juego strong {
    font-style: normal; /* Quitar itálica al strong */
    color: #00568f;
}


/* --- Grid de Características / Beneficios / Porqués --- */
.comunidad-caracteristicas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */
    gap: 1.5em;
    margin-bottom: 2.5em;
}

.caracteristica-item {
    background-color: #ffffff;
    padding: 1.5em;
    border-radius: 10px;
    border: 1px solid #d6eaff;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.caracteristica-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 20px rgba(0, 100, 200, 0.1);
}

.caracteristica-icono {
    font-size: 2.5em;
    display: block;
    margin-bottom: 0.5em;
    color: #ff9900; /* Naranja */
}
/* Colores específicos por icono si quieres */
.caracteristica-item:nth-child(1) .caracteristica-icono { color: #10ac84; } /* Verde */
.caracteristica-item:nth-child(2) .caracteristica-icono { color: #ff9900; } /* Naranja */
.caracteristica-item:nth-child(3) .caracteristica-icono { color: #00aaff; } /* Azul claro */

.caracteristica-item h3 {
    color: #0077cc;
    font-size: 1.4em;
    margin-bottom: 0.8em;
}

.caracteristica-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.caracteristica-item li {
    color: #486581;
    margin-bottom: 0.6em;
    padding-left: 1.5em; /* Espacio para pseudo-elemento */
    position: relative;
}
/* Usar un pseudo-elemento como viñeta personalizada */
.caracteristica-item li::before {
    content: '✓'; /* Checkmark */
    position: absolute;
    left: 0;
    color: #10ac84; /* Verde para checkmark */
    font-weight: bold;
}

.caracteristica-item strong {
    color: #334e68;
    font-weight: 700;
}

/* --- Cierre y CTA Final --- */
.comunidad-cierre-cta {
    text-align: center;
    margin-top: 2em;
    padding-top: 2em;
    border-top: 1px dashed #cceeff; /* Separador superior */
}
.comunidad-cierre-cta p {
    font-size: 1.1em;
    color: #334e68;
    margin-bottom: 1em;
}
.comunidad-cierre-cta strong {
    color: #0077cc;
}
.comunidad-invitacion-final {
    font-size: 1.2em;
    font-weight: 700;
    margin-top: 1.5em;
}
.comunidad-invitacion-final strong {
    display: block;
    margin-bottom: 0.5em;
    color: #10ac84; /* Verde */
    font-size: 1.1em;
}

/* Botón Falso para la llamada a la acción */
.llamada-accion-boton {
    display: inline-block;
    background-color: #ff9900; /* Naranja */
    color: #ffffff;
    padding: 0.8em 1.8em;
    border-radius: 30px; /* Muy redondeado */
    margin-top: 0.5em;
    box-shadow: 0 4px 10px rgba(255, 153, 0, 0.4);
    transition: background-color 0.2s ease, transform 0.2s ease;
    cursor: pointer; /* Si fuera un enlace real */
}
.llamada-accion-boton:hover {
    background-color: #e68a00; /* Naranja más oscuro */
    transform: scale(1.05);
}

/* --- Responsividad Básica --- */
@media (max-width: 768px) {
    .comunidad-wrapper {
        padding: 2em 1em;
    }
    .comunidad-header-main h1 {
        font-size: 2em;
    }
    .comunidad-tagline {
        font-size: 1.2em;
    }
     .comunidad-actividad-central h2 {
         font-size: 1.6em;
     }
     .caracteristica-item h3 {
         font-size: 1.3em;
     }
     .comunidad-caracteristicas-grid {
          gap: 1em;
     }
}

/* --- Contenedor Principal Descripción Juego --- */
.juego-descripcion-wrapper {
    font-family: 'Poppins', sans-serif; /* Fuente moderna y redondeada (importar si no la tienes) */
    background: #fff; /* Fondo blanco limpio */
    padding: 2.5em;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 70, 150, 0.1);
    margin-bottom: 3em;
    border: 1px solid #e9eff5;
}

/* --- Cabecera --- */
.juego-header {
    text-align: center;
    margin-bottom: 2em;
    padding-bottom: 1em;
    border-bottom: 2px solid #007bff; /* Línea azul de acento */
}
.juego-icono-principal {
    font-size: 3.5em;
    display: block;
    margin-bottom: 0.2em;
    line-height: 1;
    color: #007bff;
}
.juego-header h1 {
    font-size: 2.3em;
    color: #212529; /* Negro suave */
    margin-bottom: 0.2em;
    font-weight: 700;
}
.juego-subtitulo {
    font-size: 1.2em;
    color: #6c757d; /* Gris medio */
    font-weight: 500;
    margin-top: 0;
}

/* --- Texto Introductorio --- */
.juego-intro-texto {
    margin-bottom: 2.5em;
    line-height: 1.7;
    font-size: 1.05em;
}
.juego-pregunta-gancho {
    font-size: 1.2em;
    font-weight: 600;
    color: #0056b3; /* Azul más oscuro */
    text-align: center;
    margin-bottom: 1.5em;
}
.juego-intro-texto p {
    margin-bottom: 1em;
    color: #495057;
}
.juego-intro-texto strong {
    color: #007bff; /* Azul brillante */
    font-weight: 600;
}

/* --- Definición del Juego --- */
.juego-definicion {
    margin-bottom: 2.5em;
}
.juego-definicion h2 {
    color: #0056b3;
    font-size: 1.8em;
    margin-bottom: 0.8em;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 0.4em;
}
.juego-definicion p {
    color: #495057;
    margin-bottom: 1em;
    line-height: 1.7;
}
.juego-definicion em { /* Texto final de la sección */
    color: #6c757d;
    display: block;
    text-align: center;
    margin-top: 1.5em;
}
/* Lista para quién es el juego */
.juego-para-quien {
    list-style: none;
    padding: 0;
    margin: 1.5em 0;
}
.juego-para-quien li {
    display: flex;
    align-items: center;
    margin-bottom: 0.8em;
    font-size: 1.05em;
    color: #343a40;
}
.juego-para-quien .icono-lista {
    font-size: 1.5em;
    margin-right: 0.6em;
    color: #007bff;
    width: 1.5em; /* Ancho fijo para alinear texto */
    text-align: center;
}
.juego-para-quien strong {
    color: #0056b3;
    font-weight: 600;
}
/* Lista/Nube de Temas */
.juego-temas-lista {
    list-style: none;
    padding: 0;
    margin: 1.5em 0;
    text-align: center; /* Centrar las etiquetas */
}
.juego-temas-lista li {
    display: inline-block; /* Estilo etiqueta */
    background-color: #e7f3ff; /* Fondo azul muy claro */
    color: #0056b3; /* Texto azul */
    padding: 0.4em 0.9em;
    margin: 0.3em;
    border-radius: 15px; /* Bordes redondeados */
    font-size: 0.95em;
    font-weight: 500;
    border: 1px solid #cce5ff;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.juego-temas-lista li:hover {
    background-color: #007bff;
    color: #ffffff;
    cursor: default; /* O pointer si fueran enlaces */
}


/* --- Sección Aprende Jugando --- */
.juego-aprende-jugando {
    background-color: #f8f9fa; /* Fondo gris claro */
    padding: 2em;
    border-radius: 10px;
    margin-bottom: 2.5em;
    border: 1px solid #e9ecef;
    position: relative; /* Para el icono */
}
.juego-aprende-jugando .icono-seccion,
.juego-metodologia .icono-seccion,
.juego-beneficios .icono-seccion {
    font-size: 2.5em;
    color: #fd7e14; /* Naranja para iconos de sección */
    position: absolute;
    top: 1em;
    left: 1em;
    opacity: 0.2; /* Hacerlo sutil */
}
.juego-aprende-jugando h3,
.juego-metodologia h3,
.juego-beneficios h3 {
    color: #0056b3;
    font-size: 1.6em;
    margin-bottom: 0.8em;
    padding-left: 1.8em; /* Espacio para el icono de fondo */
    position: relative; /* Para z-index si es necesario */
}
.juego-aprende-jugando p {
    color: #495057;
    line-height: 1.7;
    margin-bottom: 1em;
    padding-left: 1.8em; /* Alinear con el título */
}
.juego-aprende-jugando strong {
     color: #17a2b8; /* Cyan para destacar */
     font-weight: 600;
}
.juego-aprende-jugando h4 { /* Subtítulo Detalles */
    font-size: 1.1em;
    color: #343a40;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    padding-left: 1.8em;
}
.juego-detalles-grupo {
    list-style: disc; /* Viñetas normales aquí */
    padding-left: 3.2em; /* Indentación mayor */
    margin: 0;
    color: #495057;
    font-size: 0.95em;
}
.juego-detalles-grupo li {
    margin-bottom: 0.4em;
}


/* --- Sección Metodología --- */
.juego-metodologia {
    background-color: #fffaf0; /* Fondo crema muy claro */
    padding: 2em;
    border-radius: 10px;
    margin-bottom: 2.5em;
    border: 1px solid #fff0d5;
    position: relative;
}
.juego-metodologia .icono-seccion { color: #28a745; } /* Verde para este icono */
.juego-metodologia p {
    color: #5a4d38; /* Marrón suave */
    line-height: 1.7;
    margin-bottom: 1em;
    padding-left: 1.8em;
}
.juego-metodologia strong {
    color: #d9534f; /* Rojo suave para destacar */
    font-weight: 600;
}

/* --- Sección Beneficios (Footer) --- */
.juego-beneficios {
    background-color: #e7f8f0; /* Verde muy claro */
    padding: 2em;
    border-radius: 10px;
    border: 1px solid #c3e6cb;
    position: relative;
}
.juego-beneficios .icono-seccion { color: #ffc107; } /* Amarillo para este icono */
.juego-beneficios-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 1.8em;
}
.juego-beneficios-lista li {
    color: #155724; /* Verde oscuro */
    margin-bottom: 0.8em;
    padding-left: 1.8em; /* Espacio para checkmark */
    position: relative;
    font-size: 1.05em;
    font-weight: 500;
}
.juego-beneficios-lista li::before {
    content: '✔'; /* Checkmark */
    position: absolute;
    left: 0;
    color: #28a745; /* Verde brillante */
    font-size: 1.2em;
    font-weight: bold;
}

/* --- Responsividad Básica --- */
@media (max-width: 768px) {
    .juego-descripcion-wrapper {
        padding: 1.5em;
    }
    .juego-header h1 {
        font-size: 1.9em;
    }
    .juego-subtitulo {
        font-size: 1.1em;
    }
    .juego-aprende-jugando .icono-seccion,
    .juego-metodologia .icono-seccion,
    .juego-beneficios .icono-seccion {
        left: 0.5em; /* Acercar icono en móvil */
        top: 0.8em;
        font-size: 2em; /* Reducir icono */
    }
     .juego-aprende-jugando h3,
     .juego-metodologia h3,
     .juego-beneficios h3,
     .juego-aprende-jugando p,
     .juego-metodologia p,
     .juego-beneficios-lista,
     .juego-aprende-jugando h4,
     .juego-detalles-grupo {
        padding-left: 1.5em; /* Menos padding en móvil */
    }
     .juego-detalles-grupo {
        padding-left: 2.8em;
    }
}
@media (max-width: 480px) {
     .juego-temas-lista li {
         font-size: 0.9em; /* Etiquetas más pequeñas */
         padding: 0.3em 0.7em;
     }
}