/* =================================================================
   CARROSSEL FLEX — widget fullscreen/hero  v3
   ================================================================= */

.wmf-wrapper {
    position: relative;
    width:     100%;
    overflow:  hidden;
    margin:    0;
    padding:   0;
}

/* Swiper ocupa 100% — overflow hidden garante que 1 card = tela inteira */
.wmf-carrossel.swiper {
    width:      100%;
    overflow:   hidden;
    margin:     0;
    padding:    0;
    visibility: hidden;   /* JS coloca visible após Swiper calcular posições */
    animation:  wmf-show 0s 0.6s forwards; /* fallback se JS falhar */
}

/* swiper-wrapper é o flex row nativo do Swiper — não sobreescrever */

/* Slide — ocupa a largura do slot definido pelo slidesPerView */
.wmf-slide {
    position:      relative;
    width:         100%;   /* ocupa o slot — Swiper controla a largura real */
    min-height:    100vh;  /* sobrescrito pelo seletor Elementor */
    display:       flex;
    align-items:   center;
    overflow:      hidden;
    border:        none !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
    padding:       0;
}

/* Máscara */
.wmf-mascara {
    position:       absolute;
    inset:          0;
    z-index:        1;
    pointer-events: none;
}

/* Vídeo de fundo */
.wmf-video-bg {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    z-index:    0;
}

/* Conteúdo de texto — ocupa o espaço disponível */
.wmf-conteudo {
    position:        relative;
    z-index:         2;
    flex:            1;
    min-width:       0;
    padding:         20px;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
}

/* ----------------------------------------------------------------
   IMAGEM LATERAL — liberdade total de posição e tamanho.
   position:absolute dentro do .wmf-slide (overflow:hidden).
   Os controles X/Y/largura/altura no painel controlam via inline style.
   ---------------------------------------------------------------- */
.wmf-imagem-lateral {
    position:   absolute;
    z-index:    3;          /* acima do conteúdo se necessário */
    top:        0;
    right:      0;          /* padrão: canto superior direito */
    width:      40%;        /* sobrescrito pelo slider de largura */
    height:     100%;
    display:    flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;   /* não bloqueia cliques no conteúdo */
}

.wmf-imagem-lateral img {
    /* width/height/object-fit/transform via inline style gerado pelo PHP */
    display:    block;
    max-width:  none;       /* sem limite — o usuário controla */
    max-height: none;       /* sem limite — o usuário controla */
}

/* Slide com imagem à DIREITA — conteúdo não deve sobrepor a imagem */
.wmf-img-direita  .wmf-conteudo  { padding-right: 44%; }   /* espaço para img */
.wmf-img-esquerda .wmf-imagem-lateral { right: auto; left: 0; }
.wmf-img-esquerda .wmf-conteudo  { padding-left: 44%; padding-right: 20px; }

/* Alinhamentos */
.wmf-layout-esquerda              { justify-content: flex-start; }
.wmf-layout-centro                { justify-content: center; }
.wmf-layout-centro .wmf-conteudo  { text-align: center; align-items: center; }
.wmf-layout-direita               { justify-content: flex-end; }
.wmf-layout-direita .wmf-conteudo { text-align: right; align-items: flex-end; }

/* Textos */
.wmf-subtitulo {
    font-size:      18px;
    font-weight:    600;
    opacity:        .8;
    margin:         0 0 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.wmf-titulo {
    font-size:   52px;
    font-weight: 800;
    line-height: 1.1;
    margin:      0 0 16px;
}
.wmf-descricao {
    font-size:   16px;
    line-height: 1.6;
    opacity:     .88;
    margin:      0 0 22px;
}

/* Benefícios */
.wmf-beneficios {
    list-style: none;
    margin:     0 0 22px;
    padding:    0;
    display:    flex;
    flex-wrap:  wrap;
    gap:        8px 20px;
}
.wmf-beneficio { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.wmf-b-icone   { display: flex; align-items: center; font-size: 18px; flex-shrink: 0; line-height: 1; }
.wmf-b-icone i, .wmf-b-icone i::before              { color: inherit !important; font-size: inherit; }
.wmf-b-icone span, .wmf-b-icone span.e-font-icon-svg { display: flex; align-items: center; color: inherit; font-size: inherit; line-height: 1; }
.wmf-b-icone > svg                                   { fill: none !important; stroke: currentColor !important; stroke-width: 2.5; width: 1em; height: 1em; display: block; }
.wmf-b-icone span svg                                { fill: currentColor !important; stroke: none !important; width: 1em !important; height: 1em !important; }
.wmf-b-icone span svg *                              { fill: currentColor !important; stroke: none !important; }

/* CTAs */
.wmf-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.wmf-cta {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    padding:         13px 28px;
    font-size:       16px;
    font-weight:     700;
    text-decoration: none !important;
    border:          2px solid transparent;
    border-radius:   6px;
    cursor:          pointer;
    transition:      transform .2s, box-shadow .2s, filter .2s;
    white-space:     nowrap;
}
.wmf-cta:hover        { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); filter: brightness(.92); }
.wmf-cta svg          { width: .9em; height: .9em; stroke: currentColor; fill: none; display: inline-block; flex-shrink: 0; }
.wmf-cta-secundario   { border: 2px solid currentColor !important; }

/* ---- Setas ---- */
.wmf-seta {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         10;
    width:           56px;
    height:          56px;
    border-radius:   50%;
    border:          none;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    background:      rgba(0,0,0,.35);
    color:           #fff;
    transition:      background .2s, transform .2s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.wmf-seta:hover { background: rgba(0,0,0,.6); transform: translateY(-50%) scale(1.08); }
.wmf-prev       { left: 20px; }
.wmf-next       { right: 20px; }
.wmf-seta svg   { width: 22px; height: 22px; display: block; stroke: currentColor; fill: none; flex-shrink: 0; }

/* ---- Dots ---- */
.wmf-dots { position: absolute; z-index: 10; display: flex; gap: 8px; }
.wmf-dots-baixo-centro   { bottom: 28px; left: 50%; transform: translateX(-50%); flex-direction: row; }
.wmf-dots-baixo-esquerda { bottom: 28px; left: 28px; flex-direction: row; }
.wmf-dots-baixo-direita  { bottom: 28px; right: 28px; flex-direction: row; }
.wmf-dots-direita-meio   { right: 24px; top: 50%; transform: translateY(-50%); flex-direction: column; }
.wmf-dots-esquerda-meio  { left: 24px; top: 50%; transform: translateY(-50%); flex-direction: column; }

.wmf-dot {
    width:           10px;
    height:          10px;
    border-radius:   50%;
    border:          none;
    padding:         0;
    margin:          0;
    cursor:          pointer;
    background:      rgba(255,255,255,.45);
    transition:      background .25s, transform .25s;
    display:         block;   /* garante que button não vira inline */
    flex-shrink:     0;
    box-sizing:      content-box;
    line-height:     0;
    font-size:       0;
    overflow:        hidden;
    outline:         none;
    appearance:      none;
    -webkit-appearance: none;
}
.wmf-dot.ativo { background: #fff; transform: scale(1.5); }
.wmf-dot:hover { background: rgba(255,255,255,.8); }


/* ================================================================
   ESTILO BOXED — card dividido em 2 metades iguais.
   Lado esquerdo: conteúdo.  Lado direito: imagem cobre 100%.
   A imagem NÃO é position:absolute — é uma coluna flex.
   ================================================================ */
.wmf-boxed .wmf-slide {
    display:         flex;
    flex-direction:  row;
    align-items:     stretch;
    min-height:      0;           /* herda altura do seletor Elementor */
    overflow:        hidden;
}

/* Metade esquerda: conteúdo */
.wmf-boxed .wmf-boxed-content {
    flex:            0 0 50%;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    padding:         60px 52px;
    position:        relative;
    z-index:         2;
    box-sizing:      border-box;
    min-width:       0;
}

/* Metade direita: imagem preenche completamente */
.wmf-boxed .wmf-boxed-image {
    flex:            0 0 50%;
    position:        relative;
    overflow:        hidden;
}

.wmf-boxed .wmf-boxed-image img {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center top;   /* padrão; face-detection sobrescreve */
    display:         block;
}

/* Inversão: imagem à esquerda, conteúdo à direita */
.wmf-boxed.wmf-boxed-inv .wmf-slide {
    flex-direction: row-reverse;
}

/* Máscara sobre o conteúdo (opcional) */
.wmf-boxed .wmf-mascara {
    position:       absolute;
    inset:          0;
    z-index:        1;
    pointer-events: none;
}

/* Responsivo boxed: empilha verticalmente */
@media (max-width: 767px) {
    .wmf-boxed .wmf-slide    { flex-direction: column; }
    .wmf-boxed .wmf-boxed-content { flex: none; padding: 40px 28px; }
    .wmf-boxed .wmf-boxed-image   {
        flex:       none;
        height:     260px;
        width:      100%;
    }
}
/* ---- Responsivo ---- */
@media (max-width: 1024px) {
    .wmf-titulo             { font-size: 36px; }
    .wmf-subtitulo          { font-size: 14px; }
    .wmf-descricao          { font-size: 14px; }
    .wmf-img-direita  .wmf-conteudo { padding-right: 20px; }
    .wmf-img-esquerda .wmf-conteudo { padding-left:  20px; }
    .wmf-imagem-lateral     { width: 35%; }
}

@media (max-width: 767px) {
    .wmf-titulo             { font-size: 26px; }
    .wmf-subtitulo          { font-size: 12px; }
    .wmf-descricao          { font-size: 13px; }
    .wmf-prev               { left: 8px; }
    .wmf-next               { right: 8px; }
    .wmf-seta               { width: 36px; height: 36px; }
    .wmf-seta svg           { width: 14px; height: 14px; }
    .wmf-imagem-lateral     { display: none; }  /* oculta em mobile */
    .wmf-img-direita  .wmf-conteudo { padding-right: 20px; }
    .wmf-img-esquerda .wmf-conteudo { padding-left:  20px; }
}