/**
 * SepaJoven Next Generation 2025
 * EVOMEET
 * 
 * @jBlanco
 * MAR 2025
 */
/*=========================================================================
 * MEDIA QUERIES
@media (max-width: 767px){}
@media (max-width: 980px){}
@media (min-width: 981px) and (max-width: 1199px){}
@media (min-width: 1200px){}
@media (min-width: 1441px){}
 * COLORES 
#5519ed		- violeta
#3331f6		- azul
#fa1a97		- fucsia
=========================================================================== */


/* Fuentes Adobe 
Neue Haas Grotesk Display Pro 45 Light
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 400;
font-style: normal;

Neue Haas Grotesk Text Pro 75 Bold
font-family: "neue-haas-grotesk-text", sans-serif;
font-weight: 700;
font-style: normal;
*/


:root{
    --text-color:black;
    --text-color-alternative:white;
  

    --color-primary:black;
    --color-primary-hover:#1c1c1c;
    --color-secondary:#4FBCBC;
    --color-secondary-hover:#53f1f1;  
    --color-tertiary:white;
    --color-tertiary-hover:rgb(224, 224, 224);

}

.link-primary{
    color:var(--color-primary);
}
.link-primary:hover{
    color:var(--color-primary-hover);
}
.link-secondary{
    color:var(--color-secondary);
}
.link-secondary:hover{
    color:var(--color-secondary-hover);
}
.link-tertiary{
    color:var(--color-tertiary);
}
.link-tertiary:hover{
    color:var(--color-tertiary-hover);
}




/* COMUNES =============================================================== */
/* ======================================================================= */

html[lang="es"] [lang="en"]{ display:none;}
html[lang="en"] [lang="es"]{ display:none;}



body{
    font-size:1rem;
    font-family:'neue-haas-grotesk-display';
    font-weight:400;
    color: var(--text-color);
    background-color: var(--color-secondary);
}
.container,
.container-lg,
.container-xl{
    max-width: 1200px;
}
img{
    max-width:100%;
    height:auto;
}
h1{
    font-family:'neue-haas-grotesk-display';
}
h2,h3,h4,h5,h6{
    font-family:'neue-haas-grotesk-text';
    margin-bottom:0;
}
h1 span:not([lang]), h2 span:not([lang]), h3 span:not([lang]), h4 span:not([lang]), h5 span:not([lang]), h6 span:not([lang]){
    font-family:'neue-haas-grotesk-display';
}
h1{    
    font-size:3.2em;
}
h2{
    font-family:'neue-haas-grotesk-display';
    font-size:2.2em;
}
@media (max-width:767px){
    h2{
        font-size:2em;
    }
}
@media (min-width:768px) and (max-width:980px){
    h2{
        font-size:1.8em;
    }
    h3{
        font-size:1.5em;
    }
}
/* Altura dispositivo */
@media (min-width:768px){
    .h-100vh{height:100vh!important;}
    .h-90vh{height:90vh!important;}
    .h-80vh{height:80vh!important;}
    .h-70vh{height:70vh!important;}
    .h-60vh{height:60vh!important;}
    .h-50vh{height:50vh!important;}
    .h-40vh{height:40vh!important;}
    .h-30vh{height:30vh!important;}
    .h-20vh{height:20vh!important;}
    .h-10vh{height:10vh!important;}
}
@media (max-width:767px){
    .h-100vh{min-height:100vh!important;}
    .h-90vh{min-height:90vh!important;}
    .h-80vh{min-height:80vh!important;}
    .h-70vh{min-height:70vh!important;}
    .h-60vh{min-height:60vh!important;}
    .h-50vh{min-height:50vh!important;}
    .h-40vh{min-height:40vh!important;}
    .h-30vh{min-height:30vh!important;}
    .h-20vh{min-height:20vh!important;}
    .h-10vh{min-height:10vh!important;}
}

.fs-09{
    font-size:0.86rem!important;
}

/* Logo SepaJoven de texto */
.sepaJoven-logo-texto{
    font-family:'neue-haas-grotesk-text';
}
.sepaJoven-logo-texto span{
    font-family:'neue-haas-grotesk-display';
}
/* budget de texto */
.relleno{
	font-style: normal;
    font-size: 0.8em;
    padding: 0 0.8em;
    text-transform: uppercase;
    display: inline-block;
    text-align: center;
    background-color: rgba(20,20,20,0.75);
    border-radius: 1em;
}
/* pinta (img, svg) de blanco */
.toWhite{
    filter:brightness(0) invert(1);
}
/* desactivado */
.disabled{
    pointer-events:none;
    opacity: .4;
}

 
/*=========================================================================
 * HEADER
 *========================================================================= */
#preheader{
    position:absolute;
    top:0;
    z-index:1;
    width:100%;
}

#header{
    padding: 0.4rem 0;
}
@media (min-width:768px){
    .page-login #header > .container{
        height: 10vh;
    }
}
.btn-logout{
    font-size:14px;
    line-height:1.2em;
    color:black;
}
.btn-logout i{
    font-style:normal!important;
}
.btn-logout span{
    font-size: 1.6em;
    line-height: 0;
    display: inline-block;
    vertical-align: middle;
}

/* lang switcher */

#langSwitcher a{
    font-family: "neue-haas-grotesk-text", sans-serif;    
    font-weight: 700;
    color:#484848;
}
html[lang="es"] #langSwitcher a[data-lang="es"],
html[lang="en"] #langSwitcher a[data-lang="en"]{color:black!important;}


/*=========================================================================
 * LOGIN
 *========================================================================= */
body.page-login #addonpass{
    background-color:white;
    border:0;
}
body.page-login #addonpass img{
    opacity:0.6;
}

body.page-login #password{
    height: calc(1.5em + .75rem + 3px);
    border: 0;
}

body.page-login #button-addon-eye{
    background-color:#dbdbdb;
}





/*=========================================================================
 * CORPORATE FORUMS
 *========================================================================= */
.lista-sesiones .sesion{
    padding-top:20px;
    padding-bottom:20px;
    font-family: 'neue-haas-grotesk-display';
    font-size:1.2rem;
    border-width:2px!important;
}
.lista-sesiones .sesion .fecha{
    font-size:1.1em;
}
.lista-sesiones .sesion .fecha p{
    line-height:1em;
    margin-bottom:0;
}
.lista-sesiones .sesion .fecha p span{
    font-size:0.74em;
}
.lista-sesiones .sesion .fecha strong{
    font-family: 'neue-haas-grotesk-text';
}

.lista-sesiones .sesion .titsesion h6{
    font-size:1.2em;
    font-family: 'neue-haas-grotesk-display';
}
.lista-sesiones .sesion .titsesion h5{
    font-size:1.2em;
}
.lista-sesiones .border-dashed{
    border-bottom:1px dashed white;
}



/* Social Icons ========================================================= */
.social-icon{
    width:32px;
    height:32px;
    display:inline-block;
    background-color:transparent;
    line-height: 0;
    text-align: center;
    padding: 0.25rem;
    border-color:black!important;
}

.social-icon img{
    width:100%;
    height:auto;
    margin:auto;
}
.btn.btn-circle.social-icon:hover{
    background-color:black;
    opacity:1;
}
.btn.btn-circle.social-icon:hover img{
    filter: invert(74%) sepia(36%) saturate(579%) hue-rotate(130deg) brightness(84%) contrast(87%);
}
/*https://change-svg-color.vercel.app/*/
.to-black{
   filter: invert(0%) sepia(97%) saturate(4650%) hue-rotate(122deg) brightness(101%) contrast(94%);
}
.to-white{
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(35deg) brightness(107%) contrast(102%);
}

.btn-primary:hover .to-black{ filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(35deg) brightness(107%) contrast(102%);}
.btn-outline-primary:hover .to-black{filter: invert(81%) sepia(54%) saturate(472%) hue-rotate(122deg) brightness(79%) contrast(82%);}
.btn-secondary:hover .to-black{filter: invert(81%) sepia(54%) saturate(472%) hue-rotate(122deg) brightness(79%) contrast(82%);}


/* Globo ================================================================= */
.globo{
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-items:stretch;
    min-height:6em;
    line-height:1.6em;
    padding:2em;
    border:2px solid white;
    border-radius:2.6em;
}
@media (min-width:768px) and (max-width:980px){
    .globo h1{
        font-size:2.2em;
    }
}
/* Botones ===============================================================*/
.btn.btn-circle{
    border-radius:50%;
    border:2px solid white;
}
.btn.btn-circle:hover{
    background:rgba(255,255,255, 0.3)
}
.btn.btn-rounded{
    border-radius: 1.8em;
}
.btn i{
    vertical-align: text-top;
}
.btn i::before{
    background-color:white;    
    width:1em;
    height:1em;
}
.btn svg {
    vertical-align: sub;
}
.btn:focus,
.btn.focus,
.form-control:focus,
.form-control.focus {box-shadow: 0 0 0 .2rem rgba(0, 0, 0, 0.1);}


.btn-link,
.btn-link:hover{
    color:var(--color-primary);
}


/* Primary */
.btn-primary{
    border-color:var(--color-primary);
    background-color:var(--color-primary);
    color:var(--color-secondary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
    border-color:var(--color-primary);
    background-color:var(--color-primary);
    color: var(--text-color-alternative);
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active{
    border-color:var(--color-primary);
    background-color:var(--color-primary);
    color:var(--color-tertiary);
}
.btn-primary.disabled, 
.btn-primary:disabled{
    border-color:var(--color-primary);
    background-color:var(--color-primary);
    color:var(--color-secondary);
}
.btn-primary.focus,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:not(:disabled):not(.disabled):active:focus{
    box-shadow: 0 0 0 .2rem rgba(0, 0, 0, 0.5);
}

.btn-outline-primary{
    color: var(--color-primary);
    background-color: var(--color-secondary);
    border-color: var(--color-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active{
    border-color:var(--color-primary);
    background-color:var(--color-primary);
    color:var(--color-secondary);
}
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active{
    border-color:var(--color-primary);
    background-color:var(--color-primary);
    color:var(--color-secondary);
}
.btn-outline-primary.disabled, 
.btn-outline-primary:disabled{
    color: var(--color-primary);
    background-color: var(--color-secondary);
    border-color: var(--color-primary);
}
.btn-outline-primary.focus,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus{
    box-shadow: 0 0 0 .2rem rgba(0, 0, 0, 0.5);
}

.border-primary{
    border-color: var(--color-primary);
}
.text-primary{
    color: var(--color-primary);
}
.bg-primary{
    background-color: var(--color-primary);
    color:white;
}


/* Secondary */
.btn-secondary{
    border-color:var(--color-secondary);
    background-color:var(--color-secondary);
    color:var(--color-primary);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active{
    border-color:var(--color-secondary);
    background-color:var(--color-primary);
    color:var(--color-secondary);
}

.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active{
    border-color:var(--color-secondary);
    background-color:var(--color-primary);
    color:var(--color-secondary);
}
.btn-outline-secondary{
    border-color:var(--color-secondary);
    background-color:var(--color-primary);
    color:var(--color-secondary);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active{
    border-color:var(--color-secondary);
    background-color:var(--color-secondary);
    color:var(--color-primary);
}
.border-secondary{
    border-color: var(--color-secondary);
}
.text-secondary{
    color: var(--color-secondary)!important;
}
.bg-secondary{
    background-color: var(--color-secondary);
    color:white;
}


/* Tertirary */
.btn-tertiary{
    border-color:var(--color-tertiary);
    background-color:var(--color-tertiary);
    color:var(--color-secondary);
}
.btn-tertiary:hover,
.btn-tertiary:focus,
.btn-tertiary:active{
    border-color:var(--color-tertiary);
    background-color:var(--color-tertiary);
    color: var(--color-primary);
}
.btn-tertiary:not(:disabled):not(.disabled).active,
.btn-tertiary:not(:disabled):not(.disabled):active{
    border-color:var(--color-tertiary);
    background-color:var(--color-tertiary);
    color:var(--color-secondary);
}
.btn-tertiary.disabled, 
.btn-tertiary:disabled{
    border-color:var(--color-tertiary);
    background-color:var(--color-tertiary);
    color:var(--color-secondary);
}
.btn-tertiary.focus,
.btn-tertiary:focus,
.btn-tertiary:focus-visible,
.btn-tertiary:not(:disabled):not(.disabled):active:focus{
    box-shadow: 0 0 0 .2rem rgba(255,255,255, 0.5);
}

.btn-outline-tertiary{
    color: var(--color-tertiary);
    background-color: transparent;
    border-color: var(--color-tertiary);
}
.btn-outline-tertiary:hover,
.btn-outline-tertiary:focus,
.btn-outline-tertiary:active{
    border-color:var(--color-tertiary);
    background-color:var(--color-tertiary);
    color:var(--color-secondary);
}
.btn-outline-tertiary:not(:disabled):not(.disabled).active,
.btn-outline-tertiary:not(:disabled):not(.disabled):active{
    border-color:var(--color-tertiary);
    background-color:var(--color-tertiary);
    color:var(--color-secondary);
}
.btn-outline-tertiary.disabled, 
.btn-outline-tertiary:disabled{
    color: var(--color-tertiary);
    background-color: transparent;
    border-color: var(--color-tertiary);
}
.btn-outline-tertiary.focus,
.btn-outline-tertiary:focus,
.btn-outline-tertiary:focus-visible,
.btn-outline-tertiary:not(:disabled):not(.disabled):active:focus{
    box-shadow: 0 0 0 .2rem rgba(255,255,255, 0.5);
}


@media (min-width:768px) and (max-width:980px){
    .btn-responsive {
        font-size:80%;
      }
}


.link-sala{
    font-size:0.9rem;
}


/*=========================================================================
 * FOOTER
 *========================================================================= */
footer{
    background-color:var(--color-primary);
    padding-bottom:40px;
}
#footer-sponsors img{
    filter: brightness(0) invert(1);
}
footer .premium,
footer .platino,
footer .oro,
footer .bronce{
	padding-top:50px;
}
footer .col-tit-patro img{
	max-width: fit-content;
}    
footer .premium .col-items,
footer .platino .col-items,
footer .oro .col-items,
footer .bronce .col-items{
	border-top:1px solid white;
}
footer .col-items img {
	max-width: 100%;
	height: auto;
}

/*=========================================================================
 * BACKGROUND
 *========================================================================= */
body{
	min-height:100vh;
	width:100%;	
	background-color: var(--color-secondary);
	background-attachment:fixed;
	background-size: cover;
	background-position:center;
}