@charset "utf-8";
/* CSS Document */

body {
	/*font-family: "Helvetica", "Arial", sans-serif;*/
	font-family: Verdana, Geneva, sans-serif;
}
/* Estilos para links */
a:link {
	color: #006699;
	text-decoration: none;
}
a:visited {
	color: #006699;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	color: #F00;
}
a:active {
	color: #006699;
	text-decoration: none;
}
/* Estilos para cabeçalhos */
h1, h2, h3, h4 {
	color: #006699;
}
h1::before, h2::before, h3::before, h4::before {
	content: "   ";
	white-space: pre;
}
p::before {
	content: " ";
	white-space: pre;
}
/* Alinhamento de texto */
.text-justify {
	text-align: justify;
}
.text-left {
	text-align: left;
}
/* Estilo para blockquote */
.custom-blockquote {
	text-align: right;
	font-size: 0.8em;
	font-weight: 550; /* Leve bold */
	margin-right: 20px;
}
/*******************************************************************/

/* Zerar padding e margem de listas */
li, ol, ul {
	padding: 0;
	margin: 0;
}
/* Estilo para listas ordenadas */
ol {
	list-style: decimal inside;
}
ol li {
	color: #006699; /* Cor dos números */
}
/* Estilo para listas não ordenadas */
ul {
	list-style: disc inside;
	padding-left: 0px; /* Ajuste de consistência */
	padding-right: 0px; /* Ajuste de consistência */
}
ul li {
	padding-left: 0px; /* Reduzir padding antes da bolinha */
	list-style-position: inside; /* Garantir bolinha dentro do contêiner */
	color: #006699; /* Cor das bolinhas */
}
ul li::marker {
 font-size: 1em; /* Tamanho da bolinha */
 color: #006699; /* Cor da bolinha */
}
/* Zerar padding de elementos <li> em contêiner específico */
.minha-lista li {
	padding: 0;
	margin: 0;
}
/* Remover marcador */
.no-marker {
	list-style-type: none;
}

/* Ajustes de listas para smartphones */
@media (max-width: 767px) {
ol li {
	margin-bottom: 10px; /* Aumentar distância entre itens */
}
}
@media (max-width: 768px) {
ul li {
	margin-bottom: 1rem; /* Linha em branco entre itens */
}
}
/**************************************************************/
.titulo, .subtitulo {
	display: inline-block; /* Ajuste de display */
	text-align: left; /* Alinhar à esquerda */
	margin: 10px 0; /* Margem para separar elementos */
	padding: 8px 12px; /* Ajuste de padding para melhor adequação */
	box-sizing: border-box; /* Inclui padding e border no tamanho total */
}
.titulo {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 1.4em;
	font-weight: bold;
	color: #004080; /* Cor azul escuro */
	text-decoration: none;
	border: 2px solid #004080;
	border-radius: 10px;
	background: linear-gradient(135deg, #ffffff, #e6f2ff);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	vertical-align: top; /* Alinhamento vertical */
}
.titulo:hover {
	color: #ffffff;
	background: #004080;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
	transform: translateY(-2px);
}
 @media (max-width: 767px) {
.titulo {
	font-size: 1.1em; /* Reduzir tamanho da fonte em smartphones */
	padding: 5px 10px; /* Ajuste de padding para melhor adequação */
}
}
.subtitulo {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	color: #004080; /* Cor azul escuro */
	text-decoration: none;
	border: 2px solid #004080;
	border-radius: 8px;
	background: linear-gradient(135deg, #ffffff, #d9e6f2);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	vertical-align: top; /* Alinhamento vertical */
}
.subtitulo:hover {
	color: #ffffff; /* Cor do texto no hover */
	background: #004080;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
	transform: translateY(-2px);
}
 @media (max-width: 767px) {
.subtitulo {
	font-size: 1em; /* Reduzir tamanho da fonte em smartphones */
	padding: 4px 8px; /* Ajuste de padding para melhor adequação */
}
}
#tabela-ENEM {
	font-family: Verdana, Geneva, sans-serif;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 10px;
	overflow: hidden;
	width: 100%;
	max-width: 1000px; /* Largura máxima para desktops */
	border: none;
	font-size: 12px;
	color: #3880b0;
}
#tabela-ENEM th {
	font-size: 1em;
	background-color: #3880b0;
	color: white;
	padding: 1px;
	padding-right: 10px;
	padding-left: 10px;
	text-align: center;
	box-sizing: border-box;
	border-left: 1px dotted white; /* Borda pontilhada em branco */
}
.tabela-ENEM td, .tabela-ENEM th {
	border: 0.5px dotted #f2f2f2;
	padding-right: 10px;
	padding-left: 100px;
	text-align: center;
	color: #3880b0;
	box-sizing: border-box;
}
.tabela-ENEM td {
	border-bottom: 1px dotted white;
}
@media (max-width: 768px) {
#tabela-ENEM {
	max-width: 100%; /* Largura máxima para smartphones */
}
#tabela-ENEM td {
	padding: 5px; /* Ajuste de padding para smartphones */
	text-align: center; /* Alinhar texto ao centro em smartphones */
	font-size: 0.9em;
}
#tabela-ENEM th {
	font-size: 0.9em;
}
}
@media (max-width: 768px) {
.titulo {
	text-align: left;
	max-width: 90%;
}
.legenda ul li {
	margin-bottom: 0.25rem; /* Reduzir espaçamento entre itens em smartphones */
}
}
#tabela-ENEM tr:first-child th:first-child {
	border-top-left-radius: 10px;
}
#tabela-ENEM tr:first-child th:last-child {
	border-top-right-radius: 10px;
}
#tabela-ENEM tr:last-child td:first-child {
	border-bottom-left-radius: 10px;
}
#tabela-ENEM tr:last-child td:last-child {
	border-bottom-right-radius: 10px;/*color: #000000;*/
}
/* Faixas alternadas nas linhas */
#tabela-ENEM tr:nth-child(odd) {
	background-color: #CCC; /* Linhas ímpares brancas */
}
#tabela-ENEM tr:nth-child(even) {
	background-color: white; /* Linhas pares cinza claro */
}
.align-left {
	text-align: left !important;
}
.align-center {
	text-align: center !important;
}
/* Estilo para MathJax */
.MathJax {
	font-size: 100%;
}
@media only screen and (max-width: 600px) {
.MathJax {
	font-size: 80%;
}
}
.custom-blockquote {
	text-align: right;
	font-size: 0.8em;
	font-weight: 550; /* Leve bold */
	margin-right: 20px;
}
.responsive-content {
	font-family: Arial, sans-serif;
	padding: 10px;
}
.responsive-table {
	width: 100%;
	border-collapse: collapse;
}
.responsive-table th, .responsive-table td {
	border: 1px solid #000;
	padding: 5px;
	text-align: center;
}
.math-block {
	overflow-x: auto;
}

	
.img-fluid {
	max-width: 100%;
	height: auto;
}

/* Estilo para dispositivos móveis */



@media only screen and (max-width: 768px) {
.responsive-img {
	max-width: 300px; /* Limitar largura da imagem */
	height: auto;
	overflow-x: auto;
}
.no-padding {
	padding: 0;
	text-align: left; /* Garante o alinhamento à esquerda */
}
}
.fisica-space {
	height: 50px;
}
.image-container {
	text-align: center;
	margin: 20px 0;
}
.image-container img {
	max-width: 100%;
	height: auto;
}
.image-container .caption {
	font-size: 14px;
	color: #555;
	margin-top: 8px;
}
hr.thick {
	border: none;
	height: 5px; /* Altere esse valor para a espessura desejada */
	background-color: #000; /* Cor da linha */
}
/**********************************************/
ol.custom-list {
	list-style-type: none;
	counter-reset: item;
}
ol.custom-list li {
	counter-increment: item;
}
ol.custom-list li::before {
	content: counter(item, lower-alpha) ") ";
	margin-right: 5px;
}
/**********************************************/

ol.custom-list-2 {
	list-style-type: none;
	counter-reset: item;
}
ol.custom-list-2 li {
	counter-increment: item;
}
ol.custom-list-2 li::before {
	content: "(" counter(item, upper-alpha) ") ";
	margin-right: 5px;
}
/**********************************************/

	
body {
	overflow-x: hidden;
}
img {
	max-width: 100%;
	height: auto;
}
* {
	box-sizing: border-box;
}
/********
.container {
    width: 100vw;
    padding: 20px;
}

.container {
    display: flex;
    flex-wrap: wrap;
}

.item {
    flex: 1 1 auto;
    min-width: 200px;
}
******/
.titulo-smartphone {
	word-break: break-word;
	max-width: 300px;
	text-align: left;
}
.presentation {
	background: #ecf0f1;
	padding: 20px;
	margin-top: 20px;
	border-radius: 8px;
}
.presentation-Baby-Pink {
	background: #F8CAC3;
	padding: 20px;
	margin-top: 20px;
	border-radius: 8px;
}
/* ================================
VARIANTE 1 — TEMA AZUL ACADÊMICO
================================ */

.presentation-blue {
	background: #2c3e50;
	padding: 20px;
	margin-top: 20px;
	border-radius: 10px;
	color: #ecf0f1;
	border: 1px solid #1f2a36;
}
.presentation-blue p {
	color: #ecf0f1;
}
.presentation-blue b {
	color: #ffd166;
}
.presentation-blue ul {
	color: #a8d0ff;
	padding-left: 22px;
}
.presentation-blue li {
	color: #d6e6ff;
	margin: 4px 0;
}
/* ================================
VARIANTE 2 — TEMA ROSA QUENTE
================================ */

.presentation-pink {
	background: #f8cac3;
	padding: 20px;
	margin-top: 20px;
	border-radius: 10px;
	border: 1px solid #e7a39a;
	color: #4a1f1f;
}
.presentation-pink p {
	color: #4a1f1f;
}
.presentation-pink b {
	color: #a2122f;
}
.presentation-pink ul {
	color: #7a2f2f;
	padding-left: 22px;
}
.presentation-pink li {
	color: #5a2a2a;
	margin: 4px 0;
}
/* ================================
VARIANTE 3 — TEMA VERDE CIÊNCIA
================================ */

.presentation-green {
	background: #1f3d2b;
	padding: 20px;
	margin-top: 20px;
	border-radius: 10px;
	border: 1px solid #162d20;
	color: #e6f4ea;
}
.presentation-green p {
	color: #e6f4ea;
}
.presentation-green b {
	color: #9be7a1;
}
.presentation-green ul {
	color: #b8f2c2;
	padding-left: 22px;
}
.presentation-green li {
	color: #d7ffe0;
	margin: 4px 0;
}
/* ================================
VARIANTE 4 — TEMA LARANJA ENERGIA
================================ */

.presentation-orange {
	background: #3b2a1a;
	padding: 20px;
	margin-top: 20px;
	border-radius: 10px;
	border: 1px solid #2a1d12;
	color: #ffe8d6;
}
.presentation-orange p {
	color: #ffe8d6;
}
.presentation-orange b {
	color: #ffb703;
}
.presentation-orange ul {
	color: #ffd29d;
	padding-left: 22px;
}
.presentation-orange li {
	color: #ffe0b2;
	margin: 4px 0;
}
/* ================================
VARIANTE 5 — TEMA ROXO TECNOLOGIA
================================ */

.presentation-purple {
	background: #2b1e3f;
	padding: 20px;
	margin-top: 20px;
	border-radius: 10px;
	border: 1px solid #1f1630;
	color: #ece4ff;
}
.presentation-purple p {
	color: #ece4ff;
}
.presentation-purple b {
	color: #c77dff;
}
.presentation-purple ul {
	color: #d9b8ff;
	padding-left: 22px;
}
.presentation-purple li {
	color: #e8d4ff;
	margin: 4px 0;
}
/* ================================
VARIANTE 6 — TEMA AREIA CLÁSSICO
================================ */

.presentation-sand {
	background: #f4e3c1;
	padding: 20px;
	margin-top: 20px;
	border-radius: 10px;
	border: 1px solid #e2cfa5;
	color: #3b2f1c;
}
.presentation-sand p {
	color: #3b2f1c;
}
.presentation-sand b {
	color: #9c6644;
}
.presentation-sand ul {
	color: #6b4f2b;
	padding-left: 22px;
}
.presentation-sand li {
	color: #4f3a20;
	margin: 4px 0;
}
/* =================================
AJUSTES GERAIS PARA MATHJAX
================================= */

[class^="presentation-"] mjx-container {
	font-size: 1.05em;
	line-height: 1.4;
}
/* =================================
TEMAS ESCUROS
================================= */

.presentation-blue mjx-container, .presentation-green mjx-container, .presentation-purple mjx-container, .presentation-orange mjx-container {
	color: #ffffff;
}
.presentation-blue mjx-math, .presentation-green mjx-math, .presentation-purple mjx-math, .presentation-orange mjx-math {
	color: #ffffff;
}
/* destaque leve para operadores */

.presentation-blue mjx-mo, .presentation-green mjx-mo, .presentation-purple mjx-mo, .presentation-orange mjx-mo {
	color: #ffd166;
}
/* =================================
TEMAS CLAROS
================================= */

.presentation-pink mjx-container, .presentation-sand mjx-container {
	color: #222;
}
.presentation-pink mjx-mo, .presentation-sand mjx-mo {
	color: #7a2f2f;
}
/* =================================
FRAÇÕES (melhora contraste)
================================= */

[class^="presentation-"] mjx-frac {
	font-weight: 500;
}
/* =================================
DESTAQUE PARA EXPRESSÕES IMPORTANTES
(opcional)
================================= */

.math-highlight mjx-container {
	background: rgba(255,255,255,0.08);
	padding: 6px 10px;
	border-radius: 6px;
	display: inline-block;
}
/* =================================
CAIXA DE FÓRMULA (ESTILO LIVRO)
================================= */

.formula-box {
	margin: 18px 0;
	padding: 14px 18px;
	border-radius: 8px;
	border-left: 6px solid;
	font-size: 1.05em;
}
.formula-box mjx-container {
	font-size: 1.15em;
}
/* =================================
VERSÕES PARA FUNDOS ESCUROS
================================= */

.presentation-blue .formula-box, .presentation-green .formula-box, .presentation-purple .formula-box, .presentation-orange .formula-box {
	background: rgba(255,255,255,0.08);
	border-left-color: #ffd166;
	color: #ffffff;
}
/* =================================
VERSÕES PARA FUNDOS CLAROS
================================= */

.presentation-pink .formula-box, .presentation-sand .formula-box {
	background: #ffffff;
	border-left-color: #b56576;
	color: #222;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
/* =================================
TÍTULO OPCIONAL DA FÓRMULA
================================= */

.formula-title {
	font-weight: 600;
	margin-bottom: 6px;
	font-size: 0.95em;
	opacity: 0.9;
}
/* =================================
DESTAQUE PARA RESULTADO FINAL
================================= */

.formula-result {
	margin-top: 8px;
	font-weight: 600;
	font-size: 1.1em;
}


	<!-------------------------------------------------------------------------------------------------------------------------->
	
.azul-blueberry {
	background-color: #4285F4;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	margin: 5px 0;
}
/* Estilo para Vermelho_Cinnabar */
.vermelho-cinnabar {
	background-color: #EA4335;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	margin: 5px 0;
}
/* Estilo para Amarelo_Selective Yellow */
.amarelo-selective-yellow {
	background-color: #FBBC05;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	margin: 5px 0;
}
/* Estilo para Verde_Sea Green */
.verde-sea-green {
	background-color: #34A853;
	color: #fff;
	/*padding: 10px;*/
	border-radius: 5px;
	/* margin: 5px 0;*/
	text-align: center;
}
/* Estilo para Laranja_Vibrant Orange */
.laranja-vibrant-orange {
	background-color: #FF6D01;
	color: #fff;
	/*padding: 2px;*/
	border-radius: 5px;
	/* margin: 2px 0; */
	text-align: center;
}
.Font-Verdana {
	font-family: Verdana, Geneva, sans-serif;
}
/* Cores personalizadas */
.cor-azul-escuro {
	color: #395898;
}
.cor-azul-claro {
	color: #006699;
}
.cor-logo-azul {
	color: #4285F4;
}
.cor-logo-vermelho {
	color: #EA4335;
}
.cor-logo-verde {
	color: #34A853;
}
.cor-logo-amarelo {
	color: #FBBC05;
}
.cor-azul-blueberry {
	color: #4285F4;
}
.cor-laranja-vibrant-orange {
	color: #FF6D01;
}
.cor-verde-sea-green {
	color: #34A853;
}
.cor-vermelho-cinnabar {
	color: #EA4335;
}
.cor-amarelo-selective-yellow {
	color: #FBBC05;
}

/* =======================================================
   RESOLUÇÕES ENEM — FisicaNET 2026
   Módulo completo, organizado e documentado
======================================================= */


/* =======================================================
   1. CAIXA DA QUESTÃO (enunciado)
======================================================= */

.enem-questao {
    background: #f9fafc;
    border: 1px solid #dce3ec;
    border-radius: 12px;
    padding: 22px 26px;
    margin: 40px auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    max-width: 1000px;
    line-height: 1.65;
}

.enem-questao .enem-titulo {
    font-size: 1.25rem;
    font-weight: bold;
    color: #395898;
    margin-bottom: 12px;
}

.enem-questao img {
    max-width: 100%;
    height: auto;
    margin: 12px 0;
}

.enem-questao table {
    margin: 18px auto;
    border-collapse: collapse;
    width: 100%;
    max-width: 480px;
}

.enem-questao table th,
.enem-questao table td {
    border: 1px solid #cfd8dc;
    padding: 8px;
    text-align: center;
}

.enem-questao ol.custom-list-2 {
    margin-top: 12px;
    margin-bottom: 18px;
}

.enem-questao .toggle-button {
    margin-top: 18px;
    margin-bottom: 12px;
}


/* =======================================================
   2. JUSTIFY TOTAL (questão + resolução)
======================================================= */

.enem-questao p,
.enem-questao li,
.enem-questao td,
.enem-questao th {
    text-align: justify !important;
}

.enem-questao ol.custom-list-2 li {
    text-align: justify !important;
}

.enem-resolucao p,
.enem-resolucao li {
    text-align: justify !important;
}

/* Mobile: melhorar justify */
@media (max-width: 575px) {
    .enem-questao p,
    .enem-questao li {
        hyphens: auto;
        word-break: break-word;
    }
}


/* =======================================================
   3. RESOLUÇÃO — expandir para fora da caixa da questão
======================================================= */

.enem-questao .enem-resolucao {
    margin: 20px -26px 0 -26px;
    padding: 20px;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .enem-questao .enem-resolucao {
        margin: 20px -14px 0 -14px;
        padding: 16px;
    }
}


/* =======================================================
   4. EQUAÇÕES LARGAS (MathJax) — responsividade
======================================================= */

.presentation-green mjx-container,
.presentation-blue mjx-container,
.presentation-purple mjx-container,
.presentation-orange mjx-container,
.presentation-pink mjx-container,
.presentation-sand mjx-container {
    overflow-x: auto;
    overflow-y: hidden;
    display: block;
    max-width: 100%;
}

/* Mobile: reduzir levemente o tamanho das equações */
@media (max-width: 768px) {
    .presentation-green mjx-container,
    .presentation-blue mjx-container,
    .presentation-purple mjx-container,
    .presentation-orange mjx-container,
    .presentation-pink mjx-container,
    .presentation-sand mjx-container {
        font-size: 0.90em;
        padding: 4px 0;
    }
}


/* =======================================================
   5. EQUAÇÕES INLINE EM LISTAS — impedir quebra de linha
======================================================= */

.presentation-green li mjx-container,
.presentation-blue li mjx-container,
.presentation-purple li mjx-container,
.presentation-orange li mjx-container,
.presentation-pink li mjx-container,
.presentation-sand li mjx-container {
    display: inline !important;
    vertical-align: baseline !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* =======================================================
   6. BULLETS AMARELOS — maior contraste
======================================================= */

.presentation-green ul li::marker,
.presentation-blue ul li::marker,
.presentation-purple ul li::marker,
.presentation-orange ul li::marker,
.presentation-pink ul li::marker,
.presentation-sand ul li::marker {
    color: #FBBC05; /* amarelo FisicaNET */
    font-weight: bold;
}


/* =======================================================
   7. MOBILE — remover padding lateral dos bullets
======================================================= */

@media (max-width: 768px) {

    .presentation-green ul,
    .presentation-blue ul,
    .presentation-purple ul,
    .presentation-orange ul,
    .presentation-pink ul,
    .presentation-sand ul {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    .presentation-green ul li,
    .presentation-blue ul li,
    .presentation-purple ul li,
    .presentation-orange ul li,
    .presentation-pink ul li,
    .presentation-sand ul li {
        padding-left: 0 !important;
        margin-left: 0 !important;
        margin-bottom: 0.6rem; /* espaçamento confortável */
    }
}

.toggle-button {
    background-color: #4285F4;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;

    border-radius: 8px; /* único ajuste: cantos arredondados */
}

.toggle-button.active {
    background-color: #EA4335;
}


/* Centralizar imagens dentro das resoluções ENEM */
img.align-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Centraliza apenas equações grandes */
.presentation-green p[style*="text-align:center"],
.presentation-blue p[style*="text-align:center"] {
    text-align: center !important;
}

/* Texto normal volta ao alinhamento padrão */
.presentation-green p,
.presentation-blue p {
    text-align: justify !important;
}


/* 1. Texto normal das resoluções deve ser justificado */
.presentation-green p:not([style*="text-align:center"]),
.presentation-blue p:not([style*="text-align:center"]) {
    text-align: justify !important;
}

/* 2. Apenas equações grandes ficam centralizadas */
.presentation-green p[style*="text-align:center"],
.presentation-blue p[style*="text-align:center"] {
    text-align: center !important;
}


/* Corrige quebra de texto em parágrafos com equações inline */
.presentation-green p,
.presentation-blue p,
.presentation-purple p,
.presentation-orange p,
.presentation-pink p,
.presentation-sand p {
    text-align: justify !important;
}

/* Mantém centralização APENAS nos parágrafos que você explicitamente marcou */
.presentation-green p[style*="text-align:center"],
.presentation-blue p[style*="text-align:center"],
.presentation-purple p[style*="text-align:center"],
.presentation-orange p[style*="text-align:center"],
.presentation-pink p[style*="text-align:center"],
.presentation-sand p[style*="text-align:center"] {
    text-align: center !important;
}




/* =======================================================
   CORREÇÃO GLOBAL — EQUAÇÕES INLINE EM <p>
   Evita quebras feias, mantém fluxo natural do texto
======================================================= */

.presentation-green p mjx-container,
.presentation-blue p mjx-container,
.presentation-purple p mjx-container,
.presentation-orange p mjx-container,
.presentation-pink p mjx-container,
.presentation-sand p mjx-container {
    display: inline !important;
    white-space: normal !important;
    margin: 0 2px !important;
    padding: 0 !important;
    vertical-align: baseline !important;
}


/* ===== MOBILE: ENEM-QUESTAO encostando nas bordas ===== */
@media (max-width: 575px) {
    .enem-questao {
        margin: 0;              /* remove margens laterais */
        border-radius: 0;       /* encosta no menu sem cantos arredondados */
        padding: 18px 14px;     /* padding menor para telas pequenas */
        max-width: 100%;        /* ocupa toda a largura */
    }

    .enem-questao .enem-resolucao {
        margin: 20px -14px 0 -14px; /* mantém expansão da resolução */
        padding: 16px;
        border-radius: 0;           /* acompanha a caixa */
    }
}


/* MOBILE: container + enem-questao encostando nas bordas */
@media (max-width: 575px) {
    .container {
        max-width: 100% !important;  /* vence o style="max-width:1000px;" */
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .enem-questao {
        margin: 0;                   /* tira o "respiro" lateral */
        border-radius: 0;
        max-width: 100%;
    }

    .enem-questao .enem-resolucao {
        margin: 20px 0 0 0;
        border-radius: 0;
    }
}



/* =======================================================
   1. TABELAS — scroll horizontal em telas pequenas
======================================================= */

.enem-questao table {
    width: 100%;
    max-width: 480px;
    border-collapse: collapse;
}

@media (max-width: 575px) {
    .enem-questao table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        max-width: 100%;
    }
}

/* =======================================================
   2. IMAGENS — responsivas sem estourar a caixa
======================================================= */

.enem-questao img,
.enem-resolucao img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 12px auto;
}

/* =======================================================
   3. SVG — responsivo e sem overflow
======================================================= */

.enem-questao svg,
.enem-resolucao svg {
    max-width: 100%;
    height: auto;
    display: block;
    overflow-x: auto;
}

@media (max-width: 575px) {
    .enem-questao svg,
    .enem-resolucao svg {
        overflow-x: auto;
    }
}