/* ===================================================== 
   FONTES (Google Fonts)
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:ital,wght@0,400;0,600;0,700&display=swap');

/* =====================================================
   RESET GLOBAL
   ===================================================== */
* {
    margin: 0;
    padding: 0;
}

/* =====================================================
   CONFIGURAÇÃO GERAL
   ===================================================== */
body {
    font-family: "Source Serif 4", serif;
    font-size: 100%;
    line-height: 1.6;
    color: #000;
    text-align: left;

    max-width: 640px;
    margin: calc(6em + 80px) auto 6em auto;
    padding: 0 16px;
}


/* =====================================================
   TÍTULO-CORRENTE
   ===================================================== */
p.titulo-corrente {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.8em;
    line-height: 1.3;
    margin-bottom: 3em;
}

/* =====================================================
   TÍTULO DO ARTIGO
   ===================================================== */

.titulo,
h1 {
    font-family: "Source Sans 3", sans-serif;

    font-size: 2.15rem;
    line-height: 1.2;

    font-weight: 600;

    letter-spacing: -0.03em;
}

.titulo {
    margin: 0 0 0.6rem 0;
}

h1 {
    margin: 0 0 1.4rem 0;
}

/* =====================================================
   AUTORES E FILIAÇÃO
   ===================================================== */
p.autores {
    margin-bottom: 0.4rem;

    font-size: 1.1rem;
    line-height: 1.4;

    font-weight: 400;
}

p.filiacao {
    margin-top: 0;
    margin-bottom: 0.5rem;

    line-height: 1.5;
}

/* =====================================================
   DATAS E DOI
   ===================================================== */
p.submissao {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.9em;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 4em;
    margin-bottom: 0.4em;
}

p.submissao + p.submissao {
    margin-top: 0;
}

/* =====================================================
   RESUMO
   ===================================================== */
p.resumo {
    font-size: 0.9em;
    line-height: 1.6;
    margin-top: 3em;
    margin-bottom: 1em;
}

/* =====================================================
   ABSTRACT
   ===================================================== */
p.abstract {
    font-size: 0.9em;
    line-height: 1.6;
    margin-top: 3em;
    margin-bottom: 1em;
    font-style: italic;
}

/* =====================================================
   PALAVRAS-CHAVE
   ===================================================== */
p.palavras-chave {
    font-size: 0.9em;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 3em;
}

/* =====================================================
   KEYWORDS
   ===================================================== */
p.keywords {
    font-size: 0.9em;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 3em;
    font-style: italic;
}

/* =====================================================
   SUBSEÇÕES
   ===================================================== */
h2 {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1.4em;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 2em;
    margin-bottom: 0.8em;
}

h3 {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1.25em;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 1.8em;
    margin-bottom: 0.6em;
}

h4,
h5 {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1.1em;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 1.6em;
    margin-bottom: 0.5em;
}

/* =====================================================
   PARÁGRAFOS
   ===================================================== */
p,
p.paragrafo-sem-recuo {
    line-height: 1.6;
    margin-bottom: 1.4em;
}

/* =====================================================
   CITAÇÃO
   ===================================================== */
blockquote {
    font-size: 0.9em;
    line-height: 1.6;
    margin: 2em 0 2em 3em;
}

/* =====================================================
   LISTAS
   ===================================================== */
ul,
ol {
    margin-bottom: 1.6em;
    padding-left: 1.5em;
}

li {
    line-height: 1.6;
    margin-bottom: 0.6em;
}

/* =====================================================
   NOTAS DE RODAPÉ
   ===================================================== */
aside.footnote {
    font-size: 0.8em;
    line-height: 1.5;
    margin-top: 1.2em;
}

ol._idFootAndEndNoteOLAttrs {
    list-style-type: none;
    padding-left: 0;
}

/* =====================================================
   TABELAS
   ===================================================== */
p.tabela {
    font-size: 0.9em;
    margin-bottom: 0;
    word-wrap: break-word;
}

table.estilo-de-tabela {
    width: 100%;
    border-collapse: collapse;
    font-family: "Source Serif 4", serif;
    font-size: 1em;
    line-height: 1.5;
    table-layout: fixed;
}

table.estilo-de-tabela td,
table.estilo-de-tabela th {
    border: 1px solid rgba(0, 0, 0, 0.5);
    padding: 4px 6px;
    vertical-align: top;
}

/* =====================================================
   IMAGENS
   ===================================================== */
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
}

figure {
    margin: 1.5em auto;
    text-align: center;
}


/* =====================================================
   LEGENDA
   ===================================================== */
p.legenda {
    font-size: 0.8em;
    line-height: 1.4;
    text-align: center;
    margin-top: 0.6em;
    margin-bottom: 2em;
}

/* =====================================================
   REFERÊNCIAS
   ===================================================== */
p.referencias {
    font-size: 0.9em;
    line-height: 1.6;
    margin-bottom: 1em;
}

/* =====================================================
   LINKS
   ===================================================== */
a.hiperlink {
    color: #0645ad;
    text-decoration: underline;
}

/* =====================================================
   ESTILOS DE CARACTERE
   ===================================================== */
span.negrito {
    font-weight: 700;
}

span.italico {
    font-style: italic;
}

span.negrito-italico {
    font-weight: 700;
    font-style: italic;
}

sup,
sub {
    font-size: 0.75em;
}

span.dica {
  

    

    font-family: "Source Sans 3", sans-serif;

    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* =====================================================
   AJUSTES MAURÍCIO
   ===================================================== */

div.dica-verde {
    padding: 24px;
    background-color: #d7f2ea;
    margin-bottom: 1.4em;
}

div.dica-rosa {
    padding: 24px;
    background-color: #fbe5f0;
    margin-bottom: 1.4em;
}

div.dica-azul {
    padding: 24px;
    background-color: #eaf0f9;
    margin-bottom: 1.4em;
}

div.dica-verde p:last-child, ul:last-child {
    margin: 0;
}

div.dica-verde h4:first-child   {
    margin-top: 0;
}

div.dica-rosa p:last-child, ul:last-child {
    margin: 0;
}

div.dica-rosa h4:first-child   {
    margin-top: 0;
}

div.dica-azul p:last-child, ul:last-child {
    margin: 0;
}

div.dica-azul h4:first-child   {
    margin-top: 0;
}

div#_idContainer005 p {
    margin:0;
}

div#_idContainer005 p.abstract {
    margin-top:1.4em;
}

div#_idContainer005 p.submissao {
    margin-top:1.4em;
}

div#_idContainer005 img {
    margin-left:0;
    margin-top: 1.4em;
}

table#table009 {
    width: 150%;
}

span.verde {
    color: #408c6a;
}

span.azul {
    color: #5377b5;
}

span.rosa {
    color: #d54e94;
}


div.grupo-marcas {
display: flex;
align-items: center;
width: 100%;
gap: 24px;
margin-top: 1.4em;
}

.marcas img {
    max-width: 130px;
    max-height: 120px;
}

img#copyleft {
    width: 250px;
}


/* =====================================================
   RESPONSIVO
   ===================================================== */
@media screen and (max-width: 600px) {
    body {
        margin: calc(16px + 80px) 16px 16px 16px;
        padding: 0;
    }
    p.tabela {
    font-size: 12px;
    margin-bottom: 0;
    }
    div#table009 {
    width: 100%;
    table-layout: auto;
    }
    div#div-table009 {
    overflow-x: auto;
    }

}

/*menu desktop e mobile*/
    
    /* Add a black background color to the top navigation */
    .topnav {
      text-align: center;
      margin:auto;
      padding: 2rem 3rem 1.25rem 3rem;
      overflow: hidden;
      box-sizing: unset;
      display: flex;
      align-items: baseline;
      justify-content: center;
    }
    
    .topnav a:first-child:hover {
      border-bottom:0;
    }

    /* Style the links inside the navigation bar */
    .topnav a {
      float: left;
      display: block;
      text-decoration: none;
      margin-right: 2rem;
      padding-bottom: 0.25rem;
      font-family: 'Source Sans 3', sans-serif;
      color: #000;
      font-weight: 400;
      line-height: 1.2;
    }

    /* Change the color of links on hover */
    .topnav a:hover {
      font-weight: 600;
    }
    



    /* Hide the link that should open and close the topnav on small screens */
    .topnav .icon {
      display: none;
    }

    .fa:hover, .fa-bars:hover {
      color: #808080;
    }

    .fa:active, .fa-bars:active {
      color:#000;
    }

    /* When the screen is less than 800 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
    @media screen and (max-width: 800px) {

      .topnav {
        display: inherit;
        align-items: baseline;
      }

      .topnav a {
        display: none;
      }

      .topnav a:first-child {
        display: block;
      }

      .topnav a.icon {
        float: right;
        display: block;
        margin-right: 0;
      }

      .topnav a.icon:hover {
        border-bottom: 0;
      }
    }

    /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
    @media screen and (max-width: 800px) {

      .topnav {
        padding: 2rem 2rem 1.25rem 2rem;
        transition:none;
      }

      .topnav.responsive {
        position: relative;
        padding: 2rem 2rem 1rem 2rem;
        transition: none;
      }

      .topnav.responsive a.icon {
        position: absolute;
        right: 2rem;
        top: 2rem;
      }

      .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
        width: fit-content;
        margin-bottom: 1rem;
      }
    }
    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 2;
      background-color: white;
      box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 4px;
    }

#_idContainer003, #_idTextAnchor001, #_idTextAnchor007, #_idTextAnchor014 {
    scroll-margin-top: 140px;
}

#_idTextAnchor016, #_idTextAnchor017, #_idContainer005 {
    scroll-margin-top: 100px;
}

#nome {
    font-weight: 600;
}


/* =========================================================
   Barra de progresso de scroll — estilo "linha de metrô"
   ========================================================= */

.scroll-metro {
  position: relative;
  width: 100%;
  height: 6px;
  background: transparent;
}

.scroll-metro__track {
  position: absolute;
  inset: 0;
  background: #e6e6e6;
}

/* O degradê (preto -> azul -> rosa -> verde -> preto) é fixo em
   toda a largura da barra, com os stops calculados via JS para
   baterem exatamente com a posição de cada estação. O preenchimento
   revela essa faixa progressivamente via clip-path — usar scaleX
   aqui distorceria/comprimiria o gradiente junto com a escala. */
.scroll-metro__fill {
  position: absolute;
  inset: 0;
  background: #000;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.25s ease-out;
  will-change: clip-path;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-metro__fill { transition: none; }
}

/* Estações (pontos) — cada uma posicionada via JS em px,
   alinhada horizontalmente com o link correspondente no .topnav */
.scroll-metro__stations {
  position: absolute;
  inset: 0;
}

.scroll-metro__station {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #999;
  transform: translate(-50%, -50%);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  cursor: pointer;
}

.scroll-metro__station:hover,
.scroll-metro__station:focus-visible {
  transform: translate(-50%, -50%) scale(1.3);
}

/* estações "acesas" quando o preenchimento já passou por elas */
.scroll-metro__station.is-passed {
  background: #333;
  border-color: #333;
}

/* cores específicas para as 3 seções principais, herdando a
   paleta que já existe nos links (azul / rosa / verde) */
.scroll-metro__station[data-color="azul"].is-passed  { background:#0645ad; border-color:#0645ad; }
.scroll-metro__station[data-color="rosa"].is-passed  { background:#d54e94; border-color:#d54e94; }
.scroll-metro__station[data-color="verde"].is-passed { background:#408c6a; border-color:#408c6a; }

@media screen and (max-width: 800px) {
  .scroll-metro__station { width: 8px; height: 8px; }
}