/* ==========================================================================
   CTA Widget for Elementor — v2.4.0
   Loaded only on pages that contain the widget (get_style_depends).
   ========================================================================== */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.ecta-wrap {
    display: flex;
    box-sizing: border-box;
    padding: 48px;
    border-radius: 12px;
    background-color: #f8f8f8;
    overflow: hidden;
    position: relative;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   VERTICAL LAYOUTS
   .ecta-v-top    → media renders BEFORE content in DOM and visually on top
   .ecta-v-bottom → media renders AFTER content in DOM and visually on bottom
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.ecta-v-top,
.ecta-v-bottom {
    flex-direction: column;
}

/* Media top: DOM order is media first, content second → natural column flow */
.ecta-v-top .ecta-media   { order: 1; }
.ecta-v-top .ecta-content { order: 2; }

/* Media bottom: force content first, media second */
.ecta-v-bottom .ecta-media   { order: 2; }
.ecta-v-bottom .ecta-content { order: 1; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HORIZONTAL LAYOUTS
   .ecta-h-left  → media on left, content on right
   .ecta-h-right → media on right, content on left
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.ecta-h-left,
.ecta-h-right {
    flex-direction: row;
    align-items: center; /* default; overridden by Vertical Alignment control */
}

/* Media left */
.ecta-h-left .ecta-media   { order: 1; flex-shrink: 0; }
.ecta-h-left .ecta-content { order: 2; flex: 1 1 0; min-width: 0; }

/* Media right */
.ecta-h-right .ecta-media  { order: 2; flex-shrink: 0; }
.ecta-h-right .ecta-content { order: 1; flex: 1 1 0; min-width: 0; }

/* ── Content block ───────────────────────────────────────────────────────── */
.ecta-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* overridden by Alignment control */
    text-align: left;        /* overridden by Alignment control */
    min-width: 0;
}

/* ── Media block ─────────────────────────────────────────────────────────── */
.ecta-media {
    position: relative;  /* anchor for badge overlay */
    width: 100%;         /* default; overridden by Media Width control */
    overflow: hidden;
    flex-shrink: 0;
}

.ecta-media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition:
        transform var(--ecta-imgfx-dur, .45s) ease,
        filter    var(--ecta-imgfx-dur, .45s) ease;
}

/* ── Efeitos de hover da imagem ──────────────────────────────────────────── */
/* A classe vem do controle "Efeito no Hover" (prefix_class no wrapper do
   widget); o gatilho é o hover do card inteiro, não só da foto. */
.ecta-imgfx-zoom     .ecta-wrap:hover .ecta-media img { transform: scale(1.08); }
.ecta-imgfx-zoom-out .ecta-media img                  { transform: scale(1.08); }
.ecta-imgfx-zoom-out .ecta-wrap:hover .ecta-media img { transform: scale(1); }
.ecta-imgfx-gray     .ecta-media img                  { filter: grayscale(1); }
.ecta-imgfx-gray     .ecta-wrap:hover .ecta-media img { filter: grayscale(0); }
.ecta-imgfx-to-gray  .ecta-wrap:hover .ecta-media img { filter: grayscale(1); }
.ecta-imgfx-bright   .ecta-wrap:hover .ecta-media img { filter: brightness(1.12); }

@media (prefers-reduced-motion: reduce) {
    .ecta-media img { transition: none; }

    /* Nenhum efeito que mova a imagem. Filtros (cinza/brilho) são mantidos
       porque não são movimento. */
    .ecta-imgfx-zoom     .ecta-wrap:hover .ecta-media img,
    .ecta-imgfx-zoom-out .ecta-media img,
    .ecta-imgfx-zoom-out .ecta-wrap:hover .ecta-media img { transform: none; }
}

/* ── Media icon ──────────────────────────────────────────────────────────── */
.ecta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    line-height: 1;
}
/*
 * Caixa de 1em × 1em para o glifo. Sem isto o conteúdo tem a largura do
 * caractere e a altura da linha — medidas diferentes entre si e variáveis de
 * ícone para ícone. Como as duas dimensões ficavam determinadas pelo conteúdo,
 * o `aspect-ratio: 1` das formas era ignorado e o círculo saía oval.
 */
.ecta-icon i,
.ecta-icon svg {
    display: block;
    width: 1em;
    height: 1em;
    font-size: inherit;
    line-height: 1;
    text-align: center;
}

/* Transição das cores no hover do card. */
.ecta-icon {
    transition:
        color            var(--ecta-icon-dur, .25s) ease,
        background-color var(--ecta-icon-dur, .25s) ease,
        border-color     var(--ecta-icon-dur, .25s) ease;
}
.ecta-icon svg { transition: fill var(--ecta-icon-dur, .25s) ease; }

@media (prefers-reduced-motion: reduce) {
    .ecta-icon,
    .ecta-icon svg { transition: none; }
}

/* ── Estilos do ícone: padrão / empilhado / emoldurado ───────────────────── */
/*
 * `aspect-ratio: 1` + padding igual mantém a forma redonda/quadrada perfeita
 * seja qual for o ícone. O padrão continua sem caixa nenhuma.
 */
.ecta-icon--stacked,
.ecta-icon--framed {
    aspect-ratio: 1;
    padding: 22px;
    border-style: solid;
    border-width: 0;
    border-color: transparent;
}

.ecta-icon--stacked {
    background-color: #7b4ff0;
    color: #fff;
}

.ecta-icon--framed {
    background-color: transparent;
    color: #7b4ff0;
    border-width: 3px;
    border-color: currentColor;
}

.ecta-icon--circle { border-radius: 50%; }
.ecta-icon--square { border-radius: 8px; }

/* Navegadores sem aspect-ratio: a forma continua aceitável, só menos exata. */
@supports not (aspect-ratio: 1) {
    .ecta-icon--stacked,
    .ecta-icon--framed { min-width: 1em; min-height: 1em; }
}

/* ── Badge ───────────────────────────────────────────────────────────────── */
.ecta-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
    padding: 4px 14px;
    border-radius: 100px;
    background-color: #7b4ff0;
    color: #fff;
    transition:
        color            var(--ecta-badge-dur, .25s) ease,
        background-color var(--ecta-badge-dur, .25s) ease;
}

@media (prefers-reduced-motion: reduce) {
    .ecta-badge { transition: none; }
}

/* Badge overlay: absolutely positioned inside .ecta-media */
.ecta-badge-overlay {
    position: absolute;
    z-index: 2;
}

/* Position classes — values overridden by badge_overlay_offset control */
.ecta-bp-tl { top: 12px;    left: 12px;         }
.ecta-bp-tc { top: 12px;    left: 50%; transform: translateX(-50%); }
.ecta-bp-tr { top: 12px;    right: 12px;        }
.ecta-bp-bl { bottom: 12px; left: 12px;         }
.ecta-bp-bc { bottom: 12px; left: 50%; transform: translateX(-50%); }
.ecta-bp-br { bottom: 12px; right: 12px;        }

/* ── Heading reset ───────────────────────────────────────────────────────── */
/*
 * Neutraliza regras de tema como `h2 { margin: 0 0 20px }` DENTRO do card.
 *
 * Antes esta regra também alvejava .elementor-icon-box-title,
 * .elementor-image-box-title e .elementor-cta__title — widgets nativos do
 * Elementor. Como este CSS carrega na página inteira, zerava com !important a
 * margem desses outros widgets. Agora fica restrito ao próprio CTA.
 *
 * Os controles de espaçamento do painel usam !important + especificidade maior
 * (.elementor-element-XXXX .ecta-title), então continuam vencendo.
 */
.ecta-wrap .ecta-title,
.ecta-wrap .ecta-subtitle {
    margin-top:    0 !important;
    margin-bottom: 0 !important;
}

.ecta-title {
    padding: 0;
    line-height: 1.2;
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a2e;
}

/* ── Subtítulo ───────────────────────────────────────────────────────────── */
.ecta-subtitle {
    padding: 0;
    line-height: 1.35;
    font-size: 1.15rem;
    font-weight: 600;
    color: #444;
    transition: color .25s ease;
}

@media (prefers-reduced-motion: reduce) {
    .ecta-subtitle { transition: none; }
}

/* ── Description ─────────────────────────────────────────────────────────── */
.ecta-desc {
    margin: 0;
    padding: 0;
    line-height: 1.65;
    font-size: 1rem;
    color: #555;
    transition: color .25s ease;
}

@media (prefers-reduced-motion: reduce) {
    .ecta-desc { transition: none; }
}

/* ── Bloco de shortcode ──────────────────────────────────────────────────── */
/* Campo próprio para shortcodes que devolvem HTML de bloco (formulário, lista
   de seleção). Fora da linha de botões é um bloco normal; dentro dela vira
   mais um item flex, ao lado dos botões. */
.ecta-sc {
    min-width: 0;
    max-width: 100%;
}

.ecta-sc > :last-child { margin-bottom: 0; }

.ecta-sc-inrow {
    display: flex;
    align-items: center;
}

/* ── Buttons row ─────────────────────────────────────────────────────────── */
.ecta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* ── Button base ─────────────────────────────────────────────────────────── */
/* Muitos temas aplicam gradiente (background-image) e filtros nos links/botões
   no :hover. Como os controles do widget só definem background-COLOR, o
   gradiente do tema ficava por cima e o hover saía errado no frontend (no
   editor não aparecia porque o CSS do tema não é o mesmo). Zeramos aqui, em
   todos os estados, o que o tema possa injetar. */
.ecta-btn,
.ecta-btn:link,
.ecta-btn:visited,
.ecta-btn:hover,
.ecta-btn:focus,
.ecta-btn:active {
    background-image: none;
    filter: none;
    text-decoration: none;
    text-shadow: none;
}

.ecta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    font-weight: 600;
    /* Era `line-height: 1` com `white-space: nowrap`: texto longo ou tamanho
       grande faziam o botão crescer para além da caixa, e o `overflow: hidden`
       do .ecta-wrap o recortava — sumia sem aviso. Agora o texto quebra e o
       botão nunca passa da largura disponível. O line-height precisa de folga,
       senão as duas linhas ficam coladas. */
    line-height: 1.2;
    white-space: normal;
    max-width: 100%;
    overflow-wrap: break-word;
    text-align: center;
    box-sizing: border-box;
    background-clip: border-box;
}

.ecta-btn:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

/* Size presets */
.ecta-btn-xs { font-size: 11px; padding:  6px 16px; border-radius: 4px; }
.ecta-btn-sm { font-size: 13px; padding:  9px 22px; border-radius: 5px; }
.ecta-btn-md { font-size: 14px; padding: 12px 28px; border-radius: 6px; }
.ecta-btn-lg { font-size: 16px; padding: 16px 36px; border-radius: 7px; }
.ecta-btn-xl { font-size: 18px; padding: 20px 44px; border-radius: 8px; }

/* Primary button — seletor com `a.` + duas classes para vencer o CSS do tema */
a.ecta-btn.ecta-btn1 {
    background-color: #7b4ff0;
    color: #fff;
    transition: color .25s ease, background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
/* Sem box-shadow fixa aqui: a sombra roxa hardcoded continuava aparecendo
   mesmo com o botão configurado em outra cor. Agora é o controle
   "Sombra (Hover)" do painel que decide. */
a.ecta-btn.ecta-btn1:hover,
a.ecta-btn.ecta-btn1:focus-visible {
    background-color: #5e35c9;
    color: #fff;
    transform: translateY(-1px);
}

/* Secondary button */
a.ecta-btn.ecta-btn2 {
    background-color: transparent;
    color: #7b4ff0;
    border-color: #7b4ff0;
    transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease;
}
a.ecta-btn.ecta-btn2:hover,
a.ecta-btn.ecta-btn2:focus-visible {
    background-color: #7b4ff0;
    color: #fff;
    transform: translateY(-1px);
}

/* Tertiary button — nasce sem fundo nem contorno, para não competir com os
   outros dois quando os três aparecem juntos. Sem sublinhado no hover: a versão
   anterior tinha um, partindo da ideia de que o botão seria sempre um texto
   solto, mas quem lhe dá um fundo sólido acaba com um sublinhado sem motivo.
   O `text-decoration: none` da regra base (topo do arquivo) volta a valer. */
a.ecta-btn.ecta-btn3 {
    background-color: transparent;
    color: #7b4ff0;
    border-color: transparent;
    transition: color .25s ease, background-color .25s ease, transform .25s ease;
}
a.ecta-btn.ecta-btn3:hover,
a.ecta-btn.ecta-btn3:focus-visible {
    color: #5e35c9;
    transform: translateY(-1px);
}

/* Texto/ícone sempre herdam a cor do botão (temas que colorem spans dentro de
   links não podem sobrescrever a cor escolhida nos controles). */
.ecta-btn .ecta-btn-text,
.ecta-btn .ecta-btn-icon,
.ecta-btn .ecta-btn-icon i,
.ecta-btn .ecta-btn-icon svg { color: inherit; fill: currentColor; }

/* Full-width — o controle chama-se "Largura Total no Mobile", então só vale
   abaixo do breakpoint (antes era global e esticava o botão no desktop). */

/* Button icon slot */
.ecta-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: inherit;
    line-height: 1;
    width: 1em;
    height: 1em;
}
.ecta-btn-icon i,
.ecta-btn-icon svg { width: 1em; height: 1em; font-size: inherit; }

/* ── Card link overlay ───────────────────────────────────────────────────── */
/*
 * .ecta-card-link is a transparent <a> that covers the whole card.
 * z-index 0 — sits below everything by default.
 * Buttons are lifted to z-index 1 so they keep independent click areas.
 */
.ecta-card-link {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    cursor: pointer;
}

/* Sem isto o .ecta-card-link (invisível, cobrindo o card) fica por cima e
   engole o clique — os campos do shortcode ficariam impossíveis de usar. */
.ecta-linked .ecta-buttons,
.ecta-linked .ecta-btn,
.ecta-linked .ecta-sc {
    position: relative;
    z-index: 1;
}

/*
 * A mídia é `position: relative` (âncora do badge sobreposto). Elementos
 * posicionados com z-index automático pintam na ordem do DOM, e a mídia vem
 * DEPOIS do .ecta-card-link — então ela ficava por cima do link invisível e
 * engolia o clique: o card inteiro era clicável, menos justamente a imagem.
 *
 * Não há nada interativo dentro da mídia, então deixar o clique atravessar é
 * seguro. O hover continua a funcionar porque é disparado no .ecta-wrap.
 */
.ecta-linked .ecta-media {
    pointer-events: none;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .ecta-wrap {
        padding: 32px 24px;
    }

    /* Collapse horizontal to vertical on mobile */
    .ecta-h-left,
    .ecta-h-right {
        flex-direction: column;
    }

    /* Reset order so stacking follows top-to-bottom reading order */
    .ecta-h-left .ecta-media,
    .ecta-h-left .ecta-content,
    .ecta-h-right .ecta-media,
    .ecta-h-right .ecta-content {
        order: unset;
        width: 100% !important;
        flex: none;
    }

    .ecta-title { font-size: 1.6rem; }

    /* Empilhar só quando o controle "Empilhar Botões no Celular" estiver ligado
       (padrão).
       `align-items` era `stretch` e havia um `width: 100%` em `.ecta-btn`: os
       dois juntos forçavam largura total em TODOS os botões, e o controle
       "Largura Total no Mobile" (classe .ecta-btn-full) virava decoração —
       desmarcá-lo não mudava nada. Note que só tirar o `width` não bastava:
       `stretch` sozinho já estica o filho na coluna.
       Agora a coluna segue o Alinhamento do card, pela mesma variável que a
       linha usa no desktop, e a largura total é decisão de cada botão. */
    .ecta-btnstack-yes .ecta-buttons {
        flex-direction: column;
        align-items: var(--ecta-btn-justify, flex-start);
        width: 100%;
    }
    .ecta-btnstack-yes .ecta-btn { justify-content: center; }

    .ecta-btn-full { width: 100%; justify-content: center; }
}

/* ── Movimento reduzido: botões ──────────────────────────────────────────── */
/* Fica no fim do arquivo e com `a.` + duas classes para vencer as regras de
   hover acima e a transição gerada pelo controle do painel. */
@media (prefers-reduced-motion: reduce) {
    a.ecta-btn.ecta-btn1,
    a.ecta-btn.ecta-btn2,
    a.ecta-btn.ecta-btn3,
    a.ecta-btn.ecta-btn1:hover,
    a.ecta-btn.ecta-btn2:hover,
    a.ecta-btn.ecta-btn3:hover,
    a.ecta-btn.ecta-btn1:focus-visible,
    a.ecta-btn.ecta-btn2:focus-visible,
    a.ecta-btn.ecta-btn3:focus-visible {
        /* !important porque o controle "Transição (s)" gera uma regra do
           Elementor com especificidade maior e carregada depois. */
        transition: none !important;
        transform: none;
    }
}