/* Fonte Montserrat carregada via HTML <link> */

/* Reset e base */
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
    color: #101820;
}

.header {
  position: relative; /* necessário para posicionar o ícone */
}

/* home-icon padrão */
.home-icon {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background-color 0.2s ease;
}

/* no hover mantemos o mesmo, sem crescer pra não sair do lugar */
.home-icon:hover {
  background: rgba(255,255,255,1);
}

/* SVG interno permanece em 24×24 */
.home-icon svg {
  width: 24px;
  height: 24px;
  fill: #101820;
}

/* --- MOBILE: torna o ícone menor e para o lado */
@media (max-width: 768px) {
  .home-icon {
    top: 16px;       /* mantém em cima */
    right: 16px;     /* agora à direita */
    left: auto;      /* cancela o left anterior */
    width: 32px;     /* opcional: tamanho menor */
    height: 32px;
  }
  .home-icon svg {
    width: 18px;
    height: 18px;
  }
}

/* Título principal (abaixo do header) */
.titulo-cta {
    padding: 30px 20px 10px;
    text-align: center;
}

.titulo-cta h1 {
    font-size: 2rem;
    margin-bottom: 10px;
}

/* Conteúdo informativo e rodapé (com margem e padding maiores) */
.info-curso,
footer {
    max-width: 960px;
    margin: 40px auto;
    background-color: #fff;
    padding: 24px 40px;
    border-radius: 16px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);
}

/* garante que o texto e o botão fiquem lado a lado centrados */
.pagamento {
    max-width: 960px;
    margin: 40px auto;
    padding: 24px 40px;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);

    display: flex;
    align-items: center;
    /* centraliza verticalmente */
    justify-content: center;
    /* centraliza horizontalmente */
    gap: 40px;
    /* espaço entre itens */
    flex-wrap: wrap;
    /* permite quebra de linha */
}

/* AVISO: ocupa 100% da linha */
.pagamento-aviso {
    flex: 1 1 100%;
    /* força a linha abaixo para os próximos itens */
    font-size: 1rem;
    color: #101820;
    text-align: center;
    margin-bottom: 0px;
}

/* mantém botão e texto lado a lado na linha de baixo */
.mp-button-container,
.pagamento-text {
    flex: 0 1 auto;
    /* tamanho natural, lado a lado */
}

.pagamento-text {
    font-size: 1rem;
    color: #101820;
    line-height: 1.4;
    max-width: 400px;
    /* limite de largura para o texto */
}

.pagamento-text a {
    color: #0099A8;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.pagamento-text a:hover {
    color: #EE7623;
    font-weight: 900;
}

.mp-button-container {
    display: inline-flex;
    transform-origin: center center;
    transform: scale(1.3);
    /* 30% maior */
}

/* Container do formulário — removendo padding para o iframe colar nas bordas */
.form-container {
    max-width: 960px;
    margin: 40px auto;
    background-color: #fff;
    padding: 24px 40px;
    border-radius: 16px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    /* garante que o iframe fique “colado” */
}

/* Estilo do iframe — sem bordas internas e ocupando 100% do container */
.form-container iframe {
    display: block;
    width: 100%;
    min-height: 650px;
    height: auto;
    /* ajuste conforme a necessidade */
    border: none;
    margin: 0;
    padding: 0;
}

.form-container.altura-ajustada iframe {
    height: 1250px;
    /* aqui você ajusta para o valor que quiser */
}

/* Botão do Mercado Pago */
.mercado-pago-button-render {
    transform: scale(1.5);
    transform-origin: center;
    margin-top: 20px;
}

/* Rodapé */
footer {
    /* Mesmos padrões de largura, margem e padding dos cards acima */
    max-width: 960px;
    margin: 40px auto;
    padding: 24px 40px;

    background-color: #0099A8;
    /* azul institucional */
    color: #FFFFFF;
    /* texto principal em branco */

    border-radius: 16px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);

    text-align: center;
}

.footer-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  padding: 24px 0;
}

.footer-icons a .material-icons {
  font-size: 2.5rem;   /* antes estava em 1.8rem */
  color: var(--clr-footer-icon);
  transition: color 0.2s ease;
}

/* Responsividade */
/* Em telas até 768px, reduzimos tamanhos e tornamos o container full-width */
@media (max-width: 768px) {
    .titulo-cta h1 {
        font-size: 1.4rem;
    }

    .info-curso {
        font-size: 12px;
    }

    footer {
        font-size: 8px;
    }

    .mercado-pago-button-render {
        transform: scale(1.2);
    }

    .form-container {
        max-width: 100%;
        margin: 20px 0;
        border-radius: 8px;
        padding: 0 8px;
    }

    /* Ajusta a altura para ocupar a maior parte da viewport */
    .form-container iframe {
        /*height: calc(100vh - 120px); */
        /* subtrai espaço aproximado do header + título */
        height: 650px;
    }
}

@media (max-width: 530px) {
    .form-container iframe {
        /*height: calc(100vh - 120px); */
        /* subtrai espaço aproximado do header + título */
        height: 750px;
        padding: 0;
    }
}

@media (max-width: 401px) {
    .form-container iframe {
        /*height: calc(100vh - 120px); */
        /* subtrai espaço aproximado do header + título */
        height: 950px;
        padding: 0;
    }
}