/* ================================================================
KUNI EVENT CARDS GLOBAL V1
================================================================ */
/*
* GRATIS
*
* Intencionalmente mucho más visible que el precio anterior.
*/
.kuni-event-free-badge {
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
min-height:
34px;
padding:
8px 14px !important;
margin:
3px 0 !important;
border:
1px solid
rgba(
244,
177,
131,
.34
) !important;
border-radius:
999px !important;
background:
linear-gradient(
135deg,
#9c4e29 0%,
#ef9d65 53%,
#a6532c 100%
) !important;
color:
#fffaf6 !important;
box-shadow:
0 9px 25px
rgba(
224,
119,
65,
.25
),
inset 0 0 0 1px
rgba(
255,
255,
255,
.09
) !important;
font-size:
clamp(
14px,
1.05vw,
18px
) !important;
font-weight:
950 !important;
line-height:
1 !important;
letter-spacing:
.075em !important;
text-transform:
uppercase !important;
white-space:
nowrap !important;
}
/*
* Punto brillante.
*/
.kuni-event-free-badge::before {
content:
"●";
margin-right:
7px;
color:
#ffe4d2;
font-size:
.58em;
animation:
kuniFreePulse
1.8s
ease-in-out
infinite;
}
@keyframes kuniFreePulse {
0%,
100% {
opacity:
.52;
transform:
scale(.82);
}
50% {
opacity:
1;
transform:
scale(1.22);
}
}
/* ================================================================
FECHA Y HORA
================================================================ */
.kuni-event-datetime {
display:
flex;
flex-wrap:
wrap;
align-items:
center;
gap:
7px 10px;
margin-top:
10px;
color:
#d5b39f;
font-size:
12px;
line-height:
1.3;
}
.kuni-event-date,
.kuni-event-time {
display:
inline-flex;
align-items:
center;
gap:
6px;
padding:
6px 9px;
border:
1px solid
rgba(
240,
160,
105,
.13
);
border-radius:
10px;
background:
rgba(
240,
160,
105,
.035
);
white-space:
nowrap;
}
.kuni-event-date-icon,
.kuni-event-time-icon {
color:
#ef9d65;
font-size:
13px;
}
/* ================================================================
MOBILE
================================================================ */
@media (max-width:699px) {
.kuni-event-free-badge {
min-height:
32px;
padding:
8px 12px !important;
font-size:
13px !important;
}
.kuni-event-datetime {
gap:
6px;
margin-top:
8px;
font-size:
10px;
}
.kuni-event-date,
.kuni-event-time {
padding:
5px 7px;
border-radius:
8px;
}
}
/* ================================================================
KUNI EVENT CARD FOOTER LAYOUT V2
================================================================ */
/*
* El badge GRATIS también será el contenedor
* de precio cuando el evento deje de ser gratuito.
*/
.kuni-event-free-badge,
.kuni-event-price-badge {
flex:
0 0 auto !important;
min-width:
128px;
min-height:
46px;
padding:
10px 18px !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
margin:
0 !important;
border-radius:
999px !important;
box-sizing:
border-box;
font-size:
clamp(
16px,
1.15vw,
21px
) !important;
font-weight:
950 !important;
line-height:
1 !important;
letter-spacing:
.055em !important;
white-space:
nowrap !important;
}
/*
* Contenedor principal inferior.
*
* Si conseguimos localizar el footer real mediante JS,
* se convierte en estructura de dos filas.
*/
.kuni-event-footer-v2 {
display:
grid !important;
grid-template-columns:
minmax(128px, auto)
minmax(0, 1fr);
grid-template-rows:
auto
auto;
grid-template-areas:
"price datetime"
"cta cta";
align-items:
center;
gap:
10px 12px;
width:
100%;
box-sizing:
border-box;
}
/*
* Precio.
*/
.kuni-event-footer-v2
.kuni-event-free-badge,
.kuni-event-footer-v2
.kuni-event-price-badge {
grid-area:
price;
align-self:
start;
}
/*
* Fecha y hora.
*/
.kuni-event-footer-v2
.kuni-event-datetime {
grid-area:
datetime;
margin:
0 !important;
min-width:
0;
display:
flex !important;
flex-wrap:
wrap !important;
justify-content:
flex-start;
align-items:
center;
gap:
7px;
}
/*
* CTA.
*/
.kuni-event-footer-v2
.kuni-event-cta-v2 {
grid-area:
cta;
width:
100% !important;
min-width:
0;
margin:
0 !important;
padding-top:
10px !important;
border-top:
1px solid
rgba(
240,
160,
105,
.10
);
display:
flex !important;
align-items:
center !important;
justify-content:
flex-end !important;
box-sizing:
border-box;
}
/*
* Si el CTA es , que tenga espacio suficiente.
*/
.kuni-event-footer-v2
.kuni-event-cta-v2 a,
.kuni-event-footer-v2
a.kuni-event-cta-v2 {
color:
#f3a16a !important;
font-weight:
800 !important;
text-decoration:
none !important;
white-space:
nowrap !important;
}
/*
* Pills fecha/hora algo más sobrias.
*/
.kuni-event-footer-v2
.kuni-event-date,
.kuni-event-footer-v2
.kuni-event-time {
min-height:
34px;
padding:
7px 10px;
border-radius:
999px;
background:
rgba(
240,
160,
105,
.045
);
border:
1px solid
rgba(
240,
160,
105,
.16
);
font-size:
11px;
font-weight:
700;
box-sizing:
border-box;
}
/* ================================================================
TARJETAS ANGOSTAS
================================================================ */
@media (max-width:1100px) {
.kuni-event-footer-v2 {
grid-template-columns:
1fr;
grid-template-areas:
"price"
"datetime"
"cta";
gap:
9px;
}
.kuni-event-footer-v2
.kuni-event-free-badge,
.kuni-event-footer-v2
.kuni-event-price-badge {
justify-self:
start;
}
.kuni-event-footer-v2
.kuni-event-datetime {
width:
100%;
}
}
/* ================================================================
MOBILE
================================================================ */
@media (max-width:699px) {
.kuni-event-footer-v2 {
grid-template-columns:
1fr;
grid-template-areas:
"price"
"datetime"
"cta";
gap:
8px;
}
.kuni-event-free-badge,
.kuni-event-price-badge {
min-width:
112px;
min-height:
40px;
padding:
9px 14px !important;
font-size:
15px !important;
}
.kuni-event-footer-v2
.kuni-event-date,
.kuni-event-footer-v2
.kuni-event-time {
min-height:
32px;
padding:
6px 9px;
font-size:
10px;
}
.kuni-event-footer-v2
.kuni-event-cta-v2 {
justify-content:
flex-start !important;
}
}
/* ================================================================
KUNI EVENT CARD CTA ROW V3
================================================================ */
/*
* La segunda fila del footer se convierte en una acción completa.
*/
.kuni-event-footer-v2
.kuni-event-cta-v2 {
grid-area:
cta;
width:
100% !important;
min-width:
0 !important;
min-height:
58px;
margin:
0 !important;
padding:
0 18px !important;
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
gap:
9px;
box-sizing:
border-box;
border:
0 !important;
border-top:
1px solid
rgba(
240,
160,
105,
.13
) !important;
border-radius:
0 0 14px 14px;
background:
transparent;
color:
#f2a069 !important;
font-size:
clamp(
14px,
1vw,
17px
) !important;
font-weight:
900 !important;
line-height:
1.15 !important;
letter-spacing:
.01em;
text-align:
center !important;
text-decoration:
none !important;
white-space:
nowrap !important;
cursor:
pointer;
-webkit-tap-highlight-color:
transparent;
touch-action:
manipulation;
transition:
background .20s ease,
color .20s ease,
box-shadow .20s ease,
border-color .20s ease,
transform .12s ease;
}
/*
* Por si el JS agregó la clase a un contenedor
* y el verdadero está dentro.
*/
.kuni-event-footer-v2
.kuni-event-cta-v2 > a {
width:
100%;
min-height:
58px;
display:
flex;
align-items:
center;
justify-content:
center;
color:
inherit !important;
font-size:
inherit !important;
font-weight:
inherit !important;
text-align:
center;
text-decoration:
none !important;
}
/* ================================================================
DESKTOP / LAPTOP CON MOUSE
================================================================ */
@media (hover: hover) and (pointer: fine) {
.kuni-event-footer-v2
.kuni-event-cta-v2:hover {
background:
linear-gradient(
90deg,
rgba(240,160,105,.025),
rgba(240,160,105,.13),
rgba(240,160,105,.025)
);
color:
#ffd0ae !important;
border-top-color:
rgba(
240,
160,
105,
.30
) !important;
box-shadow:
inset 0 8px 26px
rgba(
240,
160,
105,
.045
);
}
.kuni-event-footer-v2
.kuni-event-cta-v2:hover > a {
color:
#ffd0ae !important;
}
}
/* ================================================================
TECLADO / ACCESIBILIDAD
================================================================ */
.kuni-event-footer-v2
.kuni-event-cta-v2:focus-visible {
outline:
2px solid
rgba(
240,
160,
105,
.65
);
outline-offset:
-3px;
background:
rgba(
240,
160,
105,
.09
);
}
/* ================================================================
TOUCH: ANDROID / IPHONE
================================================================ */
@media (hover: none), (pointer: coarse) {
.kuni-event-footer-v2
.kuni-event-cta-v2 {
min-height:
58px;
/*
* Área táctil grande.
*/
padding:
0 12px !important;
}
.kuni-event-footer-v2
.kuni-event-cta-v2:active {
background:
rgba(
240,
160,
105,
.13
);
color:
#ffd0ae !important;
transform:
scale(.985);
}
}
/* ================================================================
MOBILE
================================================================ */
@media (max-width:699px) {
.kuni-event-footer-v2
.kuni-event-cta-v2 {
width:
100% !important;
min-height:
54px;
padding:
0 10px !important;
justify-content:
center !important;
border-radius:
0 0 12px 12px;
font-size:
13px !important;
white-space:
normal !important;
text-align:
center !important;
}
.kuni-event-footer-v2
.kuni-event-cta-v2 > a {
min-height:
54px;
white-space:
normal;
text-align:
center;
}
}
/* ================================================================
TELÉFONOS MUY PEQUEÑOS
================================================================ */
@media (max-width:390px) {
.kuni-event-footer-v2
.kuni-event-cta-v2 {
min-height:
52px;
font-size:
12px !important;
}
}
/* ================================================================
TABLET
================================================================ */
@media (
min-width:700px
)
and (
max-width:1100px
) {
#kuniEventsGrid {
grid-template-columns:
repeat(
auto-fit,
minmax(
340px,
430px
)
) !important;
}
}
/* ================================================================
MOBILE
================================================================ */
@media (max-width:699px) {
#kuniEventsGrid {
grid-template-columns:
1fr !important;
gap:
22px !important;
}
#kuniEventsGrid >
.event-card,
#kuniEventsGrid >
[data-event-card],
#kuniEventsGrid >
.kuni-public-event-card,
#kuniEventsGrid >
.landing-event-card,
#kuniEventsGrid >
.featured-event-card {
width:
100% !important;
max-width:
100% !important;
border-radius:
19px !important;
}
#kuniEventsGrid
.event-card-body,
#kuniEventsGrid
.kuni-event-card-body,
#kuniEventsGrid
.landing-event-card-body,
#kuniEventsGrid
.featured-event-card-body {
padding:
19px !important;
}
#kuniEventsGrid
.kuni-event-price-badge,
#kuniEventsGrid
.kuni-event-free-badge {
min-width:
154px !important;
min-height:
49px !important;
padding:
11px
18px !important;
font-size:
18px !important;
}
#kuniEventsGrid
h2,
#kuniEventsGrid
h3 {
font-size:
clamp(
24px,
8vw,
31px
) !important;
}
}