/*
 * Archivo: style.css
 * Descripción: Estilos CSS completos para el prototipo "Aventura Urbana de Exploración"
 * Estilo visual consistente, con barra de navegación, secciones y ajustes para todas las páginas (index, reglas, personajes, reto, creditos, comunidad).
 * AJUSTES REALIZADOS: Estilo simple en columnas para la sección de personajes, sin cajas alrededor de cada item.
  * MODIFICADO: Aumentado al doble el tamaño de los iconos de misión en index.html.
 * MODIFICADO: Aumentado el tamaño de fuente del texto descriptivo y de habilidades en personajes.html.
 

/* --- Variables CSS (Colores y valores reusables) --- */
:root {
    --primary-color: #ff6600; /* Naranja principal (acento) */
    --secondary-color: #5a9935; /* Verde (principal, fondos, botones) */
    --tertiary-color: #0077cc; /* Azul (enlaces, acento secundario) */

    --text-dark: #333333; /* Gris oscuro para texto principal */
    --text-medium: #555555; /* Gris medio para descripciones */
    --text-light: #f0f0f0; /* Gris claro para texto sobre fondos oscuros */

    --background-light: #ffffff; /* Fondo blanco */
    --background-very-light: #f4f4f4; /* Fondo muy claro (fondo general) */
    --background-dark: #333333; /* Fondo oscuro (sección inspirador, footer) */

    --border-light: #dddddd; /* Borde claro */
    --border-medium: #cccccc; /* Borde medio */

    --shadow-soft: rgba(0, 0, 0, 0.08); /* Sombra suave */
    --shadow-medium: rgba(0, 0, 0, 0.15); /* Sombra media */

    /* Variables específicas para barra de navegación */
    --nav-bg: #ffffff; /* Fondo de la barra de navegación (blanco) */
    --nav-border: var(--border-medium); /* Borde de la barra de navegación */
    --nav-link-color: var(--text-dark); /* Color del texto del enlace */
    --nav-link-hover-color: var(--secondary-color); /* Color del enlace al pasar el mouse (verde) */
    --nav-shadow: rgba(0, 0, 0, 0.1); /* Sombra para la barra de navegación */

    /* Variables para el look "video game" / app y elementos contenidos */
    --container-bg: #ffffff; /* Fondo blanco para contenedores internos */
    --container-border: #cccccc; /* Borde suave para contenedores */
    --container-shadow: rgba(0, 0, 0, 0.1); /* Sombra suave para contenedores */
    --text-accent-game: #3a803a; /* Verde más oscuro para texto importante (reglas, especialidad, títulos internos) */

    /* Nuevo color para fondo de sección tipo "La naturaleza al alcance de tu mano" */
    --background-section-light: #e8f5e9; /* Un verde muy claro */

    /* AÑADIDO: Variables para el semáforo de actividad */
    --color-sem-pendiente: var(--text-medium); /* Gris para pendiente */
    --color-sem-progreso: var(--primary-color); /* Naranja para en progreso */
    --color-sem-completado: var(--secondary-color); /* Verde para completado */

    /* AÑADIDO: variable para color de misión completada */
    --color-mision-completada: var(--secondary-color);

    /* AÑADIDO: Color para botón seleccionado */
    --color-button-selected: #ffeb3b; /* Amarillo */
    --color-button-selected-text: #333333; /* Gris oscuro */

    /* AÑADIDO: Colores para barra de progreso */
    --progress-bar-bg: #e0e0e0; /* Fondo gris claro */
    --progress-bar-fill: var(--secondary-color); /* Relleno verde */

    /* AÑADIDO: Colores para botones de dificultad de actividad */
    --color-btn-principiante: #8bc34a; /* Verde claro */
    --color-btn-medio: #ff9800; /* Naranja */
    --color-btn-avanzado: #f44336; /* Rojo */

    /* AÑADIDO: Colores para la iluminación del área visual de ayuda */
    --color-illumination-principiante: rgba(139, 195, 74, 0.3); /* Verde claro semi-transparente */
    --color-illumination-medio: rgba(255, 152, 0, 0.3); /* Naranja semi-transparente */
    --color-illumination-avanzado: rgba(244, 67, 54, 0.3); /* Rojo semi-transparente */

     /* AÑADIDO: Colores para el semáforo de actividad según dificultad */
     --color-sem-principiante: var(--color-btn-principiante); /* Verde claro */
     --color-sem-medio: var(--color-sem-medio); /* Naranja */
     --color-sem-avanzado: var(--color-sem-avanzado); /* Rojo */
}


/* --- Estilos Generales del Cuerpo de la Página --- */
body {
    background-color: var(--background-very-light); /* Fondo general muy claro */
    color: var(--text-dark); /* Color de texto principal oscuro */
    font-family: 'Arial', sans-serif; /* Fuente limpia */
    margin: 0;
    padding: 0;
    line-height: 1.6;
    overflow-x: hidden; /* Evita scroll horizontal */
    min-height: 100vh; /* Asegura que el body ocupe al menos toda la altura de la ventana */
    display: flex; /* Usamos flexbox para organizar header, nav, main, footer */
    flex-direction: column; /* Organiza los hijos verticalmente */
}

/* Asegura que el main empuje el footer hacia abajo */
main {
    flex-grow: 1; /* Permite que main crezca y ocupe el espacio disponible */
}

/* Estilo base para todas las secciones de contenido principal dentro de main */
.content-section {
    max-width: 1000px; /* Ancho máximo */
    margin: 40px auto; /* Espacio arriba/abajo y centrado */
    padding: 20px; /* Padding interno */
    background-color: var(--background-light); /* Fondo blanco */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 2px 8px var(--shadow-soft); /* Sombra suave */
    border-top: 4px solid var(--primary-color); /* Línea de acento por defecto */
    box-sizing: border-box; /* Incluye padding y borde en el ancho */
    position: relative; /* Necesario para posicionar el icono de sección */
}

/* Estilo para los títulos de sección dentro de main */
.content-section h2 {
    color: var(--text-dark);
    border-bottom: none;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 30px;
    font-size: 2em;
    text-align: center;
}

/* AÑADIDO: Estilo para el icono de sección */
.content-section .section-icon {
    position: absolute; /* Posicionamiento absoluto */
    top: -30px; /* Ajusta la posición vertical */
    left: 50%; /* Centra horizontalmente */
    transform: translateX(-50%); /* Ajuste fino para centrar */
    width: 60px; /* Tamaño del icono */
    height: 60px;
    background-color: var(--background-very-light); /* Fondo detrás del icono */
    border-radius: 50%; /* Forma redonda */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 8px var(--shadow-soft); /* Sombra */
    border: 1px solid var(--border-light); /* Borde sutil */
    z-index: 1; /* Asegura que esté por encima de la sección */
}

.content-section .section-icon img {
    display: block;
    max-width: 70%; /* Tamaño de la imagen dentro del círculo */
    max-height: 70%;
    object-fit: contain;
}


/* --- Estilos del Encabezado del Sitio (Site Header) --- */
.site-header {
    /* MODIFICADO: Reemplazado background-color por background-image */
    /* Esta es una imagen de fondo por defecto, será sobrescrita por clases específicas de página */
    background-image: url('../img/encabezado index.jpg'); /* Ruta a tu imagen de fondo por defecto */
    background-size: cover;
    background-position: center;
    /* background-color: var(--secondary-color); */ /* Eliminado el color de fondo */
    color: var(--text-light);
    padding: 80px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 250px; /* Altura mínima para asegurar que la imagen se vea */
}

/* AÑADIDO: Regla específica para la imagen de encabezado en la página de inicio */
.index-page .site-header {
    background-image: url('../img/encabezado index.jpg'); /* Ruta a la imagen específica del index */
}

/* AÑADIDO: Reglas para otras páginas (ejemplos) */
/* Deberás añadir estas clases al body de cada página HTML */
.reglas-page .site-header {
    background-image: url('../img/encabezado reglas.jpg'); /* Ruta a la imagen específica de reglas */
}

.personajes-page .site-header {
    background-image: url('../img/fondo-personajes.jpg'); /* Ruta a la imagen específica de personajes */
}

.reto-page .site-header {
    background-image: url('../img/encabezado retos.jpg'); /* Ruta a la imagen específica de retos */
}

.creditos-page .site-header {
    background-image: url('../img/encabezado creditos.jpg'); /* Ruta a la imagen específica de creditos */
}

.comunidad-page .site-header {
    background-image: url('../img/encabezado comunidad.jpg'); /* Ruta a la imagen específica de comunidad */
}


.site-header::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    /* MODIFICADO: Ajustado el nivel de transparencia de la superposición */
    background-color: rgba(0, 0, 0, 0.55); /* Superposición más oscura para mejor contraste */
    z-index: 1;
    /* display: none; */ /* Descomentar si NO USAS imagen */
}

.site-header .header-content { z-index: 2; position: relative; }

.site-header h1 {
    color: var(--text-light); margin-top: 0; margin-bottom: 10px; font-size: 3em;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8); /* Sombra más fuerte para el texto */
}

.site-header p {
    font-size: 1.2em; max-width: 700px; margin: 0 auto; color: var(--text-light);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Sombra más fuerte para el texto */
}

/* Estilo para el dato destacado si se usa */
/* .site-header .dato-destacado { ... } */


/* --- Estilos de la Barra de Navegación (Site Nav) --- */
.site-nav {
    background-color: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    box-shadow: 0 2px 5px var(--nav-shadow);
    padding: 0 20px;
    position: sticky; top: 0; z-index: 100; width: 100%;
}

.site-nav ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; justify-content: center; flex-wrap: wrap;
}

.site-nav li { margin: 0; }

.site-nav a {
    display: block; color: var(--nav-link-color); text-decoration: none; font-size: 1em;
    padding: 15px 20px; transition: color 0.3s ease, background-color 0.3s ease;
    font-weight: bold; text-transform: uppercase; text-align: center; line-height: 1;
}

.site-nav a:hover {
    color: var(--nav-link-hover-color);
    background-color: var(--background-very-light);
    text-decoration: none;
}

/* Estilo para el link activo (si usas JS para añadir la clase) */
/* .site-nav a.active {
    color: var(--secondary-color);
    border-bottom: 2px solid var(--secondary-color);
} */


/* --- Estilos de la Sección de Texto Inspirador (Dark Section) --- */
.dark-section {
    background-color: var(--background-dark);
    color: var(--text-light);
    padding: 40px 20px;
    text-align: center;
    margin-bottom: 40px;
}

.dark-section .dark-section-content { max-width: 800px; margin: 0 auto; }

.dark-section h2 {
    color: var(--text-light); margin-top: 0; margin-bottom: 15px; font-size: 2em;
}

.dark-section p { font-size: 1.1em; margin: 0; }


/* --- Estilos Específicos por Página (aplicados a .content-section) --- */

/* Index.html */
/* MODIFICADO: Añadido estilo para el icono de sección */
#registro-simple { border-top-color: var(--tertiary-color); padding-top: 50px; } /* Ajusta padding-top para el icono */
#misiones-disponibles { border-top-color: var(--primary-color); padding-top: 50px; } /* Ajusta padding-top para el icono */
#que-es-la-aventura { border-top-color: var(--secondary-color); padding-top: 50px; } /* Ajusta padding-top para el icono */


/* MODIFICADO: Estilo para el contenedor de listas de ciudades */
.ciudades-container {
     /* Añadir Flexbox al contenedor principal de las listas de ciudades */
     display: flex;
     flex-wrap: wrap; /* Permite que las listas de ciudades se envuelvan en varias filas si no caben */
     gap: 30px; /* Espacio entre las listas de ciudades */
     /* Asegura que el padding de la sección no interfiera con el flex/gap */
     /* padding: 20px; */ /* Removido, el padding está en .content-section */
     /* Ajusta la alineación de las listas de ciudades */
     align-items: flex-start; /* Alinea las filas de listas de ciudades en la parte superior */
}

/* Estilo para los contenedores de listas por ciudad */
.lista-ciudad {
     /* Permite que cada lista de ciudad ocupe al menos 300px o crezca para llenar el espacio */
     flex: 1 1 300px; /* flex-grow, flex-shrink, flex-basis */
     /* Ajusta el margen si es necesario, pero el gap del padre flex ya da espacio */
     margin: 0;
     /* Añade un padding interno para separar el título de la lista */
     padding: 0 10px 10px 10px;
     border: 1px solid var(--border-light); /* Borde sutil alrededor de cada bloque de ciudad */
     border-radius: 8px;
     background-color: var(--background-very-light); /* Fondo ligero para el bloque de ciudad */
     box-sizing: border-box; /* Incluye padding y border en el tamaño flex */
     display: flex; /* Añadido para organizar H3 y UL dentro de lista-ciudad */
     flex-direction: column; /* Apila H3 y UL */
     /* align-items: flex-start; */ /* Alinea contenido dentro de lista-ciudad a la izquierda si deseas */
}

.lista-ciudad h3 {
     color: var(--text-dark);
     margin-top: 0;
     margin-bottom: 20px; /* Espacio debajo del título de la ciudad */
     border-bottom: 1px dashed var(--border-medium); /* Separador para el título de la ciudad */
     padding-bottom: 10px;
     font-size: 1.3em;
     text-align: left; /* Alinea el título de la ciudad a la izquierda */
     width: 100%; /* Asegura que el h3 ocupe todo el ancho del .lista-ciudad */
}

/* MODIFICADO: Estilo para cada item de misión (.mission-item en index.html) */
.mission-item {
    /* Removido background, border, padding, box-shadow del estilo de lista antiguo */
    border-bottom: 1px dotted var(--border-medium); /* Separador entre items */
    padding: 15px 0; /* Espacio interno arriba/abajo */
    list-style: none; /* Asegura que no haya viñetas de lista */
    margin: 0; /* Elimina margen por defecto de la lista */
    /* MODIFICADO: Usar Flexbox para el layout de icono + texto */
    display: flex;
    align-items: center; /* Centra verticalmente el icono y el texto */
    gap: 15px; /* Espacio entre el icono y el texto */
    transition: background-color 0.2s ease; /* Transición al pasar el mouse */
    cursor: pointer;
}

/* Eliminar el borde inferior del último item de misión */
.lista-ciudad ul li:last-child.mission-item {
    border-bottom: none;
}

/* Estilo para el enlace dentro del item de misión */
.mission-item a {
    display: flex; /* Permite que el enlace use flexbox para el layout interno */
    align-items: center; /* Centra verticalmente el icono y el texto dentro del enlace */
    gap: 15px; /* Espacio entre el icono y el texto dentro del enlace */
    text-decoration: none; /* Elimina el subrayado del enlace */
    color: inherit; /* Hereda el color del texto del padre */
    width: 100%; /* Asegura que el enlace ocupe todo el ancho del item */
}

.mission-item:hover {
    background-color: var(--background-very-light); /* Fondo al pasar el mouse */
    cursor: pointer;
}


/* MODIFICADO: Estilo para el contenedor del icono de misión */
.mission-item-icon {
    /* MODIFICADO: Tamaño del icono aumentado al doble */
    width: 100px;
    height: 100px;
    border-radius: 50%; /* Forma redonda */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* Evita que el icono se encoja */
    background-color: var(--background-light); /* Fondo blanco para el círculo */
    border: 2px solid var(--secondary-color); /* Borde para destacar */
    overflow: hidden; /* Asegura que la imagen redondeada no se salga */
}

.mission-item-icon img {
     display: block; width: 70%; height: 70%; object-fit: contain; /* Ajusta el tamaño de la imagen dentro del círculo */
}

/* MODIFICADO: Estilo para el contenedor del texto de la misión */
.mission-item-text {
    flex-grow: 1; /* Permite que el texto ocupe el espacio restante */
    text-align: left; /* Alinea el texto a la izquierda */
}

.mission-item-text h4 {
    color: var(--text-dark);
    font-size: 1.1em;
    margin: 0 0 5px 0;
    border-bottom: none; /* Elimina borde si existía */
    padding-bottom: 0; /* Elimina padding si existía */
}

.mission-item-text p {
    color: var(--text-medium);
    font-size: 0.9em;
    margin: 0;
}

/* Estilo para la misión completada (si usas JS para añadir la clase) */
.mission-item.mission-completed {
    /* background-color: #e8f5e9; */ /* Fondo verde muy claro */
    opacity: 0.8;
}
.mission-item.mission-completed .mission-item-text h4 {
    color: var(--color-mision-completada); /* Color verde para el título */
}
.mission-item.mission-completed .mission-item-icon {
    border-color: var(--color-mision-completada); /* Borde verde para el icono */
}
.mission-item .completion-status {
    font-size: 0.9em;
    font-weight: bold;
    color: var(--color-mision-completada);
    margin-left: 5px; /* Espacio a la izquierda del texto */
}


/* AÑADIDO: Estilo para la sección "Qué es la Aventura Urbana" con layout de icono al lado del texto */
#que-es-la-aventura {
    border-top-color: var(--secondary-color); /* Color de borde superior para esta sección */
    background-color: var(--background-section-light); /* Fondo claro similar al ejemplo */
    padding-top: 50px; /* Ajusta padding-top para el icono */
    padding-bottom: 40px; /* Espacio interno abajo */
    /* No necesitamos display: grid/flex aquí, ya que los items internos (.info-item) manejarán su propio layout */
}

/* Estilo para cada item dentro de la sección de explicación */
#que-es-la-aventura .info-item {
    display: flex; /* Usamos flexbox para el layout de icono + texto */
    align-items: flex-start; /* Alinea los items al inicio (arriba) */
    gap: 20px; /* Espacio entre el icono y el texto */
    margin-bottom: 25px; /* Espacio entre cada item de información */
    /* Opcional: Añadir un borde inferior o separador si se desea */
    /* border-bottom: 1px dashed var(--border-light); */
    /* padding-bottom: 20px; */
}
/* Eliminar el margen inferior del último item */
#que-es-la-aventura .info-item:last-of-type {
    margin-bottom: 0;
    /* Opcional: Eliminar el borde inferior del último item si se añadió */
    /* border-bottom: none; */
    /* padding-bottom: 0; */
}


/* Estilo para el contenedor del icono */
#que-es-la-aventura .info-icon {
    /* Ajusta el tamaño del círculo del icono */
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Forma redonda */
    background-color: var(--secondary-color); /* Color de fondo del círculo (verde) */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* Evita que el icono se encoja si el texto es muy largo */
    /* Opcional: Añadir un borde alrededor del círculo */
    /* border: 2px solid var(--primary-color); */
}

/* Estilo para la imagen dentro del icono */
#que-es-la-aventura .info-icon img {
    display: block;
    max-width: 70%; /* Ajusta el tamaño de la imagen dentro del círculo */
    max-height: 70%;
    object-fit: contain; /* Asegura que la imagen se ajuste sin distorsionarse */
    filter: invert(100%) grayscale(100%); /* Invierte colores y pone en gris para que se vea blanco sobre el fondo verde */
}

/* Estilo para el contenedor del texto */
#que-es-la-aventura .info-text {
    flex-grow: 1; /* Permite que el texto ocupe el espacio restante */
}

/* Estilo para los títulos (h3) dentro del texto */
#que-es-la-aventura .info-text h3 {
    color: var(--text-dark); /* Color de texto oscuro */
    font-size: 1.2em; /* Tamaño de fuente */
    margin-top: 0; /* Elimina margen superior */
    margin-bottom: 8px; /* Espacio debajo del título */
    border-bottom: none; /* Elimina borde inferior si existía */
    padding-bottom: 0; /* Elimina padding inferior si existía */
    text-align: left; /* Alinea el texto a la izquierda */
}

/* Estilo para los párrafos (p) dentro del texto */
#que-es-la-aventura .info-text p {
    color: var(--text-medium); /* Color de texto medio */
    font-size: 1em; /* Tamaño de fuente */
    margin-top: 0; /* Elimina margen superior */
    margin-bottom: 0; /* Elimina margen inferior */
    text-align: left; /* Alinea el texto a la izquierda */
}


/* MODIFICADO: Estilo para el formulario de registro */
#registro-simple form {
    /* Removido display: flex, flex-direction, gap del estilo anterior */
    /* Usaremos Grid para el layout del formulario */
}

/* AÑADIDO: Contenedor Grid para los campos del formulario */
#registro-simple .form-grid {
    display: grid;
    /* Definimos las columnas: 1 columna por defecto, 2 en pantallas más grandes */
    grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
    gap: 20px; /* Espacio entre los grupos de formulario */
    margin-bottom: 20px; /* Espacio debajo de la cuadrícula antes del botón */
}

/* Estilo para cada grupo de formulario (label + input) */
#registro-simple .form-group {
    display: flex;
    flex-direction: column; /* Apila label e input por defecto */
    gap: 5px; /* Espacio entre label e input */
    /* Removido align-items: center; del estilo anterior */
}

#registro-simple .form-group label {
    display: block; /* Asegura que la etiqueta esté en su propia línea */
    color: var(--text-dark);
    font-weight: bold;
    margin-bottom: 0; /* Removido margen inferior */
    width: auto; /* Ancho automático */
    text-align: left; /* Alinea la etiqueta a la izquierda */
}

#registro-simple .form-group input[type="text"],
#registro-simple .form-group textarea {
    width: calc(100% - 22px); /* Ajusta el ancho para incluir padding y borde */
    padding: 10px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: 1em;
    margin-bottom: 0; /* Removido margen inferior */
    box-sizing: border-box; /* Incluye padding y borde en el ancho */
    color: var(--text-dark);
    background-color: var(--background-light);
}

/* Estilo específico para los inputs de miembros del equipo */
#registro-simple .form-group:nth-of-type(2) input[type="text"] {
     margin-bottom: 8px; /* Espacio entre los inputs de miembro */
}
#registro-simple .form-group:nth-of-type(2) input[type="text"]:last-child {
     margin-bottom: 0; /* Elimina el margen inferior del último input de miembro */
}


/* Reglas.html */
#reglas-juego { border-top-color: var(--tertiary-color); padding-top: 50px; } /* Ajusta padding-top para el icono */

/* Item individual de regla (.regla-item en reglas.html) */
/* MODIFICADO: Estilo para usar icono de color a la izquierda */
.regla-item {
    background-color: var(--container-bg);
    border: 1px solid var(--container-border);
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 8px var(--container-shadow);
    display: flex; /* Usamos flexbox para el layout de icono + texto */
    align-items: flex-start; /* Alinea los items al inicio (arriba) */
    gap: 15px; /* Espacio entre el icono y el texto */
    margin-bottom: 20px; /* Espacio entre reglas */
}

/* Eliminar margen inferior del último item de regla */
#reglas-juego .regla-item:last-child {
     margin-bottom: 0;
}


/* Contenedor del icono de regla */
.regla-item .regla-icon {
    /* Removido width, height, border-radius, display, justify-content, align-items, flex-shrink, background-color, overflow de estilos anteriores */
     flex-shrink: 0; /* Evita que el icono se encoja */
}

/* AÑADIDO: Estilo para el círculo de color que actúa como icono */
.regla-item .regla-icon .regla-color-icon {
    width: 40px; /* Tamaño del círculo de color */
    height: 40px;
    border-radius: 50%; /* Forma redonda */
    /* El color de fondo se define inline en el HTML */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Sombra suave */
    border: 1px solid var(--border-light); /* Borde sutil */
}


.regla-item .regla-texto { flex-grow: 1; }

.regla-item h3 {
     color: var(--text-accent-game); margin-top: 0; margin-bottom: 5px; font-size: 1.2em;
     border-bottom: none; padding-bottom: 0; text-align: left;
}

.regla-item p {
    color: var(--text-medium); margin-top: 0; margin-bottom: 0; font-size: 1em; text-align: left;
}

/* AÑADIDO: Estilo para las listas dentro de las reglas */
.regla-item ul {
    list-style: disc; /* Viñetas de disco */
    padding-left: 20px; /* Espacio a la izquierda para las viñetas */
    margin-top: 10px; /* Espacio arriba de la lista */
    margin-bottom: 10px; /* Espacio abajo de la lista */
}

.regla-item li {
    margin-bottom: 5px; /* Espacio entre items de lista */
    color: var(--text-medium); /* Color de texto */
    font-size: 0.95em; /* Tamaño de fuente */
    line-height: 1.5; /* Espacio entre líneas */
}

.regla-item li strong {
    color: var(--text-dark); /* Color más oscuro para texto fuerte */
}

/* AÑADIDO: Estilo para los indicadores de dificultad dentro de las reglas */
.regla-item .difficulty-indicator {
    display: inline-block; /* Permite ajustar tamaño y margen */
    width: 15px; /* Tamaño del círculo indicador */
    height: 15px;
    border-radius: 50%; /* Forma redonda */
    vertical-align: middle; /* Alinea verticalmente con el texto */
    margin-right: 5px; /* Espacio a la derecha del círculo */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Sombra suave */
    border: 1px solid var(--border-light); /* Borde sutil */
}


/* Personajes.html */
/* MODIFICADO: Ahora es un layout vertical de items */
#perfiles-expertos {
    border-top-color: var(--secondary-color);
    background-color: var(--background-section-light); /* Fondo claro similar al ejemplo */
    display: flex; /* Usamos Flexbox para una lista vertical */
    flex-direction: column; /* Apila los items verticalmente */
    gap: 40px; /* Espacio entre cada personaje */
    padding-top: 40px; /* Añade padding interno para el fondo claro */
    padding-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
    align-items: stretch; /* Estira los items para que ocupen el ancho completo */
}

/* Estilo para cada item de personaje (.personaje en personajes.html) */
/* MODIFICADO: Ahora es un contenedor principal para el layout interno horizontal */
.personaje {
     background-color: var(--background-light); /* Fondo blanco para el item */
     border: 1px solid var(--border-light); /* Borde sutil */
     border-radius: 8px; /* Bordes redondeados */
     padding: 20px; /* Padding interno */
     box-shadow: 0 2px 8px var(--shadow-soft); /* Sombra suave */
     display: flex; /* Usamos Flexbox para el layout principal (contenido + video + button) */
     flex-direction: column; /* Apila los bloques internos verticalmente */
     gap: 20px; /* Espacio entre los bloques internos (contenido, video, button) */
     text-align: center; /* Centra contenido por defecto */
     margin: 0; /* El gap del padre #perfiles-expertos maneja el espacio */
     box-sizing: border-box; /* Incluye padding y border en el tamaño */
     /* Removido height: 100%; ya que no es necesario con flex-direction: column */
     /* Removido justify-content: flex-start; */
}

/* Contenedor principal para el layout horizontal de icono + (detalles + skills) */
.personaje-content-wrapper {
    display: flex; /* Usamos flexbox para el layout horizontal */
    flex-direction: column; /* Por defecto apilado para móviles */
    gap: 20px; /* Espacio entre icono y el contenedor de texto/habilidades */
    flex-grow: 1; /* Permite que este contenedor crezca */
    align-items: center; /* Centra los items apilados por defecto */
}

/* Contenedor para la imagen/icono del personaje */
.personaje-icon { /* Similar a mission-item-icon */
    /* MODIFICADO: Tamaño base aumentado a 250px y forma cuadrada */
    width: 250px;
    height: 250px;
    border-radius: 0; /* Forma cuadrada */
    display: flex; justify-content: center; align-items: center;
    margin: 0 auto; /* Centra el icono por defecto */
    flex-shrink: 0;
    overflow: hidden;
    /* RESTAURADO: Transición para la escala */
    transition: transform 0.3s ease;
    /* Añadido: Cursor pointer para indicar interactividad */
    cursor: pointer;
    border: 1px solid var(--border-light); /* Añadir borde */
    box-shadow: 0 2px 8px var(--shadow-soft); /* Añadir sombra */
}

/* RESTAURADO: Efecto de escala al pasar el mouse (50% más grande) */
.personaje-icon:hover {
    transform: scale(1.5); /* Aumenta el tamaño en un 50% */
}

/* RESTAURADO: Estilo para el personaje seleccionado (para escalar la imagen al 140%) */
.personaje.selected .personaje-icon { /* Aplicamos la escala al contenedor del icono */
    transform: scale(1.4); /* Escala el contenedor del icono al 140% (40% más grande) */
    /* La transición ya está en .personaje-icon */
}


.personaje-icon img {
     display: block; width: 100%; height: 100%; object-fit: cover;
}

/* Nuevo contenedor para el texto de detalles y las habilidades detalladas */
.personaje-text-skills-wrapper {
    display: flex;
    flex-direction: column; /* Apila detalles y habilidades verticalmente */
    gap: 20px; /* Espacio entre detalles y habilidades */
    flex-grow: 1; /* Permite que este contenedor crezca para ocupar espacio */
    width: 100%; /* Ocupa el ancho completo por defecto */
}


/* Contenedor del texto descriptivo (Especialidad, Habilidades, Frase) */
.personaje-details {
     text-align: center; /* Centra el texto descriptivo dentro de esta sección */
     width: 100%; /* Permite que ocupe el ancho disponible por defecto */
     padding: 10px 0; /* Padding interno arriba/abajo */
     /* Removido flex-grow: 1; */
}

/* MODIFICADO: Aumentado el tamaño de fuente del texto descriptivo */
.personaje-details p { margin: 0 0 8px 0; color: var(--text-medium); font-size: 1em; }
.personaje-details p strong { color: var(--text-dark); font-size: 1.1em; } /* También aumenta el tamaño del texto fuerte */
.personaje-details em {
    display: block; margin-top: 12px; font-style: italic; color: var(--primary-color);
    /* border-top: 1px dashed var(--border-light); */ /* Línea punteada si se desea */
    padding-top: 8px;
     font-size: 1em; /* Ajusta el tamaño de la frase */
}

/* Nuevo contenedor para las habilidades detalladas */
.personaje-skills-details {
    background-color: var(--background-very-light); /* Fondo ligero para el bloque de habilidades */
    border: 1px solid var(--border-light); /* Borde sutil */
    border-radius: 8px; /* Bordes redondeados */
    padding: 15px; /* Padding interno */
    box-shadow: 0 1px 5px var(--shadow-soft); /* Sombra suave */
    flex-grow: 1; /* Permite que este bloque crezca para ocupar espacio */
    width: 100%; /* Ocupa el ancho completo por defecto */
    text-align: left; /* Alinea el texto a la izquierda */
}

/* Estilo para el nuevo título "Características de tu compañero táctico" */
.personaje-skills-details h4:first-child {
    color: var(--text-dark);
    font-size: 1.2em; /* Un poco más grande que el siguiente h4 */
    margin-top: 0;
    margin-bottom: 15px; /* Más espacio debajo del nuevo título */
    border-bottom: 1px solid var(--border-medium); /* Separador más fuerte */
    padding-bottom: 10px;
}


.personaje-skills-details h4 {
    color: var(--text-dark);
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px dashed var(--border-medium);
    padding-bottom: 8px;
}

.personaje-skills-details ul {
    list-style: disc;
    padding-left: 20px;
    margin-top: 0;
    margin-bottom: 0;
}

/* MODIFICADO: Aumentado el tamaño de fuente de los items de lista de habilidades */
.personaje-skills-details li {
    margin-bottom: 8px; /* Espacio entre items de lista */
    color: var(--text-medium);
    font-size: 1em; /* Aumenta el tamaño de fuente */
    line-height: 1.6; /* Ajusta la altura de línea */
}

.personaje-skills-details li strong {
    color: var(--text-dark);
}

.personaje-skills-details li a {
    color: var(--tertiary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.personaje-skills-details li a:hover {
    text-decoration: underline;
    color: var(--primary-color);
}


/* Contenedor de video de personaje */
.personaje-video {
    margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--border-light); /* Mantener separador */
    text-align: center;
}
.personaje-video h4 {
    margin: 0 0 10px 0; color: var(--text-dark); font-size: 1em; text-align: left;
}
.personaje-video iframe {
    display: block; max-width: 100%; margin: 0 auto;
    border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Mantener sombra en video */
}

/* Estilo para el botón de seleccionar compañero (.btn-select-companion) */
button.btn-select-companion {
    /* Hereda estilos base de botón */
    margin-top: 15px; /* Espacio arriba */
    align-self: center; /* Centra el botón si el contenedor es más ancho */
    padding: 10px 20px; /* Ajusta padding si es necesario */
    /* Añadido para alinear al final */
    /* margin-top: auto; */
}

/* AÑADIDO: Estilo para el botón de seleccionar compañero cuando está seleccionado */
button.btn-select-companion.selected {
    background-color: var(--color-button-selected); /* Fondo amarillo */
    color: var(--color-button-selected-text); /* Texto oscuro */
    font-weight: bold;
    border: 2px solid var(--primary-color); /* Borde para destacar */
    box-shadow: 0 2px 8px rgba(255, 102, 0, 0.3); /* Sombra naranja */
}


/* AÑADIDO: Estilo para la caja placeholder cuando no hay compañero seleccionado */
.no-companion-placeholder {
    width: 250px; /* Mismo tamaño que el icono */
    height: 250px; /* Mismo tamaño que el icono */
    background-color: var(--background-light); /* Fondo blanco */
    border: 1px dashed var(--border-medium); /* Borde punteado */
    border-radius: 8px; /* Bordes redondeados */
    margin: 0 auto; /* Centrar */
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-medium);
    font-size: 0.9em;
    text-align: center;
    box-sizing: border-box; /* Incluye padding y borde en el tamaño */
    flex-shrink: 0;
}


/* Item individual de regla (.regla-item en reglas.html) */
/* MODIFICADO: Estilo para usar icono de color a la izquierda */
.regla-item {
    background-color: var(--container-bg);
    border: 1px solid var(--container-border);
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 8px var(--container-shadow);
    display: flex; /* Usamos flexbox para el layout de icono + texto */
    align-items: flex-start; /* Alinea los items al inicio (arriba) */
    gap: 15px; /* Espacio entre el icono y el texto */
    margin-bottom: 20px; /* Espacio entre reglas */
}

/* Eliminar margen inferior del último item de regla */
#reglas-juego .regla-item:last-child {
     margin-bottom: 0;
}


/* Contenedor del icono de regla */
.regla-item .regla-icon {
    /* Removido width, height, border-radius, display, justify-content, align-items, flex-shrink, background-color, overflow de estilos anteriores */
     flex-shrink: 0; /* Evita que el icono se encoja */
}

/* AÑADIDO: Estilo para el círculo de color que actúa como icono */
.regla-item .regla-icon .regla-color-icon {
    width: 40px; /* Tamaño del círculo de color */
    height: 40px;
    border-radius: 50%; /* Forma redonda */
    /* El color de fondo se define inline en el HTML */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Sombra suave */
    border: 1px solid var(--border-light); /* Borde sutil */
}


.regla-item .regla-texto { flex-grow: 1; }

.regla-item h3 {
     color: var(--text-accent-game); margin-top: 0; margin-bottom: 5px; font-size: 1.2em;
     border-bottom: none; padding-bottom: 0; text-align: left;
}

.regla-item p {
    color: var(--text-medium); margin-top: 0; margin-bottom: 0; font-size: 1em; text-align: left;
}

/* AÑADIDO: Estilo para las listas dentro de las reglas */
.regla-item ul {
    list-style: disc; /* Viñetas de disco */
    padding-left: 20px; /* Espacio a la izquierda para las viñetas */
    margin-top: 10px; /* Espacio arriba de la lista */
    margin-bottom: 10px; /* Espacio abajo de la lista */
}

.regla-item li {
    margin-bottom: 5px; /* Espacio entre items de lista */
    color: var(--text-medium); /* Color de texto */
    font-size: 0.95em; /* Tamaño de fuente */
    line-height: 1.5; /* Espacio entre líneas */
}

.regla-item li strong {
    color: var(--text-dark); /* Color más oscuro para texto fuerte */
}

/* AÑADIDO: Estilo para los indicadores de dificultad dentro de las reglas */
.regla-item .difficulty-indicator {
    display: inline-block; /* Permite ajustar tamaño y margen */
    width: 15px; /* Tamaño del círculo indicador */
    height: 15px;
    border-radius: 50%; /* Forma redonda */
    vertical-align: middle; /* Alinea verticalmente con el texto */
    margin-right: 5px; /* Espacio a la derecha del círculo */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Sombra suave */
    border: 1px solid var(--border-light); /* Borde sutil */
}


/* Item individual de actividad (.actividad en reto.html) */
/* MODIFICADO: Estilo para que cada actividad sea una caja */
.actividad {
    background-color: var(--container-bg); /* Fondo blanco para la caja */
    border: 1px solid var(--border-light); /* Borde sutil */
    border-radius: 8px; /* Bordes redondeados */
    padding: 15px; /* Padding interno */
    box-shadow: 0 2px 8px var(--shadow-soft); /* Sombra suave */
    margin-bottom: 20px; /* Espacio entre actividades cuando no están en grid */
    display: flex;
    flex-direction: column; /* Apila contenido verticalmente */
    gap: 10px; /* Espacio entre los bloques internos (texto, ayuda, registro) */
    cursor: pointer; /* Añadido */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Transición al pasar el mouse */
    box-sizing: border-box; /* Incluye padding y border en el tamaño */
}

/* Remover el margen inferior cuando está en grid (manejado por gap del grid) */
@media (min-width: 769px) {
    .actividad {
        margin-bottom: 0;
    }
}


.actividad:hover {
     transform: translateY(-3px); /* Efecto sutil al pasar el mouse */
     box-shadow: 0 4px 12px var(--shadow-medium); /* Sombra más pronunciada al pasar el mouse */
}

/* Contenedor del encabezado de la actividad (semáforo + título) */
.activity-header {
    display: flex; /* Usamos flexbox para alinear semáforo y título */
    align-items: center; /* Alinea verticalmente */
    gap: 10px; /* Espacio entre semáforo y título */
    border-bottom: 1px dashed var(--border-light); /* Separador */
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.actividad h3 {
    color: var(--text-dark); margin: 0; padding-bottom: 0; /* Ajustado */
    border-bottom: none; font-size: 1.1em; /* Ajustado */
    /* Removido display: flex y align-items: center; de aquí */
}

/* AÑADIDO: Estilo base del semáforo de actividad */
.activity-semaphore {
    /* Aumentado el tamaño al doble */
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Forma */
    /* Color por defecto, será sobrescrito por las clases de estado Y dificultad */
    background-color: gray;
    flex-shrink: 0; /* Evita que el semáforo se encoja */
    margin-top: 0; /* Ajuste de alineación visual con el texto del título */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Sombra */
}
/* Clases de estado para el semáforo (usando las variables definidas) */
/* Estos estilos de estado ahora serán sobrescritos por los estilos de dificultad si se aplican */
.activity-semaphore.pendiente { background-color: var(--color-sem-pendiente); }
.activity-semaphore.en-progreso { background-color: var(--color-sem-progreso); } /* Usar primary color para en progreso */
.activity-semaphore.completada { background-color: var(--color-sem-completado); } /* Usar secondary color para completado */

/* AÑADIDO: Estilos para el semáforo de actividad según la dificultad */
/* Estos estilos tienen mayor especificidad y sobrescribirán los colores de estado si se aplican */
.activity-semaphore.principiante { background-color: var(--color-sem-principiante); }
.activity-semaphore.medio { background-color: var(--color-sem-medio); }
.activity-semaphore.avanzado { background-color: var(--color-sem-avanzado); }


/* Contenedor para el texto de la actividad (título y descripción) */
.actividad-texto {
     flex-grow: 1; /* Permite que ocupe el espacio restante */
     padding-top: 0; /* Ajuste de alineación */
}

.actividad-texto p { /* Estilo para la descripción */
    margin: 0;
    color: var(--text-medium);
    font-size: 0.95em;
}


.actividad .ayuda-container {
    padding: 10px; background-color: var(--background-very-light); border-radius: 5px; text-align: center; margin-top: 10px;
    /* Añadido: Borde superior para separar de la descripción */
    border-top: 1px dashed var(--border-light);
    padding-top: 15px;
    /* Removido display: flex y flex-direction: column; y align-items: center; */
    /* Removido gap: 10px; */
}
/* ELIMINADO: Estilo para h4 dentro de .ayuda-container */
/* .actividad .ayuda-container h4 { margin: 0 0 10px 0; color: var(--text-medium); font-size: 0.9em; } */

/* Contenedor visual para la imagen del compañero y el botón de ayuda */
.ayuda-container .companion-help-visuals {
    display: flex; /* Alinea la imagen y el botón horizontalmente */
    align-items: center; /* Centra verticalmente */
    gap: 15px; /* Espacio entre la imagen y el botón */
    justify-content: center; /* Centra el grupo horizontalmente */
    width: 100%; /* Ocupa el ancho completo para centrar */
    /* AÑADIDO: Transición para la sombra/iluminación */
    transition: box-shadow 0.3s ease-in-out;
    border-radius: 5px; /* Bordes redondeados para la iluminación */
    padding: 5px; /* Padding para que la sombra no corte el contenido */
    box-sizing: border-box; /* Incluye padding en el tamaño */
}

/* AÑADIDO: Estilos de iluminación al pasar el cursor sobre el contenedor visual */
.ayuda-container .companion-help-visuals:hover {
    /* La sombra se aplicará dinámicamente con JS o por clases de dificultad */
    /* box-shadow: 0 0 10px 5px var(--color-illumination-principiante); */ /* Ejemplo */
}

/* AÑADIDO: Clases para aplicar la iluminación con colores de dificultad */
.ayuda-container .companion-help-visuals.principiante:hover { box-shadow: 0 0 10px 5px var(--color-illumination-principiante); }
.ayuda-container .companion-help-visuals.medio:hover { box-shadow: 0 0 10px 5px var(--color-illumination-medio); }
.ayuda-container .companion-help-visuals.avanzado:hover { box-shadow: 0 0 10px 5px var(--color-illumination-avanzado); }


.actividad .ayuda-container .btn-ayuda {
    /* Hereda estilos base de botón */
    /* MODIFICADO: Quitar estilos de padding, border, border-radius, font-size, margin, text-transform, font-weight para redefinirlos por dificultad */
    padding: 8px 15px; /* Padding por defecto */
    border: none; /* Sin borde por defecto */
    border-radius: 5px; /* Bordes redondeados por defecto */
    font-size: 0.9em; /* Tamaño de fuente por defecto */
    margin: 0; /* Margen por defecto */
    text-transform: none; /* Sin mayúsculas por defecto */
    font-weight: normal; /* Peso de fuente normal por defecto */
    display: inline-block; /* Asegura que se muestre en línea */
    width: auto; /* Ancho automático */
    transition: background-color 0.3s ease;
    cursor: pointer;

    /* AÑADIDO: Posicionamiento para el tooltip */
    position: relative;
}

/* AÑADIDO: Estilos de color para los botones de ayuda según dificultad */
/* Estos colores ahora se aplican al botón, no al área de iluminación */
.actividad .ayuda-container .btn-ayuda.principiante { background-color: var(--color-btn-principiante); color: var(--text-dark); }
.actividad .ayuda-container .btn-ayuda.medio { background-color: var(--color-btn-medio); color: white; }
.actividad .ayuda-container .btn-ayuda.avanzado { background-color: var(--color-btn-avanzado); color: white; }

/* AÑADIDO: Estilos para el Tooltip */
.actividad .ayuda-container .btn-ayuda::before,
.actividad .ayuda-container .btn-ayuda::after {
    --scale: 0;
    --tooltip-color: var(--background-dark);
    --text-color: var(--text-light);
    position: absolute;
    top: -0.25rem; /* Posiciona arriba del botón */
    left: 50%;
    transform: translateX(-50%) translateY(-100%) scale(var(--scale));
    transition: transform 0.2s ease-in-out;
    transform-origin: bottom center;
    z-index: 10; /* Asegura que esté por encima de otros elementos */
    pointer-events: none; /* Permite que el mouse interactúe con el elemento debajo del tooltip */
}

.actividad .ayuda-container .btn-ayuda:hover::before,
.actividad .ayuda-container .btn-ayuda:hover::after {
    --scale: 1;
}

.actividad .ayuda-container .btn-ayuda::before {
    content: attr(data-tooltip); /* Muestra el texto del data-tooltip */
    color: var(--text-light);
    background-color: var(--tooltip-color);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8em;
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
}

.actividad .ayuda-container .btn-ayuda::after {
    content: ''; /* El triángulo */
    border: 6px solid transparent;
    border-top-color: var(--tooltip-color);
    transform: translateX(-50%) translateY(calc(-100% - 6px)) scale(var(--scale)); /* Posiciona justo debajo del tooltip */
}


.actividad .ayuda-container .ayuda-texto {
    margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-light);
    font-size: 0.9em; color: var(--text-dark); text-align: left;
    width: 100%; /* Asegura que el texto ocupe el ancho disponible */
}
/* Estilos para el contenido enriquecido dentro de .ayuda-texto */
.ayuda-texto p {
    margin: 5px 0;
    color: var(--text-medium);
    font-style: italic; /* Estilo por defecto para párrafos de ayuda */
    line-height: 1.6;
}
.ayuda-texto p strong {
     color: var(--text-dark);
     font-style: normal;
}
.ayuda-texto a { /* Estilo para enlaces dentro de la ayuda */
    color: var(--tertiary-color);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}
.ayuda-texto a:hover {
    text-decoration: underline;
    color: var(--primary-color);
}
.ayuda-texto iframe { /* Estilo para videos incrustados */
    display: block;
    width: 100%;
    max-width: 560px; /* Ancho máximo común para videos */
    height: 200px; /* Altura por defecto, puede ajustarse */
    margin: 15px auto; /* Centrar y dar espacio */
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}


/* AÑADIDO: Estilo para la imagen del compañero en el área de ayuda */
.actividad .ayuda-container .companion-help-image {
    /* MODIFICADO: Tamaño al doble */
    width: 100px;
    height: 100px;
    border-radius: 50%; /* Forma redonda */
    object-fit: cover;
    border: 2px solid var(--secondary-color); /* Borde para destacar */
    /* margin-bottom: 10px; */ /* Removido, el gap del flexbox lo maneja */
    display: none; /* Oculto por defecto */
    transition: transform 0.3s ease; /* Transición para el hover */
    flex-shrink: 0; /* Evita que se encoja */
}

/* AÑADIDO: Estilo para hacer visible la imagen del compañero cuando tiene la clase 'visible-image' */
.actividad .ayuda-container .companion-help-image.visible-image {
    display: block; /* Hacer visible la imagen */
}

/* AÑADIDO: Estilo para la bandera de la ciudad en la ayuda de actividad */
.actividad .ayuda-container .activity-city-flag {
    width: 40px; /* Tamaño de la bandera */
    height: auto; /* Mantener proporción */
    margin-left: 10px; /* Espacio a la izquierda */
    border: 1px solid var(--border-light); /* Borde sutil */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Sombra suave */
    flex-shrink: 0;
}


/* AÑADIDO: Efecto de escala (50% más grande) al pasar el cursor sobre la imagen del compañero en la ayuda */
.actividad .ayuda-container .companion-help-image:hover {
    transform: scale(1.5); /* Aumenta el tamaño en un 50% */
}


.actividad .registro-avance {
    border-top: 1px solid var(--border-light); padding-top: 15px; margin-top: 15px;
    background-color: var(--background-very-light); border-radius: 5px; padding: 15px;
}
.actividad .registro-avance h4 { margin: 0 0 10px 0; color: var(--text-dark); font-size: 1em; }
.actividad .registro-avance p { margin-bottom: 10px; color: var(--text-medium); font-size: 0.9em; }
.actividad .registro-avance input[type="text"], .actividad .registro-avance textarea {
    width: calc(100% - 22px); padding: 10px; border: 1px solid var(--border-light);
    border-radius: 4px; font-size: 0.95em; margin-bottom: 10px; box-sizing: border-box;
    color: var(--text-dark); background-color: var(--background-light);
}
.actividad .registro-avance input[type="file"] { width: 100%; margin-bottom: 10px; font-size: 0.9em; }

.actividad .registro-avance .btn-enviar-registro {
    background-color: var(--primary-color); color: white; padding: 8px 15px; border: none; border-radius: 5px;
    font-size: 1em; margin: 5px 0 0 0;
    text-transform: uppercase; font-weight: bold; display: inline-block; width: auto;
    transition: background-color 0.3s ease;
    cursor: pointer;
}
.actividad .registro-avance .btn-enviar-registro:hover { background-color: #e65c00; }

.actividad .registro-avance .registro-estado, .actividad .registro-avance .puntos-obtenidos {
    margin-top: 10px; font-size: 0.85em; color: var(--secondary-color); font-weight: bold;
}


/* Item individual de crédito (.credit-item en creditos.html) */
.credit-item {
    background-color: var(--container-bg); border: 1px solid var(--container-border);
    border-radius: 8px; padding: 15px; box-shadow: 0 1px 6px var(--container-shadow);
}

.credit-item h3 {
    color: var(--text-dark); font-size: 1.1em; margin: 0 0 10px 0;
    border-bottom: 1px dashed var(--border-light); padding-bottom: 8px;
}

.credit-item p { color: var(--text-medium); font-size: 0.95em; margin: 5px 0 0 0; }


/* --- Estilos para la Página de Comunidad (comunidad.html) --- */
/* Reutiliza .site-header, .site-nav, .dark-section, .content-section, .site-footer */

/* Área para compartir experiencia */
.sharing-area { /* Usar clase en lugar de ID para posible reutilización */
     background-color: var(--background-very-light);
     border: 1px solid var(--border-light);
     border-radius: 8px;
     padding: 15px;
     margin-top: 20px;
     display: flex;
     flex-direction: column;
     gap: 10px;
}
.sharing-area textarea {
     width: calc(100% - 20px); padding: 10px; border: 1px solid var(--border-light);
     border-radius: 4px; font-size: 1em; min-height: 100px; resize: vertical;
     color: var(--text-dark); background-color: var(--background-light);
}
.sharing-area input[type="file"] { font-size: 0.9em; color: var(--text-medium); }
/* El botón usa el estilo .btn-primary (o .btn) ya definido */

/* Lista de experiencias compartidas */
.shared-experiences-list {
     margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border-medium);
}
.shared-experiences-list h3 {
     color: var(--text-dark); font-size: 1.3em; margin-bottom: 15px;
     border-bottom: 1px dashed var(--border-light); padding-bottom: 8px;
}
.shared-experiences-list .experience-item {
    background-color: var(--background-very-light); border: 1px solid var(--border-light);
    border-radius: 8px; padding: 15px; margin-bottom: 15px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.05);
}
.shared-experiences-list .experience-item p { margin: 5px 0; color: var(--text-medium); font-size: 0.95em; }
.shared-experiences-list .experience-item p strong { color: var(--text-dark); }


/* Estilos para galerías con diseño de cuadrícula */
.grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px; margin-top: 20px;
}

/* Asegura que las imágenes y iframes dentro de las galerías se muestren */
.photo-gallery img,
.video-gallery iframe {
    display: block; /* Asegura que no sean inline */
    width: 100%; /* Ocupa el ancho de su contenedor en la cuadrícula */
    height: auto; /* Mantiene la proporción para imágenes */
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid var(--border-light);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.video-gallery iframe {
     height: 150px; /* Altura fija para videos si es necesario */
}


/* Lista de equipos reconocidos */
.recognized-teams-list { margin-top: 20px; }
.recognized-teams-list .team-item {
    background-color: var(--background-very-light); border: 1px solid var(--border-light);
    border-radius: 8px; padding: 15px; margin-bottom: 15px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.05);
}
.recognized-teams-list .team-item h3 { color: var(--text-dark); font-size: 1.1em; margin: 0 0 5px 0; }
.recognized-teams-list .team-item p { color: var(--text-medium); font-size: 0.9em; margin: 3px 0; }


/* Lista de compañeros de aventuras */
.companions-list { margin-top: 20px; }
.companions-list .companion-item {
     background-color: var(--background-very-light); border: 1px dashed var(--border-light);
     border-radius: 5px; padding: 10px 15px; margin-bottom: 10px;
     font-size: 0.95em; color: var(--text-medium);
}
.companions-list .companion-item p { margin: 3px 0; }

/* Lista de premios y logros */
.prizes-achievements-list.grid-layout {
     grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
     text-align: center;
}
.prizes-achievements-list .prize-item {
     display: flex; flex-direction: column; align-items: center; gap: 5px;
     padding: 10px;
}
.prizes-achievements-list .prize-item img { width: 200px; height: 200px; object-fit: contain; margin-bottom: 5px; }
.prizes-achievements-list .prize-item h3 { color: var(--text-dark); font-size: 1em; margin: 0; }
.prizes-achievements-list .prize-item p { color: var(--text-medium); font-size: 0.8em; margin: 0; }


/* --- Estilos para Botones y Elementos Clickeables con Estilo de Botón (Generales) --- */
button, .btn, input[type="submit"] {
    display: inline-block; background-color: var(--secondary-color); color: white;
    padding: 10px 20px; border: none; border-radius: 25px; cursor: pointer; font-size: 1em;
    margin: 10px 10px 10px 0; transition: background-color 0.3s ease, opacity 0.3s ease;
    text-transform: uppercase; font-weight: bold; text-decoration: none; text-align: center; line-height: 1;
}
button:hover, .btn:hover, input[type="submit"]:hover { background-color: #4a7c2a; opacity: 0.9; text-decoration: none; }

/* Estilo específico para el botón principal del formulario */
#registro-simple button[type="submit"] {
     display: block; width: 100%; border-radius: 5px; font-size: 1.2em; margin: 20px 0 0 0;
}

/* AÑADIDO: Estilo para el botón de seleccionar compañero cuando está seleccionado */
button.btn-select-companion.selected {
    background-color: var(--color-button-selected); /* Fondo amarillo */
    color: var(--color-button-selected-text); /* Texto oscuro */
    font-weight: bold;
    border: 2px solid var(--primary-color); /* Borde para destacar */
    box-shadow: 0 2px 8px rgba(255, 102, 0, 0.3); /* Sombra naranja */
}


/* --- Estilos para el Pie de Página (Footer) --- */
.site-footer {
    background-color: var(--background-dark); color: var(--text-light);
    text-align: center; padding: 30px 20px; margin-top: 40px; font-size: 0.9em;
    flex-shrink: 0;
}
.site-footer a { color: var(--tertiary-color); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }


/* --- Clases de Utilidad --- */
.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

.hidden { display: none; }


/* --- Media Queries para Responsividad --- */

/* Ajuste del formulario en index para pantallas grandes */
@media (min-width: 600px) {
     /* MODIFICADO: Layout de 2 columnas para el grid del formulario */
     #registro-simple .form-grid {
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 2 columnas o más, mínimo 280px */
     }

     /* Ajuste de la sección de explicación para pantallas grandes */
     #que-es-la-aventura .info-item {
         /* Con 2 columnas, ajustamos el gap */
         gap: 30px;
     }
      #que-es-la-aventura .info-icon {
         /* Ajusta el tamaño del icono en pantallas grandes si es necesario */
         width: 80px;
         height: 80px;
      }
       #que-es-la-aventura .info-icon img {
         /* Ajusta el tamaño de la imagen dentro del círculo en pantallas grandes */
         max-width: 60%;
         max-height: 60%;
       }

    /* Personajes.html - Layout horizontal para icono y texto/habilidades */
    .personaje-content-wrapper {
        flex-direction: row; /* Layout en fila para pantallas grandes */
        align-items: flex-start; /* Alinea los elementos al inicio de la fila */
    }

    .personaje-icon {
        /* MODIFICADO: Margen a la derecha para separar del texto/habilidades */
        margin-right: 20px;
        margin-bottom: 0; /* Eliminar margen inferior en layout horizontal */
    }

    .personaje-text-skills-wrapper {
        display: flex; /* Asegura que este contenedor sea un flex container */
        flex-direction: column; /* Apila detalles y habilidades verticalmente */
        gap: 20px; /* Espacio entre detalles y habilidades */
        flex-grow: 1; /* Permite que este contenedor crezca para ocupar espacio */
        width: 100%; /* Ocupa el ancho completo por defecto */
    }


    .personaje-details {
        text-align: left; /* Alinear texto a la izquierda cuando está al lado del icono */
        padding: 0; /* Eliminar padding si no es necesario */
    }

    .personaje-skills-details {
        /* No necesita ajustes específicos de width/flex-grow aquí, ya está en el wrapper */
    }

    /* Reto.html - Layout de cajas de información con imagen al lado */
    .content-section.info-box {
        display: flex; /* Usamos flexbox para el layout horizontal */
        align-items: center; /* Centra verticalmente el contenido y la imagen */
        gap: 30px; /* Espacio entre el contenido y la imagen */
        /* Aseguramos que el padding de la sección no interfiera con el flex/gap */
        padding: 20px;
    }

    .info-box-content-wrapper {
        flex-grow: 1; /* Permite que el contenido de texto ocupe el espacio restante */
        /* width: 70%; */ /* Opcional: Dar un ancho preferido al contenido */
    }

    .info-box-image {
        flex-shrink: 0; /* Evita que la imagen se encoja */
        /* MODIFICADO: Aumentar tamaño en 30% (150 * 1.3 = 195px) */
        width: 195px;
        height: 195px;
        display: flex; /* Centrar la imagen dentro del contenedor */
        justify-content: center;
        align-items: center;
    }

    .info-box-image img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* Asegura que la imagen se ajuste sin distorsionarse */
    }

    /* Reto.html - Layout de actividades en 2 columnas */
    @media (min-width: 769px) {
        #actividades-terreno {
            display: grid; /* Usamos grid para 2 columnas en pantallas grandes */
            grid-template-columns: repeat(2, 1fr); /* 2 columnas de igual ancho */
            gap: 30px; /* Espacio entre columnas y filas */
            /* Aseguramos que el borde inferior y padding no interfiera con el gap de grid */
        }
         .actividad {
             margin-bottom: 0 !important; /* Anula el margin-bottom para que el gap de grid funcione */
             padding-bottom: 0 !important; /* Anula el padding-bottom */
             border-bottom: none !important; /* Anula el borde inferior */
         }
         /* Si quisieras separadores verticales o redefinir el look en grid, iría aquí */
    }

     /* Reto.html - Layout de galerías de video y texto en la sección de reflexiones */
     .video-gallery.grid-layout { /* Usar clase en lugar de ID */
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 3 columnas o más */
         gap: 20px;
     }
      .experiences-text-grid.grid-layout {
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 3 columnas o más */
         gap: 20px;
      }
}

/* Ajustes para la barra de navegación en pantallas pequeñas */
@media (max-width: 768px) {
    .site-nav ul { flex-direction: column; align-items: center; }
     .site-nav a { padding: 10px 20px; }

    /* Ajuste de la disposición interna de personajes en pantallas más pequeñas (se apilan dentro del item) */
     .personaje { /* Añade padding al item cuando se apila */
          padding: 15px 10px;
     }
     .personaje h3 {
          border-bottom: 1px dashed var(--border-light); padding-bottom: 10px; /* Añade borde al apilar */
     }
     /* Personajes.html - Apilar icono y texto/habilidades en móviles */
     .personaje-content-wrapper {
         display: flex; /* Asegura que este contenedor sea un flex container */
         flex-direction: column; /* Apila icono y contenedor de texto/habilidades */
         align-items: center; /* Centra los elementos apilados */
     }
     .personaje-icon {
         margin-right: 0; /* Eliminar margen derecho en móviles */
         margin-bottom: 20px; /* Añadir margen inferior para separar del texto/habilidades */
     }
     .personaje-text-skills-wrapper {
         width: 100%; /* Ocupa el ancho completo */
     }
      .personaje-details {
         text-align: center; /* Centrar texto en móviles */
      }

      /* Reto.html - Apilar contenido e imagen en cajas de información en móviles */
      .content-section.info-box {
          flex-direction: column; /* Apila contenido e imagen */
          align-items: center; /* Centra los elementos apilados */
          gap: 20px; /* Espacio entre contenido e imagen */
      }
       .info-box-content-wrapper {
           width: 100%; /* Ocupa el ancho completo */
       }
        .info-box-image {
            flex-shrink: 0; /* Evita que la imagen se encoja */
            /* MODIFICADO: Aumentar tamaño en 30% (100 * 1.3 = 130px) */
            width: 130px;
            height: 130px;
            display: flex; /* Centrar la imagen dentro del contenedor */
            justify-content: center;
            align-items: center;
        }
         .info-box-image img {
             display: block;
             max-width: 80%; /* Ajustar tamaño de imagen dentro del contenedor */
             max-height: 80%;
             object-fit: contain; /* Asegura que la imagen se ajuste sin distorsionarse */
         }


        /* Ajuste para el video si es necesario en pantallas pequeñas */
        .personaje-video iframe { height: 150px; } /* Altura reducida opcional */

     /* Ajuste de la sección de explicación para pantallas pequeñas */
     #que-es-la-aventura .info-item {
         /* En pantallas pequeñas, apilamos icono y texto */
         flex-direction: column;
         align-items: center; /* Centra el icono y el texto apilados */
         gap: 10px; /* Espacio entre icono y texto apilados */
         text-align: center; /* Centra el texto apilado */
     }
      #que-es-la-aventura .info-text h3,
      #que-es-la-aventura .info-text p {
         text-align: center; /* Centra el texto dentro del contenedor de texto apilado */
      }
       #que-es-la-aventura .info-icon {
         /* Ajusta el tamaño del icono en pantallas pequeñas si es necesario */
         width: 50px;
         height: 50px;
       }
        #que-es-la-aventura .info-icon img {
         /* Ajusta el tamaño de la imagen dentro del círculo en pantallas pequeñas */
         max-width: 60%;
         max-height: 60%;
        }

     /* Reto.html - Galerías apiladas en móviles */
     .video-gallery.grid-layout, /* Usar clase en lugar de ID */
     .experiences-text-grid.grid-layout {
         grid-template-columns: 1fr; /* Una sola columna en móviles */
         gap: 15px;
     }
      .video-gallery iframe { height: 120px; } /* Usar clase en lugar de ID */
      .experiences-text-grid .experience-item { /* Asegura que el texto se alinee a la izquierda en móviles */
          text-align: left;
      }
}

/* Ajustes para las cuadrículas en pantallas muy pequeñas */
@media (max-width: 480px) {
    .grid-layout {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 10px;
    }
     .video-gallery iframe { height: 100px; } /* Usar clase en lugar de ID */
      .prizes-achievements-list.grid-layout {
         grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
      }
       .prizes-achievements-list .prize-item img { width: 40px; height: 40px; }
        .prizes-achievements-list .prize-item h3 { font-size: 0.9em; }
        .prizes-achievements-list .prize-item p { font-size: 0.7em; }
}

/* Estilos para la barra de progreso */
.progress-bar-container {
    width: 100%;
    background-color: var(--progress-bar-bg);
    border-radius: 5px;
    overflow: hidden; /* Asegura que el relleno no se salga */
    margin-top: 15px;
    height: 20px; /* Altura de la barra */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); /* Sombra interna */
}

.progress-bar {
    height: 100%;
    width: 0%; /* Empezar vacío, se llena con JS */
    background-color: var(--progress-bar-fill);
    border-radius: 5px; /* Bordes redondeados */
    transition: width 0.5s ease-in-out; /* Animación suave */
    text-align: center; /* Centrar texto si se añade */
    line-height: 20px; /* Centrar texto verticalmente */
    color: white; /* Color del texto */
    font-size: 0.8em;
    font-weight: bold;
}

/* Estilos para las cajas de texto de experiencias compartidas */
.experiences-text-grid .experience-item {
    background-color: var(--background-very-light);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.05);
    /* Asegura que el item se estire para llenar la altura de la fila en el grid */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.experiences-text-grid .experience-item p {
    margin: 0; /* Eliminar márgenes por defecto */
    color: var(--text-medium);
    font-size: 0.95em;
    line-height: 1.5;
}
.experiences-text-grid .experience-item p strong {
    color: var(--text-dark);
}

/* AÑADIDO: Estilos para la sección de carga de fotos */
.photo-upload-section {
    background-color: var(--background-very-light);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
    box-shadow: 0 1px 5px var(--shadow-soft);
    text-align: center; /* Centrar contenido */
}

.photo-upload-section h4 {
    color: var(--text-dark);
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px dashed var(--border-medium);
    padding-bottom: 10px;
}

.photo-upload-section input[type="file"] {
    display: block; /* Ocupa su propia línea */
    margin: 10px auto; /* Centra el input file */
    font-size: 0.9em;
    color: var(--text-medium);
    max-width: 100%; /* Asegura que no se desborde */
}

.photo-upload-section .btn-register-experience {
    background-color: var(--secondary-color);
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    font-size: 0.9em; /* Botón pequeño */
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 15px; /* Espacio arriba */
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.photo-upload-section .btn-register-experience:hover {
    background-color: #4a7c2a;
}

/* AÑADIDO: Estilos para la leyenda de dificultad en Información General */
.difficulty-legend {
    margin-top: 20px; /* Espacio arriba de la leyenda */
    padding-top: 15px; /* Espacio interno arriba */
    border-top: 1px dashed var(--border-light); /* Separador */
    text-align: left; /* Alinear texto a la izquierda */
}

.difficulty-legend h4 {
    color: var(--text-dark);
    font-size: 1em;
    margin-top: 0;
    margin-bottom: 10px;
    /* No border-bottom aquí, ya hay uno arriba */
    padding-bottom: 0;
}

.difficulty-legend .legend-item {
    display: flex; /* Alinea el color y el texto horizontalmente */
    align-items: center; /* Centra verticalmente */
    gap: 8px; /* Espacio entre el color y el texto */
    margin-bottom: 5px; /* Espacio entre cada item de la leyenda */
    font-size: 0.9em;
    color: var(--text-medium);
}

/* CORREGIDO: Selector para aplicar estilos a la clase .legend-color dentro de .difficulty-legend */
.difficulty-legend .legend-color {
    /* Mismo tamaño y forma que los semáforos, pero más pequeños */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0; /* Evita que se encoja */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Sombra suave */
    border: 1px solid var(--border-light); /* Borde sutil */
}

/* Colores para los indicadores de la leyenda, coincidiendo con los semáforos */
.difficulty-legend .legend-color.principiante { background-color: var(--color-sem-principiante); }
.difficulty-legend .legend-color.medio { background-color: var(--color-sem-medio); }
.difficulty-legend .legend-color.avanzado { background-color: var(--color-sem-avanzado); }
/* Imagen de fondo para la página de créditos */
body.creditos-page .site-header {
    background-image: url('../img/fondo-creditos.jpg');
}

/* Imagen de fondo para la página de personajes */
body.personajes-page .site-header {
    background-image: url('../img/fondo-personajes.jpg');
}

/* Imagen de fondo para la página de reglas */
body.reglas-page .site-header {
    background-image: url('../img/fondo-reglas.jpg');
}

/* Imagen de fondo para la página del reto */
body.reto-page .site-header {
    background-image: url('../img/fondo-reto.jpg');
}
/* Imagen de fondo para la página de comunidad */
body.comunidad-page .site-header {
    background-image: url('../img/fondo-comunidad.jpg');
}
.badge-master,
.badge-photographer {
    width: 100px;
    height: auto;
    margin: 10px;
}
/* Estilos para las imágenes dentro de la galería de misiones */
.mission-gallery.grid-layout img {
    width: 100%; /* Hace que la imagen ocupe todo el ancho de su celda de la cuadrícula */
    height: 150px; /* Establece una altura fija, similar a los 150px de los marcadores de posición originales */
    object-fit: cover; /* Asegura que la imagen cubra el área asignada sin distorsionarse.
                           Si la relación de aspecto de la imagen no coincide con 150px de altura y el ancho de la celda,
                           la imagen será recortada para ajustarse. */
    border-radius: 5px; /* Mantiene los bordes redondeados que tenías */
    border: 1px solid var(--border-light); /* Mantiene el borde que tenías */
    box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* Mantiene la sombra que tenías */
    display: block; /* Asegura un comportamiento de bloque, útil para evitar espacios extra debajo de la imagen. */
}

/* Es posible que ya tengas una regla como .grid-layout img o similar en tu style.css.
   Si es así, puedes modificarla para que incluya estas propiedades (especialmente height y object-fit).
   Si tienes una regla como .photo-gallery img, asegúrate de que esta nueva regla para .mission-gallery.grid-layout img
   se aplique correctamente o ajusta la regla existente.
   La clase en tu HTML es <div class="mission-gallery grid-layout">, por lo que el selector .mission-gallery.grid-layout img es específico.
*/
.mission-gallery.grid-layout img {
  width: 100%; /* La imagen ocupa el 100% del ancho de su contenedor. */
  height: 150px; /* Altura fija de 150 píxeles. */
  object-fit: cover; /* La imagen se recorta para ajustarse al contenedor manteniendo su proporción. */
  border-radius: 5px; /* Bordes redondeados de 5 píxeles. */
  border: 1px solid var(--border-light); /* Borde de 1 píxel con un color definido por la variable CSS --border-light. */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* Sombra suave. */
  display: block; /* La imagen se muestra como un elemento de bloque. */
  transition: transform 0.3s ease; /* Transición suave de 0.3 segundos para la propiedad 'transform'. */
}

.mission-gallery.grid-layout img:hover {
  transform: scale(2.6); /* Escala la imagen al 260% cuando el cursor está sobre ella. */
  z-index: 10; /* Coloca la imagen ampliada encima de otros elementos. */
  box-shadow: 0 0 20px rgba(0,0,0,0.5); /* Añade una sombra más заметную al hacer zoom. */
}
.prizes-achievements-list .prize-item img {
    width: 100px; /* Tamaño original del icono */
    height: auto;
    transition: transform 0.2s ease-in-out; /* Transición suave para el efecto de aumento */
}

.prizes-achievements-list .prize-item img:hover {
    transform: scale(1.5); /* Aumenta el tamaño en un 50% (1 + 0.5) */
}
.personaje-video-container {
    margin-top: 20px; /* Espacio entre el texto y el video */
    clear: both; /* Asegura que el contenedor del video esté debajo del contenido flotante */
    display: flex; /* Añadido para centrar el contenido, si es necesario */
    flex-direction: column; /* Asegura que el título y el iframe estén en columna */
    align-items: flex-start; /* Alinea los elementos a la izquierda */
}

.personaje-video-container h4 {
    margin-bottom: 5px; /* Espacio entre el título y el video */
}

.personaje-video-container iframe {
    /* width: 100%;  Esto hará que el video se ajuste al ancho de su contenedor */
    /* height: auto; Aspecto proporcional */
     width: 560px; /* Ancho deseado para el video */
    height: 315px; /* Altura deseada para el video */
    max-width: 100%; /* Para hácerlo responsivo, asegura que no se desborde en pantallas pequeñas */
    aspect-ratio: 16 / 9; /* Mantiene la proporción 16:9 */
}


.personaje-content-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Distribuye el espacio entre los elementos */
    align-items: flex-start; /* Alinea los elementos en la parte superior */
}

.personaje-text-skills-wrapper {
    flex: 1; /* El texto y las habilidades ocupan el espacio restante */
    margin-left: 20px; /* Espacio entre la imagen y el texto/habilidades */
    display: flex;
    flex-direction: column;
}

.personaje-details {
    flex: 1; /* El texto de detalle ocupa el espacio disponible */
}