.elementor-24655 .elementor-element.elementor-element-62c62f6 > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-24655 .elementor-element.elementor-element-62c62f6:not(.elementor-motion-effects-element-type-background), .elementor-24655 .elementor-element.elementor-element-62c62f6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-cdcb8d4 );}.elementor-24655 .elementor-element.elementor-element-62c62f6{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-24655 .elementor-element.elementor-element-62c62f6 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-24655 .elementor-element.elementor-element-9c3ce67:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-24655 .elementor-element.elementor-element-9c3ce67 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-cdcb8d4 );}.elementor-24655 .elementor-element.elementor-element-9c3ce67 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-block-end:0px;}.elementor-24655 .elementor-element.elementor-element-9c3ce67 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 0px 0px 0px;}.elementor-24655 .elementor-element.elementor-element-9c3ce67 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-24655 .elementor-element.elementor-element-fd3c3fa > .elementor-widget-container{background-color:var( --e-global-color-cdcb8d4 );}/* Start custom CSS for section, class: .elementor-element-62c62f6 */header.entry-header .entry-title

 {

    display: none;
}   

 h1, h2, h3, h4, h5, h6{font-family: "Plus Jakarta Sans", sans-serif!important;}

.vh100{

height: 100vh;    
}

.elementor-widget-wrap>.elementor-element
 {
    width: 100%;
    background-color: #040f1b;
}



footer

 {
    margin-top: 0!important;
  
}
   
   :root{--bg:#f6f8fb;--card:#ffffff;--accent:#2b6cb0;--muted:#6b7280;--success:#16a34a}
    *{box-sizing:border-box}
    body{font-family: "Plus Jakarta Sans", sans-serif!important;margin:0;background:#000F1C!important;color:#0f172a}
    .container{max-width:900px;margin:28px auto;padding:20px; height:100vh;}
    .card{background:#000F1C;border-radius:12px;box-shadow:0 6px 18px rgba(8,15,30,0.06);padding:48px}
	.tag-title {background-color: #0C2666; border-radius:4px; padding:4px 8px; color:#A5BFFF;text-align: center; width:41%; font-weight:600; margin-bottom: 8px;}
    header h1{font-family: "Plus Jakarta Sans", sans-serif!important; margin:0;font-size:40px; color: #F9FBFC!important;}
    .progress{height:10px;background:#0C2666;border-radius:999px;overflow:hidden;margin-top:12px}
    .progress > .bar{height:100%;background:#1d5eff; width:0%;}
    .grupo{margin:16px 0}
    .grupo h2{font-family: "Plus Jakarta Sans", sans-serif!important; margin:0;font-size:24px; color:#F9FBFC;}
    .pergunta{margin:12px 0}
    .pergunta h3{font-family: "Plus Jakarta Sans", sans-serif!important; margin:32px 0 16px 0;font-size:14px; color:#F9FBFC;font-weight: 400;}
    .opcoes{display:flex;gap:10px;flex-wrap:wrap}
   
	  .opcao {
 display: block;
    padding: 12px 15px;
    margin-bottom: 2px;
    border: 1px solid #002C55;
    border-radius: 4px;
    cursor: pointer;
    background-color: #001E38;
    transition: all 0.2s 
ease;
    width: 100%;
    color: #CCDBE8;
    font-size: 12px;
}

/* Opcional: Efeito de hover */
.opcao:hover {
    border-color: #007bff;
    background-color: #003B71;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
	color: #CCDBE8;
}

/* 2. Esconde o Radio Button nativo */
.opcao input[type="radio"] {
    /* Esconde o radio button, mas o mantém funcional para acessibilidade */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

/* 3. Estiliza o Box QUANDO o Radio Button está checado */
.opcao input[type="radio"]:checked ~ span {
    /* Estiliza o <span> (o texto) quando o input checado é o irmão anterior */
    /* Você pode adicionar estilos específicos para o texto se desejar */
    color: #CCDBE8; /* Exemplo: muda a cor do texto */
}

.opcao input[type="radio"]:checked {
    /* Esta regra é para o input, mas podemos usar o seletor de adjacência
       para estilizar o label */
    /* Como o input é o primeiro filho, o label não pode selecionar a si mesmo.
       Porém, podemos usar o seletor :checked para estilizar o span
       ou, se o input não estivesse DENTRO do label, usar o + */
}

/* O jeito mais direto é usar o seletor de classe .opcao, pois o input:checked está DENTRO dele */
/* Seleciona o elemento .opcao (o label) quando ele contém um input:checked */
.opcao:has(input[type="radio"]:checked) {
   border-color: #007bff;
    background-color: #003B71;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
	color: #CCDBE8;
}

/* Ajuste opcional para o <span> que contém o texto */
.opcao span {
    /* Garante que o span ocupe o espaço e alinhe o texto */
    display: inline-block;
}
	  
	  
    .controls{    
		display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: 18px;
    margin-top: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;}
    button{background:#D2DFFF;color:#061333;border:0;padding:12px 16px;border-radius:4px;cursor:pointer; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 500;}
	button:hover{background:#779EFF;}
    button.ghost{background:transparent;color:#D2DFFF;border: 1px solid #D2DFFF;}
	button.ghost:hover{background:transparent;color:#779EFF;border: 1px solid #779EFF;}
    .results-grid{width:100%;}
    .area-summary{display:flex;flex-direction:column;gap:10px}
    .area-box{padding:12px;border-radius:8px;background:#EDEEEE;}
    .score{font-weight:700;font-size:20px}
    .classification{font-size:13px;color:var(--muted)}
    .answers-list{margin-top:12px}
    .answer-item{ padding: 16px;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 8px;
    border: 1px solid #EDEEEE;
    font-size: 12px;
    line-height: 18px;
    color: #666D73;}
	.answer-item ul {padding-left: 16px; margin: 8px 0 0 0;font-size: 12px; line-height: 18px; }
    .dica{margin-top:6px;font-size:12px;color:#29791C;}
	  
	    .w40 {
		  width: 40%;
		  
	  } 
	  
	  .w50 {
		  width: 50%;
		  
	  } 
	  
	  .w60 {
		  width: 60%;
		  
	  } 
	  
	  .w100 {
		  width: 100%;
		  
	  } 
	  
	  .pl-16 {
		  padding-left: 16px;
		  
	  }
	  
	  div#resultados{
    background: #fff;
		  padding: 24px;
	}
	
	div#resultados h2 {
	    color:#002C55;
	    
	}
	  
	  div#resultados h3 {
		  color: #384047;
		  
	  }
	  
	  div#resultados h4 {
		  color: #384047;
	  }
	  
	  
	  canvas#graficoRadar {
    padding: 24px;
}
	  
	  button#baixarPdf{
		  background-color: #1d5eff;
		  color:#FAFBFF;
		   margin-top: 24px;
   			 width: 50%;
		}
	  
	  	  button#baixarPdf:hover{
		  background-color: #174BCC;
		}
	  
	  button#btnRefazer{
		  border: 1px solid #1d5eff;
		  color:#1d5eff;
		  margin-top: 24px;
   			 width: 50%;
		}
	   button#btnRefazer:hover{
		  border: 1px solid #174BCC;
		  color:#174BCC;
		}
	  
	  p#resumoGeral
	
	 {
    	font-size: 12px;
    	line-height: 150%;
		}
	  
    footer{margin-top:16px;text-align:right}
    .mensagem{color:#b91c1c;margin-top:8px}
    #jsErro{color:#b91c1c;background:#fff7f7;padding:10px;border-radius:8px;border:1px solid #ffd7d7;display:none;margin-top:12px}
    
	  .btn-start{display:block;width: 50%;margin:40px auto 0;background:#D2DFFF;color:#061333;border:0;padding:16px;border-radius:4px;cursor:pointer; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; font-size: 16px; }
	  .btn-start:hover {background:#779EFF;}
	  
	  @media (max-width:900px){
		.results-grid{grid-template-columns:1fr;}
		.opcoes{flex-direction:column}
	  }
	  
	  
	  
	  
	  
	  @media (max-width:767px){
	      
	      
        .container {
            max-width: 100%;
            margin: 0px auto;
            padding: 0;
            height: 100vh;
                }
                
         .card {
            padding: 64px 24px;
        }
        
        .tag-title {
   
         width: 72%;
        
        }
        
        
        .btn-start {
   
    width: 100%;
    margin: 24px auto 0;
   
        }
        
        .w60, .w40
        
         {
            width: 100%;
        }
        
        .pl-16

             {
                padding-left: 0;
            }
	      
	      canvas#graficoRadar {
    padding: 0;
    width: 100% !important;
        }
        
        div#resultados h3 {
    
    margin-top: 40px;
            }
	      
}/* End custom CSS */