/* ============================================
   CARDS.CSS — SOLNER
   Fonte única de verdade para hover de todos os cards.
   Carregado DEPOIS de todos os outros CSS.
   Usa !important para garantir que nunca é sobrescrito.

   TRANSIÇÃO SINCRONIZADA:
   - Card sobe (translateY), sombra cresce, borda aparece — tudo 0.5s
   - Ícone muda fundo + cor + escala — tudo 0.5s
   - Borda gradiente faz FADE-IN suave (opacity 0→1) em 0.5s
============================================ */

/* ============================================
   1. BASE — position + transition suave (0.5s)
============================================ */
.atendimento-card,
.horario-col,
.blog-home-card,
.info-card,
.por-que-col,
.passo-card,
.depoimento-card,
.dep-carousel-card,
.diferencial-card,
.pilar-card,
.numero-card,
.google-card,
.video-card,
.timeline-card,
.pq-solar-col,
.horario-card,
.passo-solar-card,
.beneficio-card,
.spec-numero-card,
.dep-card,
.post-card,
.canal-card,
.projeto-card,
.stat-card {
    position: relative !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ============================================
   2. BASE ::before — SEMPRE presente, opacity 0
   Fade-in suave no hover via opacity transition
============================================ */
.atendimento-card::before,
.horario-col::before,
.blog-home-card::before,
.info-card::before,
.por-que-col::before,
.passo-card::before,
.depoimento-card::before,
.dep-carousel-card::before,
.diferencial-card::before,
.pilar-card::before,
.numero-card::before,
.google-card::before,
.video-card::before,
.timeline-card::before,
.pq-solar-col::before,
.horario-card::before,
.passo-solar-card::before,
.beneficio-card::before,
.spec-numero-card::before,
.dep-card::before,
.post-card::before,
.canal-card::before,
.projeto-card::before,
.stat-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 20px !important;
    padding: 2px !important;
    background: linear-gradient(
        90deg,
        #001489 0%,
        #dc582a 25%,
        #FFB600 50%,
        #dc582a 75%,
        #001489 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: solner-border-gradient 3s linear infinite !important;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 0 !important;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Border-radius específico para cards com border-radius diferente */
.projeto-card::before {
    border-radius: 24px !important;
}

.stat-card::before {
    border-radius: 14px !important;
}

/* ============================================
   3. HOVER — Cards normais (com lift translateY)
   border-color: transparent para sumir a borda real
   suavemente via transition acima
============================================ */
.atendimento-card:hover,
.horario-col:hover,
.blog-home-card:hover,
.info-card:hover,
.info-card.active,
.por-que-col:hover,
.diferencial-card:hover,
.pilar-card:hover,
.numero-card:hover,
.google-card:hover,
.video-card:hover,
.timeline-card:hover,
.pq-solar-col:hover,
.horario-card:hover,
.passo-solar-card:hover,
.beneficio-card:hover,
.spec-numero-card:hover,
.dep-card:hover,
.post-card:hover,
.canal-card:hover,
.projeto-card:hover,
.stat-card:hover,
.passo-card:hover,
.depoimento-card:hover,
.dep-carousel-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--shadow-xl) !important;
    border-color: transparent !important;
}

/* ============================================
   5. HOVER ::before — fade-in da borda gradiente
============================================ */
.atendimento-card:hover::before,
.horario-col:hover::before,
.blog-home-card:hover::before,
.info-card:hover::before,
.info-card.active::before,
.por-que-col:hover::before,
.passo-card:hover::before,
.depoimento-card:hover::before,
.dep-carousel-card:hover::before,
.diferencial-card:hover::before,
.pilar-card:hover::before,
.numero-card:hover::before,
.google-card:hover::before,
.video-card:hover::before,
.timeline-card:hover::before,
.pq-solar-col:hover::before,
.horario-card:hover::before,
.passo-solar-card:hover::before,
.beneficio-card:hover::before,
.spec-numero-card:hover::before,
.dep-card:hover::before,
.post-card:hover::before,
.canal-card:hover::before,
.projeto-card:hover::before,
.stat-card:hover::before {
    opacity: 1 !important;
}

/* ============================================
   6. ÍCONE — muda para fundo laranja + ícone branco
   MESMA transition 0.5s do card = sincronizado
============================================ */
.atendimento-icon,
.diferencial-icon,
.horario-col-icon,
.pq-solar-icon,
.pilar-icon,
.horario-icon,
.passo-numero,
.beneficio-icon,
.pq-col-icon,
.canal-icon,
.card-icon,
.numero-icon {
    transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.atendimento-card:hover .atendimento-icon,
.diferencial-card:hover .diferencial-icon,
.horario-col:hover .horario-col-icon,
.pq-solar-col:hover .pq-solar-icon,
.pilar-card:hover .pilar-icon,
.horario-card:hover .horario-icon,
.passo-card:hover .passo-numero,
.beneficio-card:hover .beneficio-icon,
.por-que-col:hover .pq-col-icon,
.canal-card:hover .canal-icon,
.info-card:hover .card-icon,
.info-card.active .card-icon,
.numero-card:hover .numero-icon {
    background: var(--gradient-orange) !important;
    transform: scale(1.1) !important;
}

/* Ícones com img — vira branco (mesma curva 0.5s) */
.atendimento-icon img,
.diferencial-icon img,
.horario-icon img,
.canal-icon img,
.card-icon img,
.horario-col-icon img,
.numero-icon img {
    transition: filter 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.atendimento-card:hover .atendimento-icon img,
.diferencial-card:hover .diferencial-icon img,
.horario-card:hover .horario-icon img,
.canal-card:hover .canal-icon img,
.info-card:hover .card-icon img,
.info-card.active .card-icon img,
.horario-col:hover .horario-col-icon img,
.numero-card:hover .numero-icon img {
    filter: brightness(0) invert(1) !important;
}

/* Ícones com SVG — vira branco (mesma curva 0.5s) */
.pq-solar-icon svg,
.pilar-icon svg,
.beneficio-icon svg,
.pq-col-icon svg,
.canal-icon svg,
.card-icon svg,
.horario-col-icon svg {
    transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                stroke 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pq-solar-col:hover .pq-solar-icon svg,
.pilar-card:hover .pilar-icon svg,
.beneficio-card:hover .beneficio-icon svg,
.por-que-col:hover .pq-col-icon svg,
.canal-card:hover .canal-icon svg,
.info-card:hover .card-icon svg,
.info-card.active .card-icon svg,
.horario-col:hover .horario-col-icon svg {
    color: var(--white) !important;
    stroke: var(--white) !important;
}

/* ============================================
   7. Z-INDEX — texto e ícone ficam sobre o ::before
============================================ */
.atendimento-card h3, .atendimento-card p, .atendimento-icon,
.horario-col h4, .horario-col p, .horario-col .horario-col-icon,
.diferencial-card h3, .diferencial-card p, .diferencial-icon,
.pilar-card h4, .pilar-card p, .pilar-icon,
.passo-card h3, .passo-card p, .passo-numero,
.depoimento-card .depoimento-rating,
.depoimento-card .depoimento-texto,
.depoimento-card .depoimento-autor,
.dep-carousel-card .depoimento-rating,
.dep-carousel-card .depoimento-texto,
.dep-carousel-card .depoimento-autor,
.beneficio-card h3, .beneficio-card p, .beneficio-icon,
.timeline-card h3, .timeline-card p,
.por-que-col h3, .por-que-col p, .pq-col-icon,
.dep-card .dep-texto, .dep-card .dep-autor,
.spec-numero-card .numero, .spec-numero-card .label,
.horario-card h4, .horario-card p, .horario-icon,
.pq-solar-col h3, .pq-solar-col p, .pq-solar-icon,
.passo-solar-card h3, .passo-solar-card p,
.blog-home-content,
.canal-card h3, .canal-card p, .canal-icon, .canal-badge,
.post-card .post-content, .post-card .post-image-wrapper,
.projeto-card > *, .stat-card > *,
.info-card .card-icon, .info-card .card-content,
.numero-card .numero, .numero-card .label,
.google-card > *, .video-card > * {
    position: relative !important;
    z-index: 2 !important;
}

/* ============================================
   8. OVERRIDE — spec-numero-card em fundo escuro
============================================ */
.specs-section .spec-numero-card:hover {
    box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(220,88,42,0.2) !important;
    background: rgba(255,255,255,0.08) !important;
}

/* ============================================
   9. OVERRIDE — timeline-card-featured sempre com borda ativa
============================================ */
.timeline-card-featured::before {
    opacity: 1 !important;
}

/* ============================================
   9. KEYFRAME — animação do gradiente na borda
============================================ */
@keyframes solner-border-gradient {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}