/* ======================================================= */
/* == FOLHA DE ESTILOS OTIMIZADA PARA RESPONSIVIDADE      == */
/* ======================================================= */

/* --- Definições Globais e Resets --- */
html {
    font-size: 100%; /* 1rem = 16px por padrão */
}

body {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    margin: 0;
    color: #333;
    background-image: url('../imagens/background-images/41574870.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
* { 
    box-sizing: border-box; 
}
a { 
    color: inherit; 
    text-decoration: none; 
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Estrutura Principal --- */
.container-principal { 
    display: flex; 
}
.menu-lateral {
    width: 17.5rem;
    background-color: rgba(253, 245, 253, 0.9);
    padding: 1.875rem;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    border-right: 1px solid #eee;
    z-index: 100;
}
.conteudo-principal {
    flex-grow: 1;
    margin-left: 17.5rem;
    min-height: 100vh;
    position: relative;
}

/* --- Logo --- */
.logo { 
    text-align: center; 
    margin-bottom: 2.5rem; 
}
.logo img { 
    max-width: 80%; 
}

/* --- Menu Lateral Interativo --- */
.navegacao ul { list-style: none; padding: 0; margin: 0; }
.navegacao li { position: relative; }
.navegacao li > a {
    display: inline-block;
    vertical-align: middle;
    padding: 0.625rem 0;
    font-size: 0.9375rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #000000;
    transition: color 0.2s ease-in-out;
    width: calc(100% - 1.875rem);
    font-family: "Arial", sans-serif;
}
.navegacao .item-menu-principal.ativo > a, 
.navegacao .item-menu-principal > a:hover { color: #f47a7a; }
.navegacao .seta-submenu {
    position: absolute;
    right: 0.3125rem;
    top: 0.9375rem;
    width: 0.625rem;
    height: 0.625rem;
    cursor: pointer;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(45deg);
    transition: transform 0.4s ease, top 0.4s ease, border-color 0.2s ease;
}
.navegacao .seta-submenu:hover { border-color: #f47a7a; }
.navegacao li.submenu-aberto > .seta-submenu { transform: rotate(225deg); top: 1.125rem; }
.navegacao .submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    padding-left: 0.9375rem;
    border-left: 1px solid #e0e0e0;
    margin-left: 0.625rem;
    margin-top: 0.3125rem;
}
.navegacao li.submenu-aberto > .submenu { max-height: 62.5rem; }
.navegacao .submenu li a {
    font-size: 0.875rem;
    text-transform: capitalize;
    color: #555555;
    font-family: "Arial", sans-serif;
}
.navegacao .submenu li a:hover { color: #f47a7a; }
.navegacao .submenu .submenu {
    border-left: 1px solid #f47a7a;
    margin-left: 1.25rem;
}

/* --- ALTERAÇÃO-CHAVE: Layout da Página Inicial com Grid --- */
body.pagina-inicial .conteudo-principal {
    background-color: transparent;
    display: grid; /* Usa Grid para sobrepor e centralizar os elementos */
    place-items: center; /* Centraliza tudo (horizontal e vertical) */
    overflow-x: hidden;
}
.galeria-modulos,
#imagem-semicirculo-container,
#frase-semicirculo {
    /* Força todos os elementos a ocuparem a mesma célula do grid */
    grid-column: 1;
    grid-row: 1;
    width: 100%;
}
.galeria-modulos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    /* Move a galeria para cima */
    margin-top: -7.5rem;
    margin-left: -2.5rem;
}
.modulo {
    width: 14.0625rem; /* Tamanho fixo em rem para escalar com zoom */
    flex-shrink: 0;
}
.modulo a {
    display: block;
    width: 110%;
    padding-top: 100%;
    position: relative;
    border-radius: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s;
}

.modulo a:hover { transform: scale(1.05); }
/* Ajuste de margens verticais para criar o arco */
#modulo-1 { background-image: url('../imagens/9_orig.png'); margin-top: 9.375rem; }
#modulo-2 { background-image: url('../imagens/8_orig.png'); margin-top: 3.125rem; }
#modulo-3 { background-image: url('../imagens/7_orig.png'); }
#modulo-4 { background-image: url('../imagens/6_orig.png'); margin-top: 3.125rem; }
#modulo-5 { background-image: url('../imagens/555_orig.png'); margin-top: 9.375rem; }

#imagem-semicirculo-container {
    text-align: center;
    margin-top: -17rem;
    cursor: help;
  }
#imagem-semicirculo-container img {
    width: 62.5rem;
    margin: 0 auto;
}
#frase-semicirculo {
    text-align: center;
    /* Move a frase para sua posição vertical */
    margin-top: -10rem;
}
#frase-semicirculo img {
    width: 43rem;
    margin: 0 auto;
}

/* --- Páginas de Conteúdo Gerais --- */
.conteudo-principal-paginas-modulos, .conteudo-principal-midiateca, .conteudo-principal-videos, .conteudo-principal-glossario, .conteudo-principal-guia, .conteudo-principal-creditos {
    background: #fdeffd;
    padding: 2.5rem;
    margin-left: 17.5rem;
    padding-bottom: 0.3rem;
    height: 100%;
}
.container-paginas-modulos, .atv2-container, .midia-container, .vid-container, .gloss-container, .guia-container, .cred-container {
    max-width: 100%;
    margin: 0 auto;
    background-color: white;
    padding: 1.875rem 2.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.625rem rgba(0,0,0,0.05);
}

.conteudo-principal-midiateca .rodape {
  padding-top: 5rem;
}

.conteudo-atvd1 {
    width: 100%;
    background: #fdeffd;                             
    padding: 2.5rem;                                 
    margin-left: 17.5rem;                            
    padding-bottom: 0.3rem;
}                                                    
.container-atvd1 {
    max-width: 100%;                                 
    margin: 0 auto;                                  
    background-color: white;                         
    padding: 1.875rem 2.5rem;                        
    border-radius: 0.5rem;                           
    box-shadow: 0 0.25rem 0.625rem rgba(0,0,0,0.05); 
}                                                    


.empatia-titulo-principal, .oc-titulo-principal, .dim-titulo-principal, .comp-titulo-principal, .ce-titulo-principal, .atv-titulo-principal, .des-titulo-principal, .sd-titulo-principal, .st-titulo-principal, .se-titulo-principal, .midia-titulo-principal, .vid-titulo-principal, .gloss-titulo-principal, .guia-titulo-principal, .cred-titulo-principal, .atv1-titulo-principal, .des1-titulo-principal, .emocao-titulo-principal, .competen-titulo-principal, .cs-titulo-principal, .csae-titulo-principal, .conh-titulo-principal, .hab-titulo-principal, .att-titulo-principal, .atv2-titulo-principal, .des2-titulo-principal, .as-titulo-principal {
    font-size: 2.625rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1.875rem;
}
p, .texto p, .empatia-texto p, .comp-texto, p .oc-texto p, .dim-texto p, .comp-texto p, .ce-texto p, .atv-texto p, .des-texto p, .sd-titulo-principal p, .st-texto p, .se-texto p, .des1-texto p, .emocao-texto p, .competen-texto p, .cs-texto p, .csae-texto p, .conh-texto p, .hab-texto p, .att-texto p, .texto p, .as-texto p, .midia-texto-intro p, .guia-texto p {
    line-height: 1.7;
    margin-bottom: 1.25rem;
    text-align: justify;
}

.texto a {
  text-decoration: underline;
}

.cab-tab h3, thead .cab-tab1 th {
  text-align: center;
}

tbody .cab-tab1 td {
  text-align: center;
}

.csae-tabela-atributos thead th{
  background-color: #868686;
}
.csae-tabela-atributos tbody td {
  background-color: #aba7a7;
}

.conh-tabela thead th {
  background-color: #969494;
  text-align: center;
}
.conh-tabela tbody td {
  background-color: #b4b2b2;
}

.hab-tabela thead th {
  background-color: #a5c7d5;
  text-align: center;
}
.hab-tabela tbody td {
  background-color: #b5dbeb;
}

.att-tabela thead th {
  background-color: #d581dc;
  text-align: center;
}
.att-tabela tbody td {
  background-color: #e1afe5;
}

.des2-lista-ordenada {          
    padding-left: 20px;         
}                               
                                
.des2-lista-ordenada li, .sd-lista-topicos li {       
    margin-bottom: 1rem;        
    line-height: 1.6;           
    text-align: justify;        
}                               

.csae-botoes-cha-1 {                                   
    display: flex;                                     
    justify-content: space-around;                     
    align-items: center;                               
    margin: 40px 0;                                    
}                                                      
                                                       
.csae-botao-cha {                                      
    text-align: center;                                
    color: #555;                                       
    font-weight: 500;                                  
    transition: transform 0.2s ease;                   
}                                                      
.csae-botao-cha:hover, .botao-cen:hover{                                
    transform: scale(1.05);                            
}                                                      
.csae-botao-cha img {                                  
    display: block;                                    
    max-width: 15rem;                                  
    height: auto;                                      
    margin-bottom: 10px;                               
}                                                      


.oc-lista-ordenada {    
    padding-left: 40px; 
    margin-bottom: 20px;
}                       
.oc-lista-ordenada li {
  line-height: 1.6;
  text-align: justify;
}

.is-imagem-container {                                                           
    display: flex;                                                               
    justify-content: center;                                                     
    align-items: center;                                                         
      gap: 5px;                                                                  
}                                                                                
                                                                                 
.is-imagem-container img {                                                       
    max-width: 100%; /* Garante que a imagem não ultrapasse o contêiner */       
    height: auto;                                                                
                                                                                 
  }                                                                              
                                                                                 
.is-imagem-container .ce-credito-imagem {                                        
  text-align: center;                                                            
}                                                                                
                                                                                 

.cs-img-container {
  display: flex;
  justify-content: center;
}                                           
.cs-img-container img {             
    max-width: 12.8rem;                
    height: auto;                   
    padding: 0;                     
    border: none;                   
    margin-left: -35px;             
}                                   

.tabela-animacao th, td {                                                                         
    border: 1px solid #dddddd;                                                                    
    text-align: left;                                                                             
    padding: 8px;                                                                                 
}                                                                                                 
                                                                                                  
.tabela-animacao th, .tabela-satisfacao th, .tabela-ind-soc th {                                                                             
    text-align: center;                                                                           
    color: #333;                                                                                  
}                                                                                                 
                                                                                                  
.tabela-satisfacao th, td {                                                                       
    border: 1px solid #dddddd;                                                                    
    text-align: left;                                                                             
    padding: 8px;                                                                                 
}                                                                                                 
                                                                                                  
.tabela-satisfacao th {                                                                           
    text-align: center;                                                                           
    color: #333;                                                                                  
}                                                                                                 
                                                                                                  
.tabela-satisfacao th {                                                       
  background-color: #e8df46;                                                                      
}                                                                                                 
                                                                                                  
.tabela-satisfacao tbody td {                                                     
    background-color: #ebe35f;                                                                    
}                                                                                                 
.tabela-desanimo th {                                                                             
    text-align: center;                                                                           
    color: #333;                                                                                  
}                                                                                                 
                                                                                                  
.tabela-desanimo tbody th:nth-child(odd){                                                         
  background-color: #6CA6CD;                                                                      
}                                                                                                 
                                                                                                  
.tabela-desanimo tbody tr:nth-child(even) {                                                       
    background-color: #63B8FF;                                                                    
}                                                                                                 
                                                                                                  
.tabela-desanimo tbody tr:nth-child(odd) {                                                        
    background-color: #7EC0EE;                                                                    
}                                                                                                 
                                                                                                  
                                                                                                  
.tabela-insatisfacao table {                                                                      
    width: 100%;                                                                                  
    border-collapse: collapse;                                                                    
    margin-top: 10px;                                                                             
}                                                                                                 
                                                                                                  
.tabela-insatisfacao th, td {                                                                     
    border: 1px solid #dddddd;                                                                    
    text-align: left;                                                                             
    padding: 8px;                                                                                 
}                                                                                                 
                                                                                                  
.tabela-insatisfacao th {                                                                         
    text-align: center;                                                                           
    color: #333;                                                                                  
}                                                                                                 
                                                                                                  
.tabela-insatisfacao tbody th{                                                     
  background-color: #de6c53;                                                                      
}                                                                                                 
                                                                                                  
.tabela-insatisfacao tbody td {                                                   
    background-color: #ea9481;                                                                    
}                                                                                                 
                                                                                                  
                                                                                                  
.tabela-ind-soc table {                                                                           
    width: 100%;                                                                                  
    border-collapse: collapse;                                                                    
    margin-top: 10px;                                                                             
}                                                                                                 
                                                                                                  
.tabela-ind-soc th, td {                                                                          
    border: 1px solid #dddddd;                                                                    
    text-align: left;                                                                             
    padding: 8px;                                                                                 
}                                                                                                 
                                                                                                  

.midia-links-container {                                                       
    display: flex;                                                             
    justify-content: space-around; /* Espaça os itens uniformemente */         
    align-items: center;                                                       
    flex-wrap: wrap; /* Permite que quebre a linha em telas pequenas */        
    gap: 2rem;                                                                 
}                                                                              
                                                                               
.midia-link-item {                                                             
    display: block;                                                            
    transition: transform 0.2s ease;                                           
}                                                                              
                                                                               
.midia-link-item:hover {                                                       
    transform: scale(1.05); /* Efeito de zoom ao passar o mouse */             
}                                                                              
                                                                               
.midia-link-item img {                                                         
    max-width: 20rem; /* Define um tamanho máximo para as imagens */           
    height: auto;                                                              
    border-radius: 0.5rem;                                                        
}                                                                              

.vid-container {                                                                                       
    max-width: 100%; /* Largura maior para acomodar os vídeos */                                      
    margin: 0 auto;                                                                                    
    background-color: white;                                                                           
    padding: 30px 40px;                                                                                
    border-radius: 8px;                                                                                
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);                                                           
}                                                                                                      
                                                                                                       
.vid-subtitulo {                                                                                       
    font-size: 16px;                                                                                   
    font-weight: 500;                                                                                  
    text-transform: uppercase;                                                                         
    color: #888;                                                                                       
    margin-bottom: 5px;                                                                                
}                                                                                                      
                                                                                                       
.vid-titulo-principal {                                                                                
    font-size: 42px;                                                                                   
    font-weight: 700;                                                                                  
    color: #333;                                                                                       
    margin-bottom: 30px;                                                                               
}                                                                                                      
                                                                                                       
.vid-item {                                                                                            
    margin-bottom: 40px;                                                                               
}                                                                                                      
                                                                                                       
.vid-item-titulo {                                                                                     
    font-size: 24px;                                                                                   
    font-weight: 700;                                                                                  
    color: #333;                                                                                       
    margin-bottom: 20px;                                                                               
}                                                                                                      
                                                                                                       
.vid-item-container-video {                                                                            
    position: relative;                                                                                
    padding-bottom: 56.25%; /* Proporção 16:9 para vídeos */                                           
    height: 0;                                                                                         
    overflow: hidden;                                                                                  
    max-width: 100%;                                                                                   
    background: #f0f0f0;                                                                               
    border-radius: 8px;                                                                                
}                                                                                                      
                                                                                                       
.vid-item-container-video iframe {                                                                     
    position: absolute;                                                                                
    top: 0;                                                                                            
    left: 0;                                                                                           
    width: 100%;                                                                                       
    height: 100%;                                                                                      
}                                                                                                      

.podcast-container-c img {
  max-width: 100%;         
}                         

.guia-texto a {                              
    color: inherit;                             
    text-decoration: underline;              
}                                            
                                             
.guia-texto a:hover {                        
    text-decoration: none;                   
}                                            
                                             
.guia-lista-topicos {                        
    padding-left: 20px;                      
    list-style-type: disc;                   
}                                            
                                             
.guia-lista-topicos li {                     
    margin-bottom: 15px;                     
    line-height: 1.6;                        
    text-align: justify;                     
}                                            

.epc-img-container {                   
    display: flex;                     
    justify-content: center;           
    align-items: center;               
    gap: 1px;                          
}                                      
                                       
.epc-img-container .botao-cen:hover{   
  transform: scale(1.05);              
}                                      

.epc-img-container img {    
    max-width: 100%;        
    height: auto;           
    padding: 0;             
    border: none;           
    margin-left: -15px;     
}                           
.texto a, .com-emp a {
  text-decoration: underline;
}

.texto a:hover, .com-emp a:hover {
  text-decoration: none;
}

.tabela-animacao table, .tabela-satisfacao table {                                                                          
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.tabela-animacao th, td {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

.tabela-animacao th {
    text-align: center;
    color: #333;
}                                                                                                 
                                                                                                  
                                                                                                  
.tabela-animacao tbody th:nth-child(odd){                                                         
  background-color: #57b978;                                                                      
}                                                                                                 
                                                                                                  
.tabela-animacao tbody tr {                                                       
    background-color: #8bd2a3;                                                                    
}                                                                                                 
                                                                                                  
                                                                                                  
.tabela-satisfacao table {                                                                        
    width: 100%;                                                                                  
    border-collapse: collapse;                                                                    
    margin-top: 10px;                                                                             
}                                                                                                 
                                                                                                  
.tabela-satisfacao th, td {                                                                       
    border: 1px solid #dddddd;                                                                    
    text-align: left;                                                                             
    padding: 8px;                                                                                 
}                                                                                                 
                                                                                                  
.tabela-satisfacao th {                                                                           
    text-align: center;                                                                           
    color: #333;                                                                                  
}                                                                                                 
                                                                                                  
                                                                                                  
.tabela-desanimo table {                                                                          
    width: 100%;                                                                                  
    border-collapse: collapse;                                                                    
    margin-top: 10px;                                                                             
}                                                                                                 
                                                                                                  
.tabela-desanimo th, td {                                                                         
    border: 1px solid #dddddd;                                                                    
    text-align: left;                                                                             
    padding: 8px;                                                                                 
}                                                                                                 
                                                                                                  
.tabela-desanimo th {                                                                             
    text-align: center;                                                                           
    color: #333;                                                                                  
}                                                                                                 
                                                                                                  
.tabela-desanimo tbody th:nth-child(odd){                                                         
  background-color: #6CA6CD;                                                                      
}                                                                                                 
                                                                                                  
.tabela-desanimo tbody tr:nth-child(even) {                                                       
    background-color: #63B8FF;                                                                    
}                                                                                                 
                                                                                                  
.tabela-desanimo tbody tr:nth-child(odd) {                                                        
    background-color: #7EC0EE;                                                                    
}                                                                                                 
                                                                                                  
                                                                                                  
.tabela-insatisfacao table {                                                                      
    width: 100%;                                                                                  
    border-collapse: collapse;                                                                    
    margin-top: 10px;                                                                             
}                                                                                                 
                                                                                                  
.tabela-insatisfacao th, td {                                                                     
    border: 1px solid #dddddd;                                                                    
    text-align: left;                                                                             
    padding: 8px;                                                                                 
}                                                                                                 
                                                                                                  
.tabela-insatisfacao th {                                                                         
    text-align: center;                                                                           
    color: #333;                                                                                  
}                                                                                                 
                                                                                                  
                                                                                                  
.tabela-ind-soc table {                                                                           
    width: 100%;                                                                                  
    border-collapse: collapse;                                                                    
    margin-top: 10px;                                                                             
}                                                                                                 
                                                                                                  
.tabela-ind-soc th, td {                                                                          
    border: 1px solid #dddddd;                                                                    
    text-align: left;                                                                             
    padding: 8px;                                                                                 
}                                                                                                 
                                                                                                  
.tabela-ind-soc th {                                                                              
    text-align: center;                                                                           
    color: #333;                                                                                  
}                                                                                                 
                                                                                                  
.tabela-ind-soc tbody th{                                                          
  background-color: #CFCFCF;                                                                      
}                                                                                                 
                                                                                                                                                                                        
.tabela-ind-soc tbody td {                                                         
    background-color: #DCDCDC;                                                                    
}                                                                                                 
                                                                                                  
.lista-referencias a {
  color: inherit;
  text-decoration: underline;
  font-weight: 500;
}
.lista-referencias a:hover {
  text-decoration: none;
  font-weight: 700;
}

.separador {
    border: 0;
    border-top: 1px solid #eee;
    margin: 40px 0;
}

.lista-referencias p {  
    font-size: 14px;    
    color: #555;        
    line-height: 1.6;   
}                       

.ce-imagem-container {
  display: grid;
  place-items: center;
  margin: 0 auto;
  
}
.ce-credito-imagem {
  display: block;
  margin: 0 auto;
}

.sd-imagem-container {
  display: grid;
  place-items: center;
  margin-top: -6rem;
}

.sd-lista-topicos {
  padding: 0;
  margin-top: -3rem;
}

.navegacao-botoes {
    display: flex;
    justify-content: space-between;
    margin-top: 2.5rem;
}
.botao-voltar, .botao-proximo {
    background-color: #f47a7a;
    color: white;
    padding: 0.625rem 1.25rem;
    border-radius: 0.3125rem;
    font-weight: 500;
    transition: background-color 0.2s;
}
.botao-voltar:hover, .botao-proximo:hover { background-color: #d26a6a; }


/* --- CORREÇÃO PARA O TAMANHO DA PÁGINA ATIVIDADES 1 --- */
.pagina-atividades1 .container-paginas-modulos {
    max-width: 58.875rem;
    margin: 0 auto;
}


/* --- Formulários Google Forms --- */
.atv-google-form iframe,
.des1-google-form iframe,
.atv1-google-form iframe {
    width: 100%;
    height: 50rem;
    border: none;
}
.des4-google-form iframe {
  width: 100%;
  height: 29.5rem;
  border: none;
}

.rodape {
  display: flex;
  justify-content: center;
  gap: 20%;
  border: none;
  padding: 0;
}
.rodape p{
  font-size: 0.8rem;
  text-decoration: gray;
}
.rodape p a:hover {
  font-weight: 700;
}

.ebook-titulo {
  font-weight: 500;
}
.ebook-dados a {
  text-decoration: underline;
}
.ebook-dados a:hover {
  text-decoration: none;
  color: gray;
}

/* --- Tabelas --- */
.tabela-animacao, .tabela-satisfacao, .tabela-desanimo, .tabela-insatisfacao, .tabela-ind-soc, .csae-tabela-atributos, .conh-tabela, .hab-tabela, .att-tabela, .epc-tabela, .eph-tabela, .epa-tabela {
    width: 100%;
    border-collapse: collapse;
    margin: 2.5rem 0;
    font-size: 0.875rem;
}
.tabela-animacao td, .tabela-satisfacao td, .tabela-desanimo td, .tabela-insatisfacao td, .tabela-ind-soc td, .csae-tabela-atributos th, .csae-tabela-atributos td, .conh-tabela th, .conh-tabela td, .hab-tabela th, .hab-tabela td, .att-tabela th, .att-tabela td, .epc-tabela th, .epc-tabela td, .eph-tabela th, .eph-tabela td, .epa-tabela th, .epa-tabela td {
    border: 1px solid #ddd;
    padding: 0.75rem;
    text-align: left;
    vertical-align: top;
}

.epc-tabela thead th {
  background-color: #979595;
}
.epc-tabela tbody td {
  background-color: #bab7b7;
}
tbody .cab-tab {
  text-align: center;
  font-weight: bold;
  font-size: 1rem;
}

.eph-tabela thead th {
  background-color: #75c0ce
}
.eph-tabela tbody td {
  background-color: #9ddde9;
}


.epa-tabela thead th {
  background-color: #f07ae9;
}
.epa-tabela tbody td {
  background-color: #faa6f5;
}

/* --- ALTERAÇÃO-CHAVE: Layout da Página da Historinha com Grid --- */
body.pagina-historinha .conteudo-principal {
    background-image: url('../imagens/background-images/1254656678.png');
    padding: 2.5rem;
    overflow: hidden; /* Alterado de overflow-x para overflow total */
    margin-left: -17rem;
    background-repeat: no-repeat;
    position: relative;

}
.conteudo-pagina-historinha {
  margin-left: 38rem;

}
.titulo-pagina-historinha {
    padding: 0 0;
    margin-top: -17rem;
    margin-left: -10rem;
}
.texto-historinha, .texto-historinha-2, .texto-historinha-3 {
    background-color: rgba(255, 255, 255, 0.4);
    padding: 0.4rem;
    border-radius: 0.5rem;
}
.texto-historinha p, .texto-historinha-2 p {
  color: black;
  opacity: 100%;
}
.texto-historinha {
  margin-top: -14rem;
  margin-left: -5rem;
  max-width: 45rem;

}
.texto-historinha-2 {
  margin-left: 10rem;
  margin-top: 5rem;
  max-width: 40rem;
}

.texto-historinha-3 {
  margin-left: -5rem;
  margin-top: 5rem;
  max-width: 40rem;
}

.referencia-historinha a {
  text-decoration: underline;
}
.referencia-historinha a:hover {
  text-decoration: none;
  font-weight: 500;
}

/* ======================================================= */
/* == RESPONSIVIDADE (MEDIA QUERIES) ===================== */
/* ======================================================= */

@media screen and (min-width: 64.0625rem) { /* 1440px */
    .imagens-decorativas {
        display: block;
    }
    .imagens-decorativas img {
        position: absolute;
    }
    #img-historinha-1 {
        width: 21.875rem;
        top: 12.5rem;
        left: calc(50% - 45rem); /* Posiciona em relação ao centro */
    }
    #img-historinha-2 {
        width: 40.625rem;
        top: 21.875rem;
        left: calc(50% + 5rem); /* Posiciona em relação ao centro */
    }
    #img-historinha-3 {
        width: 29.375rem;
        top: 56.25rem;
        left: calc(50% + 12.5rem); /* Posiciona em relação ao centro */
    }
}

/* --- Layout para Tablets (Telas até 1024px) --- */
@media screen and (max-width: 64rem) {
    .container-principal { flex-direction: column; }
    .menu-lateral {
        position: relative;
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid #eee;
        min-height: 5rem;
    }
    .conteudo-principal, 
    .conteudo-principal-paginas-modulos, 
    .conteudo-principal-midiateca, 
    .conteudo-principal-videos, 
    .conteudo-principal-glossario, 
    .conteudo-principal-guia, 
    .conteudo-principal-creditos {
        margin-left: 0;
        padding: 1.25rem;
        min-height: auto;
        overflow: visible;
    }
    body.pagina-inicial .conteudo-principal {
        display: block; /* Desativa o grid para um layout mais simples */
    }
    .galeria-modulos {
        flex-wrap: wrap;
        gap: 1.25rem;
        margin-top: 0;
        align-items: center;
        transform: translateY(0); /* Reseta a transformação */
    }
    .modulo {
        width: 45%;
        max-width: 12.5rem;
        margin: 0 !important; /* Remove margens complexas */
    }
    #imagem-semicirculo-container, #frase-semicirculo {
        display: none;
    }
    .csae-botoes-cha-1 {
        flex-direction: column;
        gap: 1.25rem;
    }
}

/* --- Layout para Celulares (Telas até 768px) --- */
@media screen and (max-width: 48rem) {
    html {
        font-size: 93.75%; /* 1rem = 15px */
    }
    .conteudo-principal, 
    .container-paginas-modulos,
    .atv1-container, .atv2-container,
    .midia-container, .vid-container, .gloss-container, .guia-container, .cred-container {
        padding: 1.25rem 1rem;
    }
    .modulo { width: 80%; }
    .tabela-animacao, .tabela-satisfacao, .tabela-desanimo, .tabela-insatisfacao, .tabela-ind-soc, .csae-tabela-atributos, .conh-tabela, .hab-tabela, .att-tabela, .epc-tabela, .eph-tabela, .epa-tabela {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .cs-img-container, .epc-img-container, .is-imagem-container, .navegacao-botoes {
        flex-direction: column;
        gap: 1.25rem;
    }
    .cs-img-container img, .epc-img-container img {
        margin-left: 0;
    }
    .botao-voltar, .botao-proximo {
        width: 100%;
        text-align: center;
    }
    .navegacao ul { text-align: center; }
}

/* --- Layout para Celulares Pequenos (Telas até 480px) --- */
@media screen and (max-width: 30rem) {
    html {
        font-size: 87.5%; /* 1rem = 14px */
    }
    .logo img { max-width: 60%; }
    .modulo { width: 90%; }
}

/* --- Menu Retrátil (Hamburger) em Móveis --- */
@media screen and (max-width: 64rem) {
    .menu-toggle {
        display: block;
        position: absolute;
        top: 1.5625rem;
        right: 1.875rem;
        width: 1.875rem;
        height: 1.375rem;
        cursor: pointer;
        z-index: 110;
    }
    .menu-toggle span,
    .menu-toggle span::before,
    .menu-toggle span::after {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: #333;
        border-radius: 2px;
        transition: all 0.3s ease-in-out;
    }
    .menu-toggle span { top: 50%; transform: translateY(-50%); }
    .menu-toggle span::before { top: -0.625rem; }
    .menu-toggle span::after { top: 0.625rem; }
    .menu-mobile-aberto .menu-toggle span { background-color: transparent; }
    .menu-mobile-aberto .menu-toggle span::before { top: 0; transform: rotate(45deg); }
    .menu-mobile-aberto .menu-toggle span::after { top: 0; transform: rotate(-45deg); }
    .navegacao {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
        padding-top: 0;
        margin-top: 0.9375rem;
    }
    .menu-mobile-aberto .navegacao {
        max-height: 62.5rem;
        padding-top: 1.25rem;
    }
    .logo { position: relative; z-index: 105; margin-bottom: 0; }
}