.elementor-9458 .elementor-element.elementor-element-31a58b8{--display:flex;--min-height:95vh;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--overlay-opacity:0.5;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:32px;--padding-bottom:32px;--padding-left:32px;--padding-right:32px;}.elementor-9458 .elementor-element.elementor-element-31a58b8:not(.elementor-motion-effects-element-type-background), .elementor-9458 .elementor-element.elementor-element-31a58b8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #EEF2F3 0%, #DCE5E700 100%);}.elementor-9458 .elementor-element.elementor-element-31a58b8::before, .elementor-9458 .elementor-element.elementor-element-31a58b8 > .elementor-background-video-container::before, .elementor-9458 .elementor-element.elementor-element-31a58b8 > .e-con-inner > .elementor-background-video-container::before, .elementor-9458 .elementor-element.elementor-element-31a58b8 > .elementor-background-slideshow::before, .elementor-9458 .elementor-element.elementor-element-31a58b8 > .e-con-inner > .elementor-background-slideshow::before, .elementor-9458 .elementor-element.elementor-element-31a58b8 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(180deg, #DCE5E7 0%, #DCE5E700 100%);}.elementor-9458 .elementor-element.elementor-element-f1ff8c7{width:100%;max-width:100%;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-9458 .elementor-element.elementor-element-31a58b8{--padding-top:32px;--padding-bottom:32px;--padding-left:016px;--padding-right:0px;}}@media(min-width:768px){.elementor-9458 .elementor-element.elementor-element-31a58b8{--content-width:1240px;}}/* Start custom CSS for html, class: .elementor-element-f1ff8c7 */.mainTitle{
    color: #384751;
    font-weight: bold;
    font-size: 40px;
}

.mainTitle span {
    text-decoration-line: underline!important;
    text-decoration-color: #8cdcbd;
    text-decoration-thickness: 0.45em;
    text-decoration-skip-ink: none;
    text-underline-offset: -0.1em;
    -webkit-text-decoration-line: underline!important;
    -webkit-text-decoration-color: #8cdcbd;
    -webkit-text-decoration-thickness: 0.45em;
    -webkit-text-decoration-skip-ink: none;
    -webkit-text-underline-offset: -0.1em;
}
/*Ganadores por mes y grupo*/
.accordionSectionTitle {
	margin-top: 32px;	
}

@media (max-width: 767px) {
.ganadoresGrupoContainer {
	width: 100%!important;
	margin-right: 16px;
	}
	.accordionItem {
		margin-right: 16px;
	}}}

#listaGanadoresMensuales {
  /* Puedes añadir estilos generales aquí si es necesario */
  /* ej: margin-top: 20px; */
}

/* Mensaje inicial de carga o errores generales DENTRO del contenedor */
#listaGanadoresMensuales > p:first-child {
  font-style: italic;
  color: #777;
  padding: 15px;
}

/* Contenedor para CADA mes (tanto el visible como los del acordeón) */
.monthWinnersContainer {
  margin-bottom: 16px;
}

/* Título general para CADA mes (H2) */
.monthlyWinnersTitle {
  font-size: 1.8em;
  color: #384751;
	font-weight: 600;
  margin-top: 0; 
}

/* Mensaje cuando NO hay ganadores en un mes específico */
.noWinnersMessage {
  font-style: italic;
  color: #666;
  margin: 15px 0; /* Espacio vertical */
  padding-left: 5px; /* Ligera indentación */
}

/* Wrapper interno para contenido FLEX en CUALQUIER mes */
.monthContentWrapper {
   display: flex;
   flex-direction: row; 
	flex-wrap: wrap;
	gap: 1% 1%;
}

/* --- Estilos para la Sección del Acordeón --- */

/* Título opcional que precede a los items del acordeón */
.accordionSectionTitle {
    font-size: 1.6em; 
		font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
}

/* Contenedor para todos los items del acordeón (opcional si se añadió en JS) */
.accordionWrapper {
    margin-bottom: 64px;
}

/* Cabecera Clickeable del Acordeón */
.accordionHeader {
  background-color: #FFFFFF; /* Fondo para indicar interactividad */
  padding: 12px 18px;
  cursor: pointer;
  border-radius: 4px; /* Redondeado completo si no está activo */
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s ease, border-radius 0.1s linear;
  margin-bottom: 0; /* Asegurar que no haya espacio extra bajo la cabecera */
}
.accordionHeader:hover {
  background-color: #FFFFFF;
}

/* Estilos cuando el acordeón está ABIERTO (activo) */
.accordionHeader.active {
   background-color: #FFFFFF;
   border-bottom-left-radius: 0; /* Quitar redondeo inferior para unirse al contenido */
   border-bottom-right-radius: 0;
   border-bottom-color: transparent;
}

/* Título H2 DENTRO de la cabecera del acordeón */
.accordionTitle {
  font-size: 1.4em; /* Más pequeño que el título principal */
  color: #444;
  margin: 0; /* Resetear márgenes */
  border: none; /* Resetear borde */
  padding: 0; /* Resetear padding */
}

/* Icono (+ / -) del Acordeón */
.accordionIcon {
  font-size: 1.6em;
  font-weight: bold;
  color: #01A767;
  margin-left: 15px;
  line-height: 1; /* Ajustar línea para centrado vertical */
}

/* Contenedor del Contenido del Acordeón (el que se anima) */
.accordionContent {
  display: none; /* OCULTO POR DEFECTO */
  overflow: hidden; /* Necesario para slideToggle */
}

/* Wrapper interno FLEX dentro del contenido del acordeón */
.accordionFlexWrapper {
   border-top: none; 
   padding: 20px 18px 10px 18px; 
		background: #FFFFFF;
   border-bottom-left-radius: 4px; 
   border-bottom-right-radius: 4px;
}

/* Wrapper interno FLEX del mes visible */
.visibleMonthContent {
    /* Puedes añadir estilos específicos si quieres que difiera del acordeón */
    /* Por ejemplo, sin borde o con más padding */
    padding: 10px 0 0 0; /* Ejemplo: Solo padding superior si no quieres borde */
}

.accordionItem {
	box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
}

.accordionContent .ganadoresGrupoContainer {
	box-shadow: none;
	border: 1px #e6e6e6 solid;
}

/* Contenedor general para un grupo y sus ganadores */
.ganadoresGrupoContainer {
	width: 49.5%;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px; /* Espacio entre grupos */
  border-radius: 4px;
  background-color: #ffffff; /* Fondo del contenedor del grupo */
}
/* Quitar margen inferior al último grupo dentro de su contenedor */
.monthContentWrapper > .ganadoresGrupoContainer:last-child {
    margin-bottom: 0;
}

/* Cabecera (área del título) dentro del contenedor del grupo */
.ganadoresGrupoHeader {
  padding: 12px 16px 4px 16px;
  border-top-left-radius: 4px; 
  border-top-right-radius: 4px;
}

/* Título del Grupo (H3) */
.ganadoresGrupoTitulo {
  font-size: 22px;
	font-weight: 600;
  color: #6E828F;
  margin: 0; /* Resetear márgenes */
}

/* Cuerpo (área de la lista) dentro del contenedor del grupo */
.ganadoresGrupoBody {
  padding: 0px 16px 12px 16px; /* Padding para la lista */
}

/* Lista de Ganadores (UL) */
.ganadoresGrupoLista {
  list-style: none; /* Quitar viñetas estándar */
  padding-left: 0; /* Sin indentación si no hay viñetas */
  margin: 0; /* Resetear márgenes */
}

/* Item de Ganador Individual (LI) */
.ganadoresGrupoLista li {
  padding: 4px 0 4px 15px; /* Padding izquierdo para indentar texto */
  color: #555;
  font-size: 0.95em;
  position: relative; 
}
/* Quitar borde inferior al último item */
.ganadoresGrupoLista li:last-child {
  border-bottom: none;
}

/* Viñeta personalizada (opcional) */
.ganadoresGrupoLista li::before {
    content: "•"; /* O '\2022' */
    color: #01A767; /* Color de la viñeta */
    font-weight: bold;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 4px; /* Ajustar verticalmente */
}

/* Separador entre meses (si lo estás usando y quieres estilizarlo) */
hr.monthSeparator {
    border: none;
    border-top: 1px dashed #ccc;
    margin-top: 30px;
    margin-bottom: 30px;
}/* End custom CSS */