/* --------------------------------------- VARIÁVEIS GLOBAIS ------------------------------------------- */
*{padding: 0px; margin: 0px; font-family: "montserrat", sans-serif;}
.center{text-align: center;}
.mauto{margin: auto;}
.w100{width: 100%;}
.h100{height: 100%;}
html {
  scroll-behavior: smooth;
}



/* ----------------------------------------------- FONTES ----------------------------------------------------- */

.fino{
  font-weight: 100;
}

.extra-leve{
  font-weight: 200;
}

.leve{
  font-weight: 300;
}

.normal{
  font-weight: 400;
}

.media{
  font-weight: 500;
}

.semi-bold{
  font-weight: 600;
}

.bold{
  font-weight: 700;
}

.bold-italic{
  font-weight: 700;
  font-style: italic;
}

.extra-bold{
  font-weight: 800;
}

.black{
  font-weight: 900;
}

/* ------------------------------------------- KEYFRAMES --------------------------------------------------- */

@keyframes mudar-cor {
  0% {background-color: rgb(160, 127, 236);}
  25% {background-color: rgba(160, 127, 236, 0.788);}
  50% {background-color: rgba(160, 127, 236, 0.582);}
  75% {background-color: rgba(160, 127, 236, 0.404);}
 100% {background-color: rgba(160, 127, 236, 0.226);}
}

@keyframes piscar {
  0%   { opacity: 1; }
  50%  { opacity: 0.5; }
  100% { opacity: 1; }
}

@keyframes piscar2 {
  0%   { opacity: 0; }
  33%  { opacity: 0; }
  66%  { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes pulsar {
  0%   { transform: scale(1.1); }
  50%  { transform: scale(0.8); }
  100% { transform: scale(1.1); }
}

@keyframes circulo-anim {
  0%    { opacity: 0; left: 54.59%; }
  9%    { opacity: 1;} 
  60%   { opacity: 1; left: 44.09%; }    
  100%  { opacity: 1; left: 47.59%; }  
}

@keyframes seta-anim {
  0%    { opacity: 0; left: 40.2%; }
  9%    { opacity: 1;} 
  60%   { opacity: 1; left: 50.7%;}   
  100%  { opacity: 1; left: 47.2%; } 
}


/* ------------------------------------- PAINEL LOGO ANIMADO --------------------------------------------- */
.bg-cinza-1{background-color: #EDECED;}
.painel-logo{margin: auto; position: relative; max-width: 1918px;}
.barra-roxa{height: 0.8vw; max-height: 11px; background-color: rebeccapurple; animation: mudar-cor 1s infinite alternate;}
.img-painel-logo{overflow: hidden;}
.logo-painel{ transform: scale(1.04); transform-origin: center; margin-top: 0.5vw;}

/* ----------------------------------------- CONTAINERS CURSO --------------------------------------------------- */
.bg-alas {
  position: relative;
  width: 100%;
}

/* O container central não precisa de nenhuma mudança, a não ser remover
   qualquer propriedade de grid que você tenha adicionado. */
.container-imagem-texto {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: auto;
  user-select: none;
}

.logo-lateral {
  position: absolute;
  opacity: 0.15;
  width: 65px;
  height: auto;
  margin-left: auto;
  margin-right: auto;

  transition: transform 3s linear; 
}

/* RESPONSABILIDADE 2: A Posição na "Calha" */
/* Em qual coluna ele está? */
.na-calha-esquerda {
  left: 0;
  right: calc(50% + 590px); /* Metade do seu container de 1180px */
}

.na-calha-direita {
  left: calc(50% + 590px);
  right: 0;
}

/* RESPONSABILIDADE 3: A Posição Vertical */
/* Em que altura ele está? */
.posicao-1-e {
  top: 1530px;
}
.posicao-1-e-2 {
  top: 1000px;
}
.posicao-1-d-2 {
  top: 1330px;
}

.posicao-1-d {
  top: 2930px;
}

.posicao-2-e {
  top: 4550px;
}

.posicao-2-d {
  top: 6030px;
}

.posicao-3-e {
  top: 7600px;
}

.posicao-3-d {
  top: 8830px;
}

.posicao-4-e {
  top: 10400px;
}

.posicao-4-d {
  top: 12130px;
}

.posicao-5-e {
  top: 13600px;
}

.posicao-5-d {
  top: 15130px;
}

.posicao-6-e {
  top: 16700px;
}

.posicao-6-d {
  top: 18130px;
}

.posicao-7-e {
  top: 19818px;
}

.posicao-7-d {
  top: 21312px;
}

/* E a lógica responsiva permanece a mesma */
@media (max-width: 1500px) {
  .logo-lateral {
    display: none;
  }
}


.imagem-base {
  display: block;
  width: 100%;
  height: auto;
}

.elemento-sobreposto {
  position: absolute;
  box-sizing: border-box;
  user-select: text;
}

img.elemento-sobreposto {
  background-color: transparent;
  padding: 0;
}

/* ------------------------------------------------------------- AQUI COMEÇA A BAGUNÇA ------------------------------------------------------- */

p{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: scaleY(1.02);
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.001);
}

.preco-riscado {
  position: relative;
  display: inline-block;
  color: black;
}

.preco-riscado::before,
.preco-riscado::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0.1vw;
  background: red;
  transform-origin: center;
}

.preco-riscado::before {
  transform: rotate(8deg);
}

.preco-riscado::after {
  transform: rotate(-8deg);
}

body{
  overflow-x: hidden;
}

@media (max-width: 1180px) {
  .img-painel-logo{
    min-width: 1180px;
    margin: auto;
  }
}


/* Agora, a regra condicional que realmente funciona */
@media (max-width: 1180px) {
  
  /* Se você usa a classe .att como seu contêiner, use este seletor.
     Se for o .container-imagem-texto, use esse. */
  .att { /* ou .container-imagem-texto */
  
    /* Aplica um zoom de 150% ao contêiner inteiro (imagem + bolinhas) */
    transform: scale(1.4);
    
    /* Ancora o zoom no centro horizontal e no topo vertical,
       para que ele cresça para os lados e para baixo. */
    transform-origin: center top;

    /* Opcional: Adicione uma margem inferior para dar espaço ao conteúdo abaixo
       quando o contêiner crescer. Ajuste o valor conforme necessário. */
    margin-bottom: 16%; /* Exemplo */
  }
}


.divlogo-animado {
  width: 100%;
  overflow: hidden;   /* Corta o excesso de largura */
  position: relative; /* Essencial para o contexto do z-index */
}

/* 2. A Imagem: comportamento padrão. */
.imglogo-animado {
  width: 100%;
  height: auto;
  display: block;
}

/* 3. A Regra Condicional Final */
@media (max-width: 1180px) {
  .imglogo-animado {
    /* Torna a própria imagem um universo de posicionamento */
    position: relative;

    /* SUA ORDEM: Ficar atrás de tudo */
    z-index: -1;
    
    /* SUA ORDEM: Crescer em tamanho (afetando o layout) */
    width: 125%; 
    
    /* SUA ORDEM: Centralizar perfeitamente */
    left: 50%;
    transform: translateX(-50%);
  }

  .seta-animada {
    transform: translate(0%, 0%);
  }

  .space{
    height: 15px;
  }
}