body {
	background-color: #ffffff;
	color: #000000;
	font-size: 100%;
	font-family: 'Montserrat', sans-serif;
	/*	padding-top: 50px; */
}

a {
	color: inherit;
	text-decoration: none;
}

.cor-1 { --cor: #ffffff; }
.cor-2 { --cor: #f7fafa; }
.cor-3 { --cor: #dee0e5; }
.cor-4 { --cor: #7a7a7a; }
.cor-5 { --cor: #4385f5; }
.cor-6 { --cor: #f8ac01; }
.cor-7 { --cor: #000000; }
.cor-8 { --cor: #ff0000; }

h1 {
	font-size: 4rem;
	font-weight: 800;
}

h2 {
	font-size: 1.6rem;
	font-weight: 800;
}

h3	{
	font-size: 1.3rem;
}

h4	{
	font-size: 1.1rem;
}

p {
	font-size: 0.9rem;
	margin-bottom: 0.9rem;
}

.p-12 {
	font-size: 0.9rem;
}

.cor-texto {
	color: var(--cor);
}

sub {
	bottom: 0em;
}

sup {
	top: -0.25em;
}

hr {
	border: 1px solid var(--cor);
	border-radius: 25px;
}

.riscado {
	text-decoration: line-through;
}

.center { text-align: center; }

.container-fluid {
	background-color: var(--cor);
	padding: 50px 0px 50px 0px;
}

.pad-4 {
	padding: 7px;
}

.pad-5 {
	padding: 5px !important;
}

.container { max-width: 960px; }

.m-bot-0 { margin-bottom: 0px; }
.m-bot-10 { margin-bottom: 10px; }
.m-bot-15 { margin-bottom: 15px; }
.m-bot-25 {	margin-bottom: 25px; }
.m-bot-50 {	margin-bottom: 50px; }
.m-bot-neg-50 { margin-bottom: -50px; }

.m-top-25 { margin-top: 25px; }

.pad-rig-25 { padding-right: 25px; }
.pad-lef-25 { padding-left: 25px; }
.pad-25 { padding: 25px; }
.pad-top-25 { padding-top: 25px; }

.borda-redonda {
	border-radius: 25px;
}

.borda {
	border: 10px solid var(--cor);;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.btn-1 {
	background-color: var(--cor);
	color: white;
	font-size: 1.5rem;
	font-weight: 700;
	padding: 10px 25px 15px 25px;
	border-radius: 12px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.btn-2 {
	background-color: var(--cor);
	color: white;
	font-size: 1rem;
	font-weight: 700;
	padding: 10px 25px 15px 25px;
	border-radius: 12px;
}

.img-temp {
	max-width: 500px;
	height: 400px;
	background-color: #7a7a7a;
}

.modulo {
	background-color: var(--cor);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.modulo img {
	background-color: var(--cor);
	border: 10px solid #f7fafa;
	border-radius: 100px;
	width: 200px;
	height: 200px;
	margin-top: -50px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.modulo-aula {
	background-color: var(--cor);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.full-wid {
	width: 100%;
}

/* === ESTILOS FINAIS E CORRETOS PARA O VÍDEO HERO === */

/* 
  Tornamos o container principal o nosso "mundo" de posicionamento.
  Isto é o que faltava na primeira tentativa e o que vai resolver a centralização.
*/
#hero-video-container {
    position: relative; 
    background-color: #000;
}

/* 
  A imagem da thumbnail não precisa de nenhum estilo especial. 
  O Bootstrap e a classe .borda-redonda já cuidam dela.
*/

/*
  O botão de play agora será posicionado em relação ao #hero-video-container,
  garantindo a centralização perfeita.
*/
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* O método infalível de centralização */
    z-index: 10; /* Garante que ele fique sobre a imagem */
    
    width: 90px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    transition: all 0.2s ease-in-out;
}

/* O triângulo dentro do botão de play */
.play-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 26px;
    border-color: transparent transparent transparent white;
}

/* O efeito de hover no container afeta o botão */
#hero-video-container:hover .play-button {
    transform: translate(-50%, -50%) scale(1.1);
    background-color: rgba(255, 0, 0, 0.8);
}

#hero-video-preload {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none; /* Começa escondido */
}

/* --- ESTILOS DA CAMPANHA DIA DOS PAIS --- */

/* Barra de Promoção Fixa no Topo */
.promo-bar {
	background-color: #ff0000; /* .cor-8 */
	color: #ffffff;
	text-align: center;
	padding: 8px 15px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.promo-bar p {
	margin: 0;
	line-height: 1.2;
}

/* Efeito de hover para botões e módulos */
.btn-1:hover, .btn-2:hover, .modulo:hover, .modulo-aula:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19);
}

/* Ajustes na classe de padding para o header */

/* Estilos para a nova caixa de oferta */
.preco-antigo {
	color: var(--cor-4);
	margin-bottom: 15px;
	font-size: 1.2rem;
}
.preco-antigo p {
	margin-bottom: 0;
}

/* Ajustes responsivos para a barra de promoção */

/* ADD THIS NEW CLASS AT THE END OF THE FILE */
.site-header {
	/* This overrides the default 50px top/bottom padding from .container-fluid */
	padding-top: 25px;
	padding-bottom: 25px;
  }

@media (max-width: 992px) {

.center-media {
text-align: center;
}

.max-w-500 {
	max-width: 500px !important;
}
}
	
@media (max-width: 400px) {

h1 { font-size: 3rem;}

}

@media (min-width: 768px) {

p {
	font-size: 1rem;
}

}

@media (max-width: 768px) {
    .feature-icon {
        /* Define a largura desejada */
        width: 40%;
        
        /* ADICIONE ESTA LINHA para manter a proporção */
        height: auto;
        
        /* Limite máximo para o tamanho */
        max-width: 100px;

        /* Controle do espaçamento inferior */
        margin-bottom: 10px !important;
		margin-top: 40px !important;
	
	}
    
		.feature-grid > [class*="col-"] {
			/*
			 1. CONTROLE O ESPAÇAMENTO INTERNO (PADDING) AQUI:
			 Reduzimos o padding vertical para 15px e mantivemos o horizontal.
			 Isso vai "encolher" a altura dos cards e diminuir o espaçamento mínimo.
			 Ajuste os valores como desejar.
			*/
			padding-top: 0px !important;
			padding-bottom: 0px !important;
			
			/*
			 2. CONTROLE O ESPAÇAMENTO EXTERNO (MARGIN) AQUI:
			 Agora você terá controle total. Se colocar 0px aqui, os cards ficarão
			 com um espaçamento de 30px (15px de padding-bottom de um + 15px de padding-top do outro).
			 Ajuste conforme o necessário.
			*/
			margin-bottom: 0px !important; 
		}
	
}