/* =========================================================
   CONFIGURAÇÃO GLOBAL
========================================================= */

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    font-family: Arial, Helvetica, sans-serif;
    background: #f3f3f3;
    box-sizing: border-box;
}

* {
    box-sizing: border-box;
}

/* =========================================================
   PÁGINA EM CONSTRUÇÃO
========================================================= */

.emconstrucao {

    background-image: url('../img/acaodegraca-construcao.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    width: 100%;
    height: 100vh;

    position: relative;
}

/* =========================================================
   IMAGEM ESCONDIDA
========================================================= */

.preview {

    position: absolute;
    inset: 0;

    background-image: url('../img/capa-acaogracapagina.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    clip-path: circle(0px at center);

    transition: clip-path 0.05s linear;

    z-index: 1;

    filter:
        brightness(1.08)
        drop-shadow(0 0 15px rgba(255, 255, 220, 0.6))
        drop-shadow(0 0 40px rgba(255, 220, 120, 0.4));
}

/* =========================================================
   EFEITO DE LUZ
========================================================= */

.preview::after {

    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle,
            rgba(255, 255, 220, 0.35) 0%,
            rgba(255, 240, 180, 0.15) 35%,
            rgba(255, 255, 255, 0) 70%);

    mix-blend-mode: screen;

    pointer-events: none;
}

.preview {
    transition: 2s all linear(1.25 -11.03%, 1 100%);
}

/* =========================================================
   TEXTOS GERAIS
========================================================= */

.conteudo {

    position: relative;
    z-index: 2;

    text-align: center;
    padding-top: 40px;
}


p {
    font-size: 20pt;
    color: #000;
}

/* =========================================================
   NOITE DAS MASSAS
========================================================= */

.noitedasmassas8 {

    background: #f3f3f3;
    padding: 40px 15px;
    min-height: 100vh;
}

/* =========================================================
   CONTAINER
========================================================= */

.email-container {

    max-width: 800px;
    margin: 0 auto;

    background: #ffffff;

    border-radius: 24px;

    overflow: hidden;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.08);
}

/* =========================================================
   LOGO
========================================================= */

.logo-comunidade {

    text-align: center;

    padding: 35px 20px 20px;
}

.logo-comunidade img {

    width: 190px;
    max-width: 100%;
}

/* =========================================================
   HERO
========================================================= */

.hero img {

    width: 100%;
    display: block;
}

/* =========================================================
   CONTEÚDO
========================================================= */

.noitedasmassas8 .conteudo {

    padding: 40px;
    text-align: left;
}

/* =========================================================
   BADGE
========================================================= */

.badge-evento {

    background: #f5e6d3;

    color: #8a4d00;

    padding: 8px 16px;

    border-radius: 50px;

    font-size: 12px;
    font-weight: bold;

    display: inline-block;

    margin-bottom: 20px;
}

/* =========================================================
   TÍTULO
========================================================= */

.title {

    font-size: 34px;

    line-height: 1.2;

    color: #222;

    margin: 0 0 20px;
}

/* =========================================================
   INTRO
========================================================= */

.intro {

    font-size: 18px;

    color: #555;

    margin-bottom: 30px;

    line-height: 1.7;
}

/* =========================================================
   CARD INFO
========================================================= */

.card-info {

    background: #fafafa;

    border: 1px solid #ececec;

    border-radius: 16px;

    padding: 25px;

    margin-bottom: 35px;
}

.item {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-bottom: 20px;
}

.item:last-child {
    margin-bottom: 0;
}

.item span {

    font-size: 22px;
}

.item strong {

    display: block;

    color: #222;

    margin-bottom: 4px;
}

.item p {

    margin: 0;

    color: #666;

    line-height: 1.6;

    font-size: 16px;
}

.programacao-item{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:15px;

    font-size:18px;

    margin-left: .5%;
}

.programacao-item span{

    font-size:24px;

    width:30px;

    text-align:center;
}

.programacao-item strong{

    margin:0 !important;

    font-size:18px;

    font-weight:600;

    color:#222;
}


/* =========================================================
   DESCRIÇÃO
========================================================= */

.descricao p {

    color: #555;

    line-height: 1.9;

    margin-bottom: 22px;

    font-size: 16px;
}

/* =========================================================
   BOTÃO
========================================================= */

.btn-area {

    text-align: center;

    margin-top: 40px;
}

.btn-whatsapp {

    display: inline-block;

    background: #25D366;

    color: #ffffff !important;

    text-decoration: none;

    padding: 16px 30px;

    border-radius: 12px;

    font-size: 17px;

    font-weight: bold;

    transition: 0.3s;
}

.btn-whatsapp:hover {

    background: #1ebc5b;
}

/* =========================================================
   FRASE FINAL
========================================================= */

.frase-final {

    text-align: center;

    font-size: 24px;

    font-weight: bold;

    margin-top: 40px;

    color: #8a4d00;
}

/* =========================================================
   RODAPÉ
========================================================= */

.rodape {

    background: #fafafa;

    border-top: 1px solid #ececec;

    padding: 30px;

    text-align: center;
}

.rodape-info {

    color: #666;

    line-height: 1.8;

    margin-bottom: 20px;

    font-size: 14px;
}

.cancelar-email a {

    color: #999;

    font-size: 13px;

    text-decoration: none;
}

/* =========================================================
   RESPONSIVO
========================================================= */

@media(max-width: 600px) {

    .noitedasmassas8 .conteudo {

        padding: 30px 22px;
    }

    .title {

        font-size: 28px;
    }

    .intro {

        font-size: 16px;
    }

    .frase-final {

        font-size: 20px;
    }

    .item {

        gap: 10px;
    }

}