/**
 * Listado de actividades y talleres — estilos del componente.
 *
 * Trasladado desde la caja de CSS global del maquetador (2026-09-22). Es un
 * traslado, no una reescritura: las reglas son las mismas y en el mismo orden.
 * Lo unico que cambia son los literales que tienen token en el :root del sitio.
 *
 * Los tokens se declaran en el :root global (caja del maquetador), no aqui: son
 * del sistema de diseño del sitio, no de este componente. Se usan **con
 * fallback** —var(--ep-blanco, #fff)— para que el componente siga renderizando
 * bien si algun dia esa declaracion desaparece.
 *
 * OJO con "ordenar" los grises: #fdfdfd/#fbfbfb en .cz-ws-item y
 * #fbfbfb/#f9f9f9 en .cz-ws-price son PARES DE ESTADO (normal/hover), no
 * duplicados. Unificarlos elimina el efecto hover.
 *
 * Ya no hay reglas de esqueleto: el listado viene renderizado del servidor, asi
 * que no existe el momento de carga que aquellas cubrian.
 */

/* -------------------------------------------------------------------------
   Estructura
   ---------------------------------------------------------------------- */

.cz-activities {
    display: flex;
    flex-flow: row wrap;
}
.cz-activities > div {
    display: block;
}
.cz-activities > .cz-filters {
    width: 38%;
    margin-right: 4%;
}
.cz-activities > .cz-activities-list {
    width: 58%;
}


/* -------------------------------------------------------------------------
   Filtrado y modo de visualizacion

   Lo que antes hacia Isotope. Filtrar es ocultar, no reposicionar: el
   documento coloca cada tarjeta en su sitio y no hay salto de maquetacion.
   ---------------------------------------------------------------------- */

/* Se declara con los mismos ancestros que las reglas de cuadricula porque, si
   no, `.cz-ws-list-grid > li { display: flex }` gana por especificidad y las
   fichas filtradas siguen viendose. El `!important` no hace falta: basta con
   empatar en ancestros y añadir la clase. */
.cz-ws-list > li.cz-oculto,
.cz-activities-column.cz-activities-list .cz-ws-list > li.cz-oculto,
.cz-activities-column.cz-activities-list .cz-ws-list.cz-ws-list-grid > li.cz-oculto {
    display: none;
}

.cz-view-toggle {
    display: flex;
    justify-content: flex-end;
    gap: 0.4em;
    margin-bottom: 1em;
}
.cz-view-toggle button {
    font-family: var(--ep-font-titulo, 'Aller', sans-serif);
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    background: var(--ep-blanco, #fff);
    color: var(--ep-texto, #333);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 3px;
    padding: 0.45em 0.8em;
    cursor: pointer;
}
.cz-view-toggle button:hover,
.cz-view-toggle button:focus-visible {
    border-color: var(--ep-100-og, #fead73);
}
.cz-view-toggle button.is-active {
    background: var(--ep-100-og, #fead73);
    border-color: var(--ep-100-og, #fead73);
    color: var(--ep-blanco, #fff);
}

/* -------------------------------------------------------------------------
   Modo cuadricula

   En lista la tarjeta se lee de izquierda a derecha; en cuadricula, de arriba
   abajo. Solo cambia la disposicion: el marcado es el mismo.

   Los selectores repiten los mismos ancestros que las reglas de la lista
   —`.cz-activities-column.cz-activities-list`— porque con menos pierden por
   especificidad y la tarjeta se queda en horizontal dentro de la celda.

   El numero de columnas base llega en `--cz-columnas` desde el shortcode.
   ---------------------------------------------------------------------- */

.cz-activities-column.cz-activities-list .cz-ws-list.cz-ws-list-grid {
    display: grid;
    grid-template-columns: repeat(var(--cz-columnas, 3), minmax(0, 1fr));
    gap: 1em;
    align-items: stretch;
}

/* El <li> pasa a flex para que el enlace ocupe de verdad todo el alto de su
   celda. Con `height: 100%` a secas dependemos de que el alto del <li> sea
   definido, y si no lo resuelve no hay espacio sobrante que repartir: la ficha
   se queda compacta y el pie no baja. */
.cz-activities-column.cz-activities-list .cz-ws-list.cz-ws-list-grid > li {
    display: flex;
}
.cz-activities-column.cz-activities-list .cz-ws-list.cz-ws-list-grid > li > a.cz-ws-item {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    flex: 1 1 auto;
    margin: 0;
}

/* Reparto vertical: la imagen y el pie conservan su tamaño, y el bloque de
   informacion se queda con todo el espacio que sobre. Eso es lo que empuja
   fecha y precio al fondo de la ficha. */
.cz-activities-column.cz-activities-list .cz-ws-list.cz-ws-list-grid > li > a.cz-ws-item > .cz-ws-img,
.cz-activities-column.cz-activities-list .cz-ws-list.cz-ws-list-grid > li > a.cz-ws-item > .cz-ws-meta,
.cz-activities-column.cz-activities-list .cz-ws-list.cz-ws-list-grid > li > a.cz-ws-item > .cz-ws-price {
    flex: 0 0 auto;
}

/* Cada bloque a ancho completo y alineado a la izquierda. */
.cz-activities-column.cz-activities-list .cz-ws-list.cz-ws-list-grid > li > a.cz-ws-item > .cz-ws-img,
.cz-activities-column.cz-activities-list .cz-ws-list.cz-ws-list-grid > li > a.cz-ws-item > .cz-ws-info,
.cz-activities-column.cz-activities-list .cz-ws-list.cz-ws-list-grid > li > a.cz-ws-item > .cz-ws-meta,
.cz-activities-column.cz-activities-list .cz-ws-list.cz-ws-list-grid > li > a.cz-ws-item > .cz-ws-price {
    width: 100%;
    align-items: flex-start;
}

/* En cuadricula el marco ocupa todo el ancho y un alto fijo, para que todas
   las fichas enseñen la imagen al mismo tamaño sea cual sea el original. Se
   ajusta con `--cz-alto-img`. */
.cz-activities-column.cz-activities-list .cz-ws-list.cz-ws-list-grid > li > a.cz-ws-item > .cz-ws-img {
    width: 100%;
    height: var(--cz-alto-img, 11em);
    padding: 0;
}

/* La informacion empuja al resto hacia abajo, de modo que las tarjetas de una
   misma fila alineen su pie aunque tengan textos de distinto largo. */
.cz-activities-column.cz-activities-list .cz-ws-list.cz-ws-list-grid > li > a.cz-ws-item > .cz-ws-info {
    /* Arriba y a la izquierda: sin esto hereda el centrado de la vista lista.
       Y al crecer, empuja fecha y precio al pie de la ficha, de modo que todas
       las de una misma fila los alinean aunque tengan textos distintos. */
    flex: 1 1 auto;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0.9em 1em 0.6em;
}

/* En lista el titulo lleva `margin-top: auto`, que forma parte del centrado
   vertical de la tarjeta horizontal. En cuadricula ese auto pelea contra el
   flex-start del bloque y empuja el texto hacia abajo, asi que se anula. */
.cz-activities-column.cz-activities-list .cz-ws-list.cz-ws-list-grid > li > a.cz-ws-item > .cz-ws-info .cz-ws-title {
    margin-top: 0;
}

.cz-activities-column.cz-activities-list .cz-ws-list.cz-ws-list-grid > li > a.cz-ws-item > .cz-ws-meta {
    /* Red de seguridad: si algun dia la informacion dejara de crecer, esto
       mantiene el pie abajo igualmente. */
    margin-top: auto;
    padding: 0 1em 0.7em;
}
/* En vertical, el borde lateral de la fecha no tiene sentido. */
.cz-activities-column.cz-activities-list .cz-ws-list.cz-ws-list-grid > li > a.cz-ws-item > .cz-ws-meta .cz-ws-date {
    padding-left: 0;
    border-left: 0;
    margin: 0 0 0.3em;
}

.cz-activities-column.cz-activities-list .cz-ws-list.cz-ws-list-grid > li > a.cz-ws-item > .cz-ws-price {
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4em;
    border-left: 0;
    border-top: 1px solid var(--ep-blanco, #fff);
    padding: 0.6em 1em;
}
.cz-activities-column.cz-activities-list .cz-ws-list.cz-ws-list-grid > li > a.cz-ws-item > .cz-ws-price .cz-ws-price,
.cz-activities-column.cz-activities-list .cz-ws-list.cz-ws-list-grid > li > a.cz-ws-item > .cz-ws-price .cz-ws-parts {
    margin: 0;
}

/* La rejilla colapsa por ancho, sea cual sea el numero de columnas pedido. */
@media (max-width: 979px) {
    .cz-activities-column.cz-activities-list .cz-ws-list.cz-ws-list-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 680px) {
    .cz-activities-column.cz-activities-list .cz-ws-list.cz-ws-list-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* -------------------------------------------------------------------------
   Filtros
   ---------------------------------------------------------------------- */

.cz-filters.mobile {
    display: none;
    position: fixed;
    z-index: 99999;
    background: var(--ep-blanco, #fff);
    width: 100%;
    height: 100%;
    padding: 30px;
    top: 0;
    left: 0;
}
.cz-activities .cz-activities-list .cz-filters-buttons {
    padding: 0.5em 0.5em 0.4em 1em;
    background: var(--ep-100-og, #fead73);
    border-radius: 4px;
    display: none;
    color: var(--ep-blanco, #fff);
    font-weight: bold;
    margin-bottom: 1.5em;
}
.cz-activities > .cz-filters > .cz-filters-inner {
    background: var(--ep-lg-gr, #f7f7f7);
    padding: 30px;
    /* Era `#fff`, que sobre este gris casi blanco es invisible. Solo no se
       notaba porque todo lo de dentro traia su propio color, hasta que los
       titulos de filtro dejaron de ser <h3> y pasaron a heredarlo. */
    color: var(--ep-texto, #333);
    border-radius: 4px;
}
.cz-filters .cz-filter,
.cz-filters .cz-sort {
    margin-bottom: 20px;
}
.cz-filters .cz-filter .cz-filter-title,
.cz-filters .cz-sort .cz-sort-title {
    font-family: var(--ep-font-titulo, 'Aller', sans-serif);
    font-size: 16px;
    font-weight: bold;
    color: var(--ep-texto, #333);   /* explicito: ya no son encabezados */
    margin: 0 0 5px;
}
.cz-filters .cz-filter .cz-value,
.cz-filters .cz-sort .cz-value {
    font-family: var(--ep-font-titulo, 'Aller', sans-serif);
    font-size: 12px;
    padding: 2px 6px;
    background: var(--ep-blanco, #fff);
    margin: 0 6px 6px 0;
    display: inline-block;
    color: var(--ep-texto, #333);
    border: 2px solid transparent;
    cursor: pointer;
}
.cz-filters .cz-filter .cz-value:hover,
.cz-filters .cz-filter .cz-value.active,
.cz-filters .cz-sort .cz-value:hover,
.cz-filters .cz-sort .cz-value.active {
    background: var(--ep-100-bl, #9adae9);
    color: var(--ep-blanco, #fff);
}
.cz-filters .cz-filter .cz-value.active,
.cz-filters .cz-sort .cz-value.active {
    border-color: var(--ep-blanco, #fff);
}

/* Ordenacion: la flecha se dibuja con bordes y rota segun asc/desc. */
.cz-filters .cz-sort .cz-value {
    padding-right: 20px;
    position: relative;
}
.cz-filters .cz-sort .cz-value:after {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-left: 1px solid var(--ep-texto, #333);
    border-bottom: 1px solid var(--ep-texto, #333);
    position: absolute;
    right: 8px;
    top: 8px;
}
.cz-filters .cz-sort .cz-value:hover:after,
.cz-filters .cz-sort .cz-value.active:after {
    border-color: var(--ep-blanco, #fff);
}
.cz-filters .cz-sort .cz-value.asc:after {
    transform: rotate(-45deg);
}
.cz-filters .cz-sort .cz-value.desc:after {
    top: 10px;
    transform: rotate(135deg);
}

/* -------------------------------------------------------------------------
   Video de promocion y resultado vacio
   ---------------------------------------------------------------------- */

.cz-external-video {
    width: 100%;
    position: relative;
    padding-bottom: 65%;
    height: 0;
    margin-bottom: 2em;
    box-shadow: 0.6em 0.6em 1.2em rgb(0 0 0 / 30%);
}
.cz-external-video iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}
.cz-activities-inner {
    position: relative;
}
.cz-empty-result {
    opacity: 0;
    position: absolute;
    pointer-events: none;
    padding: 45px;
    top: 0;
    left: 0;
    z-index: -1;
    background: var(--ep-lg-gr, #f7f7f7);
    font-family: var(--ep-font-titulo, 'Aller', sans-serif);
    text-align: center;
    color: #999;              /* gris propio del componente, sin token */
    width: 100%;
    transition: all .2s ease-in-out;
}
.cz-empty-result.show {
    opacity: 1;
}

/* -------------------------------------------------------------------------
   Tarjeta de actividad
   ---------------------------------------------------------------------- */

.cz-activities-column.cz-activities-list .cz-ws-list {
    margin: 0;
    list-style: none;
}
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item {
    display: flex;
    flex-flow: row wrap;
    position: relative;
    background: #fdfdfd;      /* par de estado con el :hover — no unificar */
    margin: 0 0 0.8em;
    cursor: pointer;
    box-shadow: 0.2em 0.2em 1em rgba(0, 0, 0, 0);
}
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item:hover {
    background: #fbfbfb;      /* par de estado — no unificar */
    box-shadow: 0.2em 0.2em 1em rgba(0, 0, 0, .1);
}
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item.finished {
    opacity: .6;
}
/* `> div` ademas de `> span`: .cz-ws-info paso a div para poder contener el
   <h3> del titulo. El resto de columnas siguen siendo span. */
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > span,
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > div {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 10px 20px;
}

/* Imagen.

   El marco es quien fija el tamaño; la imagen se adapta a el. La imagen va
   posicionada en absoluto a proposito: en el flujo, una foto muy alta imponia
   su proporcion natural —`height: 100%` no resuelve si el contenedor no tiene
   un alto definido— y estiraba la ficha entera. Fuera del flujo no puede
   afectar al alto, que lo marcan el texto y el precio.

   En lista el marco ocupa un 20 % de ancho y todo el alto de la ficha. */
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > .cz-ws-img {
    position: relative;
    overflow: hidden;
    padding: 0;
    width: 20%;
    align-self: stretch;
}
/* `span` era el fondo CSS de siempre; `img` es la version nueva. Se mantienen
   los dos: el span sigue haciendo de reserva cuando la ficha no tiene imagen
   con ID de adjunto. object-fit replica lo que hacia background-size: cover. */
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > .cz-ws-img > span,
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > .cz-ws-img > img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    object-position: 50% 50%;
}
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item.finished > .cz-ws-img {
    background: var(--ep-negro, #000);
}
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item.finished > .cz-ws-img:before {
    content: 'Finalizado';
    position: absolute;
    font-family: var(--ep-font-titulo, 'Aller', sans-serif);
    font-weight: 600;
    display: inline-block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--ep-blanco, #fff);
}
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item.finished > .cz-ws-img > span {
    opacity: .5;
}

/* Columnas de la tarjeta */
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > .cz-ws-meta {
    width: 20%;
}
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > .cz-ws-price {
    width: 15%;
}
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > .cz-ws-info {
    width: 45%;
    padding-left: 20px;
}

/* Info */
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > .cz-ws-info .cz-ws-ac-type {
    display: block;
    width: auto;
    line-height: 1em;
    font-size: 0.65em;
    font-family: var(--ep-font-titulo, 'Aller', sans-serif);
    background: var(--ep-100-bl, #9adae9);
    margin: 0.2em auto 0.5em 0;
    padding: 0.4em 0.6em 0.3em;
    border-radius: 3px;
    color: var(--ep-blanco, #fff);
}
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > .cz-ws-info .cz-ws-title {
    font-family: var(--ep-font-titulo, 'Aller', sans-serif);
    color: #505050;           /* gris propio del componente, sin token */
    display: block;
    line-height: 1.2em;
    font-size: 22px;
    margin: auto auto 0.3em 0;
    /* Era un <span> y ahora es un <h3>: se neutraliza lo que el tema aplica a
       los encabezados y cambiaria el aspecto. */
    font-weight: normal;
    letter-spacing: normal;
    text-transform: none;
}
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > .cz-ws-info .cz-ws-desc {
    font-family: var(--ep-font-texto, 'AvenirNext', sans-serif);
    color: #555;              /* gris propio del componente, sin token */
    font-size: 12px;
    line-height: 1.4em;
    text-align: justify;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

/* Fecha y lugar */
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > .cz-ws-meta .cz-ws-date {
    display: block;
    font-family: var(--ep-font-titulo, 'Aller', sans-serif);
    color: var(--ep-100-og, #fead73);
    margin: auto;
    line-height: 1.2em;
    font-size: 16px;
    padding-left: 20px;
    border-left: 1px solid var(--ep-100-og, #fead73);
}
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > .cz-ws-meta .cz-ws-date > .cz-ws-status {
    display: block;
    margin-bottom: 6px;
    color: var(--ep-100-bl, #9adae9);
    font-size: 90%;
}
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > .cz-ws-meta .cz-ws-place {
    display: block;
    font-family: var(--ep-font-texto, 'AvenirNext', sans-serif);
    font-size: 12px;
    color: var(--ep-negro, #000);
    margin: 0 auto auto 0;
    line-height: 1.2em;
}

/* Precio */
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > .cz-ws-price {
    background: #fbfbfb;      /* par de estado con el :hover — no unificar */
    flex-flow: column wrap;
    border-left: 5px solid var(--ep-blanco, #fff);
}
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item:hover > .cz-ws-price {
    background: #f9f9f9;      /* par de estado — no unificar */
}
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > .cz-ws-price .cz-ws-price,
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > .cz-ws-price .cz-ws-qty {
    font-family: var(--ep-font-titulo, 'Aller', sans-serif);
    color: var(--ep-100-og, #fead73);
    font-size: 16px;
    margin: auto;
    line-height: 1;
    text-align: center;
    font-weight: bold;
}
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > .cz-ws-price .cz-ws-qty {
    display: none;
}
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > .cz-ws-price .cz-ws-price,
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > .cz-ws-price .cz-ws-qty.number {
    font-size: 22px;
}
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > .cz-ws-price .cz-ws-parts {
    font-family: var(--ep-font-titulo, 'Aller', sans-serif);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    margin: auto auto 0;
    line-height: 1em;
}
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > .cz-ws-price .cz-ws-price {
    margin: auto;
}
.cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > .cz-ws-price .cz-ws-price.parts {
    margin: 0 auto auto;
}

/* -------------------------------------------------------------------------
   Tablet: los filtros pasan a cajon lateral
   ---------------------------------------------------------------------- */

@media (max-width: 979px) {
    .cz-activities > .cz-filters,
    .cz-activities > .cz-activities-list {
        width: 100%;
        margin-right: 0;
    }
    .cz-filters.mobile {
        display: block;
        padding: 15px 30px;
        opacity: 0;
        pointer-events: none;
        transition: all .2s ease-in-out;
    }
    .cz-filters.mobile.show {
        opacity: 1;
        pointer-events: all;
    }
    .cz-activities > .cz-filters {
        margin-bottom: 30px;
    }
    .cz-activities > .cz-filters .cz-filters-inner {
        padding: 15px 30px;
        width: 100% !important;
        left: 0;
        z-index: 9999;
        display: none;
    }
    .cz-filters-actions {
        text-align: right;
    }
    .cz-activities .cz-activities-list .cz-filters-buttons {
        display: flex;
        flex-flow: row wrap;
        font-family: var(--ep-font-titulo, 'Aller', sans-serif);
        top: 100px;
    }
    .cz-activities .cz-activities-list .cz-filters-buttons > a,
    .mobile .cz-filters-actions > a {
        background: var(--ep-blanco, #fff);
        padding: 8px 12px;
        color: var(--ep-100-og, #fead73);
        border-radius: 3px;
        display: inline-block;
        font-size: 18px;
        line-height: 18px;
        margin: auto 0 auto auto;
    }
    .mobile .cz-filters-actions > a {
        background: var(--ep-100-og, #fead73);
        color: var(--ep-blanco, #fff);
    }
}

/* -------------------------------------------------------------------------
   Movil
   ---------------------------------------------------------------------- */

@media (max-width: 680px) {
    .cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item {
        margin: 10px 0;
    }
    .cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > .cz-ws-img {
        width: 30%;
    }
    .cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > .cz-ws-info {
        width: 70%;
        background: #f9f9f9;
    }
    .cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > .cz-ws-meta {
        width: 60%;
    }
    .cz-activities-column.cz-activities-list .cz-ws-list > li > a.cz-ws-item > .cz-ws-price {
        width: 40%;
    }
}

@media (max-width: 479px) {
    .cz-activities .cz-activities-list .cz-filters-buttons {
        top: 75px;
    }
}

/* -------------------------------------------------------------------------
   Banner del calendario

   El calendario ya no se carga solo: ocupaba la primera pantalla entera y
   empujaba hacia abajo el listado, que es lo que interesa posicionar. Aqui se
   presenta como un banner compacto y se despliega al pulsar.

   La imagen es la captura real del calendario, recortada y en perspectiva por
   CSS: da el efecto de foto en primer plano sin inventarse nada y pesa 18 KB.
   ---------------------------------------------------------------------- */

.cz-calendar-banner {
    position: relative;
    overflow: hidden;
    background: var(--ep-blanco, #fff);
    border: 1px solid var(--ep-lg-gr, #f7f7f7);
    border-radius: 6px;
    box-shadow: 0 0.2em 1.2em rgba(0, 0, 0, .07);
    padding: 1.6em 1.8em;
    margin: 0 auto 2em;
    /* Colapsado ocupa todo el ancho disponible con tope de 1200. */
    width: 100%;
    max-width: 1200px;
}

/* Desplegado, el tope se quita del banner y pasa a la cabecera: asi el
   calendario aprovecha todo el ancho y el texto no se estira de mas. */
.cz-calendar-banner.abierto {
    max-width: none;
}
.cz-calendar-banner.abierto .cz-calendar-banner-head {
    max-width: 1200px;
    margin-inline: auto;
}

/* Titulo y texto a la izquierda, boton a la derecha; y en vertical, cada uno
   pegado a un extremo opuesto. */
.cz-calendar-banner-head {
    position: relative;
    z-index: 2;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.5em 2em;
}
.cz-calendar-banner-texto {
    flex: 1 1 22em;
    max-width: 58%;
    align-self: flex-start;
}
.cz-calendar-banner-title {
    font-family: var(--ep-font-titulo, 'Aller', sans-serif);
    /* rem y no em: en `em` el tamaño depende del contenedor, y el layout de
       archivo de /clases/ tiene otra base que la pagina de /actividades/, asi
       que el banner se veia mas pequeño en uno que en otro. */
    font-size: clamp(1.25rem, 6vw, 1.75rem);
    font-weight: 700;
    /* Explicito: sin esto gana la regla `h1,h2,h3...` del tema. Se usa su mismo
       color de encabezado (#141615) para no desentonar con el resto de titulos
       del sitio. Si algun dia entra como token en el :root —aparece 10 veces en
       el CSS del sitio—, basta con cambiar el fallback por la variable. */
    color: var(--ep-titulo, #141615);
    letter-spacing: normal;
    margin: 0 0 0.35em;
}
.cz-calendar-banner-text {
    font-family: var(--ep-font-texto, 'AvenirNext', sans-serif);
    font-size: 0.95rem;
    margin: 0;
}
.cz-calendar-toggle {
    font-family: var(--ep-font-titulo, 'Aller', sans-serif);
    background: var(--ep-100-og, #fead73);
    color: var(--ep-blanco, #fff);
    border: 0;
    border-radius: 3px;
    padding: 0.6em 1.2em;
    font-weight: 700;
    cursor: pointer;
    flex: 0 0 auto;
    align-self: flex-end;
    white-space: nowrap;
}
.cz-calendar-toggle:hover,
.cz-calendar-toggle:focus-visible {
    background: var(--ep-100-bl, #9adae9);
}

/* La foto del calendario sobre la mesa. La perspectiva viene en la propia
   imagen, asi que aqui NO se aplica ninguna transformacion: encadenar otra la
   deformaria. Solo se recorta y se coloca.

   object-fit: cover deja que la franja se adapte a la altura del banner sin
   deformar la foto, sea cual sea el largo del texto. */
.cz-calendar-banner-img {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
    object-fit: cover;
    object-position: 40% 50%;
    pointer-events: none;
}

/* Velo blanco de izquierda a derecha sobre la foto: mantiene legible el texto
   sin recortar la imagen con un borde duro. */
.cz-calendar-banner::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        to right,
        var(--ep-blanco, #fff) 0%,
        rgba(255, 255, 255, .55) 28%,
        rgba(255, 255, 255, 0) 62%
    );
    pointer-events: none;
}

/* El panel del calendario, ya desplegado, va por debajo de la decoracion. */
.cz-calendar-banner .cz-calendar-container {
    position: relative;
    z-index: 2;
    margin-top: 1.5em;
}
.cz-calendar-banner.abierto .cz-calendar-banner-img,
.cz-calendar-banner.abierto::after {
    display: none;
}

/* Linea tenue que separa la cabecera del banner —lo unico visible en
   colapsado— del calendario. Va en el panel y no en la cabecera para que solo
   aparezca cuando hay algo debajo. */
.cz-calendar-banner.abierto .cz-calendar-container {
    border-top: 1px solid rgba(0, 0, 0, .08);
    padding-top: 1.6em;
    margin-top: 1.6em;
}

/* Los controles de navegacion, alineados con el resto del contenido del banner.
   El margen inferior separa los controles de la rejilla, y el superior queda a
   cargo del padding del panel, para no sumar dos espacios contra la linea. */
.cz-calendar-banner .cz-calendar-head-controls {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 1.2em;

    /* Dos grupos, no cuatro elementos sueltos. El marcado los deja como
       hermanos planos —back, flecha, titulo, flecha—, asi que un space-between
       a secas los dispersaria por todo el ancho. */
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 0.4em 0.8em;
}

/* `cz-calendar-back` es un bloque en si mismo: se queda a la izquierda y empuja
   al resto a la derecha. Cuando no esta —vista de mes—, las flechas y el titulo
   arrancan a la izquierda por si solos, sin separarse entre ellos. */
.cz-calendar-banner .cz-calendar-back {
    margin-right: auto;
}

@media (max-width: 680px) {
    .cz-calendar-banner-texto {
        max-width: 100%;
    }
    /* En movil la decoracion estorba mas que aporta. */
    .cz-calendar-banner-img,
    .cz-calendar-banner::after {
        display: none;
    }
    .cz-calendar-toggle {
        width: 100%;
    }
}