/* ==========================
   Variáveis CSS
   ========================== */
:root {
    /* Cores principais */
    --cor-primaria: #2563eb;
    --cor-primaria-escura: #1d4ed8;
    --cor-primaria-mais-escura: #1e40af;

    /* Cores de texto */
    --texto-escuro: #1e293b;
    --texto-base: #333;
    --texto-medio: #64748b;
    --texto-claro: #94a3b8;

    /* Cores de fundo */
    --fundo-claro: #f8fafc;
    --fundo-medio: #e2e8f0;
    --fundo-branco: #ffffff;

    /* Cores de borda */
    --borda-clara: #e2e8f0;
    --borda-escura: #334155;

    /* Sombras */
    --sombra-sm: 0 2px 10px rgba(0, 0, 0, 0.1);
    --sombra-md: 0 5px 15px rgba(0, 0, 0, 0.08);
    --sombra-lg: 0 10px 25px rgba(37, 99, 235, 0.3);

    /* Transições */
    --transicao-padrao: all 0.3s ease;

    /* Border Radius */
    --borda-raio-sm: 6px;
    --borda-raio-md: 12px;
    --borda-raio-lg: 16px;
    --borda-raio-circular: 50%;

    /* Layout */
    --altura-header: 70px;
    --altura-header-mobile: 300px;
}

/* ==========================
   Estilos Principais
   ========================== */
.servicos-detalhados {
    padding: 120px 0 80px;
    background: var(--fundo-claro);
    min-height: 100vh;
}

.servicos-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    position: relative;
}

/* Garantir que cards não focados fiquem atrás */
.card-servico-detalhado:not(:focus) {
    z-index: 1;
    position: relative;
}

.card-servico-detalhado {
    position: relative;
    width: 500px;
    height: 600px;
    transition: all 0.5s ease;
    cursor: pointer;
    perspective: 1000px;
    margin: 0 auto;
    transform-style: preserve-3d;
}

/* Estado focus - TODOS os elementos com min-content */
.card-servico-detalhado:focus {
    outline: none;
    box-shadow: var(--sombra-lg);
    grid-column: 1 / -1;
    width: 100%;
    height: min-content;
    min-height: min-content;
    transform: scale(1.02);
    transition: all 0.6s ease;
    z-index: 10;
    position: relative;
}

.card-frente,
.card-costas {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: all 0.6s ease;
    border-radius: var(--borda-raio-md);
    background: var(--fundo-branco);
    box-shadow: var(--sombra-md);
    overflow: hidden;
    transform-style: preserve-3d;
}

.card-frente {
    display: flex;
    flex-direction: column;
    transform: rotateY(0deg);
    z-index: 2;
}

.card-costas {
    transform: rotateY(180deg);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

/* Animações de focus - card-frente some e card-costas aparece */
.card-servico-detalhado:focus .card-frente {
    transform: rotateY(-180deg);
    opacity: 0;
    visibility: hidden;
    z-index: 1;
}

.card-servico-detalhado:focus .card-costas {
    transform: rotateY(0deg);
    opacity: 1;
    visibility: visible;
    z-index: 15;
    height: min-content;
    min-height: min-content;
    position: relative;
    padding: 3rem;
    gap: 2rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.btn-details {
    display: flex;
    align-items: center;
    margin: auto;
    justify-content: center;
    gap: 10px;
    width: 300px;
    height: 50px;
    background-color: var(--cor-primaria);
    font-family: 'inter', 'sans-serif';
    border: none;
    border-radius: var(--borda-raio-sm);
    color: var(--fundo-branco);
    transition: var(--transicao-padrao);
}

.btn-details:hover {
    background-color: var(--cor-primaria-escura);
}

.card-servico-detalhado:focus .detalhes-servico {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    height: min-content;
    min-height: min-content;
}

.card-servico-detalhado:focus h3 {
    font-size: 2rem;
    margin-bottom: 2rem;
    grid-column: span 2;
    text-align: center;
    height: min-content;
    min-height: min-content;
}

.servico-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: height 0.6s ease;
}

.card-servico-detalhado:focus .servico-img {
    height: 300px;
    border-radius: var(--borda-raio-sm);
}

.card-conteudo {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: min-content;
    min-height: min-content;
}

.card-servico-detalhado:focus .card-conteudo {
    padding: 0;
    height: min-content;
    min-height: min-content;
}

.card-servico-detalhado:focus .texto-servico {
    font-size: 1.1rem;
    line-height: 1.6;
    grid-column: span 2;
    text-align: justify;
    height: min-content;
    min-height: min-content;
}

.card-frente h3 {
    padding: 1.5rem;
    margin: 0;
    color: var(--texto-escuro);
    height: min-content;
    min-height: min-content;
}

.card-frente p {
    padding: 0 1.5rem 1.5rem;
    margin: 0;
    color: var(--texto-medio);
    height: min-content;
    min-height: min-content;
}

.secao-detalhes {
    width: 100%;
    height: min-content;
    min-height: min-content;
    padding: 2rem;
    background: var(--fundo-claro);
    padding: 1rem;
    border-radius: var(--borda-raio-sm);
}

.secao-detalhes h4 {
    color: var(--cor-primaria);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    height: min-content;
    min-height: min-content;
}

.secao-detalhes ul {
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    height: min-content;
    min-height: min-content;
}

.secao-detalhes li {
    color: var(--texto-medio);
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
    height: min-content;
    min-height: min-content;
}

.secao-detalhes li::before {
    content: '•';
    color: var(--cor-primaria);
    position: absolute;
    left: 0;
}

.secao-detalhes img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--borda-raio-sm);
    margin-top: 1rem;
}

/* ==========================
   Responsividade
   ========================== */

/* Responsividade - Mobile e Tablet */
@media (max-width: 1024px) {

    .servicos-detalhados {
        padding: 200px 0 0 0;
    }

    .servicos-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        position: relative;
    }

    .card-servico-detalhado {
        width: 100%;
        max-width: calc(100vw - 2rem);
        min-height: 600px;
        margin: 0 auto 1rem;
        z-index: 1;
        position: relative;
    }

    .card-servico-detalhado:focus {
        z-index: 10;
        margin-bottom: 2rem;
    }

    /* No mobile, usar display ao invés de transform para melhor performance */
    .card-servico-detalhado:focus .card-frente {
        display: none;
    }

    .card-servico-detalhado:focus .card-costas {
        display: flex;
        transform: none;
        position: static;
        height: min-content;
        min-height: min-content;
        padding: 1.25rem;
        opacity: 1;
        visibility: visible;
        z-index: 15;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
    }

    .card-servico-detalhado:focus .detalhes-servico {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .card-servico-detalhado:focus h3 {
        font-size: 2rem;
        grid-column: auto;
        margin-bottom: 1rem;
    }

    .servico-img {
        height: 180px;
    }

    .card-servico-detalhado:focus .servico-img {
        height: 220px;
    }
}