/* Overflow visível apenas onde necessário (evitar efeitos colaterais globais) */
.services-row,
.services-row *,
.employee,
.employee *,
.employee.rotation,
.employee.rotation * {
    overflow: visible !important;
    -webkit-overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Remover containment que recorta pintura/3D nos cards */
.employee,
.employee.rotation {
    contain: none !important;
    aspect-ratio: auto !important; /* Libera altura natural do card */
}

/* Garantir que o conteúdo principal fique acima do slider e seus overlays */
.slider-container,
.fullwidthbanner-container,
.rev_slider_wrapper {
    position: relative !important;
    z-index: 0 !important;
}

main#main-content,
.main {
    position: relative !important;
    z-index: 10 !important;
}

/* Header sempre acima do slider e de qualquer overlay (não força position para não quebrar sticky) */
#header {
    z-index: 9999 !important;
}

/* Escopar overlays do slider ao próprio container */
.slider-container .tparrows,
.slider-container .tp-bullets,
.slider-container .tp-bannertimer,
.slider-container .tp-dottedoverlay,
.slider-container .tp-caption {
    position: absolute !important;
    z-index: 1 !important;
}

/* Footer sempre visível e separado do conteúdo acima */
#footer { position: relative !important; z-index: 10 !important; clear: both !important; }
#footer .footer-main, #footer .footer-bottom { overflow: visible !important; }

/* Layout da seção de serviços (usar grid do Bootstrap) */
.services-row.row {
    display: block !important; /* volta ao fluxo padrão do Bootstrap */
    margin-left: -15px !important;
    margin-right: -15px !important;
    padding: 0 !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 5000 !important; /* acima de banners/overlays */
    isolation: isolate !important;
}

/* Colunas internas: respeitar o grid do Bootstrap */
.services-row .col-md-3 {
    padding-left: 15px !important;
    padding-right: 15px !important;
    float: left !important;
}

/* Espaçamento entre cards em todas as larguras */
.services-row .col-md-3,
.services-row .col-sm-6,
.services-row .col-xs-12 {
    margin-bottom: 24px !important;
}

/* Sistema FlipBox 3D - CÓPIA EXATA DO TESTE */
.employee.rotation {
    position: relative !important;
    height: 360px !important;
    perspective: 1000px !important;
    cursor: pointer !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
    z-index: 6000 !important;
}

/* Aumentar z-index durante hover */
.employee.rotation:hover {
    z-index: 999 !important;
}

/* Remover efeitos de hover do tema que criam sombra/overlay rosa e deslocamento */
.employee:hover,
.employee.hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.employee::before {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
}

.employee .card-inner {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    transform-style: preserve-3d !important;
    z-index: 7000 !important; /* Garante que a rotação fique por cima */
}

.employee:hover .card-inner,
.employee .card-inner.flipped {
    transform: rotateY(180deg) !important;
}

.employee .default {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    backface-visibility: hidden !important;
    overflow: visible !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: center !important;
}

.employee .employee-hover {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    backface-visibility: hidden !important;
    transform: rotateY(180deg) !important;
    overflow: visible !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
    border-radius: 16px !important;
    color: #fff !important;
    padding: 28px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: center !important;
    /* Melhor legibilidade e cor de fundo do verso */
    background: #0f4aa8 !important; /* azul forte acessível (contraste com branco) */
    background-image: linear-gradient(180deg, #1458c3 0%, #0f4aa8 100%) !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}

/* Força tipografia branca no verso para máxima legibilidade */
.employee .employee-hover,
.employee .employee-hover h4,
.employee .employee-hover p,
.employee .employee-hover span,
.employee .employee-hover li,
.employee .employee-hover a:not(.btn),
.employee .employee-hover .contact-info {
    color: #ffffff !important;
}

.employee .employee-hover a:not(.btn):hover {
    text-decoration: underline !important;
}

/* Sombra suave nas faces (usa box-shadow para evitar corte por região de filter) */
.employee .default,
.employee .employee-hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
}

/* Responsivo */
@media (max-width: 991px) {
    /* Garante respiro lateral e vertical no mobile/tablet */
    .services-row.row { padding: 0 10px !important; }
    .services-row .col-sm-6 { padding-left: 10px !important; padding-right: 10px !important; }
}

@media (max-width: 767px) {
    .services-row.row { padding: 0 10px !important; }
    .services-row .col-xs-12 { padding-left: 10px !important; padding-right: 10px !important; }
}

.employee.rotation .card-inner.card-inner.card-inner:hover {
    z-index: 999 !important;
}

.employee.rotation .card-inner.card-inner.card-inner {
    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.employee .default.default.default {
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    transform: rotateY(0deg) !important;
}

.employee .employee-hover.employee-hover.employee-hover {
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transform: rotateY(180deg) !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
}

/* Tipografia e mídia dentro dos cards */
.employee .default img {
    width: 100% !important;
    max-width: 260px !important;
    height: 160px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
}

.employee .default h4,
.employee .employee-hover h4 {
    font-size: 19px !important;
    font-weight: 800 !important;
    margin: 6px 0 10px !important;
}

.employee .default p,
.employee .employee-hover p {
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin: 0 0 10px !important;
}

.employee .employee-hover .btn {
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
    color: #fff !important;
    padding: 9px 14px !important;
    border-radius: 8px !important;
    transition: background .2s ease, transform .2s ease !important;
}

.employee .employee-hover .btn:hover {
    background: rgba(255,255,255,0.3) !important;
    transform: translateY(-1px) !important;
}

/* Telefone como texto, não como botão */
.employee .employee-hover .contact-info,
.employee .employee-hover a.contact-info {
    display: block !important;
    padding: 0 !important;
    margin: 4px 0 6px !important;
    background: transparent !important;
    border: 0 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
}

/* Texto "Clique para detalhes" sem rosa, usa azul neutro escuro */
.employee .default p {
    color: #0f4aa8 !important;
}

/* Responsividade: 2 colunas em tablet, 1 em mobile */
@media (max-width: 991px) {
    .services-row.row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
        padding: 0 10px !important;
    }
}

@media (max-width: 575px) {
    .services-row.row {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 0 10px !important;
    }
}

.employee.rotation:hover .card-inner.card-inner,
.employee.rotation.touch-active .card-inner.card-inner {
    transform: rotateY(180deg) !important;
}

/* Responsividade */
@media (max-width: 1199px) {
    .employee.rotation.employee.rotation.employee.rotation {
        height: 340px !important;
    }
}

@media (max-width: 991px) {
    .employee.rotation.employee.rotation.employee.rotation {
        height: 320px !important;
    }
}

@media (max-width: 767px) {
    .employee.rotation.employee.rotation.employee.rotation {
        height: 300px !important;
    }
}

@media (max-width: 575px) {
    .employee.rotation.employee.rotation.employee.rotation {
        height: 280px !important;
    }
}