/* variáveis de cor */

:root {
    --tamanho-1rem-desktop: 20px;
    --tamanho-1rem-desktop-menor: 15px;
    --tamanho-1rem-mobile: 14px;

    --cor-fundo-cabecalho: #a188eb;
    --cor-fundo-cabecalho-responsivo: rgba(255, 255, 255, 0.97);
    --cor-fonte-cabecalho-responsivo: #604abc;
    --cor-texto-branco: #ffffff;
    --cor-texto-titulo: #414141;
    --cor-texto-paragrafo: #000000;
    --cor-fundo-caixa: rgba(255, 255, 255, 0.8);
    --borda-caixa-gradiente1: #604abc;
    --borda-caixa-gradiente2: #fe7fb4;
    --rodape-gradiente1: #a760e4;
    --rodape-gradiente2: #ca91b1;
    --trilho-scroll-gradiente1: #fe7fb4;
    --trilho-scroll-gradiente2: #b968b7;
}

/* retira estilo padrão css e ajusta parâmetros gerais*/

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Pixelify Sans", sans-serif;
    font-size: var(--tamanho-1rem-desktop);
}

h1 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

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

ul {
    list-style-type: none;
}

html {
    scroll-behavior: smooth;
}
/* Estilização da imagem home */
#imag_home{
    width: 100%;
    height: auto;
    display: flex;
}

/* Estilização do cabeçalho */

header {
    background-color: var(--cor-fundo-cabecalho);
    height: 96px;
    color: var(--cor-texto-branco);
    position: sticky;
    top: 0;
    z-index: 1000;
    justify-content: center;
    align-items: center;
    display: flex;
}



.menu {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 1.75rem 0.8rem;    
}

.menu > li {
    margin: 0rem 0.8rem;
    padding:0.8rem;
    transition: transform 0.3s ease; 
}

/* Adiciona efeito quando passa o mouse em cima dos elementos do cabeçalho */
.menu > li:hover {
    cursor: pointer;
    background-color: var(--rodape-gradiente1);
    border-radius: 1rem;
    transform: scale(1.1); 
}
/* width 110% pois, quando o mouse fica em cima do menu, o elemento ficar maior, entao o alcance da ancora tem que aumentar */
.menu > li a {
    display: block;
    width: 110%;
    height: auto;
    padding: 0.3rem 0.6rem;
    
  }

/* responsividade do header */
#menu-botao-abrir {
    display: none;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

#menu-botao-abrir>div {
    height: 6px;
    width: 54px;
    background-color: var(--cor-texto-branco);
    margin: 10px 0;
    border-radius: 2px;
}

@media (max-width: 1450px) {
    * {
        font-size: var(--tamanho-1rem-desktop-menor);
    }


}

/* 1280px é quando o texto começa a quebrar, portanto, trocar para uma lista vertical */
@media (max-width: 1000px) {
    /* configurando o menu para ficar vertical e no estilo responsivo (reduzido) */
    * {
        font-size: var(--tamanho-1rem-mobile);
    }

    header {
        height: 10vh;
    }
 
  
    .menu {
    display: none;            
    /* mudar a direção (agora vai ser uma lista vertical) */
    flex-direction: column;   
    background-color: var(--cor-fundo-cabecalho-responsivo);
    position: absolute;
    top: 100%;   
    left: 0;
    width: 100%;
    padding: 10px 0;
    }

.menu > li {
    left: 0;
    margin: 8px 0;
    border: 1px solid rgba(188, 186, 186, 0.2);
    border-radius: 10px;
    color: var(--cor-fonte-cabecalho-responsivo);
}
  .menu > li:hover {
    cursor: pointer;
    background-color: rgba(188, 186, 186, 0.1);
    border-radius: 20px;
    transform: scale(1.01); 
}

 .menu_botao_abrir_ativo {
    display: flex; 
  }

  #menu-botao-abrir {
    display: block;
    margin:0px;
  }

}

/* Estilização do corpo */

/* Âncora para direcionamento dos links do cabeçalho */

.ancora{
    display:block;
    height: 90px;
    margin-top:-90px;
    visibility:hidden;
}

/* Container das seções, utilizando flexbox. Orienta os containeres filhos verticalmente e os alinha */
.container {
    display: flex;
    flex-direction: column;    
    align-items: stretch;
    justify-content: center;
    padding: 1rem 3rem;
    background: #e7b6ff;
    background: linear-gradient(139deg, rgba(231, 182, 255, 0.8) 0%, rgba(241, 127, 254, 0.6) 65%, rgba(182, 215, 255, 0.6) 100%);
}



/* Container que contem cada elemento */
.caixa {
    border-style: solid;
    border-width: 2px;
    border-color: var(--cor-texto-paragrafo);
    max-width: 800px;
    min-width: 600px;    
    margin: 2rem auto;
    font-size: 1rem;
    background: var(--cor-fundo-caixa);
    border-width: 2px;
    padding: 5px;
    
}

@media (max-width: 1000px) {
    .caixa {
        max-width: 85vw;
        min-width: 100px;
    }
}


.caixa-texto p {
    margin: 0.75rem 0;   
}

.caixa-texto a {
    color:var(--borda-caixa-gradiente1);
}

/* Estilização da seção nossos objetivos, que contém bullet points roxos */

.caixa-texto ul {
    margin-left: 1rem;
}

.caixa-texto li {
    list-style:disc;
    color: var(--borda-caixa-gradiente1);
    padding-left: 0.75rem;
    margin: 0.75rem 0;
}

.caixa-texto li span {
    color: var(--cor-texto-paragrafo);
}

/* ----------------------------------- */
/* ESTILIZAÇÃO DO CARROSSEL            */
/* ----------------------------------- */
#carrossel {
    min-width: 800px;
}

@media (max-width: 1000px) {
    
}

.carrossel {
  position: relative;
  padding: 0.6rem;
  padding-right: 12px;
  display: flex;
  flex-direction: column;
}

.slide-com-foto{
  --foto-w: 260px;
  --foto-h: 210px;
  --pad-x: 3px;
  --pad-y: 10px;
  --borda: 1px;
  --top-off: -32px;
  --right-off: -10px;
  --drop-shadow: -4px 4px 4px 0px #EC20D240;
  padding: 0;
}

.slide .caixa {
    margin: 0;
}

.slide-com-foto .imagem-slide {
  position: absolute; /* Posicionada em relação ao .carrossel */
  top: var(--top-off);
  right: var(--right-off);
  z-index: 5;
  width: var(--foto-w);
  height: var(--foto-h);
  object-fit: cover; /* Cobre a área sem distorcer. */
  background: #fff;
  border: var(--borda) solid #000;
  padding: var(--pad-y) var(--pad-x);
  box-shadow: var(--drop-shadow);
}

/* Elemento invisível que faz com que o texto contorne a imagem */
.slide-com-foto .caixa-texto .flow-shape{
  float: right;
  /* A largura é calculada para corresponder ao espaço total ocupado pela imagem. */
  /* Área total: foto + padding + borda */
  width: calc(var(--foto-w) + 2*var(--pad-x) + 2*var(--borda));
  height: 8rem;
  content: "";
  display: block;
  opacity: 0;

  /* Apenas para debug */
  /* opacity: 100;  */
  /* background-color: #000; */
}

.header-carrossel, .header-formulario {
  display: flex;
  align-items: center;
  margin: 0;
  height: 46px;
  background-image: linear-gradient(to right, var(--borda-caixa-gradiente1) 0%, var(--borda-caixa-gradiente2) 100%);
  border: 1px solid #000;
}

.texto-header-carrossel, .texto-header-formulario {
  background: #fff;
  border: 2px solid #000;
  border-radius: 0 16px 16px 0 / 0 50% 50% 0;
  padding: 0px 32px 0px 12px;
  margin: 2px;
  line-height: 1;
  display: inline-block;
}

.header-carrossel .texto-header-carrossel span, .header-formulario .texto-header-formulario span {
  font-family: "Micro 5", sans-serif;
  font-weight: 400;
  font-size: 1.8rem;

  /*-webkit-text-stroke só funciona no Chrome/Edge/Safari, 
  então simulamos o stroke com text-shadow*/
  color: #414141;
  text-shadow: 
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

.slide .caixa-texto {
  padding: 1.2rem;
  border-width: 1px;
  margin: -1px 0;
}

.titulo-slide {
  font-family: "Micro 5", sans-serif;
  font-weight: 400;
  font-size: 1.8rem;

  /*-webkit-text-stroke só funciona no Chrome/Edge/Safari, 
  então simulamos o stroke com text-shadow*/
  color: #000;
  text-shadow: 
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

.slide .caixa-texto .texto-slide {
  font-weight: 400;
  font-size: 1rem;
  min-height: 8rem;
}

.barra-scroll-horizontal{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: 22px;
}

.barra-scroll-horizontal .slide-anterior,
.barra-scroll-horizontal .slide-seguinte{
  height: 100%;
  min-width: 64px;
  background: #fff;
  border: 1px solid var(--borda, #000);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.icone-seta{
  height: 19px;
  width: 52px;
  padding: 2px 4px;
}

.barra-track{
  position: relative;
  height: 22px;
  border: 1px solid var(--borda, #000);
  margin: 0px -1px;
  background: #fff;
  overflow: hidden;
}

.barra-thumb{
  position: absolute;
  height: 22px;
  background-image: linear-gradient(to right, var(--trilho-scroll-gradiente1) 0%, var(--trilho-scroll-gradiente2) 100%);
  border: 1px solid var(--borda, #000);
  margin: -1px 0px 0px -1px;
  transition: left 180ms ease;
}

/* Ajuste feito no JS para que o overlap da borda do thumb fique correto */
.barra-thumb.primeiro{ margin: -1px 0 0 -1px; }
.barra-thumb.ultimo{ margin: -1px 0 0 2px;  }

@media (max-width: 1000px) {

    #carrossel {
        max-width: 85vw;
        min-width: 100px;
        width: 100%;
    }

    .carrossel {
        min-height: 22rem;
    }

    .slide-sem-foto{
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .slide-com-foto {
        display: flex;
        flex-grow: 1;
    }

    .slide .caixa-texto {
        flex-grow: 1;
    }

    .slide-com-foto .imagem-slide {
        display: none;
        top: 0;
        right: 0;
        z-index: 5;
        width: 0;
        height: 0;
        object-fit: cover;
        background: #fff;
        border: var(--borda) solid #000;
        padding: var(--pad-y) var(--pad-x);
        box-shadow: var(--drop-shadow);
    }

    .slide-com-foto .caixa-texto .flow-shape {
        float: right;
        width: 0;
        height: 0;

        content: "";
        display: block;
        opacity: 0;
    }

    .header-carrossel .texto-header-carrossel span, .header-formulario .texto-header-formulario span {
        font-family: "Micro 5", sans-serif;
        font-weight: 600;
        font-size: 1.8rem;

        /*-webkit-text-stroke só funciona no Chrome/Edge/Safari, 
        então simulamos o stroke com text-shadow*/
        color: var(--cor-texto-paragrafo);
        text-shadow: none;
    }

    .titulo-slide {
        font-family: "Micro 5", sans-serif;
        font-weight: 600;
        font-size: 2rem;

        /*-webkit-text-stroke só funciona no Chrome/Edge/Safari, 
        então simulamos o stroke com text-shadow*/
        color: #000;
        text-shadow: none;
    }
}

@media (max-width: 420px) {
    .carrossel {
        min-height: 27rem;
    }
}

/* implementação da borda gradiente */

.borda-gradiente {
    border: 10px solid transparent;
    border-image: linear-gradient(to right, var(--borda-caixa-gradiente1), var(--borda-caixa-gradiente2)) 1;
    border-image-slice: 1;
    padding: 1.5rem;
}


/* ----------------------------------- */
/* ESTILIZAÇÃO JANELA DE INTEGRANTES   */
/* ----------------------------------- */
.janela {
    height: 300px;
    max-width: 800px;
    min-width: 600px;
    background: #FFFFFF;
    overflow-y: scroll;   /* apenas scroll vertical */
    overflow-x: hidden;   /* remove o scroll horizontal */
}

/* Barra de Scroll Vertical */
.janela::-webkit-scrollbar {
    width: 20px;
    background: #ccc;
}

/* Track */
.janela::-webkit-scrollbar-track {
    background: #999;
    border: 5px solid #ccc; /* cria “margem” cinza em volta */
    box-shadow: inset 1px 1px 2px #666;
}

/* Handle */
.janela::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #ff5db1, #be16d0);
    border-radius: 3px;
    border: 2px solid #666;
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.7);
}

/* Handle on Hover */
.janela::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #ff3ca1, #951bcd);
}

/* Botões de seta ↑ ↓ */
.janela::-webkit-scrollbar-button:single-button:vertical:decrement {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><polygon points='10,7 7,13 13,13' fill='black'/></svg>") no-repeat center #ccc;
    height: 20px;
    box-shadow: 
        inset -3px -3px 0px rgba(0,0,0,0.4),   /* sombra inferior-direita (↘) */
        inset 3px 3px 0px rgba(255, 255, 255, 0.649); /* brilho superior-esquerda (↖) */
}

.janela::-webkit-scrollbar-button:single-button:vertical:increment {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><polygon points='7,7 13,7 10,13' fill='black'/></svg>") no-repeat center #ccc;
    height: 20px;
    box-shadow: 
        inset -3px -3px 0px rgba(0,0,0,0.4),   /* sombra inferior-direita (↘) */
        inset 3px 3px 0px rgba(255, 255, 255, 0.649); /* brilho superior-esquerda (↖) */
}

/* Botões de seta ↑ ↓ on Hover */
.janela::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><polygon points='10,7 7,13 13,13' fill='black'/></svg>") no-repeat center #e7e7e7;
    box-shadow: 
        inset -3px -3px 0px rgba(0,0,0,0.4),   /* sombra inferior-direita (↘) */
        inset 3px 3px 0px rgba(255, 255, 255, 0.649); /* brilho superior-esquerda (↖) */
}

.janela::-webkit-scrollbar-button:single-button:vertical:increment:hover {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><polygon points='7,7 13,7 10,13' fill='black'/></svg>") no-repeat center #e7e7e7;
    height: 20px;
    box-shadow: 
        inset -3px -3px 0px rgba(0,0,0,0.4),   /* sombra inferior-direita (↘) */
        inset 3px 3px 0px rgba(255, 255, 255, 0.649); /* brilho superior-esquerda (↖) */
}

/* ----------------------------------- */
/* ESTILIZAÇÃO CARTÕES DE INTEGRANTES  */
/* ----------------------------------- */
/* Container - Grid com 4 Integrantes por Linha */
.container_integrantes {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 por linha */
    gap: 20px;
    padding: 20px;
}

.cartoes_integrantes {
    background: #D9D9D9;
    box-shadow: 6px 6px 6px -3px rgba(0,0,0,0.4);
    width: 98%;
    max-width: 167px;
    padding: 15px;
    overflow: hidden;
    text-align: center; 
    opacity: 0; /* Não aparece inicialmente */
    transform: translateY(20px);
    transition: all 1s ease;
}

.cartoes_integrantes.show {
  opacity: 1;
  transform: translateY(0);
}

.cartoes_integrantes p{
    margin: 5px 0; /* cada <p> em sua linha */
    font-family: "Press Start 2P", system-ui; /* Setar fonte especial*/
    font-weight: 400;
    font-style: normal;
    line-height: 1.25;
}

.cartoes_integrantes img{
    max-width: 100%;
    object-fit: cover;             /* corta/centraliza, mantém proporção */
    margin-bottom: 10px;
    transition: transform 0.5s ease;
    transform-origin: bottom center; /* fixa a parte inferior */
}

.cartoes_integrantes:hover {
    box-shadow: 0px 0px 25px rgba(133, 35, 183, 0.605); /* sombra roxa em toda volta */
    background: #fbfbfb; /* muda o fundo do cartão */
}

.cartoes_integrantes:hover img{
    transform: scale(1.05); /* aumenta a imagem em 5%*/
}

/* Estilização <p> de nome, curso e ingresso */
/*          Mudando Cor e Tamanho            */
.cartoes_integrantes .p_nome {
    color: #000000;
    font-size: 0.6rem;
}

.cartoes_integrantes .p_curso {
    color: #7e1ebe;
    font-size: 0.5rem;
}

.cartoes_integrantes .p_ingresso {
    color: #636363;
    font-size: 0.4rem;
}

/* -------------------------------------- */
/*  PORTABILIDADE INTEGRANTES             */
/* -------------------------------------- */
@media (max-width: 1000px){
    /* Não sei o que houve, tava dando problema com o .caixa, */
    /* depois que botei isso funcionou e fez o mesmo ajuste   */
    #integrantes {
        width: 100%
    }
    
    .janela {
        max-width: 85vw;
        min-width: 100px;
    }
}

@media (max-width: 700px){
    .janela {
        height: 500px;
        width: 100%;
        min-width: 70vw;
    }

    .container_integrantes {
        grid-template-columns: repeat(1, 1fr); /* 1 por linha */
    }

    .cartoes_integrantes {
        display: flex;              /* ativa layout flex */
        align-items: center;        /* alinha verticalmente */
        width: 100%;
        max-width: 95vw;
        height: 32vw;
    }

    .cartoes_integrantes img {
        width: 22vw;              
        object-fit: cover;          /* mantém proporção e corta excesso */
    }

    .cartoes_integrantes p {
        margin: 5px 0; /* cada <p> em sua linha */
        padding-left: 4vw;
        font-family: "Press Start 2P", system-ui; /* Setar fonte */
        font-weight: 400;
        font-style: normal;
        padding-bottom: 2px;
    }

    .cartoes_integrantes .p_nome {
        color: #000000;
        font-size: 0.8rem;
    }

    .cartoes_integrantes .p_curso {
        color: #7e1ebe;
        font-size: 0.7rem;
    }

    .cartoes_integrantes .p_ingresso {
        color: #636363;
        font-size: 0.6rem;
    }
}



/* Estilização do rodapé */

footer {
    background-image: linear-gradient(to right, var(--rodape-gradiente1) 0%, var(--rodape-gradiente2) 100%);
    color: var(--cor-texto-branco);
}

.footer-links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 40px 16px;    
}

.footer-links > li {
    margin: 0px 16px;
}
.footer-links > li img {
    width: 64px;
    height: auto;
    transition: transform 0.3s ease; 
}
.footer-links > li img:hover {
    cursor: pointer;
    transform: scale(1.2); 
}
.footer-links i {
  font-size: 2.5rem; 
  transition: transform 0.3s ease, color 0.2s;
}
.footer-links a:hover i {
  cursor: pointer;     
  transform: scale(1.2);
}

/* Estilizaçao do formulario        */

/* Container principal do formulário */
.formulario {
  padding: 0;
  margin: 40px auto;
  width: 800px;
  background: var(--cor-fundo-caixa);
  border: 2px solid #000;
}

/* Formulário do fim da página*/
#formulario_contato {
  padding: 20px;
  display: flex;
  flex-direction: column;
}

/* Campos do formulário (nome, email, mensagem) */
.campo-formulario {
  margin-bottom: 15px;
}

/* Onde está escrito "nome", "email", "mensagem" */
.campo-formulario label {
  display: block;
  font-family: "Micro 5", sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #000;
  margin-bottom: 5px;
  padding: 5px 0;
  background: transparent;
}

/* Inputs e textarea */
.campo-formulario input,
.campo-formulario textarea {
  width: 100%;
  padding: 8px 12px;
  border: 2px solid #000;
  background: #fff;
  font-family: "Pixelify Sans", sans-serif;
  font-size: 16px;
  box-sizing: border-box;
}

/* Quando usuário seleciona o input que está escrevendo no formulário, mudar de cor a caixa selecionada */
.campo-formulario input:focus,
.campo-formulario textarea:focus {
  border-color: var(--borda-caixa-gradiente1);
  box-shadow: 1px 1px 8px rgba(96, 74, 188, 0.3);
  /* Precisamos dessa propriedade para o navegador nao sobrescrever estilo anterior da borda */
  outline: none;
}


.campo-formulario textarea {
  /* altura mínima para não ficar muito pequena */
  min-height: 120px;
  font-family: "Pixelify Sans", sans-serif;
}

/* Mensagens de erro do formulário */
.aviso-erro {
  display: none;
  color: #ff4444;
  font-family: "Pixelify Sans", sans-serif;
  font-size: 14px;
  margin-top: 5px;
  font-weight: 500;
}

.aviso-erro-ativo{
  display: block;
}

#formulario_botao_enviar {
  /* para que fique do tamanho de seu conteudo e alinhado ao inicio: flex-start */
  align-self: flex-start;
  padding: 10px 20px;
  background: #D9D9D9;
  border: 2px solid #000;
  font-family: "Micro 5", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #000;
  cursor: pointer;
  margin-top: 10px;
  transition: transform 0.3s ease;
}

/* efeito de passar mouse em cima do botão */
#formulario_botao_enviar:hover {
  background: var(--borda-caixa-gradiente1);
  transform: scale(1.08);
}

/* Efeito de "shrink", de clique, no botão */
#formulario_botao_enviar:active {
  transform: translateY(0);
}

/* Responsividade do formulário */
@media (max-width: 800px) {
  .formulario {
    min-width: 300px;
    max-width: 95%;
    margin: 20px auto;
  }
  
  .header-formulario .texto-header-formulario span {
    font-size: 24px;
  }
  
  #formulario_botao_enviar,
  .campo-formulario label {
    font-size: 24px;
  }
  
  .campo-formulario input,
  .campo-formulario textarea {
    font-size: 14px;
  }
}