@keyframes agendaFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* =========================================================
   CONTENEDOR DEL EVENTO
   ========================================================= */

.agenda-event {
    font-family: Arial, sans-serif;
    max-width: 70%;
    width: 65%;
    margin: 0 auto;
    padding: 20px;
    background-color: #ececfb;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    z-index: 1;
}

.agenda-event-more {
    margin-top: -12px;
    padding-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}


/* =========================================================
   IMAGEN DEL EVENTO
   ========================================================= */

.agenda-image-container {
    text-align: center;
    margin-bottom: 20px;
}

.agenda-main-title {
    font-size: 1.5em;
    color: #000;
}

.agenda-short-title {
    font-size: 1em;
    color: #000;
}

.agenda-event-image {
    width: 40%;
    max-width: 70%;
    cursor: pointer;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.agenda-event-image:hover {
    transform: scale(1.05);
}


/* =========================================================
   DESCRIPCIÓN
   ========================================================= */

.agenda-description {
    font-size: .9em;
    line-height: 1.2;
    color: #000;
}


/* =========================================================
   MODAL
   ========================================================= */

.agenda-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    inset: 0;
    overflow: auto;
    background-color: rgba(0, 0, 0, .3);
    animation: agendaFadeIn .3s ease-in-out forwards;
}

.agenda-modal.is-open {
    display: block;
}


/*
 * El modal se mantiene siempre dentro de la altura
 * disponible de la pantalla.
 */
.agenda-modal-content {
    position: relative;

    margin: 3vh auto;
    padding: 20px;

    width: 80%;
    max-width: 900px;

    max-height: 94vh;
    overflow-y: auto;

    background-color: #fff;
    border-radius: 10px;
    text-align: center;

    box-sizing: border-box;
}


/*
 * Evitamos que el título deje demasiado espacio
 * en la parte superior del modal.
 */
.agenda-modal-content h1 {
    margin-top: 0;
    margin-bottom: 10px;
}


/*
 * La imagen conserva sus proporciones y nunca
 * puede ocupar más del 65% de la altura de pantalla.
 */
.agenda-modal-image {
    display: block;

    width: auto;
    max-width: 100%;
    max-height: 65vh;

    margin: 0 auto;

    object-fit: contain;
    border-radius: 10px;
}


.agenda-modal-text {
    margin: 10px 0;
    font-size: 1em;
    color: #333;
}


/* =========================================================
   BOTÓN CERRAR MODAL
   ========================================================= */

.agenda-modal-close {
    position: absolute;

    top: 10px;
    right: 20px;

    border: 0;
    background: transparent;

    font-size: 1.8em;
    font-weight: bold;

    cursor: pointer;
}


/* =========================================================
   BOTONES COMPARTIR
   ========================================================= */

.agenda-share-buttons {
    margin-top: 20px;
}

.agenda-share-buttons span {
    display: inline-block;
    margin: 3px;
    border-radius: 5px;
    padding: 2px 5px;
}

.agenda-share-buttons a {
    color: white;
    text-decoration: none;
}

.agenda-share-buttons img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 5px;
}

.agenda-share-x {
    background-color: #000;
}

.agenda-share-facebook {
    background-color: #4267b2;
}


/* =========================================================
   MÓVILES
   ========================================================= */

@media (max-width: 600px) {

    .agenda-event {
        max-width: 100%;
        width: 100%;
    }

    .agenda-event-image {
        width: 100%;
        max-width: 95%;
    }

    .agenda-modal-content {
        width: 94%;
        margin: 2vh auto;
        padding: 15px;

        max-height: 96vh;
    }

    .agenda-modal-image {
        max-width: 100%;
        max-height: 60vh;
    }
}

/* =========================================================
   PLANTILLA MODERNA
   ========================================================= */

.agenda-modern {
    width: min(1100px, 94%);
    margin: 0 auto;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    color: #1f2933;
}

.agenda-modern-header {
    padding: 10px 0 24px;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.agenda-modern-kicker {
    margin: 0 0 8px;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .72;
}

.agenda-modern-title {
    margin: 0;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.02;
    letter-spacing: -.035em;
}

.agenda-modern-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: clamp(24px, 5vw, 64px);
    align-items: center;
    padding: 34px 0;
}

.agenda-modern-image-wrap {
    position: relative;
}

.agenda-modern-image {
    display: block;
    width: 100%;
    max-height: 620px;
    object-fit: cover;
    border-radius: 18px;
    cursor: pointer;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .16);
    transition: transform .2s ease, box-shadow .2s ease;
}

.agenda-modern-image:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .2);
}

.agenda-modern-image-hint {
    display: block;
    margin-top: 8px;
    font-size: .78rem;
    opacity: .58;
}

.agenda-modern-lead {
    margin: 0 0 28px;
    font-size: clamp(1.2rem, 2.4vw, 1.75rem);
    line-height: 1.4;
    font-weight: 600;
}

.agenda-modern-meta {
    display: grid;
    gap: 16px;
}

.agenda-modern-meta > div {
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(0, 0, 0, .11);
}

.agenda-modern-meta span,
.agenda-modern-card span {
    display: block;
    margin-bottom: 4px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: .62;
}

.agenda-modern-meta strong,
.agenda-modern-card strong {
    font-size: 1rem;
    line-height: 1.35;
}

.agenda-modern-section {
    max-width: 860px;
    margin: 0 auto;
    font-size: 1.03rem;
    line-height: 1.7;
}

.agenda-modern-intro {
    padding: 18px 0 10px;
}

.agenda-modern-more {
    padding-top: 8px;
    padding-bottom: 28px;
}

.agenda-modern-body {
    padding: 8px 0 20px;
}

.agenda-modern-copy + .agenda-modern-copy {
    margin-top: 18px;
}

.agenda-modern-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 34px auto 0;
    max-width: 960px;
}

.agenda-modern-card {
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 14px;
    background: rgba(255, 255, 255, .58);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}

.agenda-modern-share {
    max-width: 960px;
    margin: 24px auto 0;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, .1);
}

@media (max-width: 760px) {
    .agenda-modern {
        width: 100%;
    }

    .agenda-modern-header {
        padding-top: 4px;
    }

    .agenda-modern-hero {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px 0;
    }

    .agenda-modern-image {
        max-height: none;
        border-radius: 12px;
    }

    .agenda-modern-details {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   PLANTILLA PÒSTER
   ========================================================= */

.agenda-poster {
    width: min(1000px, 96%);
    margin: 0 auto;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    color: #171717;
}

.agenda-poster-hero {
    position: relative;
    min-height: clamp(520px, 72vw, 780px);
    overflow: hidden;
    border-radius: 6px;
    background: #111;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
}

.agenda-poster-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform .35s ease;
}

.agenda-poster-hero:hover .agenda-poster-image {
    transform: scale(1.018);
}

.agenda-poster-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .28) 55%, rgba(0, 0, 0, .08) 100%),
        linear-gradient(0deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, 0) 58%);
}

.agenda-poster-datebox {
    position: absolute;
    top: clamp(18px, 4vw, 40px);
    left: clamp(18px, 4vw, 40px);
    z-index: 2;
    width: min(220px, 42%);
    padding: 18px 20px;
    background: #f4c400;
    color: #111;
    border-top: 7px solid #c51f1a;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, .35);
    text-transform: uppercase;
}

.agenda-poster-datebox span,
.agenda-poster-datebox strong {
    display: block;
}

.agenda-poster-date-label {
    margin-bottom: 7px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.agenda-poster-datebox strong {
    font-size: clamp(1rem, 2.4vw, 1.55rem);
    line-height: 1.05;
}

.agenda-poster-datebox span:last-child {
    margin-top: 8px;
    font-size: 1rem;
    font-weight: 800;
}

.agenda-poster-headline {
    position: absolute;
    left: clamp(20px, 5vw, 55px);
    right: clamp(20px, 5vw, 55px);
    bottom: clamp(24px, 6vw, 64px);
    z-index: 2;
    color: #fff;
}

.agenda-poster-place {
    display: inline-block;
    margin: 0 0 12px;
    padding: 7px 11px;
    background: #c51f1a;
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.agenda-poster-headline h1 {
    max-width: 880px;
    margin: 0;
    font-size: clamp(2.7rem, 9vw, 7.4rem);
    line-height: .84;
    letter-spacing: -.055em;
    text-transform: uppercase;
    text-shadow: 0 4px 20px rgba(0, 0, 0, .35);
}

.agenda-poster-lead {
    max-width: 740px;
    margin: 22px 0 0;
    padding-left: 14px;
    border-left: 6px solid #f4c400;
    font-size: clamp(1.05rem, 2.2vw, 1.45rem);
    line-height: 1.35;
    font-weight: 700;
}

.agenda-poster-intro,
.agenda-poster-body {
    max-width: 860px;
    margin: 0 auto;
    padding: 34px 22px 6px;
}

.agenda-poster-copy {
    font-size: 1.03rem;
    line-height: 1.72;
}

.agenda-poster-copy + .agenda-poster-copy {
    margin-top: 20px;
}

.agenda-poster-more {
    padding-bottom: 28px;
}

.agenda-poster-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 940px;
    margin: 30px auto 0;
    background: #111;
    color: #fff;
    border-top: 8px solid #c51f1a;
}

.agenda-poster-info > div {
    min-height: 105px;
    padding: 22px;
    box-sizing: border-box;
    border-right: 1px solid rgba(255, 255, 255, .22);
}

.agenda-poster-info > div:last-child {
    border-right: 0;
}

.agenda-poster-info span,
.agenda-poster-info p strong:first-child {
    display: block;
    margin-bottom: 7px;
    color: #f4c400;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.agenda-poster-info strong {
    font-size: 1.05rem;
}

.agenda-poster-info p {
    margin: 0;
    line-height: 1.4;
}

.agenda-poster-conditional:empty {
    display: none;
}

.agenda-poster-callout {
    max-width: 940px;
    margin: 0 auto;
    padding: 18px 24px;
    box-sizing: border-box;
    background: #f4c400;
    color: #111;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-.35deg);
}

.agenda-poster-callout span,
.agenda-poster-callout strong {
    display: block;
}

.agenda-poster-callout span {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.agenda-poster-callout strong {
    margin-top: 4px;
    font-size: clamp(1.1rem, 2.6vw, 1.65rem);
}

.agenda-poster-share {
    max-width: 940px;
    margin: 22px auto 0;
    text-align: center;
}

@media (max-width: 700px) {
    .agenda-poster {
        width: 100%;
    }

    .agenda-poster-hero {
        min-height: 620px;
        border-radius: 0;
    }

    .agenda-poster-shade {
        background:
            linear-gradient(0deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .18) 75%),
            linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .05));
    }

    .agenda-poster-datebox {
        width: auto;
        max-width: 68%;
    }

    .agenda-poster-headline h1 {
        font-size: clamp(2.7rem, 15vw, 5.2rem);
    }

    .agenda-poster-info {
        grid-template-columns: 1fr;
    }

    .agenda-poster-info > div {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .2);
    }
}

/* Plantilla Formal: lectura còmoda per a activitats amb molt text */
.agenda-formal {
    width: min(920px, 94%);
    margin: 0 auto;
    box-sizing: border-box;
    color: #263238;
    font-family: Georgia, "Times New Roman", serif;
}
.agenda-formal-header { max-width: 790px; margin: 0 auto; padding: 28px 0 22px; border-bottom: 1px solid #cfd8dc; }
.agenda-formal-eyebrow { margin: 0 0 10px; font-family: Arial, sans-serif; font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #607d8b; }
.agenda-formal-title { margin: 0; font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.08; font-weight: 600; letter-spacing: -.025em; }
.agenda-formal-lead { margin: 20px 0 0; font-size: clamp(1.08rem, 2vw, 1.3rem); line-height: 1.6; color: #546e7a; }
.agenda-formal-summary { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 790px; margin: 22px auto 0; padding: 16px 0; border-bottom: 1px solid #cfd8dc; font-family: Arial, sans-serif; }
.agenda-formal-summary > div { padding: 0 20px; border-right: 1px solid #e0e0e0; }
.agenda-formal-summary > div:first-child { padding-left: 0; }
.agenda-formal-summary > div:last-child { border-right: 0; }
.agenda-formal-summary span { display: block; margin-bottom: 5px; color: #78909c; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.agenda-formal-summary strong { font-size: .98rem; font-weight: 600; color: #263238; }
.agenda-formal-figure { max-width: 790px; margin: 30px auto 0; }
.agenda-formal-image { display: block; width: 100%; max-height: 500px; object-fit: cover; cursor: pointer; }
.agenda-formal-figure figcaption { margin-top: 7px; font-family: Arial, sans-serif; font-size: .75rem; color: #78909c; text-align: right; }
.agenda-formal-section { max-width: 790px; margin: 0 auto; }
.agenda-formal-description { padding: 34px 0 8px; font-size: 1.08rem; line-height: 1.82; }
.agenda-formal-more { padding-bottom: 28px; }
.agenda-formal-longtext { padding-top: 12px; }
.agenda-formal-copy { font-size: 1.08rem; line-height: 1.82; }
.agenda-formal-copy + .agenda-formal-copy { margin-top: 28px; padding-top: 28px; border-top: 1px solid #eceff1; }
.agenda-formal-facts { max-width: 790px; margin: 38px auto 0; padding: 24px 26px; box-sizing: border-box; background: #f5f6f6; border-left: 4px solid #607d8b; font-family: Arial, sans-serif; }
.agenda-formal-facts h2 { margin: 0 0 18px; font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; font-weight: 600; }
.agenda-formal-facts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.agenda-formal-facts-grid > div { min-width: 0; }
.agenda-formal-facts-grid span, .agenda-formal-facts-grid p strong:first-child { display: block; margin-bottom: 5px; color: #607d8b; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.agenda-formal-facts-grid p { margin: 0; line-height: 1.45; }
.agenda-formal-share { max-width: 790px; margin: 24px auto 0; padding-top: 18px; border-top: 1px solid #cfd8dc; font-family: Arial, sans-serif; }
@media (max-width: 700px) {
    .agenda-formal { width: 100%; }
    .agenda-formal-header, .agenda-formal-summary, .agenda-formal-figure, .agenda-formal-section, .agenda-formal-facts, .agenda-formal-share { width: calc(100% - 36px); }
    .agenda-formal-summary { grid-template-columns: 1fr; }
    .agenda-formal-summary > div { padding: 9px 0; border-right: 0; border-bottom: 1px solid #eceff1; }
    .agenda-formal-summary > div:last-child { border-bottom: 0; }
    .agenda-formal-facts-grid { grid-template-columns: 1fr; }
}