/* --- Estilos para la sección principal que contendrá el contenido y el aside --- */
.content-section-with-aside {
    max-width: 950px; /* Un ancho mayor para esta sección específica */
    margin: 40px auto; /* Un poco más de margen vertical si lo deseas */
    display: flex; /* Habilita Flexbox */
    flex-direction: column; /* Por defecto, apila los elementos en pantallas pequeñas */
    gap: 30px; /* Espacio entre el contenido principal y el aside cuando están apilados */
}
.main-content-area {
    flex: 3; /* Ocupa 3 partes del espacio disponible en desktop */
    min-width: 0; /* Asegura que no desborde en pantallas pequeñas */
    /* Agrega padding interno si lo necesitas, ya que el padding del .content-section envuelve todo */
}
.section {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  padding: 30px;
}

.sidebar-aside {
    flex: 1; /* Ocupa 1 parte del espacio disponible en desktop */
    background-color: var(--color-contenedor-blanco); /* Fondo para el aside */
    padding: 20px;
    border-radius: 8px;
    /* Usar la misma sombra que .content-section para consistencia */
    box-shadow: 0 4px 15px var(--color-sombra-contenedor); 
    align-self: flex-start; /* Alinea el aside al inicio verticalmente */
    /* Añadir transiciones para efectos de hover, como .content-section */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.sidebar-aside:hover {
    /* Añadir efecto de hover similar a .content-section */
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--color-sombra-contenedor);
}

.sidebar-aside h3, .sidebar-aside h4 {
    color: var(--color-acento-retro);
    font-family: var(--font-body); /* Cambia a font-body para subtítulos del aside */
    text-align: left;
    margin-top: 0;
    margin-bottom: 15px;
    text-transform: none; /* No en mayúsculas */
}

/* ... (el resto de los estilos para .sidebar-aside ul, li, a, .ads-banner img se mantienen igual) ... */

.sidebar-aside ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.sidebar-aside ul li {
    margin-bottom: 10px;
}

.sidebar-aside ul li a {
    color: var(--color-texto-principal);
    display: block;
    padding: 5px 0;
    transition: color 0.3s ease;
}

.sidebar-aside ul li a:hover {
    color: var(--color-acento-divertido);
    text-decoration: underline;
}

.sidebar-aside .ads-banner img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
}

/* --- Media Query para Desktop (cuando la barra aside se pone al lado) --- */
@media (min-width: 992px) { /* Por ejemplo, a partir de tablets grandes o desktop */
    .content-section-with-aside {
        flex-direction: row; /* Coloca los elementos en fila */
        align-items: flex-start; /* Alinea los elementos en la parte superior */
        gap: 40px; /* Ajusta el espacio entre el contenido principal y el aside en desktop */
    }

    .main-content-area {
        /* No necesitamos margin-right aquí si el gap en el padre es suficiente */
    }
    
    .sidebar-aside {
        /* No necesitamos más flex:1; aquí, ya está definido */
    }
}


/* --- Estilos para cada enlace de la barra lateral (simulando el estilo del label) --- */
.sidebar-link {
    background-color: white;
    display: flex; /* Para poner el icono y el texto en línea */
    align-items: center;
    gap: 14px; /* Espacio entre el icono y el texto */
    padding: 10px 15px 10px 10px;
    cursor: pointer;
    user-select: none;
    border-radius: 10px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    color: black; /* Color del texto del enlace */
    text-decoration: none; /* Quita el subrayado del enlace */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.sidebar-link:hover {
    transform: translateY(-3px); /* Efecto de elevación al pasar el ratón */
    box-shadow: rgba(149, 157, 165, 0.4) 0px 10px 30px; /* Sombra más pronunciada */
    background-color: #f0f0f0; /* Ligero cambio de fondo al pasar el ratón */
}

/* Estilos para el icono SVG dentro del enlace */
.sidebar-link .sidebar-icon {
    width: 24px; /* Tamaño del icono */
    height: 24px;
    fill: none; /* Por defecto sin relleno */
    stroke: black; /* Color del borde del icono */
    transition: stroke 0.3s ease, fill 0.3s ease, transform 0.5s ease;
}

/* Cambio de color y animación del icono al pasar el ratón */
.sidebar-link:hover .sidebar-icon {
    stroke: hsl(0deg 100% 50%); /* Rojo (similar al que tenías para el fill) */
    /* Puedes aplicar la animación aquí, aunque puede ser muy llamativa para navegación */
    /* animation: heartButton 1s; */
}

/* Opcional: Estilo para el texto dentro del enlace */
.sidebar-link span {
    flex-grow: 1; /* Permite que el texto ocupe el espacio restante */
    white-space: nowrap; /* Evita que el texto se rompa */
    overflow: hidden; /* Oculta cualquier texto que se desborde */
    text-overflow: ellipsis; /* Añade puntos suspensivos si el texto es muy largo */
}

/* Si deseas un efecto de "activo" o "seleccionado" para la página actual,
   necesitarías añadir una clase con JavaScript (ej. .sidebar-link.active)
   y luego aplicar estilos con esa clase: */
/*
.sidebar-link.active {
    background-color: #2e80cc;
    color: white;
    box-shadow: rgba(46, 128, 204, 0.5) 0px 8px 24px;
}
.sidebar-link.active .sidebar-icon {
    stroke: white;
}
*/

/* --- Keyframes para la animación (solo si se usa con JavaScript o :active) --- */
/* Esta animación es del CSS original, puedes aplicarla a .sidebar-icon en :hover o :active */
@keyframes heartButton {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(1); }
    75% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* La lógica de .action span.option-1/2 para cambiar texto al hacer clic
   es más compleja y generalmente requiere JavaScript para enlaces de navegación.
   Si necesitas ese efecto de cambio de texto, avísame y exploramos una solución JS. */

/* --- Estilos para la sección de Registro a Torneos --- */
#foro {
    padding: 40px 0; /* Espaciado interno de la sección */
    background-color: var(--color-fondo-calido); /* Fondo de la sección, usando variable */
}

#foro .container {
    max-width: 950px; /* Un ancho adecuado para el contenido principal */
    margin: 0 auto; /* Centrar el contenedor */
    padding: 0 20px; /* Padding horizontal para evitar que el contenido toque los bordes */
    box-sizing: border-box; /* Incluye padding en el ancho total */
}

#foro h2 {
    color: var(--color-texto-principal); /* Color del título principal, usando variable */
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.5em; /* Tamaño de fuente para el título */
    font-family: var(--font-heading); /* Fuente del título, usando variable */
}

/* --- Wrapper para las columnas de formulario y lista --- */
.foro-registro-wrapper {
    display: flex; /* Habilita Flexbox */
    flex-direction: column; /* Apila las columnas por defecto en móvil */
    gap: 30px; /* Espacio entre las columnas cuando están apiladas */
    align-items: flex-start; /* Alinea los elementos al inicio */
}

/* --- Estilos para las columnas individuales (Formulario y Lista) --- */
.registro-form,
.registro-lista {
    background-color: var(--color-contenedor-blanco); /* Fondo blanco para las cajas, usando variable */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 20px var(--color-sombra-contenedor); /* Sombra para las cajas, usando variable */
    box-sizing: border-box; /* Incluye padding y border en el ancho */
    flex: 1; /* Permite que ambos crezcan y se encojan */
    min-width: 0; /* Asegura que no desborde */
}

/* --- Columna del Formulario --- */
.registro-form {
    flex: 2; /* El formulario ocupa más espacio en desktop, el doble que la lista */
}

/* --- Previsualización del Avatar --- */
.avatar-preview {
    text-align: center;
    margin-bottom: 25px;
}

#avatarPreview {
    width: 120px; /* Tamaño del avatar */
    height: 120px;
    border-radius: 50%; /* Redondo */
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
    border: 4px solid var(--color-acento-divertido); /* Borde de acento, usando variable */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Sombra suave para el avatar */
}

/* --- Estilos del Formulario --- */
#formRegistro {
    display: flex;
    flex-direction: column;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block; /* Cada label en su propia línea */
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--color-texto-principal); /* Color del texto, usando variable */
    font-size: 1em;
}

.form-group input[type="text"],
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1em;
    box-sizing: border-box; /* Importante para que el padding no afecte el width */
    color: var(--color-texto-principal); /* Color del texto, usando variable */
    background-color: #fcfcfc; /* Fondo ligero para los campos */
}

.form-group input[type="text"]:focus,
.form-group select:focus {
    border-color: var(--color-acento-divertido); /* Borde de acento al enfocar, usando variable */
    outline: none; /* Quita el contorno por defecto del navegador */
    box-shadow: 0 0 5px rgba(46, 128, 204, 0.3); /* Sombra de enfoque */
}

/* Estilo específico para el checkbox y su label */
.checkbox-group {
    display: flex; /* Alinea el checkbox y el label */
    align-items: center;
    gap: 10px; /* Espacio entre el checkbox y el label */
    margin-top: -5px; /* Ajusta el margen si es necesario */
    margin-bottom: 25px;
}

.checkbox-group input[type="checkbox"] {
    width: 20px; /* Tamaño del checkbox */
    height: 20px;
    cursor: pointer;
}

.checkbox-group label {
    margin-bottom: 0; /* Quita el margen inferior para el label del checkbox */
    font-weight: normal; /* Texto normal para el label del checkbox */
    font-size: 0.95em;
    cursor: pointer;
}

/* --- Botón de Enviar --- */
button[type="submit"] {
    background-color: var(--color-acento-divertido); /* Color del botón, usando variable */
    color: white;
    padding: 14px 25px;
    border: none;
    border-radius: 6px;
    font-size: 1.15em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    align-self: center; /* Centra el botón en la columna */
    width: auto; /* Ancho automático, no 100% */
    min-width: 200px; /* Ancho mínimo para el botón */
}

button[type="submit"]:hover {
    background-color: #1a6bb5; /* Un tono más oscuro de azul al pasar el ratón */
    transform: translateY(-2px); /* Pequeña elevación */
}

#resultadoRegistro {
    margin-top: 15px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 0.95em;
    color: var(--color-texto-principal); /* Color del texto, usando variable */
}

/* --- Columna de la Lista de Registros --- */
.registro-lista h3 {
    color: var(--color-texto-principal); /* Color del título de la lista, usando variable */
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.3em;
    text-align: center; /* Centra el título de la lista */
}

#contadorRegistros {
    color: var(--color-acento-divertido); /* Color de acento para el contador, usando variable */
    font-weight: bold;
}

#listaRegistros {
    list-style: none; /* Quita los puntos de la lista */
    padding: 0;
    margin: 0;
    max-height: 350px; /* Altura máxima para la lista de registros */
    overflow-y: auto; /* Añade scroll si la lista es muy larga */
    border: 1px solid #eee; /* Borde sutil para el área de la lista */
    border-radius: 5px;
    padding-top: 5px; /* Pequeño padding interno para la lista */
    padding-bottom: 5px;
}

#listaRegistros li {
    padding: 10px 0;
    border-bottom: 1px solid #eee; /* Separador entre elementos de la lista */
    color: var(--color-texto-principal); /* Color del texto, usando variable */
    font-size: 0.95em;
    display: flex;
    justify-content: space-between; /* Alinea contenido a los extremos */
    align-items: center;
}

#listaRegistros li:last-child {
    border-bottom: none; /* Elimina el borde del último elemento */
}


/* --- Media Query para Desktop (columnas lado a lado) --- */
@media (min-width: 768px) { /* Ajusta el breakpoint según tus necesidades (ej. 768px o 992px) */
    .foro-registro-wrapper {
        flex-direction: row; /* Coloca las columnas lado a lado */
        gap: 40px; /* Mayor espacio entre columnas en desktop */
        align-items: flex-start; /* Alinea las columnas en la parte superior */
    }

    .registro-form,
    .registro-lista {
        min-width: auto; /* Reinicia el min-width */
    }
}

/* Media Query para pantallas muy pequeñas */
@media (max-width: 480px) {
    #foro .container {
        padding: 0 15px; /* Reduce el padding en pantallas muy pequeñas */
    }

    .registro-form,
    .registro-lista {
        padding: 20px; /* Reduce el padding interno de las cajas */
    }

    #foro h2 {
        font-size: 2em;
    }
}

/* Estilos para el contenedor de Clips de la Comunidad (diseño de cuadrícula fluida) */
#latestVideosContainer4.clips-video-grid { /* Usando el ID + clase como en tu HTML */
    display: grid;
    /* Ajustado minmax para tarjetas más pequeñas y permitir 3 columnas en ancho suficiente */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 25px; /* Espacio entre los videos */
    padding: 0; /* Ya tenemos padding en .video-section-container */
}

/* Estilos para el contenedor de Videos de Torneos (diseño vertical tipo carta) */
.torneos-col.vertical-layout .video-section-container {
    display: flex;
    flex-direction: column; /* Apila las tarjetas de video verticalmente */
    gap: 20px; /* Espacio entre las tarjetas de torneo */
}

/* Tarjeta de video (más compacta) */
.video-card {
    animation: fadeInUp 0.4s ease forwards;
    background-color: var(--ds-dark-gray);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 5px 15px var(--ow-box-shadow-light);
    opacity: 0;
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
}

.video-card a {
    color: inherit;
    display: block;
    text-decoration: none;
}

.video-card img {
    display: block;
    height: 120px; /* Altura de la imagen reducida para una tarjeta más pequeña */
    object-fit: cover;
    width: 100%;
}

.video-card .video-title {
    color: var(--ds-white);
    font-size: 0.95rem; /* Fuente del título ligeramente más pequeña */
    font-weight: 500;
    line-height: 1.3;
    padding: 8px 10px; /* Padding del título reducido */
}

/* Botón de expansión */
.video-expand-control {
    margin-top: 10px;
    text-align: center;
}

#expandVideosBtn {
    background-color: var(--ow-blue);
    border: none;
    border-radius: 5px;
    color: var(--ds-white);
    cursor: pointer;
    font-weight: bold;
    padding: 10px 20px;
    transition: background-color 0.3s ease;
}

#expandVideosBtn:hover {
    background-color: #1E88E5;
}





/* Estilos para la sección principal de Videos Destacados (ahora tu página de Torneos) */
#Videos-Destacados.content-section {
    padding: 20px 10px;
    background-color: var(--color-fondo-calido); /* Fondo claro para la sección */
    margin-bottom: 30px;
}

#Videos-Destacados .container {
    max-width: 1000px; /* Asegura un ancho máximo para el contenido */
    margin: 0 auto; /* Centra el contenido */
}

#Videos-Destacados h2 {
    color: var(--color-acento-retro);
    font-family: var(--font-heading);
    text-align: center;
    margin-bottom: 15px;
    font-size: 2.5em;
    text-transform: uppercase;
}

#Videos-Destacados p {
    color: var(--color-texto-principal);
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.1em;
}

/* El nuevo contenedor principal para el diseño de cuadrícula (donde se organizan los videos) */
/* Si este div .video-grid-container es generado por JS, asegúrate de que el JS le aplique esta clase. */
.video-grid-container {
    display: grid;
    gap: 30px; /* Espacio entre los bloques de video */
    grid-template-columns: 1fr; /* Por defecto, una sola columna en móvil (se apilan) */
    grid-template-areas:
        "main-video"
        "other-videos-list"; /* Las áreas de la cuadrícula para el layout */
}

/* Estilos para el Video Destacado (el grande) */
.main-video-highlight {
    grid-area: main-video; /* Asigna este elemento al área "main-video" de la cuadrícula */
    background-color: var(--color-contenedor-blanco);
    border-radius: 8px;
    box-shadow: 0 4px 15px var(--color-sombra-contenedor);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left; /* Alinea el texto a la izquierda como un bloque de noticias */
}

.main-video-highlight:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--color-sombra-contenedor);
}

.main-video-highlight a {
    display: block; /* Para que el enlace ocupe todo el espacio del div */
    text-decoration: none;
    color: inherit;
}

.main-video-highlight img {
    width: 100%;
    height: auto; /* Mantiene la proporción */
    display: block;
    border-bottom: 1px solid #eee; /* Separador visual */
}

.main-video-highlight h3 {
    font-size: 1.5em;
    color: var(--color-acento-retro);
    padding: 15px 20px 5px; /* Ajuste el padding para el título principal */
    margin: 0;
    text-align: left; /* Sobreescribe el h3 global */
    text-transform: none; /* No en mayúsculas */
}

.main-video-highlight p {
    font-size: 1em;
    color: var(--color-texto-principal);
    padding: 0 20px 15px; /* Padding para la descripción */
    margin: 0;
    text-align: left; /* Sobreescribe el p global */
}

.main-video-highlight p small {
    display: block;
    padding: 0 20px 10px;
    color: #888;
    font-size: 0.9em;
    text-align: left;
}

/*
  Asegúrate de que tu JavaScript inserte un div con la clase "video-grid-container"
  como hijo de <div id="latestVideosContainerTorneos" class="video-section-container">.
  Este es el contenedor principal que organiza el video grande y la lista pequeña.
*/
.video-grid-container {
    display: grid;
    gap: 30px; /* Espacio entre los bloques de video */
    grid-template-columns: 1fr; /* Por defecto, una sola columna en móvil (se apilan) */
    grid-template-areas:
        "main-video"
        "other-videos-list"; /* Las áreas de la cuadrícula para el layout */
}

/* Estilos para el Video Destacado (el grande) */
.main-video-highlight {
    grid-area: main-video; /* Asigna este elemento al área "main-video" de la cuadrícula */
    background-color: var(--color-contenedor-blanco);
    border-radius: 8px;
    box-shadow: 0 4px 15px var(--color-sombra-contenedor);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left; /* Alinea el texto a la izquierda como un bloque de noticias */
}

.main-video-highlight:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--color-sombra-contenedor);
}

.main-video-highlight a {
    display: block; /* Para que el enlace ocupe todo el espacio del div */
    text-decoration: none;
    color: inherit;
}

.main-video-highlight img {
    width: 100%;
    height: auto; /* Mantiene la proporción */
    display: block;
    border-bottom: 1px solid #eee; /* Separador visual */
}

.main-video-highlight h3 {
    font-size: 1.5em;
    color: var(--color-acento-retro);
    padding: 15px 20px 5px; /* Ajuste el padding para el título principal */
    margin: 0;
    text-align: left; /* Sobreescribe el h3 global */
    text-transform: none; /* No en mayúsculas */
}

.main-video-highlight p {
    font-size: 1em;
    color: var(--color-texto-principal);
    padding: 0 20px 15px; /* Padding para la descripción */
    margin: 0;
    text-align: left; /* Sobreescribe el p global */
}

.main-video-highlight p small {
    display: block;
    padding: 0 20px 10px;
    color: #888;
    font-size: 0.9em;
    text-align: left;
}

/* Contenedor de la lista de videos pequeños */
.other-videos-list {
    grid-area: other-videos-list;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Espacio entre los videos en la lista */
    background-color: var(--color-contenedor-blanco);
    border-radius: 8px;
    box-shadow: 0 4px 15px var(--color-sombra-contenedor);
    padding: 20px;
    max-height: 564px; /* AJUSTADO: Altura para mostrar 6 videos + sus espacios */
    overflow-y: auto; /* Permite scroll vertical */
    padding-right: 8px; /* Pequeño padding para el scrollbar, si es necesario */
}

.list-video-item {
    display: flex;
    gap: 10px; /* Espacio entre miniatura y título, ajustado para ser más pequeño */
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease;
    padding: 8px; /* Padding para el hover, ajustado */
    border-radius: 5px;
}

.list-video-item a {
    display: flex;
    gap: 10px; /* Asegura que el enlace también tenga el espacio ajustado */
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

.list-video-item img {
    width: 100px; /* Ancho fijo para las miniaturas pequeñas, ajustado */
    min-width: 100px; /* Asegura que no se encoja */
    height: auto;
    border-radius: 4px;
    display: block;
}

.list-video-item .list-video-title {
    font-size: 0.9em; /* Tamaño de la fuente del título, ajustado */
    color: var(--color-texto-principal);
    margin: 0;
    text-align: left;
    flex-grow: 1;
    line-height: 1.2; /* Mejor legibilidad con texto más pequeño */
}

/* Estilos para cada video individual en la lista (los pequeños) */
.list-video-item {
    display: flex; /* Para poner miniatura y título en línea */
    gap: 15px;
    align-items: flex-start; /* Alinea los elementos al inicio */
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease;
    padding: 10px; /* Padding para el hover */
    border-radius: 5px;
}

.list-video-item:hover {
    background-color: #adabab; /* Un ligero cambio de fondo al pasar el ratón */
}

.list-video-item a {
    display: flex; /* Asegura que el enlace envuelva miniatura y título en flex */
    gap: 15px;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
    width: 100%; /* Asegura que el enlace ocupe todo el ancho del item */
}

.list-video-item img {
    width: 120px; /* Ancho fijo para las miniaturas pequeñas */
    min-width: 120px; /* Asegura que no se encoja */
    height: auto;
    border-radius: 4px;
    display: block;
}

.list-video-item .list-video-title {
    font-size: 1em;
    color: var(--color-texto-principal);
    margin: 0;
    text-align: left;
    flex-grow: 1; /* Permite que el título ocupe el espacio restante */
    line-height: 1.3; /* Mejor legibilidad */
}

/* Media Query para pantallas de tablet y desktop (diseño de dos columnas) */
@media (min-width: 768px) {
    .video-grid-container {
        grid-template-columns: 2fr 1fr; /* El video principal toma 2/3, la lista 1/3 */
        grid-template-areas: "main-video other-videos-list";
    }
}

/* Estilos para el botón "Ver más Videos" */
#Videos-Destacados .btn-primary {
    display: block; /* Para que ocupe su propia línea */
    width: fit-content; /* Ajusta el ancho al contenido */
    margin: 40px auto 0; /* Centra el botón y añade margen superior */
    padding: 12px 25px;
    background-color: var(--color-acento-divertido);
    color: var(--ds-white);
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

#Videos-Destacados .btn-primary:hover {
    background-color: #256bb8; /* Un tono más oscuro al pasar el ratón */
}