/* =====================================================================
   BLACK 2026 | ISA PRA SEMPRE :: HERO (secao a8a8343) :: versao 2
   Carregado depois do post-11664.css. So mexe no fundo e no encaixe do HERO.
   Imagens usadas sem recorte, sem efeito e sem deformacao:
     hero-desktop.webp  3344x1882  -> desktop (>1024px) e tablet deitado
     hero-mobile.webp    774x2048  -> mobile (<768px) e tablet em pe
   Nunca "cover": largura 100%, altura proporcional (100% auto), ancorada no topo.
   Logo, titulo, texto, formulario e botao continuam HTML por cima da imagem.
   ===================================================================== */

.elementor-11664 .elementor-element.elementor-element-a8a8343:not(.elementor-motion-effects-element-type-background) {
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
}

/* ---------- DESKTOP (acima de 1024px) ---------- */
@media (min-width: 1025px) {
    .elementor-11664 .elementor-element.elementor-element-a8a8343:not(.elementor-motion-effects-element-type-background) {
        background-image: url("hero/hero-desktop.webp") !important;
        background-color: #100a07 !important;
    }
    .elementor-11664 .elementor-element.elementor-element-a8a8343 {
        --min-height: calc(100vw * 1882 / 3344);   /* altura = proporcao exata da arte */
        --padding-top: 2vw;
        --padding-bottom: 2vw;
    }
    .elementor-11664 .elementor-element.elementor-element-6bad79e {
        --width: 41%;                                /* texto fica na area escura da esquerda */
        --padding-top: 0px;
        --padding-bottom: 0px;
    }
    .elementor-11664 .elementor-element.elementor-element-85a83a8 {
        width: var( --container-widget-width, 61%);  /* logo com o mesmo tamanho de antes */
        max-width: 61%;
        --container-widget-width: 61%;
    }
}
/* laptops estreitos: se o formulario passar da arte, a base funde no fundo sem corte seco */
@media (min-width: 1025px) and (max-width: 1279px) {
    .elementor-11664 .elementor-element.elementor-element-a8a8343:not(.elementor-motion-effects-element-type-background) {
        background-image:
            linear-gradient(to bottom, rgba(16,10,7,0) calc(100vw * 1882 / 3344 - 90px), #100a07 calc(100vw * 1882 / 3344)),
            url("hero/hero-desktop.webp") !important;
        background-size: 100% auto, 100% auto !important;
    }
}

/* ---------- TABLET DEITADO (768 a 1024px, paisagem): arte horizontal ---------- */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .elementor-11664 .elementor-element.elementor-element-a8a8343:not(.elementor-motion-effects-element-type-background) {
        background-image:
            linear-gradient(to bottom, rgba(16,10,7,0) calc(100vw * 1882 / 3344 - 90px), #100a07 calc(100vw * 1882 / 3344)),
            url("hero/hero-desktop.webp") !important;
        background-size: 100% auto, 100% auto !important;
        background-color: #100a07 !important;
    }
    .elementor-11664 .elementor-element.elementor-element-a8a8343 {
        --min-height: calc(100vw * 1882 / 3344);
        --flex-direction: row;
        --padding-top: 3vw;
        --padding-bottom: 3vw;
        --padding-left: 4vw;
        --padding-right: 4vw;
    }
    .elementor-11664 .elementor-element.elementor-element-6bad79e {
        --width: 44%;
        --gap: 18px 0px;
        --row-gap: 18px;
    }
    .elementor-11664 .elementor-element.elementor-element-85a83a8 img { width: 55%; }
}

/* ---------- TABLET EM PE e MOBILE: arte vertical ---------- */
@media (max-width: 1024px) and (orientation: portrait), (max-width: 767px) {
    .elementor-11664 .elementor-element.elementor-element-a8a8343:not(.elementor-motion-effects-element-type-background) {
        background-image: url("hero/hero-mobile.webp") !important;
        background-color: #000000 !important;       /* a arte termina em preto puro */
    }
    .elementor-11664 .elementor-element.elementor-element-a8a8343 {
        --min-height: 0px;                           /* a altura acompanha o conteudo, sem sobra preta */
    }
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .elementor-11664 .elementor-element.elementor-element-a8a8343 {
        --padding-top: 52vw;                         /* conteudo comeca abaixo do queixo, sobre o vestido */
        --padding-bottom: 6vw;
    }
}

/* ---------- MOBILE: tudo na primeira dobra ---------- */
@media (max-width: 767px) {
    .elementor-11664 .elementor-element.elementor-element-a8a8343 {
        --padding-top: 50vw;                         /* rosto e cabeca da Isa ficam livres */
        --padding-bottom: 8vw;
    }
    .elementor-11664 .elementor-element.elementor-element-6bad79e {
        --gap: 10px 0px;
        --row-gap: 10px;
    }
    .elementor-11664 .elementor-element.elementor-element-85a83a8 {
        margin-bottom: 0px !important;
    }
    .elementor-11664 ._form_21 ._form_element { margin-bottom: 8px; }
    .elementor-11664 ._form_21 .inputtext, .elementor-11664 .iti input { height: 46px !important; padding-top: 10px; padding-bottom: 10px; }
    .elementor-11664 ._form_21 .button { min-height: 56px; padding: 12px 20px; }
}

/* ---------- CELULARES BAIXOS (tela com ate 700px de altura, ex.: iPhone SE) ---------- */
@media (max-width: 767px) and (max-height: 700px) {
    .elementor-11664 .elementor-element.elementor-element-a8a8343 {
        --padding-top: 44vw;
        --padding-bottom: 6vw;
    }
    .elementor-11664 .elementor-element.elementor-element-a49a6a4 .elementor-heading-title { line-height: 1.22; }
    .elementor-11664 .elementor-element.elementor-element-0ab7275 p { line-height: 1.45; }
    .elementor-11664 ._form_21 .inputtext, .elementor-11664 .iti input { height: 42px !important; }
    .elementor-11664 ._form_21 .button { min-height: 50px; padding: 10px 20px; }
}

/* ---------- TABLET EM PE: mais compacto para caber na dobra ---------- */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .elementor-11664 .elementor-element.elementor-element-a8a8343 { --padding-top: 46vw; }
    .elementor-11664 .elementor-element.elementor-element-6bad79e { --gap: 16px 0px; --row-gap: 16px; }
}