@charset "UTF-8";

/*!
* 
* OCT 2025
* evomeet.es
* jblanco
* 
*/


/* MEDIA BREAKPOINTS ------------------------------------------------

@media (min-width: 576px) {}    sm
@media (min-width: 768px) {}    md
@media (min-width: 992px) {}    lg
@media (min-width: 1200px) {}   xl
@media (min-width: 1400px) {}   xxl

-------------------------------------------------------------------- */





:root {
    --bs-primary:#e62058; 
    --bs-primary-darken:#e62058; 
    --bs-secondary:#9093f1; 
    --bs-secondary-darken:#777acf;
    --bs-tertiary:#78f5c7;
    --bs-tertiary-darken:#5ae0ad;
    --bs-quaternary:#4b9bbb;
    --bs-quaternary-darken:#4488a3;
    --bs-quinary:#f2aa80;
    --bs-quinary-darken:#f09968;
    --bs-sextary:#cccccc;
    --bs-sextary-darrken:#a99f94;
    --bs-septenary:#b585b6;
    --bs-septenary-darken:#a377a4;
    --zoom:#008cff;
    --zoom-darken:#006ec9;

    --color-perio:#9093f1;
    --color-higiene:#5ae0ad; /*#78f5c7*/ 
    --color-gestion:#cccccc;
    --color-gestion-dark:#939393;
    --color-implantoplastia:#ea629d;
    --color-pharma:#eb9492;

    --color-hover:#78f5c7; 
    --color-dentaid:rgb(0 20 137);


}
  
@media (prefers-reduced-motion: no-preference) {
    :root {
      scroll-behavior: smooth;
    }
}
  





/** 2023 * 
 * FONT FAMILY 'Poppins'
 * FONT WEIGHT: 200 light
 *              400 regular
 *              600 bold
 *              800 heavy
 * ***/


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

html{
    font-size:14px; /* Tamaño para 1rem */
}
body {
    margin: 0;
    padding:0;
    font-family: 'neue-haas-grotesk-display', sans-serif;
    font-weight:500;
    font-size:1rem;
    background-color:#fff;
}

html[lang="es"] [lang="en"],
html[lang="en"] [lang="es"]{ 
    display:none;
}
html[lang="en"] #langSwitcher [data-lang="en"],
html[lang="es"] #langSwitcher [data-lang="es"]{
    background-color: var(--bs-secondary)!important;
    color:white!important;
}




.clearfix{
    clear: both;
    float:none;
}
.disabled{
    opacity:0.45!important;
    pointer-events:none!important;
}
.no-pointer{
    pointer-events:none;
}
.hide{
    display:none!important;
}

.flex-break {
    flex-basis: 100%;
    height: 0;
  }

/* pinta (img, svg) de blanco, negro */
.toWhite{
    filter:brightness(0) invert(1);
}
.toBlack{
    filter:brightness(0);
}





/* TEXTO -------------------------------------------------------------- */
.f-light{
    font-family:'neue-haas-grotesk-display', sans-serif!important;
    font-weight:400;
}
.f-regular{
    font-family:'neue-haas-grotesk-display', sans-serif!important;
    font-weight:500;
}
.f-bold{
    font-family:'neue-haas-grotesk-display', sans-serif!important;
    font-weight:600;
}
.f-black{
    font-family:'neue-haas-grotesk-display', sans-serif!important;
    font-weight:700;
}


strong{
    font-family:'neue-haas-grotesk-display', sans-serif;
    font-weight:600;
}

h1,h2,h3,h4,h5,h6{
    font-weight: 400;
}

p,h1,h2,h3,h4,h5,h6{
    cursor: default;
}

.mt-5px{
    margin-top:5px;
}




/* ALTURAS ------------------------------------------------------------ */

.h-30{
    height: 30%!important;
}
.h-80{
    height: 80%!important;
}
.h-85{
    height: 85%!important;
}
.h-90{
    height: 90%!important;
}


.vh80{
    height:80vh!important;
}
.vh60{
    height:60vh!important;
}
.vh20{
    height:20vh!important;
}
.vh10{
    height:10vh!important;
}

.min-vh-100{
    min-height:100vh;
}


/* COLOR -------------------------------------------------------------- */
.bg-primary{
    background-color:var(--bs-primary)!important;
}
.bg-secondary{
    background-color:var(--bs-secondary)!important;
}

.text-primary{
    color:var(--bs-primary)!important;
}
.text-secondary{
    color:var(--bs-secondary)!important;
}
.text-quinary{
    color:var(--bs-quinary)!important;
}


.text-perio{
    color:var(--color-perio)!important;
}
.text-higiene{
    color:var(--color-higiene)!important;
}
.text-gestion{
    color:var(--color-gestion)!important;
}
.text-implantoplastia{
    color:var(--color-implantoplastia)!important;
}
.text-pharma{
    color:var(--color-pharma)!important;
}

.text-dentaid{
    color:var(--color-dentaid)!important;
}

/* HEADER =============================================================== */
/* ====================================================================== */
#header{
    width:100%;    
    background:url("../img/barcelona-sala-BN.webp") no-repeat center center;
    background-size:cover;
}

#preheader{
    background-color:transparent
}
#preheader .btn{
    font-size: 0.8em;
    color:white
}

@media (max-width: 575px) {
    #preheader{
        background-color:black;
    }
    #preheader .btn.btn-email,
    #preheader .btn.btn-whatsapp{
        padding-right: .25rem!important;
        padding-left: .25rem!important;
        letter-spacing: normal;
        white-space: nowrap;
        font-size:1rem;
        margin-left:5px;
        margin-right:5px;
    }
    #preheader .contact-info{
       background-color:#161616;
       padding-top:5px;
       padding-bottom:5px;
    }
    #preheader .language-logout{
       background-color:#000000;
       padding-top:5px;
       padding-bottom:5px;

    }
}
#preheader .btn-email img{
    filter:brightness(0) invert(1);
}

#preheader .btn-whatsapp img{
    filter:brightness(0) invert(1);
}
#preheader .btn:hover{
    color:var(--bs-tertiary)!important;
}

#preheader .btn-email:hover{
    color:var(--bs-tertiary)!important;
}
#preheader .btn-email:hover img{
    filter: invert(90%) sepia(8%) saturate(2297%) hue-rotate(93deg) brightness(102%) contrast(92%);
}
#preheader .btn-whatsapp:hover{
    color:var(--bs-tertiary)!important;
}
#preheader .btn-whatsapp:hover img{
    filter: invert(90%) sepia(8%) saturate(2297%) hue-rotate(93deg) brightness(102%) contrast(92%);
}



a.social-link{
    padding-left:10px;
    padding-right:10px;
}
a.social-link .ico-social{
    filter:brightness(0) invert(1);
}
a.social-link:hover .ico-social{
    filter: invert(90%) sepia(8%) saturate(2297%) hue-rotate(93deg) brightness(102%) contrast(92%);
}

.brand-link img{
    max-width:350px;
}
.logo-disciplinas{
    max-width: 550px;
}



/* Banner header */
#banner-header .container-fluid img{
    margin-top:auto;
    margin-bottom:auto;
    max-width:400px;
}  
#banner-header h1{
    font-size:2.8rem;
    line-height:1em;
}
@media (max-width: 575px) {
    #banner-header h1{
        font-size:2rem;
    }
    #banner-header .container-fluid img{
        max-width:350px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    #banner-header h1{
        font-size:1.3rem;
    }
    #banner-header .container-fluid img{
        max-width:350px;
    }
}





/* MENU -----------------------------------------------------------------*/
#menu {
    background-color:rgba(0,0,0,.8)
}
#menu .btn span{
    padding: 0 0.2em;
}
#menu .btn{
    color:white;
    text-transform: uppercase;
}
/*
#menu .btn.active{
    pointer-events:none;
}
*/
#menu .btn h1{
    font-size: 1.1rem!important;;
}

#menu .btn.active::after{
    transform: scale(1, 1);    
}

#menu .btn:focus{
    box-shadow:none!important;
}

#menu .btn::after{
    position:relative;
    display: block;
    width: 100%;
    height: 2px;
    content: "";
    transition: all 0.15s ease-out;
    transform: scale(0, 1);
    transform-origin: left center;
    background-color: var(--color-hover);
}
#menu .btn:hover::after{
    transform: scale(1, 1);    
}

/* MENU Auditorios -------------------------------------------------------*/

.nav-sticky-auditorios{
    position: sticky; 
    top: 0px;
    z-index:1;
    background: var(--bs-primary);
    color:white;
  }








/* LOGIN  =============================================================== */
/* ====================================================================== */

#login-screen { 
    background-color: #000000;
    background-image: url('/img/publico.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color:#ffffff;
}
img.phone-icon{
	width: 1.5em;
    margin-right: 0.2em;
    vertical-align: top;
}
.logo-live-streaming{
    max-width:250px;
}

.btn-email,
.btn-whatsapp{
    color:white!important;
}

.btn-email:hover,
.btn-whatsapp:hover{
    color:var(--color-hover)!important;
}
.btn-email img,
.btn-whatsapp img{
    filter:brightness(0) invert(1);
}
.btn-email:hover img,
.btn-whatsapp:hover img{
    filter: invert(90%) sepia(8%) saturate(2297%) hue-rotate(93deg) brightness(102%) contrast(92%);
}




input.form-control,
.input-group-text{
    background-color:#a5a5a5;
    border-color:#a5a5a5;
    color:white;
    font-weight:300;
    border-radius:0!important
}
.input-group-text img{
    filter: invert(1);
}

.form-control:focus{
    background-color:#495057;
    color:white;
    border-color: #9d9d9d;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(157,157,157, 0.51);
}

form input.form-control:-ms-input-placeholder{
    color: white!important;
}
form input.form-control::-webkit-input-placeholder{
    color: white!important;
}
form input.form-control::placeholder{
    color: white!important;
}

form .input-group-text svg{
    height:18px;
}
.btn-addon{
    border-width:px;
    color: #fff;
    background-color: #a5a5a5;
}
.btn-addon.active,
.btn-addon:active,
.btn-addon:hover,
.btn-addon.eye-on{
    background-color: #495057;
}
.btn-addon img{
    filter: invert(1);
}


#btns-register .btn.btn-rounded,
#btns-register .btn.btn-outline-secondary.btn-rounded
#btns-register .btn:not(.btn-addon){
    border:1px solid var(--bs-secondary)!important;
    color:var(--bs-secondary)!important;
    font-weight:300;
    padding-left:1.5em;
    padding-right:1.5em;
}
#btns-register .btn.btn-rounded:hover,
#btns-register .btn.btn-outline-secondary.btn-rounded:hover
#btns-register .btn:hover:not(.btn-addon){
    border:1px solid var(--bs-secondary)!important;
    color:#ffffff!important;
    background-color: var(--bs-secondary)!important;
}



/* PROGRAMA  =============================================================== */
/* ====================================================================== */


#programa .card{ 
    height:fit-content;
}
#programa .card .card-text{
    color: var(--bs-gray-600);
}

#programa .card .img-card{
    margin-top:-1.5rem;
    margin-left:-1.5rem;
} 

@media (max-width: 768px) {
    #programa .card .img-card{
        max-width: calc(100% + 3rem);
    }
}

.bot-ver{
    width:10em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 1.5rem;
}
.bot-ver svg{
    width: 24px;
    height: 24px;
}

.bot-ver.session-available{}
.bot-ver.session-pending{}

.bot-ver.session-no-video{
    opacity:0.7!important;
    white-space: nowrap;
    background-color:#455057!important;
    text-align:center;
    padding-right: 1.5rem;
}
.bot-ver.session-no-video > span{
    width:100%;
    text-align:center;
}


.bot-inscribete{
    width:10em;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

.auditorio{
    color:var(--bs-gray-500);
}


.bot-back{
    position:relative;
    line-height: 1.6em;
    background:none!important;
}

.bot-back::after {
    content: "";
    color: #ffffff;
    position: absolute;
    left: -75px;
    top: 10px;
    font-size:1rem;
    text-align:right;
    width: 70px;
}
html[lang="es"] .bot-back:hover::after {
    content: "VOLVER";
}
html[lang="en"] .bot-back:hover::after {
    content: "BACK";
}
.bot-back svg{
    margin:0;
    width:30px;
    height:30px;
}
@media (max-width: 768px) {
    .bot-back{
        display:none;
    }
} 


/* Marca disciplina en cards programa */
#programa .evento{
    position:relative;
    /*min-height:100%;*/
    padding-bottom:20px;
    max-width:540px;
}
#programa .evento .card{
    min-height: 98%;
}

#programa div[class*="discip-"] .card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    height:2px;
    width:100%;
    display: inline-block;    
}


#programa .evento.discip-digital .card::before{  
    border-top:2px solid #57b6b2;  
}
#programa .evento.discip-inter .card::before{
    border-top:2px solid #f2aa80; 
}
#programa .evento.discip-gestion .card::before{    
    border-top:2px solid var(--color-gestion);  
}
#programa .evento.discip-perio .card::before{  
    border-top:2px solid var(--color-perio);
}
#programa .evento.discip-higiene .card::before{
    border-top:2px solid var(--color-higiene); 
}
#programa .evento.discip-implantoplastia .card::before{
    border-top:2px solid var(--color-implantoplastia); 
}
#programa .evento.discip-pharma .card::before{
    border-top:2px solid var(--color-pharma); 
}

.discip-digital .card-title{
    color:#57b6b2!important;
}
.discip-inter .card-title{
    color:#f2aa80!important;
}
.discip-gestion .card-title{
    color:var(--color-gestion)!important;
}

.discip-higiene .card-title{
    color:var(--color-higiene)!important;
}
.discip-implantoplastia .card-title{
    color:var(--color-implantoplastia)!important;
}
.discip-pharma .card-title{
    color:var(--color-pharma)!important;
}
.discip-perio .card-title{
    color:var(--color-perio)!important;
}

/*cuando hacemos filtro pinta todo del color del filtro*/
body.discip-digital .card-title{
    color:#57b6b2!important;
}
body.discip-inter .card-title{
    color:#f2aa80!important;
}
body.discip-gestion .card-title{
    color:var(--color-gestion)!important;
}

body.discip-higiene .card-title{
    color:var(--color-higiene)!important;
}
body.discip-implantoplastia .card-title{
    color:var(--color-implantoplastia)!important;
}
body.discip-pharma .card-title{
    color:var(--color-pharma)!important;
}
body.discip-perio .card-title{
    color:var(--color-perio)!important;
}

body.discip-digital #programa .evento.discip-digital .card::before{  
    border-top:2px solid #57b6b2;  
}
body.discip-inter #programa .evento.discip-inter .card::before{
    border-top:2px solid #f2aa80; 
}
body.discip-gestion  #programa .evento.discip-gestion .card::before{    
    border-top:2px solid var(--color-gestion);  
}
body.discip-perio #programa .evento.discip-perio .card::before{  
    border-top:2px solid var(--color-perio);
}
body.discip-higiene #programa .evento.discip-higiene .card::before{
    border-top:2px solid var(--color-higiene); 
}
body.discip-implantoplastia #programa .evento.discip-implantoplastia .card::before{
    border-top:2px solid var(--color-implantoplastia); 
}
body.discip-pharma #programa .evento.discip-pharma .card::before{
    border-top:2px solid var(--color-pharma); 
}



/* iconos disciplinas en card */
.disciplinas-container{
    position:absolute;
    top:1rem;
    right:2.5rem;
}
.disciplinas-container div[class^="ico-"]{
    display:none;
    font-size:13px;
    font-weight:500;
    color:var(--bs-gray-500);
    cursor:default;
    vertical-align: middle;
}
.disciplinas-container div[class^="ico-"] img{
    vertical-align: middle;
    margin-right:5px;
    margin-left:10px;
}
.disciplinas-container div[class^="ico-"] span{
    vertical-align: middle;
}

.discip-perio .disciplinas-container .ico-perio{
    display:inline-block;
}
.discip-higiene .disciplinas-container .ico-higiene{
    display:inline-block;
}
.discip-inter .disciplinas-container .ico-inter{
    display:inline-block;
}
.discip-digital .disciplinas-container .ico-digital{
    display:inline-block;
}
.discip-gestion .disciplinas-container .ico-gestion{
    display:inline-block;
}
.discip-pharma .disciplinas-container .ico-pharma{
    display:inline-block;
}
.discip-implantoplastia .disciplinas-container .ico-implantoplastia{
    display:inline-block;
}


@media (max-width: 768px) {
    .filter-btn{
        font-size: 0.8rem;
    }
} 



div[class*="discip-"] .card-body .ponentes{
    margin-top: 0.7em;
    display: inline-block;
}


.discip-higiene .ponentes{
    color:var(--color-higiene)!important;
}
.discip-gestion .ponentes{
    color:var(--color-gestion-dark)!important;
}
.discip-implantoplastia .ponentes{
    color:var(--color-implantoplastia)!important;
}
.discip-pharma .ponentes{
    color:var(--color-pharma)!important;
}
.discip-perio .ponentes{
    color:var(--color-perio)!important;
}


body.discip-higiene .card-body .ponentes{
    color:var(--color-higiene)!important;
}
body.discip-gestion .card-body .ponentes{
    color:var(--color-gestion)!important;
}
body.discip-implantoplastia .card-body .ponentes{
    color:var(--color-implantoplastia)!important;
}
body.discip-pharma .card-body .ponentes{
    color:var(--color-pharma)!important;
}
body.discip-perio .card-body .ponentes{
    color:var(--color-perio)!important;
}


/*Mensaje/cover INSCRIBETE para usuarios Redux*/
.coverUserRedux{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;    
    background: rgba(255, 255, 255, 0.555);
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 60%, rgba(255,255,255,0) 100%);
}
.coverUserRedux .coverUserRedux_container{
    width:90%;
    box-shadow: #b5b5b5a1 0 1px 6px;
    padding:2em;
    background:whitesmoke;
}
#programa-container .coverUserRedux .card-title{
    color:#2f3031!important;
}



/* STREAMING ============================================================ */
/* ====================================================================== */

.page-streaming{
    background-color:#000000;
    color:white;

}
.page-streaming #bg-image:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    background-image:url(/img/publico.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
}

.tab-content,
.nav-tabs,
.nav-tabs .nav-link{
    border:none !important
}

.nav-tabs .nav-link:not(.active){opacity:0.6}
.nav-tabs .nav-link:hover{opacity:1!important}

.nav-tabs .nav-link img{
    vertical-align: sub;
}
#page-streaming .descrip img{
    filter: invert(1) grayscale(1) brightness(1.5) contrast(1.2);
    margin-right:20px!important;
}

#page-streaming .descrip .text-dentaid{
    color:#9d9d9d!important;
}

.page-streaming .btn-whatsapp.btn-modal{
    border:1px solid!important;
    border-color:  #18af50;
}

.page-streaming .modal-backdrop.show{
    opacity: 0.8!important;
}
.page-streaming .btn-whatsapp:hover img.whatsapp{
      filter: brightness(0) saturate(100%) invert(81%) sepia(55%) saturate(345%) hue-rotate(96deg) brightness(100%) contrast(93%)!important;
}


/* FOOTER =============================================================== */
/* ====================================================================== */
#footer-baseline{
    background-color:black;
    color:var(--bs-gray-200);
    font-size:0.9em;
}

#cookies_banner {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: 999;
    border-radius: 0;
    background-color:var(--bs-gray-500);
    color:white;
}



/* BOTONES BOOTSTRAP ======================================================== */
.btn{
    border-radius: 0;
    letter-spacing: 1px;
    font-family: 'neue-haas-grotesk-display', sans-serif;
    font-weight:500;
}
.btn:not(.btn-addon){    
    border:0!important;
}

.btn span{
    vertical-align: middle;
}

.btn-check:focus+.btn, 
.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(140, 244, 220, 0.25)!important;
}
.btn:hover *{
    cursor:pointer!important;
}

.btn.btn-rounded{
    border-radius:2em;
}


img.svg-icon{
	width: 1.4em;
    margin-right: 0.2em;
}



/* primary */
.btn-primary,
.btn-primary.disabled, 
.btn-primary:disabled{
    background-color:var(--bs-primary);
    border-color:var(--bs-primary);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active{
    background-color:var(--bs-primary-darken);
    border-color:var(--bs-primary-darken);
}
.btn-primary:focus{
    background-color:var(--bs-primary-darken);
    border-color:var(--bs-primary-darken);
    box-shadow: 0 0 0 0.25rem rgba(38,202,202, .5);
}


/* secondary */
.btn-secondary,
.btn-secondary.disabled, 
.btn-secondary:disabled{
    background-color:var(--bs-secondary);
    border-color:var(--bs-secondary);
}
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary.active{
    background-color:var(--bs-secondary-darken);
    border-color:var(--bs-secondary-darken);
}
.btn-secondary:focus{
    background-color:var(--bs-secondary-darken);
    border-color:var(--bs-secondary-darken);
    box-shadow: 0 0 0 0.25rem rgba(38,202,202, .5);
}

/* quaternary */
.btn-quaternary,
.btn-quaternary.disabled, 
.btn-quaternary:disabled{
    background-color:var(--bs-quaternary);
    border-color:var(--bs-quaternary);
}
.btn-quaternary:hover,
.btn-quaternary:active,
.btn-quaternary.active{
    background-color:var(--bs-quaternary-darken);
    border-color:var(--bs-quaternary-darken);
}
.btn-quaternary:focus{
    background-color:var(--bs-quaternary-darken);
    border-color:var(--bs-quaternary-darken);
    box-shadow: 0 0 0 0.25rem rgba(38,202,202, .5);
}


/* gray */
.btn-gray,
.btn-gray.disabled, 
.btn-gray:disabled{
    color:white;
    background-color:var(--bs-gray-600);
    border-color:var(--bs-gray-600);
}
.btn-gray:hover,
.btn-gray:active,
.btn-gray.active{
    color:white;
    background-color:var(--bs-gray-800);
    border-color:var(--bs-gray-800);
}
.btn-gray:focus{
    color:white;
    background-color:var(--bs-gray-800);
    border-color:var(--bs-gray-800);
    box-shadow: 0 0 0 0.25rem rgba(38,202,202, .5);
}

/* zoom */
.btn-zoom,
.btn-zoom.disabled, 
.btn-zoom:disabled{
    background-color:var(--zoom);
    border-color:var(--zoom);
    color:white;
}
.btn-zoom:hover,
.btn-zoom:active,
.btn-zoom.active{
    background-color:var(--zoom-darken);
    border-color:var(--zoom-darken);
    color:white;
}
.btn-zoom:focus{
    background-color:var(--zoom-darken);
    border-color:var(--zoom-darken);
    box-shadow: 0 0 0 0.25rem rgba(38, 90, 202, 0.5);
    color:white;
}