/*
 * Kopere Homepage – Correções visuais sobre o template Elementor
 * Cada bloco identifica o elemento corrigido (ID Elementor preservado no comentário).
 */

/* ─────────────────────────────────────────────────────────────────────────────
   1. HERO – Blob de gradiente amarelo ao fundo
   Elemento: 34bab158 (seção hero)
───────────────────────────────────────────────────────────────────────────── */
.elementor-element-34bab158 {
    position: relative;
}
.elementor-element-34bab158::before {
    content: '';
    position: absolute;
    top: -5%;
    left: 50%;
    transform: translateX(-50%);
    width: 860px;
    max-width: 100%;
    height: 860px;
    background: radial-gradient(ellipse at center, rgba(255,221,0,.45) 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
}
.elementor-element-34bab158 > .e-con-inner {
    position: relative;
    z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. BOTÕES – Hover com fundo amarelo
   Elementos: 65655d5c (hero) · 47cd4a22 (CTA) · 44a6df60 (footer)
───────────────────────────────────────────────────────────────────────────── */
.elementor-element-65655d5c .elementor-button:hover,
.elementor-element-65655d5c .elementor-button:focus {
    background-color: #ffdd00 !important;
    color: #0c0c0c !important;
    border-color: #ffdd00 !important;
}
.elementor-element-65655d5c .elementor-button:hover svg,
.elementor-element-65655d5c .elementor-button:focus svg {
    fill: #0c0c0c !important;
}
.elementor-element-47cd4a22 .elementor-button:hover,
.elementor-element-47cd4a22 .elementor-button:focus {
    background-color: rgba(255,221,0,.82) !important;
    color: #0c0c0c !important;
}
.elementor-element-44a6df60 .elementor-button:hover,
.elementor-element-44a6df60 .elementor-button:focus {
    background-color: #ffdd00 !important;
    color: #0c0c0c !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. MARQUEE – Ticker animado
   Elemento: 29232494 (widget de texto do marquee)
───────────────────────────────────────────────────────────────────────────── */
.elementor-element-29232494 .elementor-widget-container {
    overflow: hidden;
}
.elementor-element-29232494 p {
    display: inline-block;
    white-space: nowrap;
    animation: kopere-marquee 26s linear infinite;
    will-change: transform;
}
@keyframes kopere-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. EYEBROW – Linha amarela decorativa antes dos rótulos de seção
   Elementos: 3b52d9c · 5cbe01dc · 76317363 · 12469bc7
───────────────────────────────────────────────────────────────────────────── */
.elementor-element-3b52d9c  p::before,
.elementor-element-5cbe01dc p::before,
.elementor-element-76317363 p::before,
.elementor-element-12469bc7 p::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 2px;
    background: #ffdd00;
    border-radius: 1px;
    margin-right: 10px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. ÍCONES DOS SERVIÇOS – Fundo preto, ícone branco (stacked)
   Elementos: 299ef8b8 · be431e7 · 59179dfc · 7db39859
───────────────────────────────────────────────────────────────────────────── */
.elementor-element-299ef8b8 .elementor-icon,
.elementor-element-be431e7  .elementor-icon,
.elementor-element-59179dfc .elementor-icon,
.elementor-element-7db39859 .elementor-icon {
    background-color: #0c0c0c !important;
    color: #ffffff !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color .3s ease;
}
.elementor-element-299ef8b8 .elementor-icon i,
.elementor-element-be431e7  .elementor-icon i,
.elementor-element-59179dfc .elementor-icon i,
.elementor-element-7db39859 .elementor-icon i { color: #ffffff !important; }

.elementor-element-299ef8b8 .elementor-icon svg,
.elementor-element-be431e7  .elementor-icon svg,
.elementor-element-59179dfc .elementor-icon svg,
.elementor-element-7db39859 .elementor-icon svg { fill: #ffffff !important; }

/* Hover nos cards → ícone fica amarelo */
.elementor-element-e957f34:hover  .elementor-element-299ef8b8 .elementor-icon,
.elementor-element-36cf1dac:hover .elementor-element-be431e7  .elementor-icon,
.elementor-element-10a28670:hover .elementor-element-59179dfc .elementor-icon,
.elementor-element-7a591aa0:hover .elementor-element-7db39859 .elementor-icon {
    background-color: #ffdd00 !important;
}
.elementor-element-e957f34:hover  .elementor-element-299ef8b8 .elementor-icon i,
.elementor-element-36cf1dac:hover .elementor-element-be431e7  .elementor-icon i,
.elementor-element-10a28670:hover .elementor-element-59179dfc .elementor-icon i,
.elementor-element-7a591aa0:hover .elementor-element-7db39859 .elementor-icon i { color: #0c0c0c !important; }

.elementor-element-e957f34:hover  .elementor-element-299ef8b8 .elementor-icon svg,
.elementor-element-36cf1dac:hover .elementor-element-be431e7  .elementor-icon svg,
.elementor-element-10a28670:hover .elementor-element-59179dfc .elementor-icon svg,
.elementor-element-7a591aa0:hover .elementor-element-7db39859 .elementor-icon svg { fill: #0c0c0c !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   6. CARDS DE SERVIÇOS – Hover com elevação
   Elementos: e957f34 · 36cf1dac · 10a28670 · 7a591aa0
───────────────────────────────────────────────────────────────────────────── */
.elementor-element-e957f34,
.elementor-element-36cf1dac,
.elementor-element-10a28670,
.elementor-element-7a591aa0 {
    transition: transform .3s ease, box-shadow .3s ease !important;
    will-change: transform;
}
.elementor-element-e957f34:hover,
.elementor-element-36cf1dac:hover,
.elementor-element-10a28670:hover,
.elementor-element-7a591aa0:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.10) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. BLOCO SOBRE – Citação com borda amarela à esquerda
   Elemento: 6966fd6c
───────────────────────────────────────────────────────────────────────────── */
.elementor-element-6966fd6c .elementor-widget-container {
    border-left: 2px solid #ffdd00;
    padding-left: 20px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. METODOLOGIA – Hover nas etapas (escurece, título amarelo)
   Elementos: 6b0d6a · 7a872495 · 31974280 · 23928c3f · 756ba28e
───────────────────────────────────────────────────────────────────────────── */
.elementor-element-6b0d6a,
.elementor-element-7a872495,
.elementor-element-31974280,
.elementor-element-23928c3f,
.elementor-element-756ba28e {
    transition: background-color .35s ease !important;
    cursor: default;
}

/* Fundo escuro no hover */
.elementor-element-6b0d6a:hover,
.elementor-element-7a872495:hover,
.elementor-element-31974280:hover,
.elementor-element-23928c3f:hover,
.elementor-element-756ba28e:hover { background-color: #0c0c0c !important; }

/* Título (h4) fica amarelo */
.elementor-element-6b0d6a:hover  .elementor-element-6a2a1ee4  .elementor-heading-title,
.elementor-element-7a872495:hover .elementor-element-2483db9d  .elementor-heading-title,
.elementor-element-31974280:hover .elementor-element-7348399b  .elementor-heading-title,
.elementor-element-23928c3f:hover .elementor-element-54c7e068  .elementor-heading-title,
.elementor-element-756ba28e:hover .elementor-element-3dcaeae7  .elementor-heading-title {
    color: #ffdd00 !important;
    transition: color .35s ease;
}

/* Número grande fica quase invisível (amarelo escuro) */
.elementor-element-6b0d6a:hover  .elementor-element-416e38ff  .elementor-heading-title,
.elementor-element-7a872495:hover .elementor-element-5e533149  .elementor-heading-title,
.elementor-element-31974280:hover .elementor-element-1164fa74  .elementor-heading-title,
.elementor-element-23928c3f:hover .elementor-element-b50d023   .elementor-heading-title,
.elementor-element-756ba28e:hover .elementor-element-7db80af5  .elementor-heading-title {
    color: rgba(255,221,0,.08) !important;
    transition: color .35s ease;
}

/* Texto descritivo fica desbotado */
.elementor-element-6b0d6a:hover  .elementor-element-65eb8b46 p,
.elementor-element-7a872495:hover .elementor-element-3b1d8fb  p,
.elementor-element-31974280:hover .elementor-element-14bf775a p,
.elementor-element-23928c3f:hover .elementor-element-5df2c66f p,
.elementor-element-756ba28e:hover .elementor-element-47f121ed p {
    color: rgba(255,255,255,.4) !important;
    transition: color .35s ease;
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. CTA – Gradiente radial amarelo sobre fundo preto
   Elemento: 1527cc3b
───────────────────────────────────────────────────────────────────────────── */
.elementor-element-1527cc3b {
    position: relative;
    overflow: hidden;
}
/* Substituição do ::before gerado pelo Elementor para o overlay */
.elementor-element-1527cc3b::before {
    background: radial-gradient(ellipse at 50% -10%, rgba(255,221,0,.38) 0%, transparent 58%) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. CONTADORES – Tipografia do número (sem font-size no Elementor Free)
   Elementos: 4399f21d · 5d17ab6a
───────────────────────────────────────────────────────────────────────────── */
.elementor-element-4399f21d .elementor-counter-number-wrapper,
.elementor-element-5d17ab6a .elementor-counter-number-wrapper {
    font-family: "Montserrat", sans-serif !important;
    font-size: 36px !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    line-height: 1 !important;
}
.elementor-element-4399f21d .elementor-counter-title,
.elementor-element-5d17ab6a .elementor-counter-title {
    font-family: "Montserrat", sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-top: 6px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. FOOTER – Separador entre links sem ícone (ponto padrão)
   Elementos: 2c55bde2 · 4af13e85
───────────────────────────────────────────────────────────────────────────── */
.elementor-element-2c55bde2 .elementor-icon-list-icon,
.elementor-element-4af13e85 .elementor-icon-list-icon { display: none; }

.elementor-element-2c55bde2 .elementor-icon-list-text,
.elementor-element-4af13e85 .elementor-icon-list-text {
    font-family: "Montserrat", sans-serif !important;
    font-size: 13px !important;
    font-weight: 300 !important;
}
.elementor-element-2c55bde2 a,
.elementor-element-4af13e85 a {
    color: #888 !important;
    transition: color .2s;
}
.elementor-element-2c55bde2 a:hover,
.elementor-element-4af13e85 a:hover { color: #0c0c0c !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   12. ICON LIST – Tipografia dos itens dos serviços
───────────────────────────────────────────────────────────────────────────── */
.elementor-element-3f9ec55c .elementor-icon-list-text,
.elementor-element-1124da91 .elementor-icon-list-text,
.elementor-element-5a82f1a4 .elementor-icon-list-text,
.elementor-element-50ac0873 .elementor-icon-list-text {
    font-family: "Montserrat", sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
}