/* Banner promocional eventos CyT — scope estricto (página Actividades) */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800&display=swap");

.evt-promo-section {
    --evt-black: #0a0a14;
    --evt-white: #ffffff;
    --evt-accent: #f5d547;
    /* Tarjeta 1: acento claro (sustituye amarillo en marco y franjas) */
    --evt-accent-card1: #e2ecf7;
    --evt-grey: #e8e8e8;
    --evt-blue: #2c3f90;
    --evt-magenta: #930b6e;
    --evt-time-s: 0.3s;
    padding: 2.5rem 0 3rem;
    background: var(--evt-grey);
    font-family: "Montserrat", sans-serif;
    color: var(--evt-white);
    font-size: clamp(14px, 1.15vw, 18px);
    line-height: 1;
    font-weight: 400;
}

.evt-promo-section *,
.evt-promo-section *::before,
.evt-promo-section *::after {
    box-sizing: border-box;
}

.evt-promo-section a.evt-box {
    text-decoration: none;
    color: var(--evt-white);
}

.evt-promo-section a.evt-box__btn {
    text-decoration: none;
    display: inline-block;
}

.evt-promo-section .evt-promo {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.evt-promo-section .evt-box {
    cursor: pointer;
    position: relative;
    display: inline-block;
    width: 30vw;
    padding-bottom: 30vw;
    margin: 1vw;
    background-color: var(--evt-accent);
    text-transform: uppercase;
    font-weight: 800;
    overflow: hidden;
}

@media (max-width: 768px) {
    .evt-promo-section .evt-box {
        width: 46vw;
        padding-bottom: 46vw;
    }
}

.evt-promo-section .evt-box:hover .evt-box__btn {
    background-color: var(--evt-accent);
    color: var(--evt-black);
}

.evt-promo-section .evt-box--2:hover .evt-box__btn {
    background-color: var(--evt-white);
    color: var(--evt-blue);
    border-color: var(--evt-white);
}

.evt-promo-section .evt-box--3:hover .evt-box__btn {
    background-color: var(--evt-white);
    color: var(--evt-magenta);
    border-color: var(--evt-white);
}

.evt-promo-section .evt-box:hover .evt-box__background {
    animation-play-state: paused;
}

.evt-promo-section .evt-box__btn {
    line-height: 4vw;
    text-align: center;
    max-width: 80%;
    padding: 0 2vw;
    font-size: 1.8rem;
    margin-top: 1vw;
    transition: all var(--evt-time-s);
    transform: scale(1);
    background-color: var(--evt-black);
    color: var(--evt-white);
    border: 1px solid var(--evt-black);
}

@media (max-width: 768px) {
    .evt-promo-section .evt-box__btn {
        line-height: 8vw;
        font-size: 1rem;
    }
}

.evt-promo-section .evt-box__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.evt-promo-section .evt-box__content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}

    transform-origin: 50% 50%;
    animation: evtPromoRotate normal infinite calc(var(--evt-time-s) * 30) linear;
}

.evt-promo-section .evt-box__text-svg--reverse {
    animation: evtPromoRotateReverse normal infinite calc(var(--evt-time-s) * 50) linear;
}

.evt-promo-section .evt-box--2 {
    font-size: 1.5rem;
    background: linear-gradient(145deg, var(--evt-blue) 0%, #1a2550 45%, var(--evt-magenta) 100%);
}

.evt-promo-section .evt-box--2 .evt-box__sheet-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.evt-promo-section .evt-box--2 .evt-box__background {
    z-index: 0;
}

.evt-promo-section .evt-box--2 .evt-box__content {
    z-index: 2;
    pointer-events: none;
}

.evt-promo-section .evt-box--2 .evt-box__btn {
    pointer-events: auto;
    position: relative;
    z-index: 3;
}

.evt-promo-section .evt-box--2 .evt-box__sheet-link:focus-visible {
    outline: 2px solid var(--evt-white);
    outline-offset: 3px;
    z-index: 4;
}

.evt-promo-section .evt-box--2 .evt-box__background {
    top: -50%;
    left: -50%;
    width: 200%;
    height: auto;
    font-size: 24px;
}

.evt-promo-section .evt-box--2 .evt-box__background path {
    stroke: rgba(255, 255, 255, 0.35);
}

.evt-promo-section .evt-box--2 .evt-box__content,
.evt-promo-section .evt-box--3 .evt-box__content {
    font-size: 1.5rem;
    color: var(--evt-white);
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: column;
    width: 100%;
    text-align: center;
}

.evt-promo-section .evt-box--2 .evt-box__content {
    z-index: 2;
    pointer-events: none;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.evt-promo-section .evt-box--2 .evt-box__content span {
    display: block;
    font-size: clamp(1.35rem, 3.4vw, 2.35rem);
    line-height: 1.05;
    max-width: 100%;
    text-align: center;
    padding: 0 0.25em;
    box-sizing: border-box;
}

.evt-promo-section .evt-box--2 .evt-box__btn {
    position: relative;
    z-index: 3;
    pointer-events: auto;
    background-color: var(--evt-accent-card1);
    color: var(--evt-blue);
    border-color: var(--evt-blue);
    align-self: center;
    margin-left: auto;
    margin-right: auto;
}

.evt-promo-section .evt-box--3 {
    background: linear-gradient(160deg, var(--evt-magenta), #4a0a38);
}

.evt-promo-section .evt-box--3 .evt-box__background {
    top: -20%;
    left: -20%;
    width: 140%;
    height: auto;
    font-size: 30px;
}

.evt-promo-section .evt-box--3 .evt-box__btn {
    background-color: #f2e8f0;
    color: var(--evt-magenta);
    border-color: var(--evt-magenta);
}

@keyframes evtPromoRotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes evtPromoRotateReverse {
    to {
        transform: rotate(-360deg);
    }
}