:root {
  --liinc-primary: #ff452c;
  --liinc-dark: #780316;
  --liinc-dark-alpha: #78031770;
  --liinc-bg-dark: #0a0c23;
  --liinc-light: #ffdf88;
  --liinc-lightest: #fffcdd;
  --liinc-branco: #FFFFFF;
  --linc-bkglaranja: #E03827;

  --url-logo:url('../images/logo_liinc.png');
  --url-logopb:url('../images/logo_liincpb.png');
  --url-lang-en: url('../images/flags/en.png');
  --url-lang-esp: url('../images/flags/es.png');
  --url-lang-ptbr: url('../images/flags/pt-br.png');
  --url-ic-tel: url('../images/ic_tel.png');
  --url-ic-mail: url('../images/ic_mail.png');  
  --url-ic: url('../images/ic.png');
  --url-ic-btn: url('../images/ic_btn.png');
  --url-bkgbanner: url('../images/bkg_banner.png');  
  --url-bkg-numeros: url('../images/bkg_numeros.png');
  --url-doi: url('../images/doi.svg');

}

@font-face {
    font-family: 'Noto Serif ExtraCondensed';
    src: url('../fonts/woff2/NotoSerifExtraCondensed-Bold.woff2') format('woff2'),
        url('../fonts/woff/NotoSerifExtraCondensed-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Serif ExtraCondensed';
    src: url('../fonts/woff2/NotoSerifExtraCondensed-ExtraBold.woff2') format('woff2'),
        url('../fonts/woff/NotoSerifExtraCondensed-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Serif ExtraCondensed';
    src: url('../fonts/woff2/NotoSerifExtraCondensed-Light.woff2') format('woff2'),
        url('../fonts/woff/NotoSerifExtraCondensed-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Serif ExtraCondensed';
    src: url('../fonts/woff2/NotoSerifExtraCondensed-SemiBold.woff2') format('woff2'),
        url('../fonts/woff/NotoSerifExtraCondensed-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Serif ExtraCondensed';
    src: url('../fonts/woff2/NotoSerifExtraCondensed-Regular.woff2') format('woff2'),
        url('../fonts/woff/NotoSerifExtraCondensed-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('../fonts/woff2/NotoSerif-Black.woff2') format('woff2'),
        url('../fonts/woff/NotoSerif-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('../fonts/woff2/NotoSerif-Bold.woff2') format('woff2'),
        url('../fonts/woff/NotoSerif-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('../fonts/woff2/NotoSerif-Light.woff2') format('woff2'),
        url('../fonts/woff/NotoSerif-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('../fonts/woff2/NotoSerif-Regular.woff2') format('woff2'),
        url('../fonts/woff/NotoSerif-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('../fonts/woff2/NotoSerif-SemiBold.woff2') format('woff2'),
        url('../fonts/woff/NotoSerif-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('../fonts/woff2/NotoSerif-Medium.woff2') format('woff2'),
        url('../fonts/woff/NotoSerif-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('../fonts/woff2/NotoSerif-ExtraBold.woff2') format('woff2'),
        url('../fonts/woff/NotoSerif-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

body{
  background-color: #E7EBEE;
  font-family: 'Muli-Regular', 'Roboto', sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

a{
    color: var(--liinc-primary) !important;
    text-decoration: underline;
}

#topo{
    width: 100%;
    height: 164px;
    background-color: #770316;
}
#logo_home{
    margin: 25px 0 0 0;
    background-image: var(--url-logo);
    background-size: 276px 106px;
    background-repeat: no-repeat;
    width: 276px;
    height: 106px;
}
#logo_homepb{
    margin: 25px 0 0 0;
    background-image: var(--url-logopb);
    background-size: 148px 56px;
    background-repeat: no-repeat;
    width: 148px;
    height: 56px;
}
#menu_user_rede_social{
    padding: 20px 0 0 0;
}
#rede_social{
    margin: 0 20px;
    padding: 0px;
}
#rede_social li{
    list-style: none;
    display: inline; 
    padding: 0 2px;
}
#rede_social li a{
    color: var(--liinc-branco) !important;
    text-decoration: none;
    padding: 0;
    font-size: 20px;
    line-height: 20px;
}
#idioma{
    margin: 0px;
    padding: 0px;
}
#idioma li{
    width: 26px;
    height: 16px;
    list-style: none;
    display: inline-block; 
    margin: 0 5px;
    background-size: 26px 16px;
}
#idioma li.lang_en{    
    background-image: var(--url-lang-en);
}
#idioma li.lang_es{
    background-image: var(--url-lang-esp);
}
#idioma li.lang_pt-br{
    background-image: var(--url-lang-ptbr);
}
#idioma li a{
    display: block;
    width: 26px;
    height: 16px;
    text-decoration: none;
    padding: 0;
}
#liinc_issn{
    padding: 20px 0 0 0;
    color: var(--liinc-branco);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 14px;
}
#menuUserLiinc{
    padding: 40px 0 0 0;
    color: var(--liinc-branco);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 14px;
    float: right;
}


#areaMenu{
    width: 100%;
    height: 50px;
    background-color: #000000;
}
#areaMenu .navbar{
    padding: 10px 0;
}
#areaMenu .navbar .nav-link{
    color: #FFFFFF; 
    padding: 0px 10px !important;  
}
#areaMenu .navbar li:not(:last-child){
    border-right: 1px solid var(--liinc-light);
}
#areaMenu .navbar .dropdown-toggle::after {
    color: var(--liinc-light);
}


/* 1. Reset e Alinhamento do Primeiro Nível (Horizontal) */
#navigationPrimary {
    display: flex;
    flex-direction: row;
    list-style: none;
    margin: 0;
    padding: 0;
}

#navigationPrimary > li {
    position: relative; /* Necessário para posicionar o sub-menu */
}

#navigationPrimary > li > a {
    display: block;
    padding: 3px 10px;
    color: #FFFFFF !important;
    text-decoration: none;
    transition: background 0.3s;
}

#navigationPrimary > li > a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* 2. Segundo Nível (Dropdown Vertical) */
#navigationPrimary li ul {
    display: none; /* Esconde por padrão */
    position: absolute !important; 
    top: 100% !important;  /* Alinha logo abaixo do pai */
    left: -100px !important; 
    background-color: #ffffff !important;
    min-width: 100px !important;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2) !important;
    list-style: none !important;
    padding: 0 0 !important;
    z-index: 9999 !important;
}

/* 3. Mostrar o menu ao passar o mouse */
#navigationPrimary li:hover > ul {
    display: block;
    border-radius: 5px;
    padding: 10px 0;
}

/* 4. Estilização dos itens do Dropdown */
#navigationPrimary li ul li {
    width: 100%;
}

#navigationPrimary li ul li a {
    display: block;
    padding: 3px 10px;
    color: #333333 !important; /* Cor do texto no dropdown (fundo branco) */
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
    padding: 5px 10px;
}

#navigationPrimary li ul li a:hover {
    background-color: var(--liinc-light);
    color: var(--liinc-dark) !important;
    border: none !important;
}

/* Remover borda do último item do dropdown */
#navigationPrimary li ul li:last-child a {
    border-bottom: none;
}

/* 5. Ajuste para o item "Sobre" que tem filhos (Seta opcional) */
#navigationPrimary li:has(ul) > a::after {
    content: ' ▼';
    font-size: 10px;
    vertical-align: middle;
    color: var(--liinc-light);
}



/* 1. Reset e Alinhamento do Primeiro Nível (Horizontal) */
#navigationUser1 {
    display: flex;
    flex-direction: row;
    list-style: none;
    margin: 0;
    padding: 0;
}

#navigationUser1 > li {
    position: relative; /* Necessário para posicionar o sub-menu */
}

#navigationUser1 > li > a {
    display: block;
    padding: 3px 10px;
    color: #FFFFFF !important;
    text-decoration: none;
    transition: background 0.3s;
}

#navigationUser1 > li > a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* 2. Segundo Nível (Dropdown Vertical) */
#navigationUser1 li ul {
    display: none; /* Esconde por padrão */
    position: absolute !important; 
    top: 100% !important;  /* Alinha logo abaixo do pai */
    left: -100px !important; 
    background-color: #ffffff !important;
    min-width: 100px !important;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2) !important;
    list-style: none !important;
    padding: 0 0 !important;
    z-index: 9999 !important;
}

/* 3. Mostrar o menu ao passar o mouse */
#navigationUser1 li:hover > ul {
    display: block !important;
}

/* 4. Estilização dos itens do Dropdown */
#navigationUser1 li ul li {
    width: 100%;   
}

#navigationUser1 li ul li a {
    display: block;
    color: #333333 !important; /* Cor do texto no dropdown (fundo branco) */
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
    padding: 5px 10px;
}


#navigationUser1 li ul li a:hover {
    background-color: var(--liinc-dark);
    color: var(--liinc-light) !important;
    border: none !important;
    padding: 5px 10px 5px 15px;
}

/* Remover borda do último item do dropdown */
#navigationUser1 li ul li:last-child a {
    border-bottom: none;
}

/* 5. Ajuste para o item "Sobre" que tem filhos (Seta opcional) */
#navigationUser1 li:has(ul) > a::after {
    content: ' ▼';
    font-size: 10px;
    vertical-align: middle;
    color: var(--liinc-light);
}
.cmp_breadcrumbs {
    padding: 20px 0;
}
.cmp_breadcrumbs ol li{
    display: inline;
    list-style: none;
    background-image: var(--url-ic);
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-position: 0px 4px;
    padding: 0 0 0 20px;
    margin: 0 10px 0 0;
}
.cmp_breadcrumbs ol li a{
    color: var(--liinc-dark);
    text-decoration: none;
}
.cmp_breadcrumbs ol li .separator{
    display: none;
}
.page {
    margin: 0 20px;
}
.page h1{
    color: var(--liinc-primary);
    background-image: var(--url-ic);
    background-repeat: no-repeat;
    background-size: 28px 28px;
    background-position: 2px 12px;
    padding: 0 0 0 40px;
    margin: 0 20px;
}

#areaBanner{
    width: 100%;
    height: 637px;
    background: #770316;
    background: linear-gradient(1800deg,rgba(119, 3, 22, 1) 0%, rgba(255, 79, 44, 1) 100%);
}
#banner_home{
    background-image: var(--url-bkgbanner);
    background-repeat: no-repeat;
    width: 100%;
    height: 637px;
}
#bannerPrincipal{
    height: 637px;
}
#bannerPrincipal .carousel-inner{
    width: 100%;
    padding-top: 250px;
}
#bannerPrincipal .carousel-inner .carousel-item {
    width: 100%;
}
#bannerPrincipal .carousel-inner .carousel-item .carousel-caption{
    text-align: right;
    padding: 0;
    margin: 0;
    right: 0;

}
#bannerPrincipal .carousel-inner .carousel-item .carousel-caption h5{
    display: block;
    font-family: "Noto Serif";
    font-size: 30px;
    line-height: 45px;
    padding: 0;
    margin: 0;
    text-align: left;
}
.btn-leiamais{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: var(--liinc-light) !important;
    border:1px solid var(--liinc-light);
    padding: 5px;
    text-decoration: none;
    margin: 20px 50px 0 0;
    display: inline-block; /* ou block se preferir */
}



#areaContent{
    width: 100%;
    min-height: 500px;
    background-color: #FFFFFF;
}
.titleIC{
    font-family: "Noto Serif";
    background: var(--url-ic) no-repeat;
    margin: 20px 0;
    padding: 0 0 0 30px;
    color: var(--liinc-primary);
    font-size: 20px;
    line-height:25px;
}
.titleIC2{
    font-family: "Noto Serif";
    background: var(--url-ic) no-repeat;
    margin: 20px 0;
    padding: 0 0 0 30px;
    color: var(--liinc-branco);
    font-size: 20px;
    line-height:25px;
}
.btn_submissao{
    background-color: var(--liinc-primary);
    color: var(--liinc-light) !important;
    border-radius: 20px;
    padding: 3px 25px;
    font-size: 25px;
    line-height: 50px;
    height: 56px;
    margin: 55px 0 0 0;
    display: block;
    width: 210px;
    text-decoration: none;
}
.icBtn{
    display:inline-block;
    width: 24px;
    height: 24px;
    background: var(--url-ic-btn) no-repeat;

    margin: 5px 10px 0 0;
}
.infNumeros{
    width: 186px;
    height: 186px;
    background: #770316;
    background: linear-gradient(1800deg,rgba(119, 3, 22, 1) 0%, rgba(255, 79, 44, 1) 100%);
    border-radius: 24px;
}
.infNumeros h4{
    background: var(--url-bkg-numeros) no-repeat;
    text-align: center;
    font-size: 60px;
    color: #FFFFFF;
    width: 186px;
    height: 186px;
    padding-top: 60px;
}
.descNumeros{
    color: var(--liinc-primary);
    text-align: center;
    font-size: 16px;
    min-height: 40px;
}
.areaIndexadores{
    background-color: var(--linc-bkglaranja);
    border-radius: 30px;
    padding:15px;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}
#listIndexadores{
    margin: 20px 0;
    padding: 0;
}
#listIndexadores li{
    display: inline-block;
    list-style: none;
    margin: 0 20px;
}
.ultmaEdicao h3{
    font-family: "Noto Serif";
    margin: 20px 0;
    padding: 0 0 0 0;
    color: var(--liinc-primary);
    font-size: 22px;
    line-height: 28px;
}

#areaFooter{
    width: 100%;
    height: 385px;
    background-color: #58160C;
}
.footerTituloLiinc{
    color: var(--liinc-branco);
    font-size: 18px;
    margin: 20px 0;
}
#footerEndereco{
    color: var(--liinc-branco);
    font-size: 12px;
    line-height: 18px;
}
#areaContato{
    padding: 20px 0;
}
#areaContato h3{
    color: var(--liinc-branco);
    font-size: 18px;
    margin: 0 0 30px 0;
}
#areaContato p{
    color: var(--liinc-branco);
    font-size: 12px;
}
#infContato{
    margin: 0 0 20px 0;
    padding: 0;
}
#infContato li{
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--liinc-branco);
    padding: 0 0 0 30px;
    font-size: 12px;
    line-height: 25px;
}
.infContatoTel{
    background: var(--url-ic-tel) no-repeat;
    background-position:left center;
}
.infContatoMail{
    background: var(--url-ic-mail) no-repeat;
    background-position:left center;
}
#areaInfDesenv{
    width: 100%;
    height: 28px;
    background-color: #090C23;
    color: var(--liinc-branco);
    font-size: 11px;
    line-height: 28px;
}
#areaInfDesenv p{
    margin: 0;
}

/**
Idioma
*/
.dropwdownidioma{
    margin: -4px 0 0 0;
}
.areaidioma {
    text-align: right;
    right: 0;
}

.idioma {
    position: relative;
    text-align: right;
    width: 120px;
    right: 0;
}

.ic_idioma {
    color: var(--liinc-branco);
}

.idioma select {
    border: none;
    color: #0BBBEF;
    font-size: 14px;
    padding-left: 0px;
    width: 80px;

}

.btn_idioma {
    margin: 0 !important;
    padding: 0 !important;
}
.btn_idioma::after {
    color: var(--liinc-branco);
}

.btn_idioma:focus {
    box-shadow: none;
}

.btn_idioma:hover {
    box-shadow: none;
}
.btn_idioma .flag {
    margin:0px !important;
}
.btn_idioma .flag img {
   width: 25px;
    height: auto;
    margin-right: 0px;
    margin-left: 0px;
    margin-top: 0px;
} 

.dropidioma {
    float: left;
    margin: 0 0 0 -40px !important;
    min-width: 50px !important;
}
.dropidioma li{
    width: auto;
    padding: 0 5px !important;
}
.dropidioma li a  {
    margin:0 !important;
    padding: 0 !important;
}
.dropidioma li a img {
    width: 20px;
    height: auto;
    margin-right:0px!important;
}

.flag img {
    width: 25px;
    height: auto;
    margin-right: 0px;
    margin-left: 0px;
    margin-top: 0px;
}

.idioma select:hover {
    border: none;
    box-shadow: none;
}

.idioma select:focus {
    border: none;
    box-shadow: none;
}
/**
Ajuste do css 
**/
#areaContent .obj_issue_toc .galleys, .obj_issue_toc .section{
    margin-top: 0 !important;
    padding-top: 0 !important;
}
#areaContent .obj_issue_toc .galleys:before, .obj_issue_toc .section:before{
    border: none !important;
}
#areaContent .obj_issue_toc .sections:not(:first-child){
    margin-top: 10px !important;
}
#areaContent .cmp_button_wire, .obj_galley_link.pdf{
    font-size: 0;
    border: none;
}
#areaContent .galleys_links .obj_galley_link.pdf::before{
    content: "\f1c1"; 
    font-family: "Font Awesome 6 Free";
    font-size: 20px;
    color: var(--liinc-primary);
}
#areaContent .galleys_links .obj_galley_link.pdf:hover{
    color: var(--liinc-dark) !important;
    background: none !important;
}


#areaContent .obj_issue_toc .published{
    color: var(--liinc-primary);
    font-size: 16px;
    margin: 0 0 0 0 !important;
}
#areaContent .obj_issue_toc .sections .section h2{
    font-family: "Noto Serif";
    margin: 20px 0;
    padding: 0 0 0 0;
    color: var(--liinc-primary);
    font-size: 22px;
    line-height: 28px;
}
.cmp_article_list .obj_article_summary .article_stats .views_count{
    font-weight: bold;
}
.cmp_article_list .obj_article_summary .article_stats .views_count .total_views{
    font-weight: normal;
}
.cmp_article_list .obj_article_summary .meta .authors .fa-users{
    color: var(--liinc-primary);
    font-size: 20px;
}
.doi_img{
    background-image: var(--url-doi);
    background-repeat: no-repeat;
    background-size: 25px 25px;
    height: 25px;
    display: block;
    position: relative;
    width: 25px;
}