/*
Theme Name: Equilibrium
Template: elementor-child
*/

.container {
    max-width: 1246px;
    margin: auto;
    padding: 0 1rem; /* Padding horizontal padrão para o container */
}

/* Hero area */
.hero-section {
    background-image: url(./img/video-hero.gif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}


.hero-header {
    height: 100px;
    width: 100%;
    padding: 16px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 1246px;
    margin: 0 auto;
}

.logo-header {
    width: 130px;
    max-width: 80%;
}

.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 7rem; /* Ajustado */
    padding-top: 7rem; /* Ajustado */
    gap: 32px;
    width: 100%;
    box-sizing: border-box; /* Garante que o padding não estoure a largura */
}

.text-hero {
    display: flex;
    flex-direction: column;
    gap: 0;
    color: white;
    width: 100%;
    max-width: 50.5rem;
    box-sizing: border-box;
}

.sub-hero {
    font-size: 24px;
    font-weight: 200;
    font-family: 'paralucentlight';
    color: #B2D1B2;
}

.call-hero {
    font-family: 'nataSans';
    font-size: 42px;
    font-weight: bold;
}

.cta-hero {
    width: fit-content;
    border-radius: 12px;
    border: 2px solid #B2D1B2;
    background-color: rgb(255 255 255 / 20%);
    display: flex;
    gap: 128px;
    padding: 16px;
    box-sizing: border-box; /* Crucial para o responsivo */
}

.cta-calendar-group {
    display: flex;
    gap: 16px;
    align-items: center;
}

.cta-calendar-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background-color: #B2D1B2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-calendar-icon svg {
    width: 40px;
    color: #171C17;
}

.cta-calendar-date {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: 'nataSans';
    font-weight: bold;
    font-size: 16px;
    color: white;
}

.cta-calendar-title {
    font-size: 20px;
}
/* end Hero area */

/* Conteudo evento area */
.conteudo-evento {
    padding-top: 7rem;
    padding-bottom: 7rem;
    background-color: #f9f9fb;
}

.conteudo-evento-container {
    display: flex;
    flex-direction: column;
}

.conteudo-evento-title {
    font-size: 36px;
    font-family: 'paralucentlight';
    color: #1C1C1C;
    text-align: center;
}

.conteudo-evento-text {
    font-family: 'nataSans';
    font-size: 16px;
    color: #1C1C1C;
    text-align: center;
}

.conteudo-evento-points {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.conteudo-evento-point svg {
    width: 36px;
    height: 36px;
    fill: #B2D1B2;
}

.conteudo-evento-point {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-family: nataSans;
    border: 2px solid #8A2E82;
    border-radius: 12px;
    padding: 2rem;
    background: white;
    flex: 1 1 calc(33.333% - 2rem); /* 3 cards por linha em telas grandes */
    box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura */

}

.point-title {
    font-family: nataSans;
    font-weight: bold;
}

/* end Conteudo evento area */

/* O que esperar area */
.esperar {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 7rem 0; /* Espaçamento no topo e bottom */
    background-color: white;
    align-items: center;
}

.esperar-title {
    font-size: 36px;
    font-family: 'paralucentlight';
    color: #1C1C1C;
    text-align: center;
}

.esperar-text {
    font-family: 'nataSans';
    font-size: 16px;
    color: #1C1C1C;
    margin-bottom: 56px;
    text-align: center;
}

.beneficios {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 48px;
    font-size: 16px;
    font-family: 'nataSans';
    justify-content: center;
}

.beneficios-text {
    display: flex;
    flex-direction: column;
    width: calc(33.333% - 32px); /* Tenta manter 3 colunas, ajustando a largura */
    min-width: 250px; /* Garante que os cards não fiquem pequenos demais */
    box-sizing: border-box;
}

.beneficio-title {
    font-size: 18px;
    color: #8A2E82;
}

.beneficio-number {
    font-size: 80px;
    color: #8A2E82;
    font-family: 'paralucent';
    opacity: 0.5;
}
/* end O que esperar area */

/* Banner inscricao area */
.banner-inscricao {
    background-color: #8A2E82;
    width: 100%;
    padding: 2rem 1rem; /* Adicionado padding horizontal */
    box-sizing: border-box;
}

.banner-content {
    display: flex;
    flex-direction: row; /* Padrão em row para telas maiores */
    flex-wrap: wrap;
    gap: 64px;
    color: white;
    align-items: center;
    justify-content: space-between;
}

.text-banner {
    display: flex;
    flex-direction: column;
    flex: 1;
    font-family: 'nataSans';
}

.title-banner {
    font-family: 'paralucent';
    font-size: 36px;
}

/* end Banner inscricao area */

/* Palestrantes area */
.palestrantes {
    background-color: #8A2E82;
    padding: 7rem 0;
}

.palestrantes-content {
    display: flex;
    flex-direction: column;
}

.cards-palestrantes {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: center;
}

.card-palestrante {
    height: 560px;
    width: calc(25% - 24px); /* Distribui a largura para 4 cards por linha */
    min-width: 250px; /* Garante que os cards não fiquem pequenos demais */
    position: relative;
    box-sizing: border-box;
}

.card-palestrante:first-child {
    background-image: url(./img/luciane.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.card-palestrante:nth-child(2) {
    background-image: url(./img/gabriel.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.card-palestrante:nth-child(3) {
    background-image: url(./img/thais.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.card-palestrante:nth-child(4) {
    background-image: url(./img/angela.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.hidden-content {
    height: 100%;
    width: 100%;
    background: #0000008b;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: nataSans;
    opacity: 0;
    transition: all ease-in-out 0.3s;
}

.hidden-content:hover {
    opacity: 1;
}

.palestrante-active {
   opacity: 1; 
}

.text-palestrante {
    padding: 32px;
    font-size: 16px;
}

.palestrante-nome {
    position: absolute;
    bottom: 29px;
    background-color: #B2D1B2;
    color: #8A2E82;
    font-size: 24px;
    font-family: nataSans;
    padding: 2px 14px;
    left: 6px;
    font-weight: 600;
}

.palestrante-sobrenome {
    position: absolute;
    bottom: -12px;
    background-color: #B2D1B2;
    color: #8A2E82;
    font-size: 24px;
    font-family: Paralucent;
    padding: 2px 14px;
    left: 6px;
}

.title-group {
    display: flex;
    gap: 64px;
    padding-bottom: 7rem;
    align-items: center; /* Centraliza verticalmente o texto */
}

.title-group > :first-child {
    font-size: 36px;
    font-family: 'ParalucentLight';
    color: white;
    padding-right: 4rem;
    border-right: 2px solid;
    width: 29%;
    text-align: start;
}

.title-group > :last-child {
    width: 60%;
    font-size: 16px;
    font-family: nataSans;
    color: white;
    text-align: start;
}
/* end Palestrantes area */

/* Apoiadores area */
.apoiadores {
    padding: 4rem 0; /* Adicionado padding no topo e bottom */
}

/* Correção para a área de Apoiadores */
.apoiadores-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4rem; /* Ajuste o gap entre as caixas de patrocinador e apoiadores */
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: center;
}

.apoiadores-evento {
    border: 2px solid #B2D1B2;
    border-radius: 12px;
    padding: 2rem;
    position: relative;
    width: 100%; /* Garante que as caixas ocupem a largura total */
    min-width: 250px;
    box-sizing: border-box;
}

.apoiadores-title {
    text-align: center;
    font-family: 'nataSans';
    font-size: 20px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -22px;
    background: white;
    border: 2px solid #b2d1b2;
    padding: 0.5rem 2rem;
    border-radius: 12px;
    white-space: nowrap;
}

.logo-apoiadores {
    display: flex;
    flex-direction: row; /* Garante que os logos fiquem em linha */
    justify-content: center; /* Centraliza os logos horizontalmente */
    align-items: center;
    padding-top: 2rem;
    flex-wrap: wrap;
    gap: 2rem; /* Aumente o gap para dar mais espaço entre os logos */
}

.logo {
    height: 45px; /* Altura fixa para todos os logos */
    flex-grow: 1; /* Permite que os logos se espalhem um pouco */
    flex-basis: auto; /* Permite o crescimento e encolhimento */
    display: flex; /* Transforma a div .logo em um container flex */
    justify-content: center; /* Centraliza a imagem dentro da div .logo */
    align-items: center; /* Centraliza a imagem verticalmente */
}

.logo img {
    height: 100%;
    width: auto;
    object-fit: contain; /* Garante que a imagem se ajuste sem distorção */
    max-width: 100%;
}

/* end Apoiadores area */

/* programacao area */
.programacao {
    background-color: #f9f9fb;
}

.programacao-content {
    padding: 4rem 1rem; /* Adicionado padding horizontal para garantir espaço */
    box-sizing: border-box;
}

.programacao-data {
    display: flex;
    gap: 3rem;
    justify-content: space-between;
}

.text-programacao {
    display: flex;
    flex-direction: row-reverse;
    gap: 7rem;
}

.infos-programacao {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.title-programacao {
    font-size: 36px;
    font-family: 'paralucentlight';
    width: 100%;
    padding: 2rem 0 1rem 0;
    margin-bottom: 1rem;
    color: #171717;
    border-bottom: 2px solid #dcdcdc;
}

.local {
    display: flex;
}

.local-img {
    background-image: url(./img/serratec-img.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 18rem;
    border-radius: 12px;
}

.map {
    width: 100%;
    height: 30rem;
    position: relative;
    border-radius: 24px;
    overflow: hidden;
}

.map iframe {
    width: 100%;
    height: 100%;
    border-radius: 24px;
}

.map-button {
    position: absolute;
    left: 32px;
    bottom: 32px;
    font-size: 16px;
    font-family: 'paralucentlight';
    background: white;
    color: #171717;
    padding: 2px 24px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    gap: 8px;
    height: 27px !important;
    justify-content: center;
    align-items: center;
}

.box-programacao {
    display: flex;
    gap: 10px;
    align-items: center;
    font-family: 'nataSans';
    color: #171717;
    font-size: 18px;
    font-weight: bold;
}

.box-programacao svg {
    width: 24px;
    color: #171717;
}

.cal svg {
    width: 28px;
}

/* end programacao area */

/* Footer area */
.footer {
    background-color: #8A2E82;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4rem 0; /* Padding no topo e bottom */
    padding-bottom: 4rem; /* Garantido padding-bottom */
}

.logo-footer {
    width: 150px;
}

.logo-footer-eqlbrm {
    width: 40%;
}

.realizacao {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: 'nataSans';
    color: white;
    align-items: center;
}

.contact {
    font-size: 16px;
    font-family: 'nataSans';
    color: white;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.social {
    display: flex;
    gap: 24px;
    justify-content: center;
}

.logo-social {
    cursor: pointer;
}

.logo-social svg {
    fill: white;
}

.banner-footer {
    border-bottom: 0.2rem solid #76286f;
}
/* end footer area */

/* buttons area */
.button {
    font-family: 'nataSans';
    font-size: 18px;
    font-weight: 400;
    border-radius: 12px;
    height: 42px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all ease-in-out 0.15s;
    box-sizing: border-box;
}

.button-header:hover {
    background-color: #B2D1B2;
    color: #171C17;
}

.button-hero {
    background-color: #B2D1B2 !important;
    font-family: 'nataSans' !important;
    font-size: 18px;
    padding: 0 24px;
    color: #171C17 !important;
    height: 56px !important;
    border-radius: 12px !important;
}

.button-hero:hover {
    background-color: #91ab91 !important;
    color: #171C17 !important;
}

.button-purple {
    background-color: #8A2E82;
    color: white;
    height: 56px !important;
    font-family: 'nataSans';
    padding: 0 24px;
}

.button-green {
    background-color: #B2D1B2;
    color: #8A2E82;
}

.button-banner {
    height: 64px;
    font-size: 18px;
    background: #B2D1B2;
    font-family: nataSans;
    padding: 0 24px;
    color: #8A2E82;
}

.button-banner:hover {
    background-color: #98b498;
}

/* ================================ */
/* RESPONSIVIDADE */
/* ================================ */

/* Geral: Apenas ajusta o padding lateral do container em telas ligeiramente menores que o max-width */
@media (max-width: 1250px) {
    .container {
        padding: 0 2.4rem;
    }
}

/* Tablet (menor que 1024px) */
@media (max-width: 1024px) {
    .container {
        padding: 0 2rem; /* Ajuste para tablets */
    }

    /* Hero Section */
    .hero-content {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
    
    .cta-hero {
        padding: 12px;
        gap: 24px;
        width: 100%; /* Ajuste para tablets */
        justify-content: space-between; /* Centraliza o conteúdo dentro do cta-hero */
    }

    .cta-calendar-icon {
        width: 48px;
        height: 48px;
    }

    .cta-calendar-icon svg {
        width: 32px;
    }
    
    .cta-calendar-date {
        font-size: 14px;
    }

    .cta-calendar-title {
        font-size: 18px;
    }

    .button-header {
        display: none;
        position: absolute;
    }

    /* O que esperar */
    .esperar {
        padding: 5rem 2rem; /* Reduz padding para tablet */
    }
    .beneficios-text {
        width: calc(50% - 24px); /* Duas colunas em tablets */
    }

    /* Banner Inscricao */
    .banner-inscricao {
        padding: 2rem 2rem; /* Ajuste para tablets */
    }

    .banner-content {
        flex-direction: row;
        gap: 32px;
        text-align: start;
    }
    .text-banner {
        width: 100%; /* Ocupa largura total */
    }
    .button-banner {
        width: fit-content; /* Botão não ocupa 100% da largura em tablet */
    }

    /* Palestrantes */

    .title-group {
        flex-direction: column;
        gap: 32px;
        padding-bottom: 4rem;
        align-items: center;
        text-align: center;
    }

    .title-group > :first-child {
        width: 100%;
        padding-right: 0;
        border-right: none;
    }

    .title-group > :last-child {
        width: 100%;
    }

    .cards-palestrantes {
        justify-content: center;
    }

    .card-palestrante {
        width: calc(50% - 16px); /* Duas colunas em tablets */
    }
    .card-palestrante {
        background-position: top !important;
    }
    
    /* Apoiadores */
    .apoiadores {
        padding: 3rem 0; /* Ajuste para tablets */
    }
    .apoiadores-content {
        gap: 32px;
        flex-direction: column;
        padding: 0 2rem; /* Ajuste para tablets */
    }

    .apoiadores-evento {
        min-width: 100%;
        width: 100%; /* Garante que ocupe a largura total */
    }

    .apoiadores-evento:first-child,
    .apoiadores-evento:last-child {
        flex: 1;
    }

    .logo-apoiadores {
        justify-content: center; /* Centraliza logos em tablets */
        gap: 1.5rem;
        padding-top: 1rem;
    }

    /* Programacao */
    .programacao-content {
        padding: 3rem 2rem; /* Ajuste para tablets */
    }
    .programacao-data {
        flex-direction: column;
        gap: 16px;
    }

    /* Footer */
    .footer-content {
        padding: 3rem 2rem; /* Ajuste para tablets */
    }
}

/* Mobile (menor que 768px) */
@media (max-width: 768px) {
    .container {
        padding: 0 2rem; /* Padding mais apertado para mobile */
    }

    .hero-header {
        padding-top: 2rem;
    }

    /* Hero Section */
    .hero-content {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    .sub-hero {
        font-size: 18px;
    }

    .call-hero {
        font-size: 32px;
    }

    .cta-hero {
        flex-direction: column;
        width: 100%;
        box-sizing: border-box;
        gap: 16px;
        align-items: center;
    }
    
    .button-header {
        display: none;
        position: absolute;
    }

    /* O que esperar */
    .esperar {
        padding: 4rem 2rem; /* Reduz padding para mobile */
    }
    .esperar-title {
        font-size: 28px;
        text-align: start;
    }

    .esperar-text {
        text-align: start;
    }
    
    .beneficios {
        flex-direction: column;
        gap: 24px;
    }

    .beneficios-text {
        width: 100%; /* Cada benefício ocupa uma linha em mobile */
    }

    /* Banner Inscricao */
    .banner-inscricao {
        padding: 1.5rem 1rem; /* Ajuste para mobile */
    }
    .banner-content {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .title-banner {
        font-size: 28px;
    }
    
    .button-banner {
        width: 100%;
    }

    /* Palestrantes */
    .palestrantes {
        padding: 5rem 0; /* Ajuste para mobile */
    }
    .cards-palestrantes {
        flex-direction: column;
        background-position: top !important;
    }

    .card-palestrante {
        width: 100%;
    }
    .card-palestrante {
        background-position: top !important;
    }

    .title-group  {
        flex-direction: column;
        gap: 16px;
        padding-bottom: 3rem;
    }

    /* Apoiadores */
    .apoiadores {
        padding: 2rem 0; /* Ajuste para mobile */
    }
    .apoiadores-content {
        flex-direction: column;
        gap: 32px;
        padding: 0 2rem; /* Ajuste para mobile */
    }

    .logo-apoiadores {
        justify-content: center;
        gap: 1rem;
        padding-top: 0rem;
    }

    .apoiadores-title {
        font-size: 16px;
        padding: 0.3rem 1rem;
    }
    
    /* Programacao */
    .programacao-content {
        padding: 2rem 2rem; /* Ajuste para mobile */
    }
    .text-programacao {
        flex-direction: column;
        gap: 32px;
    }

    .title-programacao {
        font-size: 28px;
        text-align: center;
    }

    .local-img {
        height: 14rem;
    }
    .map {
        height: 20rem; /* Reduz a altura do mapa */
    }
    .map-button {
        left: 16px; /* Ajusta posição do botão */
        bottom: 16px; /* Ajusta posição do botão */
    }

    /* Footer */
    .footer-content {
        flex-direction: column;
        gap: 24px;
        text-align: center;
        padding: 2rem 1rem; /* Ajuste para mobile */
    }

    .contact {
        align-items: center;
    }

    .logo-footer {
        width: 100px;
    }

    .realizacao {
        width: 100%;
    }

    .logo-footer-eqlbrm {
        width: 60%;
    }
}

/* Telas muito pequenas (ex: largura menor que 360px) */
@media (max-width: 360px) {
    .cta-hero {
        padding: 8px; /* Reduz ainda mais o padding */
        gap: 8px; /* Reduz o gap */
    }
    .cta-calendar-icon {
        width: 40px;
        height: 40px;
    }
    .cta-calendar-icon svg {
        width: 28px;
    }
    .cta-calendar-date {
        font-size: 12px;
    }
    .cta-calendar-title {
        font-size: 16px;
    }
    .map-button {
        padding: 2px 16px;
        font-size: 14px;
        left: 8px;
        bottom: 8px;
    }
    .card-palestrante {
        background-position: top !important;
    }
}

@media (min-width: 768px) {
    .conteudo-evento-points  ul{
        grid-template-columns: 1fr 1fr !important; /* Duas colunas */
    }
}