.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 */
}

.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 */
    }
}
.wrapper {
    display: flex;
    justify-content: center;
    list-style: none; /* Aunque no es una ul, por si acaso */
    margin-top: 30px; /* Margen para separarlo del texto superior */
    gap: 20px;
    flex-wrap: wrap;
}

.wrapper .icon {
    position: relative;
    background-color:rgba(5, 5, 5, 0.678);
    border-radius: 50%;
    padding: 10px; /* Reducido de 15px */
    width: 40px; /* Reducido de 50px */
    height: 40px; /* Reducido de 50px */
    font-size: 16px; /* Reducido de 20px - esto controla el tamaño del ícono de Font Awesome */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip {
    position: absolute;
    top: 0; /* Lo ajustamos con el hover */
    font-size: 12px; /* Reducido de 14px */
    background-color: rgba(15, 15, 15, 0.541);
    color: rgb(209, 244, 248);
    padding: 5px 8px;
    border-radius: 5px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip {
    top: -35px; /* Ajustado de -45px, para que aparezca más cerca del ícono más pequeño */
    opacity: 1;
}

.wrapper .icon span {
    color: rgb(224, 249, 253);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon .tooltip::before {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background-color: rgba(0, 0, 0, 0.473); /* Agrega el color de fondo para que la flecha sea visible */
}

.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
    text-shadow: 0 0 5px rgb(255, 255, 255);
}

.wrapper .twitch:hover { background-color: #6441a5; }
.wrapper .youtube:hover { background-color: #ff0000; }
.wrapper .tiktok:hover { background-color: #000000; }
.wrapper .instagram:hover { background-color: #E1306C; }
.wrapper .whatsapp:hover { background-color: #25D366; }


/* Estilos para la sección de Videos Destacados */
#Videos-Destacados.content-section {
    padding: 40px 20px;
    background-color: var(--color-fondo-calido); /* Fondo claro para la sección */
    margin-bottom: 30px;
}

#Videos-Destacados .container {
    max-width: 1200px; /* 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 (generado por JS dentro de #latestVideosContainer) */
.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 */
    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" */
    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 (generado por JS) */
.other-videos-list {
    grid-area: other-videos-list; /* Asigna este elemento al área "other-videos-list" */
    display: flex;
    flex-direction: column; /* Apila los videos en la lista */
    gap: 15px; /* 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;
}

/* 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 */
}
/* Sección General de Juegos */
#juegos.content-section.games-section {
    padding: 40px 20px;
    background-color: var(--color-fondo-calido); /* Color de fondo de la sección */
    margin-bottom: 30px;
}

#juegos .container {
    max-width: 1200px; /* Ancho máximo para el contenido */
    margin: 0 auto; /* Centra el contenido */
    padding: 0 15px; /* Pequeño padding lateral para evitar que el contenido toque los bordes */
}

#juegos .other-games-title {
    color: var(--color-acento-retro);
    font-family: var(--font-heading);
    text-align: center;
    margin-bottom: 15px;
    font-size: 2.5em;
    text-transform: uppercase;
}

#juegos p {
    color: var(--color-texto-principal);
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.1em;
    max-width: 800px; /* Limita el ancho del párrafo para mejor legibilidad */
    margin-left: auto;
    margin-right: auto;
}

/* --- Sección de Juegos Destacados (games-grid) --- */
.games-grid.featured-games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Columnas responsivas */
    gap: 30px; /* Espacio entre las tarjetas */
    margin-bottom: 60px; /* Espacio antes de la siguiente sección de juegos */
}

.game-card {
    background-color: var(--color-contenedor-blanco);
    border-radius: 12px;
    box-shadow: 0 4px 20px var(--color-sombra-contenedor);
    overflow: hidden; /* Asegura que las imágenes no desborden los bordes redondeados */
    position: relative; /* Para posicionar la imagen del personaje */
    text-align: center;
    padding-bottom: 20px; /* Espacio extra para el botón */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* Habilita flexbox para el contenido */
    flex-direction: column; /* Apila los elementos */
    justify-content: space-between; /* Empuja el botón hacia abajo */
    min-height: 480px; /* Altura mínima para uniformidad */
}

.game-card:hover {
    transform: translateY(-8px); /* Efecto de elevación */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

.game-card .game-cover {
    width: 100%;
    height: 200px; /* Altura fija para la portada */
    object-fit: cover; /* Recorta la imagen para que encaje */
    border-radius: 12px 12px 0 0; /* Bordes redondeados solo arriba */
    display: block;
}

.game-card .game-character {
    width: 100px; /* Tamaño del personaje */
    height: 100px;
    border-radius: 50%; /* Circular */
    object-fit: cover;
    border: 4px solid var(--color-contenedor-blanco); /* Borde blanco alrededor */
    position: absolute; /* Posiciona sobre la portada */
    top: 150px; /* Ajusta para superponer la portada */
    left: 50%;
    transform: translateX(-50%); /* Centra el personaje */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Sombra para el personaje */
    z-index: 1; /* Asegura que esté por encima de la portada */
}

.game-card h3 {
    font-family: var(--font-heading);
    color: var(--color-acento-retro);
    font-size: 1.8em;
    margin-top: 60px; /* Margen para dejar espacio al personaje */
    margin-bottom: 10px;
    text-transform: none; /* Evita que el uppercase de h3 global afecte aquí */
}

.game-card p {
    color: var(--color-texto-principal);
    font-size: 0.95em;
    padding: 0 20px;
    margin-bottom: 20px;
    text-align: center;
    flex-grow: 1; /* Permite que el párrafo ocupe el espacio disponible */
}

.game-card .btn-primary {
    display: inline-block;
    padding: 10px 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;
    margin-top: auto; /* Empuja el botón al final de la tarjeta */
}

.game-card .btn-primary:hover {
    background-color: #256bb8;
}

/* --- Sección de Otros Títulos de la Comunidad (horizontal-games-list) --- */
.horizontal-games-list {
    display: flex; /* Habilita flexbox para la lista */
    overflow-x: auto; /* Permite el scroll horizontal */
    -webkit-overflow-scrolling: touch; /* Suaviza el scroll en iOS */
    gap: 20px; /* Espacio entre las tarjetas horizontales */
    padding-bottom: 20px; /* Espacio para la barra de scroll */
    scrollbar-width: thin; /* Estilo de scrollbar para Firefox */
    scrollbar-color: var(--color-acento-divertido) transparent; /* Color del scrollbar para Firefox */
}

/* Estilo para el scrollbar en Webkit (Chrome, Safari) */
.horizontal-games-list::-webkit-scrollbar {
    height: 8px; /* Altura de la barra de scroll */
}

.horizontal-games-list::-webkit-scrollbar-track {
    background: transparent; /* Fondo transparente de la pista */
}

.horizontal-games-list::-webkit-scrollbar-thumb {
    background-color: var(--color-acento-divertido); /* Color del "pulgar" del scrollbar */
    border-radius: 10px;
    border: 2px solid transparent; /* Borde para el pulgar */
}


.horizontal-game-card {
    flex: 0 0 auto; /* No crecer, no encoger, ancho basado en contenido */
    width: 280px; /* Ancho fijo para cada tarjeta horizontal */
    background-color: var(--color-contenedor-blanco);
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--color-sombra-contenedor);
    overflow: hidden;
    display: flex; /* Miniatura y texto en línea */
    align-items: center; /* Alinea los elementos verticalmente */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.horizontal-game-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.horizontal-game-card .horizontal-game-cover {
    width: 100px; /* Ancho de la miniatura */
    height: 100%; /* Ocupa toda la altura de la tarjeta */
    object-fit: cover;
    border-radius: 8px 0 0 8px; /* Bordes redondeados solo a la izquierda */
    display: block;
}

.horizontal-game-card .horizontal-game-info {
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1; /* Permite que la info ocupe el espacio restante */
}

.horizontal-game-card .horizontal-game-info h4 {
    color: var(--color-acento-retro);
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 5px;
    line-height: 1.3;
}

.horizontal-game-card .horizontal-game-info p {
    color: var(--color-texto-principal);
    font-size: 0.85em;
    margin-bottom: 10px;
    text-align: left; /* Alinea el párrafo a la izquierda */
    display: -webkit-box; /* Para truncar texto a múltiples líneas */
    -webkit-line-clamp: 3; /* Mostrar máximo 3 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.horizontal-game-card .btn-secondary-small {
    display: inline-block;
    padding: 6px 15px;
    background-color: var(--color-acento-divertido);
    color: var(--ds-white);
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: bold;
    transition: background-color 0.3s ease;
    align-self: flex-start; /* Alinea el botón a la izquierda */
}

.horizontal-game-card .btn-secondary-small:hover {
    background-color: #256bb8;
}

/* Media Queries para Responsividad */
@media (max-width: 768px) {
    .games-grid.featured-games-grid {
        grid-template-columns: 1fr; /* Una sola columna en móviles */
        padding: 0 10px; /* Ajusta padding en móviles */
    }

    .game-card {
        min-height: 450px; /* Ajuste de altura en móviles */
        margin: 0 auto; /* Centra la tarjeta */
        max-width: 350px; /* Ancho máximo en móviles */
    }

    .game-card .game-cover {
        height: 180px;
    }

    .game-card .game-character {
        top: 130px;
        width: 80px;
        height: 80px;
    }

    .game-card h3 {
        font-size: 1.6em;
        margin-top: 50px;
    }

    .horizontal-games-list {
        padding-left: 10px; /* Ajusta padding para el scroll en móviles */
        padding-right: 10px;
    }

    .horizontal-game-card {
        width: 250px; /* Reduce el ancho de las tarjetas horizontales en móviles */
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .games-grid.featured-games-grid {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas en tablets */
    }
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

.section {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  padding: 30px;
}

.section-lead {
  max-width: 600px;
  margin: 1rem auto 1.5rem;
}

.service a {
  color: #5b7abb;
  display: block;
}

.service h4 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: #56ceba;
  font-size: 1.3rem;
  margin: 1rem 0 0.6rem;
}

.services-grid {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

.service {
  background: #fff;
  margin: 20px;
  padding: 20px;
  border-radius: 4px;
  text-align: center;
  -webkit-box-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  border: 2px solid #e7e7e7;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.service:hover {
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
}

.service i {
  font-size: 3.45rem;
  margin: 1rem 0;
}

.service1 i,
.service1 h4,
.service1 .cta {
  color: #42b7ca;
}

.service1:hover {
  border: 2px solid #42b7ca;
}

.service2 i,
.service2 h4,
.service2 .cta {
  color: #425fca;
}

.service2:hover {
  border: 2px solid #425fca;
}

.service3 i,
.service3 h4,
.service3 .cta {
  color: #9c42ca;
}

.service3:hover {
  border: 2px solid #9c42ca;
}

.service .cta span {
  font-size: 0.6rem;
}

.service > * {
  flex: 1 1 100%;
}

.service .cta {
  align-self: flex-end;
}

@media all and (max-width:900px) {
  .services-grid {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
  }
}

@layer library, reset, base, demo;
@import 'https://unpkg.com/open-props@2.0.0-beta.5' layer(library);
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap');

@layer reset {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }
  :where(:not(dialog)) {
    margin: 0;
  }
}
@layer base {
  html {
    --nav-block-size: 74px;
    --brand-gradient: linear-gradient(227deg,
      #1400c7 0%,
      #00bbff 100%);
    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }
  body {
    font-family: 'Inter', sans-serif;
    min-block-size: 100dvb;
    timeline-scope: --content-1, --content-2, --content-3, --content-4, --content-5, --content-6;
  }
}

@layer demo {
  .navbar {
    min-block-size: var(--nav-block-size);
    display: grid;
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    background-color: white;
    z-index: var(--layer-3);
    place-items: center end;
    padding-block: var(--size-3);
    padding-inline: var(--size-5);
    @media (width >=600px) {
      padding-inline: 6dvi;
    }
  }

  .nav-cta-btn {
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-7);
    inline-size: max-content;
    white-space: nowrap;
    text-decoration: none;
    padding-block: var(--size-3);
    padding-inline: var(--size-7);
    border: var(--border-size-2) solid transparent;
    color: black;
    position: relative;
    isolation: isolate;

    background: linear-gradient(white, white) padding-box,
      var(--brand-gradient) border-box;
    border-radius: var(--radius-6);
    overflow: hidden;

    &::before {
      content: '';
      display: block;
      position: absolute;
      inset: 0;

      background: var(--brand-gradient);
      mix-blend-mode: screen;
    }

    &:hover {
      color: white;

      &::before {
        background: var(--brand-gradient) padding-box,
          var(--brand-gradient) border-box;
        background-repeat: no-repeat;
        background-size: contain;
        mix-blend-mode: normal;
        z-index: -1;
      }
    }
  }

  .section {
    --section-block-size: max(400px, 100dvb);
    display: grid;
    background-color: white;
    min-block-size: var(--section-block-size);
    position: relative;
    block-size: 100%;
    display: grid;

    >* {
      grid-area: 1/1;
    }
  }

  .section-wrapper {
    position: relative;
    display: grid;

    @media (width >=960px) {
      grid-template-columns: 1fr 1fr;
    }

    @media (width < 960px) {
      padding-block-start: calc(var(--nav-block-size) + var(--size-7));
      padding-block-end: var(--size-7);
    }
  }

  .video {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    position: relative;
    z-index: -1;
  }

  .content-wrapper {
    display: grid;

    @media (width < 960px) {
      gap: var(--size-7);
    }
  }

  .meta {
    display: grid;
    gap: var(--size-3);
  }

  .content {
    display: grid;
    inline-size: 100%;
    place-items: center;
    padding-block: var(--size-7);
    padding-inline: var(--size-5);

    @media (width >=960px) {
      padding: var(--size-10);
      min-block-size: 100cqb;
      place-items: center end;
    }

    @media (width < 960px) {
      gap: var(--size-5);
    }
  }

  .mobile-visual {
    inline-size: 100%;
    aspect-ratio: var(--ratio-square);

    @media (width >=960px) {
      display: none;
    }
  }

  .headline {
    font-size: var(--font-size-7);
    font-weight: var(--font-weight-4);
    max-inline-size: var(--size-content-1);
    text-wrap: pretty;

    @media (width < 960px) {
      font-size: var(--font-size-6);
    }
  }

  .desc {
    font-size: var(--font-size-4);
    line-height: 1.5;
    max-inline-size: 40ch;
    text-wrap: pretty;

    @media (width < 960px) {
      font-size: var(--font-size-3);
    }
  }

  .visual {
    display: grid;
    position: sticky;
    block-size: var(--section-block-size);
    inset-block-start: 0;
    container-type: size;

    @media (width < 960px) {
      display: none;
    }
  }

  .card-wrapper {
    container-type: size;
    display: grid;
    place-items: center;
    overflow: clip;

    >* {
      grid-area: 1/1;
    }
  }

  .card {
    aspect-ratio: var(--ratio-square);
    inline-size: 70cqi;
    border-radius: var(--radius-3);
    scale: 0.4;
  }

  .card-img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* Animaciones para las cards */
  .card-1 {
    animation-timeline: --content-1;
    animation-name: slide-up-first-card;
    scale: 1;
    /* Agregado para mantener el estado final */
    animation-fill-mode: forwards;
  }

  .card-2 {
    animation-timeline: --content-2;
    animation-name: slide-up-card;
    translate: -35cqi 30cqb;
    opacity: 0.3;
    /* Agregado para mantener el estado final */
    animation-fill-mode: forwards;
  }

  .card-3 {
    animation-timeline: --content-3;
    animation-name: slide-up-card;
    translate: 0cqi 50cqb;
    opacity: 0.5;
    /* Agregado para mantener el estado final */
    animation-fill-mode: forwards;
  }

  .card-4 {
    animation-timeline: --content-4;
    animation-name: slide-up-card;
    translate: 45cqi 40cqb;
    opacity: 0.5;
    /* Agregado para mantener el estado final */
    animation-fill-mode: forwards;
  }

  .card-5 {
    animation-timeline: --content-5;
    animation-name: slide-up-card;
    translate: 20cqi 70cqb;
    opacity: 0.4;
    /* Agregado para mantener el estado final */
    animation-fill-mode: forwards;
  }

  .card-6 {
    animation-timeline: --content-6;
    animation-name: slide-up-card;
    translate: 55cqi 80cqb;
    opacity: 0.35;
    /* Agregado para mantener el estado final */
    animation-fill-mode: forwards;
  }

  /* Textos destacados */
  .content-1 {
    --_text-gradient: linear-gradient(227deg, #1400c7 0%, #00bbff 100%);
    view-timeline-name: --content-1;
  }

  .content-2 {
    --_text-gradient: linear-gradient(227deg, #28dc28 0%, #00bbff 100%);
    view-timeline-name: --content-2;
  }

  .content-3 {
    --_text-gradient: linear-gradient(227deg, #1400c7 0%, #b800b1 100%);
    view-timeline-name: --content-3;
  }

  .content-4 {
    --_text-gradient: linear-gradient(227deg, #b800b1 0%, #f50000 100%);
    view-timeline-name: --content-4;
  }

  .content-5 {
    --_text-gradient: linear-gradient(227deg, #ff8c00 0%, #ffd700 100%);
    view-timeline-name: --content-5;
  }

  .content-6 {
    --_text-gradient: linear-gradient(227deg, #0077ff 0%, #00ffee 100%);
    view-timeline-name: --content-6;
  }

  .text-highlight {
    background: var(--_text-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }

  /* Animaciones keyframes */
  @keyframes update-hue {
    0% {
      filter: hue-rotate(210deg);
    }
    25% {
      filter: hue-rotate(150deg);
    }
    45% {
      filter: hue-rotate(300deg);
    }
    60% {
      filter: hue-rotate(4deg);
    }
  }

  @keyframes slide-up-first-card {
    0% {
      translate: 0;
      opacity: 1;
      scale: 1;
    }
    50% {
      translate: 0;
      opacity: 1;
      scale: 1;
    }
    90% {
      translate: 0 -50cqi;
      scale: 0.6;
      opacity: 0.5;
    }
    100% {
      translate: 0 -100cqi;
      opacity: 0;
      scale: 0.4;
    }
  }

  @keyframes slide-up-card {
    50% {
      opacity: 1;
      translate: 0;
      scale: 1;
    }
    90% {
      opacity: 0.5;
      scale: 0.6;
      translate: 0 -50cqb;
    }
    100% {
      translate: 0 -100cqi;
      opacity: 0;
    }
  }

  .video-visual {
    inline-size: 100%;
    block-size: var(--section-block-size);
    display: block;
    position: sticky;
    inset-block-start: 0;
    isolation: isolate;
    filter: hue-rotate(210deg);
    animation-timing-function: step-end;
    animation-fill-mode: forwards;
    animation-name: update-hue;
    animation-timing-function: linear;
  }

  @media (width < 960px) {
    .video-visual {
      display: none;
    }
  }
}
/* --- Estilos generales para las secciones (ajustados para el nuevo diseño de tarjeta) --- */
.content-section {
    padding: 20px; /* Espaciado interno para cada sección */
    margin-bottom: 20px; /* Espacio entre las secciones (si no están en el mismo contenedor flex) */
    background-color: #fff; /* Color de fondo blanco, similar a .service */
    border: 2px solid #fafafa; /* Fixed border color, similar to accent color */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08); /* Sombra similar a .service:hover, applied as default */
    box-sizing: border-box; /* Incluye padding y border en el ancho total */
    display: flex; /* Usa flexbox para alinear contenido interno verticalmente */
    flex-direction: column; /* Apila los elementos internos por defecto */
    transition: all 0.3s ease; /* Transición para efectos hover */
}

.content-section:hover {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08); /* Keep the same shadow on hover or adjust */
    transform: translateY(-5px); /* Add transform on hover for consistency */
}

.content-section h2 {
    color: #5a5c5b; /* Color para los títulos de sección, similar a service1 h4 */
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.8em;
}

.content-section p {
    color: #333; /* Color para los párrafos (color-texto-principal) - keeping this readable */
    line-height: 1.6;
    margin-bottom: 20px;
}

/* --- Contenedor principal para las dos columnas --- */
.two-column-layout {
    display: flex; /* Habilita Flexbox */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea en pantallas pequeñas */
    gap: 20px; /* Espacio entre las columnas */
    justify-content: center; /* Centra las columnas horizontalmente */
    align-items: stretch; /* Asegura que las columnas se estiren a la altura de la más alta */
    padding: 20px; /* Espacio alrededor de todo el layout */
    max-width: 1075px; /* Ancho máximo opcional para el contenedor principal */
    margin: 0 auto; /* Centra el contenedor principal */
}

/* --- Estilos para cada columna (las secciones individuales) --- */
.two-column-layout .content-section {
    flex: 1 1 calc(50% - 10px); /* Ajuste preciso para 2 columnas con gap de 20px */
    min-width: 300px; /* Ancho mínimo para cada columna antes de envolverse */
    margin-bottom: 0; /* Elimina margen inferior cuando están en un contenedor flex */
}

/* --- Estilos para las listas de tarjetas (Ganadores y Descuentos) --- */
.card-list {
    flex-grow: 1; /* Permite que la lista de tarjetas ocupe el espacio vertical disponible */
    max-height: 500px; /* Define una altura máxima para la lista de tarjetas */
    overflow-y: auto; /* Habilita el scroll vertical cuando el contenido excede el max-height */
    padding-right: 10px; /* Espacio para el scrollbar */
    display: flex;
    flex-direction: column; /* Apila las tarjetas verticalmente */
    gap: 15px; /* Espacio entre cada tarjeta */
    /* Estilos para el scrollbar (Webkit) */
    scrollbar-width: thin; /* Para Firefox */
    scrollbar-color: #2e80cc transparent; /* Para Firefox (color-acento-divertido) */
}

.card-list::-webkit-scrollbar {
    width: 8px; /* Ancho del scrollbar */
}

.card-list::-webkit-scrollbar-track {
    background: transparent; /* Fondo transparente de la pista del scrollbar */
}

.card-list::-webkit-scrollbar-thumb {
    background-color: #2e80cc; /* Color del "pulgar" del scrollbar (color-acento-divertido) */
    border-radius: 10px;
    border: 2px solid transparent;
}

/* --- Estilos para cada "Tarjeta de Perfil" (Ganador/Descuento) --- */
.profile-card {
    display: flex; /* Para poner imagen y texto en línea */
    align-items: center; /* Alinea verticalmente los elementos */
    background-color: #fff; /* Fondo blanco, similar a .service */
    border: 2px solid #56ceba; /* Fixed border color, similar to accent color */
    border-radius: 8px;
    padding: 15px;
    gap: 15px; /* Espacio entre la imagen y el texto */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08); /* Sombra similar a .service:hover, applied as default */
    transition: all 0.3s ease; /* Transición para efectos hover */
    flex-shrink: 0; /* Evita que las tarjetas se encojan en un contenedor flex */
    min-height: 100px; /* Altura mínima para cada tarjeta */
}

.profile-card:hover {
    transform: translateY(-5px); /* Levanta la tarjeta ligeramente al pasar el ratón */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08); /* Consistent shadow on hover */
}

.profile-card img {
    width: 70px; /* Tamaño fijo para la imagen de perfil/logo */
    height: 70px;
    border-radius: 50%; /* Circular para perfiles */
    object-fit: cover;
    border: 2px solid #2e80cc; /* Borde acentuado (color-acento-divertido) */
    flex-shrink: 0; /* Asegura que la imagen no se encoja */
}

.profile-card .card-info {
    flex-grow: 1; /* Permite que el texto ocupe el espacio restante */
    text-align: left;
}

.profile-card .card-info h4 {
    font-size: 1.1em;
    color: #080808; /* (color-acento-retro) - keeping this from your variables */
    margin: 0 0 5px 0; /* Ajusta márgenes para el título dentro de la tarjeta */
    text-transform: none; /* No en mayúsculas */
    text-align: left;
}

.profile-card .card-info p {
    font-size: 0.9em;
    color: #333; /* (color-texto-principal) */
    margin: 0; /* Elimina márgenes por defecto */
    line-height: 1.4;
    text-align: left;
}

.profile-card .card-info p span {
    font-weight: bold;
    color: #2e80cc; /* Resalta el código/premio (color-acento-divertido) */
}

.profile-card .discount-code {
    margin-top: 5px; /* Espacio adicional para el código de descuento */
}

/* --- Media query para pantallas más pequeñas (Responsive) --- */
@media (max-width: 768px) {
    .two-column-layout {
        flex-direction: column; /* Apila las columnas verticalmente en pantallas pequeñas */
        align-items: stretch; /* Estira las secciones apiladas al ancho completo */
    }

    .two-column-layout .content-section {
        max-width: 100%; /* En pantallas pequeñas, cada sección ocupa el ancho completo */
        min-width: unset; /* Elimina la restricción de ancho mínimo cuando están apiladas */
        margin-bottom: 20px; /* Vuelve a añadir margen entre las secciones apiladas */
    }

    .card-list {
        max-height: 400px; /* Ajusta la altura máxima para el scroll en móvil si es necesario */
    }

    .profile-card {
        flex-direction: row; /* Mantener imagen y texto en fila incluso en móviles */
        align-items: center;
        padding: 10px;
        gap: 10px;
    }

    .profile-card img {
        width: 60px;
        height: 60px;
    }

    .profile-card .card-info h4 {
        font-size: 1em;
    }

    .profile-card .card-info p {
        font-size: 0.85em;
    }
}

@media (max-width: 480px) {
    .content-section {
        padding: 10px; /* Reduce el padding en pantallas muy pequeñas */
    }
}

/* --- Estilos para la sección "Participa en la Comunidad" --- */
/* Estas reglas se aplican a la sección principal */
.community-section {
    /* Si necesitas ajustes específicos para esta sección que no estén en .content-section */
    /* Por ejemplo, un max-width diferente o padding adicional */
    padding: 20px; /* Consistente con .content-section */
    margin-bottom: 20px;
    background-color: #f9f9f9; /* Consistente con .content-section background */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

/* Títulos dentro de esta sección */
.community-section .other-games-title {
    color: #333; /* Consistente con .content-section h2 */
    margin-bottom: 10px;
    font-size: 1.8em; /* Ajustar según necesidad, similar a h2 */
}

/* Párrafos dentro de esta sección */
.community-section p {
    color: #666; /* Consistente con .content-section p */
    line-height: 1.6;
    margin-bottom: 20px; /* Espacio antes de la cuadrícula */
}

/* --- Contenedor de la cuadrícula de la comunidad (Funciona como el "two-column-layout") --- */
.community-grid {
    display: flex; /* Habilita Flexbox para las tarjetas */
    flex-wrap: wrap; /* Permite que las tarjetas se envuelvan a la siguiente línea */
    gap: 20px; /* Espacio entre las tarjetas */
    justify-content: center; /* Centra las tarjetas horizontalmente */
    align-items: stretch; /* Asegura que las tarjetas se estiren a la altura de la más alta */
}

/* --- Estilos para cada tarjeta de la comunidad (Columnas individuales) --- */
.community-card {
    flex: 1 1 calc(50% - 10px); /* Ocupa casi el 50% con un gap de 20px */
    min-width: 300px; /* Ancho mínimo antes de que la tarjeta se envuelva */
    background-color: #FFFFFF; /* Fondo blanco para las tarjetas */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra para la tarjeta */
    padding: 25px; /* Espaciado interno de la tarjeta */
    box-sizing: border-box;
    text-align: center; /* Centra el contenido de la tarjeta */
    display: flex; /* Flexbox para organizar contenido interno */
    flex-direction: column; /* Apila los elementos internos */
    align-items: center; /* Centra horizontalmente los elementos apilados */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Transición para hover */
}

.community-card:hover {
    transform: translateY(-5px); /* Efecto de elevación al pasar el ratón */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada al pasar el ratón */
}

.community-card .community-image {
    max-width: 100%; /* Asegura que la imagen no desborde la tarjeta */
    height: auto; /* Mantiene la proporción de la imagen */
    border-radius: 4px; /* Ligeros bordes redondeados para la imagen */
    margin-bottom: 15px; /* Espacio debajo de la imagen */
}

.community-card h3 {
    color: #333; /* Color para el título de la tarjeta */
    font-size: 1.4em;
    margin-top: 0;
    margin-bottom: 10px;
}

.community-card p {
    color: #666; /* Color para el párrafo de la tarjeta */
    font-size: 0.95em;
    line-height: 1.5;
    margin-bottom: 20px;
    flex-grow: 1; /* Permite que el párrafo ocupe el espacio disponible y empuje el botón hacia abajo */
}

.community-card .btn {
    display: inline-block; /* Asegura que el botón se comporte correctamente */
    padding: 10px 20px;
    background-color: #2e80cc; /* Color de acento divertido para el botón */
    color: #FFFFFF; /* Texto blanco en el botón */
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
}

.community-card .btn:hover {
    background-color: #1a6bb5; /* Color más oscuro al pasar el ratón */
}

.community-card .btn .button-link {
    /* Si tienes estilos específicos para el span dentro del botón, puedes agregarlos aquí */
}

/* --- Media query para pantallas más pequeñas (Responsive) --- */
@media (max-width: 768px) {
    .community-grid {
        flex-direction: column; /* Apila las tarjetas verticalmente en pantallas pequeñas */
        align-items: center; /* Centra las tarjetas apiladas */
    }

    .community-card {
        max-width: 100%; /* Las tarjetas ocupan el ancho completo cuando están apiladas */
        min-width: unset; /* Elimina el min-width en móvil */
        margin-bottom: 20px; /* Añade espacio entre tarjetas apiladas */
    }
}

@media (max-width: 480px) {
    .community-card {
        padding: 20px; /* Reduce el padding en pantallas muy pequeñas */
    }
    .community-card h3 {
        font-size: 1.2em;
    }
    .community-card p {
        font-size: 0.9em;
    }
}

/* Estilos para el aside */
.sidebar-aside {
    background-color: #FFFFFF; /* Fondo para el aside */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.507); /* Sombra consistente */
}

.sidebar-aside h3 {
    color: #080808; /* Color de títulos del aside */
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.5em;
    text-align: center; /* Para el "Accesos Rapidos" */
}

/* Estilos para las listas */
.sidebar-aside ul {
    list-style: none; /* Quita los puntos de la lista */
    padding: 0;
    margin-bottom: 20px; /* Espacio entre las secciones de la lista */
}

.sidebar-aside li {
    margin-bottom: 8px; /* Espacio entre cada elemento de la lista */
}

/* --- 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. */

.forum-section {
    /* Box Model */
    padding: 60px 0; /* Espaciado interno, horizontal lo maneja el wrapper */
    margin-top: 50px; /* Margen superior para separarlo de la sección anterior */

    /* Appearance */
    background-color: var(--ds-dark-gray); /* Fondo oscuro para destacar la sección */
    border-top: 3px solid var(--ow-blue); /* Borde superior con color de marca */
    border-bottom: 3px solid var(--ow-blue); /* Borde inferior con color de marca */
    box-shadow: 0 0 25px rgba(0, 123, 255, 0.3); /* Sombra suave de brillo */

    /* Text */
    text-align: center; /* Centrar el título y la descripción de la sección */
}

.forum-section h2 {
    /* Text */
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--ds-white);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
    text-align: center; /* Asegura el centrado */

    /* Spacing */
    margin-bottom: 15px;
}

.forum-section p {
    /* Text */
    font-size: 1.2rem;
    color: var(--ds-text-dim);
    text-align: center; /* Asegura el centrado */

    /* Spacing & Sizing */
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

#foro-contenido {
    /* Layout */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el contenido verticalmente */
    align-items: center; /* Centra el contenido horizontalmente */

    /* Box Model & Sizing */
    padding: 30px;
    max-height: 500px; /* Altura máxima para el scroll */
    overflow-y: auto; /* Permite scroll vertical */

    /* Appearance */
    background-color: var(--ds-light-gray); /* Fondo ligeramente más claro para el contenido del foro */
    border-radius: 10px;
    border: 1px solid rgba(0, 123, 255, 0.4); /* Borde sutil */
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4); /* Sombra interna para profundidad */

    /* Text */
    color: var(--ds-white); /* Color de texto predeterminado para el contenedor */
}

.msg {
    /* Layout & Sizing */
    display: block; /* **IMPORTANTE:** Vuelve a ser un elemento de bloque para que los elementos hijos se apilen correctamente. */
    width: 100%; /* Ocupa todo el ancho disponible del contenedor */
    max-width: 600px; /* Limita el ancho máximo para mensajes largos */
    flex-shrink: 0; /* Evita que los mensajes se encojan */

    /* Box Model */
    padding: 15px 20px;
    margin-bottom: 15px; /* Espacio entre mensajes */

    /* Appearance */
    background-color: #242424; /* Fondo para cada burbuja de mensaje */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);

    /* Text */
    text-align: left; /* Alinea el texto del mensaje a la izquierda */
    overflow-wrap: break-word; /* Asegura que las palabras largas se rompan y se ajusten (moderno) */
    word-break: break-word; /* Soporte para navegadores más antiguos */

    /* Animation */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.msg strong {
    /* Text */
    color: var(--ow-blue); /* Color de marca para el nombre de usuario */
    font-weight: 700;
    margin-right: 10px; /* Añade un espacio a la derecha del nombre */
}

.msg small {
    /* Layout & Text */
    display: inline; /* **IMPORTANTE:** La fecha vuelve a ser un elemento en línea */
    font-size: 0.85rem;
    color: var(--ds-text-dim); /* Gris tenue para la fecha/hora */

    /* Spacing */
    /* **IMPORTANTE:** Elimina el margen superior para que se alinee con el nombre de usuario */
    margin-top: 0;
}

/* Asegura que el párrafo del mensaje se alinee debajo del autor/fecha */
.msg p {
    display: block; /* Fuerza a que el párrafo inicie en una nueva línea */
    margin-top: 10px; /* Añade un espacio entre el autor/fecha y el contenido del mensaje */
    font-size: 1em;
    line-height: 1.6;
    color: var(--ds-white);
}

/* Estilo para los mensajes de carga/error del JS */
#foro-contenido {
    /* Layout */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Alinea el contenido a la parte superior */
    align-items: flex-start; /* **IMPORTANTE:** Alinea los mensajes a la izquierda */

    /* Box Model & Sizing */
    padding: 30px;
    max-height: 500px; /* Altura máxima para el scroll */
    overflow-y: auto; /* Permite scroll vertical */

    /* Appearance */
    background-color: var(--ds-light-gray); /* Fondo ligeramente más claro para el contenido del foro */
    border-radius: 10px;
    border: 1px solid rgba(0, 123, 255, 0.4); /* Borde sutil */
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4); /* Sombra interna para profundidad */

    /* Text */
    color: var(--ds-white); /* Color de texto predeterminado para el contenedor */
}
/* Estilos de la barra de scroll para el contenedor de mensajes */
#foro-contenido::-webkit-scrollbar {
    width: 10px; /* Ancho del scrollbar */
    background-color: var(--ds-light-gray); /* Fondo del track */
    border-radius: 5px;
}

#foro-contenido::-webkit-scrollbar-thumb {
    background-color: var(--ow-blue); /* Color del "pulgar" del scrollbar */
    border-radius: 5px;
    border: 2px solid var(--ds-light-gray); /* Borde para el pulgar */
}

#foro-contenido::-webkit-scrollbar-thumb:hover {
    background-color: #0099ff; /* Color más claro al pasar el ratón */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .forum-section {
        padding: 40px 15px;
    }
    .forum-section h2 {
        font-size: 2.2rem;
    }
    .forum-section p {
        font-size: 1rem;
        margin-bottom: 30px;
    }
    #foro-contenido {
        padding: 20px;
        max-height: 400px; /* Menor altura máxima en móviles */
    }
    .msg {
        padding: 12px 15px;
        margin-bottom: 10px;
    }
    .msg small {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .forum-section h2 {
        font-size: 1.8rem;
    }
    #foro-contenido {
        padding: 15px;
    }
}










.panel-section-centered {
    max-width: 800px; /* Ancho máximo para el panel, ajusta si lo necesitas más ancho */
    margin: 50px auto; /* Centra el panel horizontalmente y añade margen vertical */
    padding: 30px; /* Padding interno de la sección */
    background-color: var(--color-contenedor-blanco); /* Fondo claro para la tarjeta del panel */
    border-radius: 12px;
    box-shadow: 0 8px 25px var(--color-sombra-contenedor); /* Sombra consistente */
    text-align: center; /* Centra el contenido general del panel */
    box-sizing: border-box; /* Asegura que padding no aumente el ancho total */
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Espacia el botón y el título */
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-borde-claro); /* Separador visual */
}

.panel-header h1 {
    color: var(--color-acento-retro); /* Color para el título principal */
    font-family: var(--font-heading);
    font-size: 2.2em;
    margin: 0; /* Elimina márgenes por defecto */
    text-transform: uppercase;
    flex-grow: 1; /* Permite que el título ocupe el espacio restante */
    text-align: center; /* Centra el título */
}

.back-button {
    background-color: var(--color-acento-divertido); /* Usa el color de tus botones principales */
    color: var(--ds-white);
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    display: inline-flex; /* Para alinear el icono con el texto */
    align-items: center;
    gap: 8px; /* Espacio entre el icono y el texto */
    font-size: 0.9em;
}

.back-button:hover {
    background-color: #256bb8; /* Tono más oscuro al pasar el ratón */
}

.user-profile {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-borde-claro);
}

.user-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%; /* Circular */
    object-fit: cover;
    border: 4px solid var(--color-acento-divertido); /* Borde con color de acento */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin-bottom: 15px;
}

.user-id {
    font-size: 1.1em;
    color: var(--color-texto-principal);
    margin: 0;
}

.user-id span {
    font-weight: bold;
    color: var(--color-acento-retro); /* Resalta el ID */
}

.message-form-section,
.responses-section {
    margin-bottom: 30px;
}

.message-form-section h2,
.responses-section h2 {
    color: var(--color-acento-retro);
    font-family: var(--font-heading);
    font-size: 1.8em;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.message-form label {
    display: block;
    text-align: left;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--color-texto-principal);
}

.message-form textarea {
    width: calc(100% - 20px); /* Ajusta el ancho para el padding */
    padding: 10px;
    border: 1px solid var(--color-borde-claro);
    border-radius: 8px;
    background-color: var(--ds-light-gray); /* Un color de fondo para el textarea */
    color: var(--color-texto-principal);
    font-family: inherit; /* Hereda la fuente del cuerpo */
    font-size: 1em;
    resize: vertical; /* Permite redimensionar verticalmente */
    margin-bottom: 20px;
    box-sizing: border-box; /* Incluye padding y border en el ancho total */
}

.message-form textarea:focus {
    border-color: var(--color-acento-divertido);
    outline: none;
    box-shadow: 0 0 0 3px rgba(46, 128, 204, 0.2); /* Sombra de enfoque */
}

.send-button {
    background-color: var(--color-acento-divertido);
    color: var(--ds-white);
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: auto; /* Ajusta el ancho al contenido */
}

.send-button:hover {
    background-color: #1a6bb5;
}

.responses-list {
    max-height: 400px; /* Ajusta si necesitas más o menos espacio para las respuestas */
    overflow-y: auto;
    padding-right: 10px; /* Para el scrollbar */
    margin-left: auto;
    margin-right: auto;
    width: 100%; /* Asegura que la lista ocupe el ancho disponible */
}

.message-card {
    background-color: #f0f0f0; /* Un color ligeramente diferente para los mensajes */
    border-color: var(--color-borde-claro);
    align-items: flex-start; /* Alinea el contenido a la parte superior */
    text-align: left; /* Alinea el texto a la izquierda dentro de la tarjeta */
}

.message-card .card-info h4 {
    color: var(--color-acento-retro);
    margin-bottom: 5px;
}

.message-card .card-info p {
    color: var(--color-texto-principal);
}

.no-responses {
    color: var(--color-texto-principal);
    text-align: center;
    font-style: italic;
    padding: 20px;
    background-color: var(--ds-light-gray);
    border-radius: 8px;
}

/* Media Queries para Responsividad en el Panel de Usuario */
@media (max-width: 768px) {
    .panel-section-centered { /* Ajustar la clase aquí también */
        padding: 20px;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .panel-header {
        flex-direction: column; /* Apila el botón y el título en móviles */
        align-items: center;
        gap: 15px;
        margin-bottom: 20px;
    }

    .panel-header h1 {
        font-size: 1.8em;
    }

    .back-button {
        width: 100%; /* El botón ocupa todo el ancho */
        justify-content: center; /* Centra el contenido del botón */
    }

    .user-avatar {
        width: 100px;
        height: 100px;
    }

    .message-form textarea {
        width: 100%; /* Asegura que ocupe todo el ancho disponible */
    }

    .send-button {
        width: 100%; /* El botón de envío ocupa todo el ancho */
    }

    .responses-list {
        max-height: 300px; /* Ajusta la altura de la lista de respuestas para móviles */
    }
}

@media (max-width: 480px) {
    .panel-section-centered { /* Ajustar la clase aquí también */
        padding: 15px;
    }

    .panel-header h1 {
        font-size: 1.5em;
    }

    .message-form-section h2,
    .responses-section h2 {
        font-size: 1.5em;
    }
}