/* ============================================================
   empresa.css — Section "Empresa" — Devsi
   ============================================================
   COMPATÍVEL com main.css:
   • font-size base: 62.5% (1rem = 10px)
   • Fonte: Satoshi
   • Paleta: identidade visual Devsi
   • O bloco do vídeo (iframe + IntersectionObserver) é
     mantido intacto — apenas o visual foi adaptado
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   SECTION WRAPPER
══════════════════════════════════════════════════════════ */

.empresa {
    width: 100%;
    padding: 7.2rem 2rem;
    background: #0f202b;
    /* fundo escuro — padrão Devsi */
    position: relative;
    overflow: hidden;
}


/* ══════════════════════════════════════════════════════════
   CONTAINER
══════════════════════════════════════════════════════════ */

.empresa .container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 3.2rem;
    position: relative;
    z-index: 1;
}


/* ══════════════════════════════════════════════════════════
   LINHA PRINCIPAL: VÍDEO + TEXTO
══════════════════════════════════════════════════════════ */

.empresa .container .top-empresa {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5.6rem;
}


/* ══════════════════════════════════════════════════════════
   BLOCO DO VÍDEO
   Mantém o aspect-ratio 9/16 (vertical estilo Reels/Shorts)
   e as classes .img-empresa existentes sem quebrar o JS
══════════════════════════════════════════════════════════ */

.empresa .container .top-empresa .img-empresa {
    flex-shrink: 0;
    width: 100%;
    max-width: 36rem;
    aspect-ratio: 9 / 16;
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    /* borda sutil com acento da marca */
    border: 1px solid rgba(210, 223, 72, 0.2);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(199, 217, 208, 0.06);
}


/* iframe ocupa todo o container */

.empresa .container .top-empresa .img-empresa iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 2rem;
    display: block;
}


/* ══════════════════════════════════════════════════════════
   BLOCO DE TEXTO
══════════════════════════════════════════════════════════ */

.empresa .container .top-empresa .text-empresa {
    flex: 1;
    max-width: 59.2rem;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}


/* ── Título e parágrafo principal ── */

.empresa .container .top-empresa .text-empresa .tt-top {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}


/* Palavra "TI." em destaque amarelo-verde */

.empresa .container .top-empresa .text-empresa .tt-top span {
    color: #d2df48;
}

.empresa .container .top-empresa .text-empresa .tt-top h2 {
    /* tamanho proporcional à section — não herda 4.8rem do global */
    font: 700 3.2rem/118% Satoshi, sans-serif;
    letter-spacing: -0.5px;
    color: #D0E1D7;
    margin: 0;
    text-wrap: balance;
}

.empresa .container .top-empresa .text-empresa .tt-top h2 br {
    display: inline;
}

.empresa .container .top-empresa .text-empresa .tt-top p {
    font: 400 1.6rem/158% Satoshi, sans-serif;
    color: #CACACA;
    margin: 0;
    text-align: justify;
}


/* ── Grid de pilares: Pessoas / Tecnologia / Simplicidade ── */

.empresa .container .top-empresa .text-empresa .h4-txts-top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: 1.4rem;
}


/* Card de cada pilar */

.empresa .container .top-empresa .text-empresa .h4-txts-top .h4-txt {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1.6rem 1.8rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(199, 217, 208, 0.08);
    background: #152534;
    transition: border-color 0.22s ease;
}

.empresa .container .top-empresa .text-empresa .h4-txts-top .h4-txt:hover {
    border-color: rgba(210, 223, 72, 0.25);
}

.empresa .container .top-empresa .text-empresa .h4-txts-top .h4-txt h4 {
    /* herda h4 global: 500 2.4rem — pode sobrescrever se preferir menor */
    font: 600 1.6rem/120% Satoshi, sans-serif;
    color: #d2df48;
    margin: 0;
}

.empresa .container .top-empresa .text-empresa .h4-txts-top .h4-txt p {
    font: 400 1.4rem/150% Satoshi, sans-serif;
    color: #c7d9d0;
    margin: 0;
}


/* Botão CTA — ocupa o espaço de um card na grid */

.empresa .container .top-empresa .text-empresa .h4-txts-top .company {
    align-self: flex-end;
    height: 4.4rem;
    /* herda .btn-primary do main.css */
    width: 100%;
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVO
══════════════════════════════════════════════════════════ */


/* Tablet largo: reduz gap entre vídeo e texto */

@media (max-width: 1100px) {
    .empresa .container .top-empresa {
        gap: 5.6rem;
    }
    .empresa .container .top-empresa .img-empresa {
        max-width: 30rem;
    }
}


/* Tablet: empilha vídeo acima do texto */

@media (max-width: 860px) {
    .empresa {
        padding: 7.2rem 2rem;
    }
    .empresa .container .top-empresa {
        flex-direction: column;
        align-items: center;
        gap: 4.8rem;
    }
    .empresa .container .top-empresa .img-empresa {
        max-width: 32rem;
        width: 100%;
    }
    .empresa .container .top-empresa .text-empresa {
        max-width: 100%;
        gap: 4rem;
    }
    .empresa .container .top-empresa .text-empresa .tt-top h2 {
        font: 700 2.8rem/112% Satoshi, sans-serif;
    }
}


/* Mobile */

@media (max-width: 560px) {
    .empresa {
        padding: 5.6rem 1.6rem;
    }
    .empresa .container .top-empresa .img-empresa {
        max-width: 28rem;
        border-radius: 1.4rem;
    }
    .empresa .container .top-empresa .text-empresa .tt-top h2 {
        font: 700 2.4rem/112% Satoshi, sans-serif;
    }
    .empresa .container .top-empresa .text-empresa .tt-top p {
        font: 400 1.6rem/155% Satoshi, sans-serif;
    }
    .empresa .container .top-empresa .text-empresa .h4-txts-top {
        grid-template-columns: 1fr;
    }
    .empresa .container .top-empresa .text-empresa .h4-txts-top .company {
        width: 100%;
    }
}


/* Mobile pequeno */

@media (max-width: 375px) {
    .empresa .container .top-empresa .text-empresa .tt-top h2 {
        font: 700 2rem/112% Satoshi, sans-serif;
    }
    .empresa .container .top-empresa .img-empresa {
        max-width: 22rem;
    }
}