/* FONTS GOOGLE */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;600&family=Pacifico&family=Roboto:wght@100;400;500;600;700&&family=Zilla+Slab+Highlight:wght@400;700&family=Zilla+Slab:wght@300;400;600&display=swap');

/* BOOTSTRAP */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css");

/* HEADER */
@import url("header.css");

/* MAIN */
@import url("main.css");

/* FOOTER */
@import url("footer.css");

/* MENU */
@import url("menu.css");

/* MENU */
@import url("timeline.css");

/* DARKMODE */
@import url("darkMode.css");

/* BOTÕES */
@import url("buttons.css");

/* TOOLTIP */
@import url("tooltip.css");

/* ANIMAÇÕES E TRANSIÇÕES */
@import url("animations.css");

/* BOTÃO FIXO NO CANTO INFERIOR DIREITO */
@import url("btnFixedFooterWA.css");

/* CAIXA DE DIÁLOGO FULLSCREEN */
@import url("dialogBoxFull.css");

*{
    /* RESET BROWSER */
    margin:0;
    padding: 0;
    border: 0;
    box-sizing: border-box; /* A soma do padding e border não podem ultrapassar o valor de width */
}

:root {

    /* VARIAVEIS */
    --lightColor1:#FFFFFF; /*clara basica 1*/
    --lightColor2:#eff3f3; /*clara basica 2*/
    --lightColor3:#e1e4e4; /*clara basica 3*/
    --darkColor1:#01070f; /*escura basica 1*/
    --darkColor2:#080f18; /*escura basica 2*/
    --darkColor3:#10171f; /*escura basica 3*/
    --mainColor1:#00C7F7; /*principal 1*/
    --mainColor2:#007F9F; /*principal 2*/
    --mainColor3:#03557a; /*principal 3*/
    --highlightColor1:#2C0066; /*hightlight 1*/
    --highlightColor2:#3C0077; /*hightlight 2*/
    --highlightColor3:#5C0099; /*hightlight 3*/


    /* VARIÁVEIS DO TEMA PRINCIPAL - LIGHT THEME*/
    --color-text: var(--darkColor2);
    --color-text-inverse: var(--lightColor2);
    --color-link: var(--mainColor3);
    --color-link-hover: var(--mainColor2);
    --color-title: var(--mainColor3);
    --color-button: var(--mainColor3);
    --color-button-hover: var(--mainColor2);
    --color-button-text: var(--lightColor1);
    --color-button-text-hover: var(--lightColor2);
    --color-highlight: var(--highlightColor1);
    --color-highlight-hover: var(--highlightColor2);
    --color-background-1: var(--lightColor2);
    --color-background-2: var(--lightColor3);
    --color-background-3: var(--lightColor1);
    --color-background-highlight: var(--mainColor2);
    --color-shadow: rgb(172, 199, 199, 0.7);  /* lightColor3 - aqui utilizo rgba por causa do canal alfa */
    --img-filter:saturate(1.1) brightness(1);
    --background-blend-mode: overlay;
    --img-transition-bg3: url('../img/img-section-transition-bg3-light.png');

    /* OUTRAS VARIAVEIS */
    --font-family-padrao: 'Roboto';
    --font-weight-padrao: 400;
    --font-family-title: 'Montserrat';
    --font-weight-title: 400;
    --font-size-desktop: 16px;
    --font-size-mobile: 14px;
    --padding-padrao: 12px; /*ALTERADO NO MEDIAQUERIES.CSS*/
    --border-radius-padrao: calc(var(--padding-padrao) / 2);
    --content-max-width: 1200px;
    --header-height: calc(var(--padding-padrao) * 7);


    /* VARIAVEIS SCROLLBAR */
    --scrollbar-width: calc( var(--padding-padrao) / 1.5 );
    --scrollbar-track-color: var(--color-background-1);
    --scrollbar-thumb-color: var(--color-text);

    /* FOR FIREFOX */
    scrollbar-width: var(--scrollbar-width);
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);

    /* SCROLL SUAVE */
    scroll-behavior: smooth; /* Rola o scroll suavemente */  

}

/************************************/
/*********** SCROLLBAR **************/

/* PARA CHROME, EDGE E SAFARI */
*::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color);
  /*border-radius: var(--border-radius-padrao);*/
}

*:target {
  scroll-margin-top: calc(var(--header-height) - 5px); /* Adiciona um espaçamento antes do elemento alvo do scroll / âncora */
}

body{
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-background-1);
    font-family: var(--font-family-padrao), sans-serif;
    font-weight: var(--font-weight-padrao);
    transition: background-color 0.2s;
}

/* DESKTOP */
@media screen and (min-width: 768px){  body{ font-size: var(--font-size-desktop); --padding-padrao: 12px;  } }
/* MOBILE */
@media screen and (max-width: 767.9px){ body{ font-size: var(--font-size-mobile); --padding-padrao: 10px; }}



h1, h2, h3, h4, h5, h6, .title{
    font-family: var(--font-family-title);
    font-weight: var(--font-weight-title);
    color: var(--color-title);
}

h1.zilla, h2.zilla, h3.zilla, h4.zilla, h5.zilla, h6.zilla, .title.zilla{
  font-family: 'Zilla Slab', 'Roboto';
  font-weight: bold;
  margin-top: calc(var(--padding-padrao) * 2);
  margin-bottom: calc(var(--padding-padrao) * 4);
  padding: calc(var(--padding-padrao) * 2);
}

.zilla.zilla-highlight{
  font-family: 'Zilla Slab Highlight', 'Roboto';
}

h1, .title1{
  font-size: 400%;
}
h2, .title2{
  font-size: 300%;
}
h3, .title3{
  font-size: 250%;
}
h4, .title4{
  font-size: 200%;
}
h5, .title5{
  font-size: 160%;
}
h6, .title6{
  font-size: 125%;
}
span{
  color: inherit;
  font-size: inherit;
} 

ul, ol, li{
    list-style: none;
}

a, a:link, a:visited{ 
    text-decoration: none !important;
    color: var(--color-link);
    transition: all 0.3s;
}
a:hover, a:active, a:focus{
    text-decoration: underline;
    color: var(--color-link-hover) !important;
}

img{
  filter: var(--img-filter);
  transition: all 0.5s;
  border-radius: var(--border-radius-padrao);
  width: 100%;
  max-width: 900px;
}

img:hover{
  filter: saturate(1.5) brightness(1);
  transform: scale(0.994);
}

.show{ display: flex !important; visibility: visible !important; opacity: 1 !important; }
.hide{ display: none !important; visibility: hidden !important; opacity: 0 !important; }
.noSelect{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.noScrolling{ overflow: hidden !important; }
.noMargin{ margin:0 !important; }
.noPadding{ padding:0 !important; }

@media screen and (min-width: 768px){ .noDesktop{ display: none !important; } }
@media screen and (max-width: 767.9px){ .noMobile{ display: none !important; } }

.flexcenter{ justify-content: center !important; }
.textcenter{ text-align: center !important; }

.textColorTitle{ color: var(--color-title) !important; }
.textColorHighlight{ color: var(--color-highlight) !important; }
.textColorMain{ color: var(--mainColor1) !important; }
.textColorDefault{ color: var(--color-text) !important; }
.textColorDefaultInverse{ color: var(--color-text-inverse) !important; }

.bg1{ background-color: var(--color-background-1); }
.bg2{ background-color: var(--color-background-2); }
.bg3{ background-color: var(--color-background-3); }
.transition-bg3{ background-image: var(--img-transition-bg3); background-repeat:repeat-x; background-position: bottom; }
.bgMain{ background-color: var(--mainColor1); }
.bgHighlight{ background-color: var(--color-highlight); }

.wrapperMax{ max-width: var(--content-max-width); }
.wrapper1200{ max-width: 1200px !important; }
.wrapper800{ max-width: 800px !important; }
.wrapper600{ max-width: 600px !important; }

.accessibilityText{ font-size: 0px !important; color: transparent; overflow: hidden; }

/*#screenReaderNavLinkTop{ position: absolute; top: -9999px; z-index: 1; opacity: 0.5; }*/
#screenReaderNavLinkTop{ position: absolute; top: -100%; z-index: 1 !important; opacity: 1; }