/* ==================================================
   FULL BANNER
================================================== */

.slick-slide picture {
    display: block;
    pointer-events: none;
}




/* ==================================================
   NEWSLETTER — MICHELE DIAS ART GALLERY
   BASEADO NO HTML REAL DA LOJA
================================================== */

/* Estrutura da newsletter */
#modalNewsletter .componente.newsletter {
    margin: 0 !important;
    background: #f5f0e7 !important;
    border: none !important;
}

/* Área interna */
#modalNewsletter .componente.newsletter .interno {
    position: relative !important;
    display: block !important;

    width: auto !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 52px 50px 44px !important;
    box-sizing: border-box !important;

    background: #f5f0e7 !important;
    overflow: hidden !important;
}

/* Faixa artística superior */
#modalNewsletter .componente.newsletter .interno::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    height: 8px;

    background: linear-gradient(
        90deg,
        #173c41 0%,
        #173c41 37%,
        #287180 37%,
        #287180 68%,
        #a55f45 68%,
        #a55f45 100%
    );
}

/* Forma decorativa discreta */
#modalNewsletter .componente.newsletter .interno::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -110px;

    width: 230px;
    height: 230px;
    border-radius: 50%;

    background: rgba(40, 113, 128, 0.10);
    pointer-events: none;
}

/* Título original */
#modalNewsletter .newsletter .titulo {
    position: relative !important;
    z-index: 2 !important;

    display: block !important;
    width: auto !important;

    margin: 0 0 20px !important;
    padding: 0 !important;

    color: #a55f45 !important;

    font-family: Arial, sans-serif !important;
    font-size: 0 !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;

    text-align: left !important;
    text-transform: uppercase !important;
}

/* Remove o envelope */
#modalNewsletter .newsletter .titulo .icon-envelope-alt {
    display: none !important;
}

/* Novo texto superior */
#modalNewsletter .newsletter .titulo::after {
    content: "MICHELE DIAS • ART GALLERY";

    display: block;

    color: #a55f45;

    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.20em;
}

/* Corrige o posicionamento imposto pelo tema */
#modalNewsletter .newsletter .interno-conteudo {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 2 !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;
    transform: none !important;
}

/* Esconde visualmente o texto padrão */
#modalNewsletter p.texto-newsletter.newsletter-cadastro {
    position: static !important;
    display: block !important;

    width: 100% !important;
    max-width: 500px !important;
    height: auto !important;

    margin: 0 0 28px !important;
    padding: 0 !important;

    font-size: 0 !important;
    line-height: 0 !important;
    text-align: left !important;
    text-transform: none !important;
}

/* Novo título principal */
#modalNewsletter p.texto-newsletter.newsletter-cadastro::before {
    content: "A arte continua além desta visita";

    display: block;

    color: #17383d;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 41px;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-align: left;
}

/* Novo texto complementar */
#modalNewsletter p.texto-newsletter.newsletter-cadastro::after {
    content: "Receba em primeira mão novas obras, histórias do processo criativo e novidades da galeria.";

    display: block;
    max-width: 475px;

    margin-top: 18px;

    color: #5d6867;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0;
    text-align: left;
}

/* Contêiner do campo e botão */
#modalNewsletter div.newsletter-cadastro.input-conteiner {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: flex !important;
    align-items: stretch !important;
    gap: 10px !important;

    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 52px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}

/* Campo de e-mail */
#modalNewsletter .newsletter .input-conteiner input {
    position: static !important;
    display: block !important;
    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;
    height: 52px !important;

    margin: 0 !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;

    background: rgba(255, 255, 255, 0.82) !important;
    color: #17383d !important;

    border: 1px solid rgba(23, 56, 61, 0.24) !important;
    border-radius: 0 !important;

    box-shadow: none !important;
    outline: none !important;

    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-align: left !important;
}

#modalNewsletter .newsletter .input-conteiner input::placeholder {
    color: #8b9290 !important;
    opacity: 1 !important;
}

#modalNewsletter .newsletter .input-conteiner input:focus {
    background: #ffffff !important;
    border-color: #287180 !important;
}

/* Botão */
#modalNewsletter .newsletter .newsletter-assinar {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 180px !important;

    width: 180px !important;
    height: 52px !important;

    margin: 0 !important;
    padding: 0 16px !important;

    background: #173c41 !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 0 !important;

    box-shadow: none !important;
    text-shadow: none !important;

    font-size: 0 !important;
    cursor: pointer !important;
    transition: background-color 0.25s ease !important;
}

/* Remove a seta original */
#modalNewsletter .newsletter .newsletter-assinar::before {
    content: none !important;
    display: none !important;
}

/* Novo texto do botão */
#modalNewsletter .newsletter .newsletter-assinar::after {
    content: "Quero acompanhar";

    display: block;

    color: #ffffff;

    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
}

#modalNewsletter .newsletter .newsletter-assinar:hover {
    background: #a55f45 !important;
}

/* Confirmação de cadastro */
#modalNewsletter .newsletter-confirmacao {
    position: relative !important;
    z-index: 2 !important;

    width: auto !important;
    height: auto !important;

    margin: 24px 0 0 !important;
    padding: 18px !important;

    background: rgba(255, 255, 255, 0.72) !important;
    color: #17383d !important;

    border: 1px solid rgba(23, 56, 61, 0.14) !important;

    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    text-align: left !important;
}

#modalNewsletter .newsletter-confirmacao .icon-ok {
    color: #287180 !important;
}


/* ==================================================
   CELULAR
================================================== */

@media only screen and (max-width: 700px) {

    #modalNewsletter .componente.newsletter .interno {
        padding: 46px 25px 30px !important;
    }

    #modalNewsletter .newsletter .titulo::after {
        padding-right: 30px;
        font-size: 9px;
        letter-spacing: 0.16em;
    }

    #modalNewsletter p.texto-newsletter.newsletter-cadastro::before {
        font-size: 32px;
        line-height: 1.08;
    }

    #modalNewsletter p.texto-newsletter.newsletter-cadastro::after {
        margin-top: 15px;
        font-size: 13px;
        line-height: 1.55;
    }

    #modalNewsletter div.newsletter-cadastro.input-conteiner {
        flex-direction: column !important;
        gap: 10px !important;
    }

    #modalNewsletter .newsletter .input-conteiner input {
        width: 100% !important;
        flex: none !important;
    }

    #modalNewsletter .newsletter .newsletter-assinar {
        width: 100% !important;
        flex: none !important;
    }
}

/* ==================================================
   CORREÇÃO FINAL — POPUP NEWSLETTER
   Cole no final de todo o CSS
================================================== */

/* Remove altura e espaço vazio do modal */
.modal-modalNewsletter #modalNewsletter,
.modal-modalNewsletter #modalNewsletter > .row-fluid,
.modal-modalNewsletter #modalNewsletter > .row-fluid > .span {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Corrige a área que estava formando o retângulo branco */
.modal-modalNewsletter
#modalNewsletter
.componente.newsletter
.interno
.interno-conteudo {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    overflow: visible !important;
    transform: none !important;
    text-align: left !important;
}

/* Texto principal */
.modal-modalNewsletter
#modalNewsletter
.componente.newsletter
.interno
.interno-conteudo
p.texto-newsletter.newsletter-cadastro {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 0 28px !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;

    overflow: visible !important;
    text-align: left !important;
    text-transform: none !important;
    transform: none !important;
}

/* Título editorial */
.modal-modalNewsletter
#modalNewsletter
.componente.newsletter
.interno
.interno-conteudo
p.texto-newsletter.newsletter-cadastro::before {
    content: "A arte continua além desta visita" !important;

    position: static !important;
    display: block !important;

    width: 100% !important;
    max-width: 470px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #17383d !important;
    background: transparent !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 41px !important;
    font-weight: 400 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;

    text-align: left !important;
    text-transform: none !important;
    white-space: normal !important;
}

/* Descrição */
.modal-modalNewsletter
#modalNewsletter
.componente.newsletter
.interno
.interno-conteudo
p.texto-newsletter.newsletter-cadastro::after {
    content: "Receba em primeira mão novas obras, histórias do processo criativo e novidades da galeria." !important;

    position: static !important;
    display: block !important;

    width: 100% !important;
    max-width: 470px !important;

    margin: 18px 0 0 !important;
    padding: 0 !important;

    color: #5d6867 !important;
    background: transparent !important;

    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;

    text-align: left !important;
    text-transform: none !important;
    white-space: normal !important;
}

/* Campo e botão lado a lado */
.modal-modalNewsletter
#modalNewsletter
.componente.newsletter
.interno
.interno-conteudo
div.newsletter-cadastro.input-conteiner {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 180px !important;
    align-items: stretch !important;
    gap: 10px !important;

    width: 100% !important;
    max-width: none !important;
    height: 52px !important;
    min-height: 52px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    overflow: visible !important;
    transform: none !important;
}

/* Campo de e-mail */
.modal-modalNewsletter
#modalNewsletter
.componente.newsletter
.interno
.interno-conteudo
div.newsletter-cadastro.input-conteiner
input[name="email"] {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: block !important;
    float: none !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 52px !important;

    margin: 0 !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;

    background: rgba(255, 255, 255, 0.82) !important;
    color: #17383d !important;

    border: 1px solid rgba(23, 56, 61, 0.24) !important;
    border-radius: 0 !important;

    box-shadow: none !important;
    outline: none !important;

    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: normal !important;

    text-align: left !important;
    transform: none !important;
}

/* Botão de cadastro */
.modal-modalNewsletter
#modalNewsletter
.componente.newsletter
.interno
.interno-conteudo
div.newsletter-cadastro.input-conteiner
button.newsletter-assinar {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;

    visibility: visible !important;
    opacity: 1 !important;

    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    height: 52px !important;

    margin: 0 !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;

    background: #173c41 !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 0 !important;

    box-shadow: none !important;
    text-shadow: none !important;

    font-size: 0 !important;
    line-height: normal !important;
    text-indent: 0 !important;

    overflow: hidden !important;
    transform: none !important;
    cursor: pointer !important;
    z-index: 3 !important;
}

/* Remove a seta */
.modal-modalNewsletter
#modalNewsletter
.componente.newsletter
.interno
.interno-conteudo
button.newsletter-assinar::before {
    content: none !important;
    display: none !important;
}

/* Texto do botão */
.modal-modalNewsletter
#modalNewsletter
.componente.newsletter
.interno
.interno-conteudo
button.newsletter-assinar::after {
    content: "Quero acompanhar" !important;

    display: block !important;

    color: #ffffff !important;

    font-family: Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.09em !important;

    text-align: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

/* Celular */
@media only screen and (max-width: 700px) {

    .modal-modalNewsletter
    #modalNewsletter
    .componente.newsletter
    .interno
    .interno-conteudo
    p.texto-newsletter.newsletter-cadastro::before {
        font-size: 31px !important;
    }

    .modal-modalNewsletter
    #modalNewsletter
    .componente.newsletter
    .interno
    .interno-conteudo
    div.newsletter-cadastro.input-conteiner {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;

        height: auto !important;
        min-height: 0 !important;
    }

    .modal-modalNewsletter
    #modalNewsletter
    .componente.newsletter
    .interno
    .interno-conteudo
    button.newsletter-assinar {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
}

/* Ajuste do texto dentro do campo de e-mail */
.modal-modalNewsletter
#modalNewsletter
.componente.newsletter
.interno
.interno-conteudo
div.newsletter-cadastro.input-conteiner
input[name="email"] {
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    padding-left: 14px !important;
}

/* Placeholder */
.modal-modalNewsletter
#modalNewsletter
.componente.newsletter
.interno
.interno-conteudo
div.newsletter-cadastro.input-conteiner
input[name="email"]::placeholder {
    color: #7f8987 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    opacity: 1 !important;
}

/* ==================================================
   AJUSTE MOBILE — BOTÃO DA NEWSLETTER
================================================== */

@media only screen and (max-width: 700px) {

    /* Permite rolagem somente quando a tela for muito pequena */
    .modal-modalNewsletter #modalNewsletter {
        max-height: calc(100vh - 20px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* Diminui levemente os espaços internos */
    .modal-modalNewsletter
    #modalNewsletter
    .componente.newsletter
    .interno {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        padding: 40px 20px 20px !important;
        overflow: visible !important;
    }

    /* Reduz o espaço antes do formulário */
    .modal-modalNewsletter
    #modalNewsletter
    p.texto-newsletter.newsletter-cadastro {
        margin-bottom: 20px !important;
    }

    /* Campo de e-mail um pouco mais compacto */
    .modal-modalNewsletter
    #modalNewsletter
    div.newsletter-cadastro.input-conteiner
    input[name="email"] {
        height: 46px !important;
        min-height: 46px !important;
    }

    /* Botão um pouco mais compacto */
    .modal-modalNewsletter
    #modalNewsletter
    button.newsletter-assinar {
        width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        margin-bottom: 0 !important;
    }
}