/* ==================================================
   BASE
================================================== */
*{margin: 1; padding: 0; box-sizing: border-box;}
html { letter-spacing: 1.4px; font-family: "Poppins", sans-serif; font-weight: 400; font-style: normal; scroll-behavior: smooth; }
.poppins-black {font-family: "Poppins", sans-serif; font-weight: 900; font-style: normal;}

/* faz com que as rolagens sejam mais lentas. */
html {
  scroll-behavior: smooth;
}

:root{
    --altura-menu: 60px;
}

body{
    letter-spacing: .1rem;
    min-height: 100%;
    margin: 0;
    background-color: #edecec;
    -webkit-overflow-scrolling: touch;
    margin:0;
    min-height:100vh;
    padding-top: 100px;
    padding-top: var(--altura-menu);
    background: linear-gradient(
        to bottom,
        #ccffff,
        #FFB7A5,
        #3399ff
    );
}


.poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.poppins-black {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.radius {
    border-radius: .5rem;
    box-shadow: 0 .1rem .2rem   #666262;
    
}



h1,h2,h3,h4,h5,h6 {
    margin: 0;
    padding: 0;
    font-size: 1.6rem;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}


a,
a:visited,
a:hover,
a:active {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}


.big-title{
    font-size: 2.0rem;
}


img {
    max-width: 100%;
   
}

section#links img {   /*procura  a classe com nome Id links*/
    border-radius: .9rem;
    box-shadow: 0 .1rem .2rem   #666262;
    padding: 5px;

}

.img-direita {
    float: right;
    max-width: 100%;
    margin-left: 20px;
    margin-bottom: 10px; 
}

.img-esquerda{
    float: left;
    max-width: 100%;
    margin-left: 20px;
    margin-bottom: 10px; 
}



.mg-padding {
    hspace:30px;
    vspace:30px
}

.sombratexto{
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}


.btnVoltar {
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    
    /* remove aparência padrão do botão */
    appearance: none;
    -webkit-appearance: none;
    
    transition: transform 0.3s ease;
}

.btn-voltar {
    display: block;
    transition: transform 0.3s ease;
}

.btn-voltar:hover{
 transform: scale(1.1); 
}





.btn_verde {
    padding: 5px;
    background: linear-gradient(135deg, #064e3b, #16a34a, #bbf7d0);
    transition: transform 0.3s ease;
}

.btn_verde:hover {
    background: linear-gradient(135deg, #16a34a, #bbf7d0, #064e3b);
    transform: scale(1.03);
}

.btn_azul {
    padding: 5px;
    background: linear-gradient(135deg, #005bea, #66ccff, #e6f7ff);
    transition: transform 0.3s ease;
}

.btn_azul:hover {
        background: linear-gradient(135deg, #003b8f, #0084d6, #b3e5ff);
    transform: scale(1.03);
}

.btn_abobora {
    padding: 5px;
    background: linear-gradient(135deg, #ffcc33, #ff6600);
    transition: transform 0.3s ease;
}

.btn_abobora:hover {
    background: linear-gradient(135deg, #ff6600,  #ffcc33);
    transform: scale(1.03);
}

.btn_lilas {
    padding: 5px;
    background: linear-gradient(135deg, #4c1d95, #7c3aed, #c084fc, #f3e8ff);
    transition: transform 0.3s ease;
}

.btn_lilas:hover {
    background: linear-gradient(135deg, #4c1d95, #7c3aed, #f3e8ff, #c084fc);
    transform: scale(1.03);
}


p {
    text-align : justify;
}

.imgtopo {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

.container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* centraliza horizontalmente */
    align-items: center;     /* centraliza verticalmente */
    gap: 10px;
}





.bibliografia{
    text-align:right;
    font-size:small;
    font-style:  italic;
}



.tablemn{
    width: 100%;
    color: white;
    border-radius: 8px;
}

    
.tablemn td{
    border: #ffffff;
    background-color: #1e293b;
    border-style:  double;
    border-width: 3px;
    color: white;
    padding: 5px 5px;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 18px;
    text-align: center;
}

/* Efeito ao passar o mouse */
.tablemn td:hover{
    background-color: #0ea5e9;
    transform: scale(1.08);
}


/* =========================
   SCROLLBAR GLOBAL SEGURA
   Compatível com:
   ✔ Chrome
   ✔ Edge
   ✔ Safari
   ✔ Firefox
========================= */

/* =====================================
   SCROLLBAR GLOBAL TRANSPARENTE
   Tons de azul com transparência
===================================== */


/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(90, 170, 255, 0.85) rgba(220, 235, 250, 0.35);
}

/* Chrome, Edge e Safari */
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

/* fundo */
::-webkit-scrollbar-track {
  background: rgba(220, 235, 250, 0.35);
  border-radius: 12px;

  backdrop-filter: blur(3px);
}

/* barra móvel */
::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(170, 215, 255, 0.92),
    rgba(110, 185, 255, 0.88),
    rgba(70, 160, 245, 0.82)
  );

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.45);

  box-shadow:
    inset 0 0 4px rgba(255,255,255,0.35),
    0 0 4px rgba(80,170,255,0.25);
}

/* hover */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(150, 205, 255, 0.98),
    rgba(90, 175, 255, 0.95),
    rgba(50, 145, 235, 0.92)
  );
}

/* encontro entre barras */
::-webkit-scrollbar-corner {
  background: rgba(220, 235, 250, 0.35);
}
/* fim do scrollbar */

/* ==================================================
   📦 CONTAINER PRINCIPAL
================================================== */

.pagina{
     max-width: 1024px;
    width: 100%;
    margin: 0 auto;

    padding: 20px;
    padding-top: calc(var(--altura-menu) + 1px);

    background: rgba(255, 255, 255, 0.8);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

    box-sizing: border-box;
}

/* ==================================================
   MENU PRINCIPAL (FIXO)
================================================== */

#topo-menu-principal {
    width:100%;
    background:#334155;
    font-family:Arial, Helvetica, sans-serif;

    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;

    min-height: var(--altura-menu);

    display:flex;
    align-items:center;

    box-shadow:0 2px 10px rgba(0,0,0,0.25);
}

.submenu{
    display: none;
    position: absolute;
    top: auto;
    left: 0;
    min-width: 200px;
    background: #334155;
}

.menu-horizontal li:hover > .submenu{
    display: block;
}



.menu-wrapper{
    width:100%;
    display:flex;
    align-items:center;
}


#topo-menu-principal ul,
#topo-menu-principal li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/*começo */
/* remove qualquer marcador herdado de qualquer nível */
#topo-menu-principal ul ul,
#topo-menu-principal ul ul li,
#topo-menu-principal .submenu,
#topo-menu-principal .submenu li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* garante que nada “vaze” visualmente */
#topo-menu-principal li::marker {
    content: "";
}

/* remove qualquer estilo estranho de links dentro do menu */
#topo-menu-principal a {
    text-decoration: none;
    list-style: none;
}
/*fim */


#topo-menu-principal .submenu {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

#topo-menu-principal .submenu li {
    list-style: none;
}




/* menu direita */
.menu-container{
    margin-left:auto;
}

/* garante alinhamento do menu */
.menu-horizontal{
    display:flex;
    align-items:center;
}


/* container interno */
.menu-container{
    margin-left:auto;
    display:flex;
}



.has-submenu{
    position:relative;
}

/* MENU */


/* logo esquerda */

.logo{
    display:flex;
    align-items:center;
 }
 

/*submenu*/
#topo-menu-principal .menu-horizontal li.logo{
     display:flex;
     align-items:center;
}

#topo-menu-principal .menu-horizontal li.logo img{
    height:60px;
    width:auto;
}


/* LINKS */
#topo-menu-principal .menu-horizontal li a{
    display:block;
    padding:18px 24px;
    color:#fff;
    text-decoration:none;
    white-space:nowrap;
    position:relative;
    z-index:2000;
}

#topo-menu-principal .menu-horizontal li a:hover{
    background:#3399ff;
}

/* SUBMENU DESKTOP */
#topo-menu-principal .menu-horizontal li{
    position:relative;
}

#topo-menu-principal .submenu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:220px;
    background:#334155;
    z-index:1000;
}

#topo-menu-principal .menu-horizontal li:hover > .submenu{
    display:block;
}

/* BOTÃO MOBILE */
#btn-menu-mobile{
    display:none;
    width:100%;
    padding:18px;
    border:none;
    background:#334155;
    color:#fff;
    font-size:22px;
    cursor:pointer;
}



/* ==================================================
   🔥 GRID LAYOUT
================================================== */

.linha{
    display:flex;
    flex-wrap:wrap;
    width:100%;
}

.gap20{
    gap:20px;
}

.linha > div{
    box-sizing:border-box;
}

/* desktop */
.div100{ flex:0 0 100%; }
.div75{ flex:0 0 calc(75% - 10px); }
.div50{ flex:0 0 calc(50% - 10px); }
.div25{ flex:0 0 calc(25% - 15px); }


/* ==================================================
   📱 TABLET
================================================== */

@media (max-width:1024px){
    .div75{ flex:0 0 calc(75% - 10px); }
    .div25{ flex:0 0 calc(50% - 10px); }
    .div50{ flex:0 0 100%; }

    :root{
        --altura-menu: 80px;
    }
}

/* ==================================================
   📱 MOBILE ≤900px
================================================== */

@media (max-width:900px){

    #btn-menu-mobile{
        display:block;
    }

    #topo-menu-principal .menu-horizontal{
        display:none;
        flex-direction:column;
        align-items:flex-start;
        width:100%;
    }

    #topo-menu-principal .menu-horizontal.ativo{
        display:flex;
    }

    #topo-menu-principal .menu-horizontal li{
        width:100%;
    }

    #topo-menu-principal .menu-horizontal li a{
        width:100%;
        border-top:1px solid rgba(255,255,255,0.08);
    }

    /* SUBMENU MOBILE */
    #topo-menu-principal .submenu{
        position:relative;
        top:0;
        left: 0;
        margin: 0;
        padding: 0;
        width:100%;
        background: #334155;
        display:none;
        z-index:9999;
    }
    
    #topo-menu-principal .has-submenu{
    position: relative;
}

    #topo-menu-principal .has-submenu.ativo > .submenu{
        display:block;
    }

    .div25,
    .div50,
    .div75,
    .div100{
        flex:0 0 100%;
    }
}

/* ==================================================
   📱 MOBILE ≤600px
================================================== */

@media (max-width:600px){

    #topo-menu-principal .menu-horizontal li a{
        padding:14px 16px;
        font-size:14px;
    }

    #btn-menu-mobile{
        font-size:18px;
        padding:14px;
    }

    :root{
        --altura-menu: 110px;
    }
}

/* ==================================================
   📱 ≤400px
================================================== */

@media (max-width:400px){

    #topo-menu-principal .menu-horizontal li a{
        font-size:13px;
        padding:12px;
    }

    :root{
        --altura-menu: 100px;
    }
}