/*
Theme Name: Cactus
Theme URI: http://www.cactussenygrafic.com/
Version: 1.0
Description: Plantilla desenvolupada per Cactus
Author: Cactus Seny Grafic
Author URI: https://www.cactussenygrafic.com/
Template: Divi
*/

:root{
	--offcanvas_up_ini: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
	--offcanvas_right_ini: polygon(100% 0, 100% 0%, 100% 100%, 100% 100%);;
	--offcanvas_down_ini: polygon(0 0, 100% 0%, 100% 0%, 0 0);
	--offcanvas_left_ini: polygon(0 0, 0 0, 0 100%, 0% 100%);
	--offcanvas_fin: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	--animation_timing:cubic-bezier(.785,.135,.15,.86);
    --textAnimationOverflow: 4%;
    --textAnimationReduction: -4%;
}

@font-face {
    font-family: 'Neue Haas Grotesk Display Pro';
    src: url('fonts/NeueHaasDisplay-Mediu.eot');
    src: local('NeueHaasDisplay-Mediu'),
        url('fonts/NeueHaasDisplay-Mediu.eot?#iefix') format('embedded-opentype'),
        url('fonts/NeueHaasDisplay-Mediu.woff2') format('woff2'),
        url('fonts/NeueHaasDisplay-Mediu.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Neue Haas Grotesk Display Pro';
    src: url('fonts/NeueHaasDisplay-Roman.eot');
    src: local('NeueHaasDisplay-Roman'),
        url('fonts/NeueHaasDisplay-Roman.eot?#iefix') format('embedded-opentype'),
        url('fonts/NeueHaasDisplay-Roman.woff2') format('woff2'),
        url('fonts/NeueHaasDisplay-Roman.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Neue Haas Grotesk Display Pro';
    src: url('fonts/NeueHaasDisplay-Bold.eot');
    src: local('NeueHaasDisplay-Bold'),
        url('fonts/NeueHaasDisplay-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/NeueHaasDisplay-Bold.woff2') format('woff2'),
        url('fonts/NeueHaasDisplay-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Neue Haas Grotesk Display Pro';
    src: url('fonts/NeueHaasDisplay-Light.eot');
    src: local('NeueHaasDisplay-Light'),
        url('fonts/NeueHaasDisplay-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/NeueHaasDisplay-Light.woff2') format('woff2'),
        url('fonts/NeueHaasDisplay-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Neue Haas Grotesk Display Pro';
    src: url('fonts/NeueHaasDisplay-Thin.eot');
    src: local('NeueHaasDisplay-Thin'),
        url('fonts/NeueHaasDisplay-Thin.eot?#iefix') format('embedded-opentype'),
        url('fonts/NeueHaasDisplay-Thin.woff2') format('woff2'),
        url('fonts/NeueHaasDisplay-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

/** font custom **/
body, p, h1, h2, h3, h4, h5, h6, a, span:not(.ab-icon), li, div, td, th, label, input, textarea, button {font-family: 'Neue Haas Grotesk Display Pro', 'Helvetica', 'Arial', sans-serif;}
.ivyora, h1 em, h2 em, h3 em, h4 em, h5 em,
.ivyora *, h1 em *, h2 em *, h3 em *, h4 em *, h5 em *{font-family: "ivyora-display", serif !important; font-weight: 300; font-style: italic;}

.textAnimation .line-mask {
  overflow: hidden;
  display: block;
  /* Si quieres ajustar el alto exacto visible, opcional: */
  line-height: 1.2;
  margin-top: -0.1em;
  margin-bottom: -0.1em;
}

#offcanvas{
    height: 100vh;
    overflow-x: auto;
    position: fixed;
    top: -110vh;
    left: 0;
    z-index: 9999999;
    width: 100vw;
    display: flex;
    flex-direction: column;
}
#offcanvas.animation_up {
    position: fixed!important;
    z-index: 99999;
    top: 0;
    left: 0;
    clip-path: var(--offcanvas_up_ini)
}

#offcanvas.animation_right {
    position: fixed!important;
    z-index: 99999;
    top: 0;
    right: 0;
    clip-path: var(--offcanvas_right_ini)
}

#offcanvas.animation_down {
    position: fixed!important;
    z-index: 99999;
    top: 0;
    left: 0;
    clip-path: var(--offcanvas_down_ini)
}

#offcanvas.animation_left. {
    position: fixed!important;
    z-index: 99999;
    top: 0;
    left: 0;
    clip-path: var(--offcanvas_left_ini)
}

#offcanvas.animation_fade. {
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0
}

#offcanvas.active {
    animation-duration: .6s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: var(--animation_timing)
}

#offcanvas.animation_up.active {animation-name: offcanvas_animation_up}
#offcanvas.animation_right.active {    animation-name: offcanvas_animation_right}
#offcanvas.animation_down.active {    animation-name: offcanvas_animation_down}
#offcanvas.animation_left.active {    animation-name: offcanvas_animation_left}
#offcanvas.animation_left.active {    animation-name: offcanvas_animation_left}
#offcanvas.animation_fade.active {    animation-name: offcanvas_animation_fade;pointer-events: all}
@keyframes offcanvas_animation_up { 0% {clip-path: var(--offcanvas_up_ini)} 100% {clip-path: var(--offcanvas_fin)} }
@keyframes offcanvas_animation_right { 0% { clip-path: var(--offcanvas_right_ini) } 100% { clip-path: var(--offcanvas_fin) } }
@keyframes offcanvas_animation_down {0% {clip-path: var(--offcanvas_down_ini) } 100% { clip-path: var(--offcanvas_fin)}}
@keyframes offcanvas_animation_left { 0% { clip-path: var(--offcanvas_left_ini) } 100% { clip-path: var(--offcanvas_fin) } }
@keyframes offcanvas_animation_fade { 0% { opacity: 0 } 100% { opacity: 1 } }

#offcanvas.animation_up.close {
    animation-name: offcanvas_animation_up_close;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: var(--animation_timing)
}

#offcanvas.animation_right.close {
    animation-name: offcanvas_animation_right_close;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: var(--animation_timing)
}

#offcanvas.animation_down.close {
    animation-name: offcanvas_animation_down_close;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: var(--animation_timing)
}

#offcanvas.animation_left.close {
    animation-name: offcanvas_animation_left_close;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: var(--animation_timing)
}

#offcanvas.animation_fade.close {
    animation-name: offcanvas_animation_fade_close;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: var(--animation_timing)
}

@keyframes offcanvas_animation_up_close {
    0% {clip-path: var(--offcanvas_fin)}
    100% {clip-path: var(--offcanvas_up_ini)}
}

@keyframes offcanvas_animation_right_close {
    0% {clip-path: var(--offcanvas_fin)}
    100% {clip-path: var(--offcanvas_right_ini)}
}

@keyframes offcanvas_animation_down_close {
    0% {clip-path: var(--offcanvas_fin)}
    100% {clip-path: var(--offcanvas_down_ini)}
}

@keyframes offcanvas_animation_left_close {
    0% {clip-path: var(--offcanvas_fin)}
    100% {clip-path: var(--offcanvas_left_ini)}
}

@keyframes offcanvas_animation_fade_close {
    0% {opacity: 1}
    to {opacity: 0}
}

.medium, strong{font-weight: 500;}
.roman{font-weight: 400;}

.eixos_tematics{position: relative}
.eixos_tematics .et_pb_toggle_title{font-weight: 400;width: 85%;height: calc(60px * 3);display: flex;align-content: ali;align-items: flex-end;position: initial !important;}

.eixos_tematics .et_pb_toggle_title:before{
    margin-left: 136%;
    display: block;
    position: absolute;
    width: 46px;
    height: 46px;
    background: red;
    top: 40px;
    right: 20px !important;
    background: url(http://agoracivica.srvcactus.com/wp-content/uploads/2025/05/Grupo-129.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-indent: -9000em;
    transition: all 0.3s ease-in-out;
}

.eixos_tematics.et_pb_toggle_open .et_pb_toggle_title:before{transform: rotate(45deg);}
.col_2{column-count: 2; column-gap: 58px;}

.wpml-idiomas{padding:0px !important}
.wpml-idiomas li{list-style: none; line-height: 1.1; text-transform: uppercase;font-weight: 300;position: relative;width: fit-content; margin-left: auto;}
.wpml-idiomas li.active{font-weight: 500;}
.wpml-idiomas li:before{content: '';display: block;width: 0px;height: 1px;background-color: #FDDCC2;position: absolute; bottom: 5px; left: 0px; transition: all 0.5s ease-in-out;}
.wpml-idiomas li:hover:before{width: 100%;}

#offcanvas .et_pb_row_2_tb_header{height: fit-content;margin-top: auto;}
#offcanvas .et_pb_row_2_tb_header .et_pb_column{height: -webkit-fill-available;display: flex;justify-content: flex-end;}

.et_pb_toggle_content {
  transition: max-height 0.2s ease-out, opacity 0.2s ease-out;
}
.mejs-container *, .et_pb_section_video_bg *, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body{background: transparent !important;}
.et_pb_preload,.et_pb_section.et_pb_section_video.et_pb_preload {background-color: transparent !important}
.et_pb_preload:before {display: none!important}

.et_pb_section_video_bg{filter: brightness(1.15) saturate(.95)}

.civica_agora .et_pb_text_inner{display: flex; align-items: center;}
.civica_agora .et_pb_text_inner .agora_balls{height: 175px;width: -webkit-fill-available;margin-right: 20px; background-image:url('../../uploads/2025/06/boletes_mobile-4.svg'); background-position: center right; background-size: auto 100%;}


.wpcf7-form-control-wrap input, .wpcf7-form-control-wrap select{
    border-radius: 10px;
    border-color: #FDDCC2 !important;
    font-size: 26px;
    padding: 5px 10px;
    line-height: 1;
    height: unset;
    border-width: 2px;
    color: #FDDCC2;
}
.wpcf7-form-control-wrap input::placeholder,
.wpcf7-form-control-wrap textarea::placeholder {
  color: #FDDCC2;
}
.wpcf7-list-item{font-size: 26px; color: #FDDCC2;}
.wpcf7-list-item input[type=checkbox]+.wpcf7-list-item-label:before{border-width: 2px; border-color: #FDDCC2; border-radius: 5px;color: #FDDCC2;cursor: pointer;}
form#no_tho_perdis span[data-name="grpd"]{display: block; margin-top: 20px; margin-bottom: 20px;}
form#no_tho_perdis .wpcf7-submit{font-size: 36px;border: 0px;background: transparent; color:#FDDCC2; padding-left: 0px; padding-right: 200px;background: url('icons/submit.svg') no-repeat; background-position: center right;background-size: 180px auto;transition: all 0.5s ease-in-out;cursor: pointer;}
form#no_tho_perdis .wpcf7-submit:hover{padding-right: 220px;}
.wpcf7-list-item input[type=checkbox]:checked+.wpcf7-list-item-label:before{color:#FDDCC2 !important}
.wpcf7-not-valid-tip{position: absolute;right: 20px;transform: translateY(-120%);color: #FDDCC2;font-size: 18px;}

.bg_video_centrado .et_pb_section_video_bg{display: flex; align-items: center; justify-content: center;}

#offcanvas_open{cursor: pointer;}
#offcanvas_open .et_pb_image_wrap{transition: background-color 0.5s ease-in-out;padding:20px; transform: translate(20px, -20px);border-radius: 10px; }
#offcanvas_open:hover .et_pb_image_wrap{background-color: #10227117;}
#offcanvas_open .et_pb_image_wrap img{background-color: transparent !important;}


#offcanvas_close .et_pb_image_wrap{transition: background-color 0.5s ease-in-out;padding:20px; transform: translate(20px, -20px);border-radius: 10px;cursor: pointer; }
#offcanvas_close:hover .et_pb_image_wrap{background-color: #fddcc24d;}


.wpcf7 form.sent .wpcf7-response-output, .wpcf7 form.invalid .wpcf7-response-output{
    background: #abdbfc !important;
    border: 0px;
    font-size: 24px;
    margin: 0;
    margin-top: 1em;
    padding: 0.5em;
    text-align: center;
    border-radius: 4px;
}
.wpcf7 form.invalid .wpcf7-response-output{background-color: #c13929 !important; color: #fff !important;}
.cmplz-message{font-weight: 400;}

.dsm_card.flex-end.m-top-auto{height: fit-content;}
.dsm_card.flex-end .et_pb_module_inner .dsm_card_image_wrapper{margin-right: 0px; width: fit-content; flex: 0 0 fit-content;margin-left: 0px; transition: all 0.5s ease-in-out;}
.dsm_card.flex-end .et_pb_module_inner .dsm_card_image_wrapper img{max-width: 100%;}
.dsm_card.flex-end:hover .et_pb_module_inner .dsm_card_image_wrapper{margin-left: 20px;}

.dsm_card.flex-start.m-top-auto{height: fit-content;}
.dsm_card.flex-start .et_pb_module_inner{justify-content: start;}
.dsm_card.flex-start .et_pb_module_inner .dsm_card_wrapper{padding-left: 0px !important;}
.dsm_card.flex-start .et_pb_module_inner .dsm_card_image_wrapper{margin-right: 0px; width: fit-content; flex: 0 0 fit-content;margin-left: 0px; transition: all 0.5s ease-in-out;}
.dsm_card.flex-start .et_pb_module_inner .dsm_card_image_wrapper img{max-width: 100%;}
.dsm_card.flex-start:hover .et_pb_module_inner .dsm_card_image_wrapper{margin-left: 20px;}

.wpcf7-submit:after{display: none !important; content:''; color: transparent; opacity: 0 !important;}
.wpcf7-list-item a:hover{text-decoration: underline !important;}


@media (max-width: 1499px) {
    .et_pb_toggle_title{width: 85% !important; padding:0px !important}
    .eixos_tematics .et_pb_toggle_title:before{width: 36px;height: 36px;}
    #offcanvas .et_pb_row_2_tb_header{margin-bottom: 3em !important;}

}

@media (max-width: 1360px) {
    .et_pb_toggle_title{font-size: 46px !important;}
    .title_agora_balls{margin-left: -20px !important;}
    .title_agora h1 {font-size: 196px !important;line-height: 154px !important;}
    .civica_agora .et_pb_text_inner .agora_balls{height: 154px;}
    .eix_tematics_title h2{font-size: 120px !important;line-height: 100px !important;}
    html[lang="fr-FR"] .eix_tematics_title h2{font-size: 89px !important;line-height: 76px !important;}

    
}

@media (max-width: 1024px) {
    .col_2{column-count: 1; column-gap: 0px;}
    .et_pb_toggle_title{width: 85%; padding:0px !important}
    .eixos_tematics .et_pb_toggle_title:before{width: 36px;height: 36px;}
    #offcanvas .et_pb_row_2_tb_header{margin-bottom: 3em !important;}
    .title_agora h1  {font-size: 134px !important;line-height: 106px !important;}
    .civica_agora .et_pb_text_inner .agora_balls{height: 100px;}
    .row-reverse-res{display: flex;flex-direction: column-reverse;}

    .title_agora_balls.et_pb_image_0{
        transform: scaleX(1) scaleY(1) translateX(0%) translateY(10%);
    }

}

@media (max-width: 992px){
    .eixos_tematics .et_pb_toggle_title{font-size: 38px !important;}
}

@media (max-width:690px){
    .title_agora h1  {font-size: 100px !important;line-height: 86px !important;margin-left: auto; margin-right: 26px;}
    .civica_agora .et_pb_text_inner{display: flex; flex-direction: column-reverse;}
    .eixos_tematics .et_pb_toggle_title{height: fit-content !important;}

    .eix_tematics_title h2 {font-size: 65px !important;line-height: 50px !important;}
    .dsm_card.flex-start .et_pb_module_inner .dsm_card_image_wrapper img {max-width: 50%;}
    .dsm_card_title{white-space: nowrap;}

}