/* pages.css: Estilos específicos de páginas/quadro */
/*
=================================================================
Mapa de seções
- Index: Quadro 0 a 5 (estruturas e overrides)
- Soluções: Quadro 1 (container e CTA)
- Contato: Quadro 2 (formulário e serviços)
- Sobre: Quadro 1 (container e CTA)
- Breakpoints (≤992px, ≤768px, ≤480px) agrupando regras por página/quadro
=================================================================
*/

/* ============================= Quadro 0 (Index) ============================= */

.quadro_0_index {
    flex-direction: row;
    background: #404040;
    padding: 5px 0 10px 50px; /* Topo, direita, baixo, esquerda (70px igual ao quadro 2) */
}

.quadro_0_index .quadro-texto {
    color: var(--color-light3);
    text-align: left;
    font-size: 7.5px;
    align-items: flex-start;
}


/* ============================= Quadro 1 (Index) ============================= */
.quadro_1_index {
    flex-direction: row;
    background: url('/assets/imagens/fundo__.jpg') center center/cover no-repeat;
    padding: 80px 70px 80px 70px; /* Topo, direita, baixo, esquerda */
}

.quadro_1_index .quadro-imagem img {
    border-radius: 16px;
    max-width: 510px;
    height: auto;
}

.quadro_1_index .quadro-texto h2.poppins4 {
    width: min(27ch, 100%);
    max-width: 100%;
    display: inline-block;
}
.quadro_1_index .quadro-texto p.lato {
    width: min(50ch, 100%);
    max-width: 100%;
    align-self: flex-start;
    display: inline-block;
}


/* ============================= Quadro 2 (Index) ============================= */
.quadro_2_index {
    flex-direction: row;
    background: var(--color-light2);
    padding: 90px 70px 90px 70px;
    position: relative;
    overflow: hidden;
}

.quadro_2_index .quadro-texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.quadro_2_index .quadro-texto p {
    align-self: flex-start;
    width: 80%;
    text-align: left;
    margin-right: auto;
    margin-left: 15px;
}

.quadro_2_index .quadro-imagem img {
    border-radius: 12px;
    max-width: 575px;
    height: auto;
    border: 1.5px solid #ffdd36;
    box-shadow: 0 8px 30px 0 rgba(0,0,0,0.18), 0 1.5px 15px 0 rgba(249, 209, 5, 0.12);
}


/* ============================= Quadro 3 (Index) ============================= */
.quadro_3_index {
    background: var(--color-background-blue);
    color: var(--color-light);
    padding: 60px 100px;
    flex-direction: column;
}

.quadro_3_index .subquadros {
    display: flex;
    gap: 40px;
    justify-content: center;
}


/* ============================= Quadro 4 (Index) ============================= */
.quadro_4_index {
    background: var(--color-highlight1);
    padding: 70px 70px 24px 70px; /* reduz ainda mais o padding inferior */
    flex-direction: column;
}

/* No Quadro 4, reduzir o espaçamento vertical entre os elementos internos */
.quadro_4_index .quadro-delimiter {
    gap: 8px; /* sobrescreve o gap padrão de 40px herdado de .quadro */
}

.imagens-solucoes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* margin-top: 20px; */
}

.carrossel-imagem.central {
    max-width: 420px;
}
.carrossel-imagem.lateral {
    max-width: 350px;
}
.carrossel-imagem.extrema {
    max-width: 190px;
}

.carrossel-solucoes {
    position: relative;
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Linha de controles (setas + dots) abaixo do carrossel de imagens */
.carrossel-controles {
    /* margin-top controlado por contexto do quadro */
    overflow: visible;
    gap: 12px;
}

/* Aproximar dots do texto especificamente no Quadro 4 */
.quadro_4_index .carrossel-controles {
    margin-top: 4px;
    margin-bottom: 3px;
    gap: 20px;
}
.quadro_4_index .quadro-texto p {
    margin-top: 7px;
}

.carrossel-imagens {
    display: flex;
    align-items: center;
    transition: transform 0.6s cubic-bezier(0.33,1,0.68,1);
    will-change: transform;
}

.carrossel-imagem {
    border-radius: 5px;
    width: 100%;
    height: auto;
    object-fit: contain;
    border: 0.05px solid #ffde3697;
    transition: transform 0.5s cubic-bezier(0.33,1,0.68,1), opacity 0.5s cubic-bezier(0.33,1,0.68,1);
    margin: 0 2px;
    opacity: 0.6;
    transform: scale(0.7);
    z-index: 1;
}
.carrossel-imagem.central {
    opacity: 1;
    transform: scale(1);
    z-index: 3;
}
.carrossel-imagem.lateral {
    opacity: 0.8;
    transform: scale(0.85);
    z-index: 2;
}
.carrossel-imagem.extrema {
    opacity: 0.6;
    transform: scale(0.7);
    z-index: 1;
}

.carrossel-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.carrossel-seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    cursor: pointer;
    z-index: 7;
    padding: 1px 5px;
    border-radius: 90%;
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.15); */
    /* background-color: #6b6b66; */
    color: #fff;
    border: none;
    transition: background 0.2s;
}

/* Dentro do container de controles, queremos as setas no fluxo, ao lado dos dots */
.carrossel-controles .carrossel-seta {
    position: static;
    transform: none;
}

.carrossel-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}


/* Somente no carrossel principal (de imagens) manter setas absolutas nas extremidades se houver */
.carrossel-solucoes:not(.carrossel-controles) .carrossel-seta.esquerda {
        left: 7px;
}
.carrossel-solucoes:not(.carrossel-controles) .carrossel-seta.direita {
        right: 7px;
}

/* Espaçamento e aparência dos dots */
.carrossel-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* ============================= Quadro 5 (Index) ============================= */

.quadro_5_index {
    flex-direction: row;
    background: var(--color-light);
    padding: 70px;
}

.quadro_5_index .quadro-texto h2 {
    width: 90%;
}

.metrica-numero {
    color: var(--color-highlight1);
    font-size: 30px;
    font-weight: bold;
    display: block;
    margin-bottom: 0;
}

.metrica-descricao {
    font-size: 18px;
    line-height: 1.3;
}


/* ============================= Quadro 1 (Soluções) ============================= */
.quadro_1_solucoes {
    background: var(--color-black1);
    color: var(--color-light);
    padding: 60px 100px;
    position: relative; /* para posicionar CTA interna */
}
.cta-contact { position: absolute; right: 100px; bottom: 30px; }

/* Contato - Quadro 2 layout */
.contato_quadro2 {
    display: flex;
    flex-wrap: wrap;
    gap: 90px;
    justify-content: center;
    align-items: center;
    min-height: 600px;
}
.contato_box_servicos {
    flex: 1 1 400px;
    max-width: 400px;
    min-width: 200px;
    background: var(--color-header-bg, #fff);
    border-radius: 18px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.contato_form_col {
    flex: 1 1 300px;
    min-width: 320px;
    width: 100%;
    max-width: 600px;
}

/* Sobre - Quadro 1 container e CTA */
.sobre_quadro1_container {
    max-width: 900px;
    display: flex;
    flex-direction: column;
    min-height: 400px;
}
.sobre_cta_container {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.solucoes_quadro1_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}


/* ============================= Breakpoints para responsividade ============================= */
@media (max-width: 992px) {
    /* ============================= Index (Q1–Q5): padding lateral ============================= */
    .quadro_1_index, .quadro_2_index, .quadro_3_index, .quadro_4_index, .quadro_5_index { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 768px) {
    /* ============================= Index (Q0–Q5) ============================= */
    .quadro { gap: 20px; }
    .quadro_0_index { padding: 8px 10px 12px 12px; }
    .quadro_1_index { padding: 50px 16px; overflow: hidden; }
    .quadro_1_index .quadro-texto { max-width: 100%; }
    .quadro_1_index .quadro-texto h1,
    .quadro_1_index .quadro-texto h2 { font-size: clamp(20px, 6vw, 26px); }
    .quadro_1_index .quadro-texto h2.poppins4 { width: min(30ch, 100%); }
    .quadro_1_index .quadro-texto p { font-size: clamp(13px, 4vw, 16px); overflow-wrap: anywhere; word-break: break-word; }
    .quadro_1_index .quadro-texto p.lato { max-width: 37ch; overflow-wrap: normal; word-break: normal; }
    .quadro_2_index { padding: 50px 16px; overflow: hidden; }
    .quadro_2_index .quadro-delimiter { flex-direction: column; }
    .quadro_2_index .quadro-imagem { justify-content: center; }
    .quadro_3_index { padding: 40px 16px; overflow: hidden; }
    .quadro_3_index .subquadros { flex-direction: column; gap: 16px; align-items: stretch; }
    .quadro_3_index .subquadro { width: 100%; }
    .quadro_3_index .subquadro img { height: 50px !important; }
    .quadro_3_index .subquadro h3 { font-size: clamp(14px, 4vw, 16px); }
    .quadro_3_index .subquadro p { font-size: clamp(12.5px, 3.6vw, 14.5px); }
    .quadro_3_index .subquadro .header-inline { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
    .quadro_3_index .subquadro .header-inline img { height: 40px !important; width: auto; }
    .quadro_3_index .subquadro .header-inline h3 { margin: 0; }
    .quadro_3_index .subquadro img,
    .quadro_3_index .subquadro h3 { display: inline-block !important; vertical-align: middle; }
    .quadro_3_index .subquadro img { height: 36px !important; width: auto; margin: 0 8px 0 0 !important; }
    .quadro_3_index .subquadro h3 { margin: 0; }
    .quadro_4_index { padding: 40px 12px 16px 12px; overflow: hidden; }
    .quadro_5_index { padding: 40px 16px; overflow: hidden; }
    .quadro_5_index .quadro-delimiter { flex-direction: column; align-items: stretch; }
    .quadro_5_index .quadro-texto h2 { font-size: clamp(18px, 4.8vw, 22px); width: 100%; }
    .metrica-numero { font-size: 22px; }
    .metrica-descricao { font-size: 14px; }
    .quadro_5_index .quadro-metricas { gap: 6px; padding: 16px 18px; }

    .quadro_2_index .quadro-texto p { width: 100%; margin-left: 0; }
    .quadro_2_index .quadro-imagem img { max-width: 100%; }

    /* ============================= Carrossel (genérico) ============================= */
    .carrossel-solucoes { width: 100%; }
    .carrossel-imagem.central { max-width: 300px; }
    .carrossel-imagem.lateral { max-width: 230px; }
    .carrossel-imagem.extrema { max-width: 140px; }

    .carrossel-seta { font-size: 1.6rem; }
    .carrossel-dots { gap: 6px; }

    /* ============================= CTA dentro do quadro ============================= */
    .cta-contact { position: static; display: flex; justify-content: center; margin-top: 16px; }

    /* ============================= Sobre (Quadro 1) ============================= */
    .sobre_quadro1_container .quadro-texto h2 { font-size: clamp(20px, 5.2vw, 26px); }
    .sobre_quadro1_container .quadro-texto .logo { height: 40px !important; }

    /* ============================= Contato (Quadro 2) ============================= */
    .contato_form_col .quadro-texto h2 { font-size: clamp(20px, 5.2vw, 26px); }
    .contato_form_col .quadro-texto h2 .logo { height: 40px !important; }
    .contato_quadro2 { flex-direction: column; align-items: stretch; gap: 24px; }
    .contato_form_col { order: 1; }
    .contato_box_servicos { order: 2; }
    .contato_box_servicos .header-inline img { height: 36px !important; width: auto; }
    .contato_box_servicos h3 { font-size: clamp(16px, 4.6vw, 18px); }

    /* ============================= Soluções (Quadro 1) ============================= */
    .quadro_1_solucoes { padding: 64px 28px; }
    .quadro_1_solucoes .areas-projetos-grid { gap: 14px; }
    .quadro_1_solucoes .areas-projetos-grid { display: flex; flex-wrap: wrap; justify-content: flex-start; }
    .quadro_1_solucoes .area_projeto { padding: 16px; }
    .quadro_1_solucoes .area_projeto .area-titulo { font-size: clamp(16px, 5vw, 20px); line-height: 1.2; }
    .quadro_1_solucoes .area_projeto .area-titulo { font-size: clamp(18px, 5.8vw, 22px); }
    .quadro_1_solucoes .area_projeto > p:first-child { display: none; }
    .quadro_1_solucoes .area_projeto .area-titulo { margin-top: 0; }
}

@media (max-width: 480px) {
    /* ============================= Carrossel (genérico) ============================= */
    .quadro { width: 100%; }
    .quadro-delimiter { max-width: 100%; }
    .carrossel-solucoes { width: 100%; max-width: 100%; overflow: hidden; }
    .carrossel-imagens { width: 100%; }
    .carrossel-imagem { max-width: 85vw; }
    .carrossel-imagem.central { max-width: 75vw; }
    .carrossel-imagem.lateral { max-width: 55vw; }
    .carrossel-imagem.extrema { max-width: 38vw; }
    
    /* ============================= Index (Q0, Q1, Q3, Q5) ============================= */
    .quadro_0_index { padding: 8px 8px 10px 10px; }
    .quadro_0_index .quadro-texto h1 { font-size: clamp(9px, 2vw, 10px); font-weight: 400; }
    .quadro_1_index .quadro-texto h1,
    .quadro_1_index .quadro-texto h2 { font-size: clamp(28px, 12vw, 36px); }
    .quadro_1_index .quadro-texto h2.poppins4 { width: min(28ch, 100%); }
    .quadro_1_index .quadro-texto p { font-size: clamp(12.5px, 3.8vw, 15.5px); }
    .quadro_1_index .quadro-texto p.lato { max-width: 37ch; overflow-wrap: normal; word-break: normal; }
    .quadro_3_index .subquadro h3 { font-size: clamp(13.5px, 4.5vw, 15.5px); }
    .quadro_3_index .subquadro p { font-size: clamp(12px, 3.8vw, 14px); }
    .metrica-numero { font-size: 20px; }
    .metrica-descricao { font-size: 13px; }
    .quadro_3_index .subquadro .header-inline img { height: 17px !important; }
    .quadro_3_index .subquadro img { height: 22px !important; width: auto; margin-right: 6px !important; display: inline-block !important; vertical-align: middle; }
    .quadro_5_index .quadro-metricas { gap: 2px; padding: 12px 15px; }

    /* ============================= Sobre (Quadro 1) ============================= */
    .sobre_quadro1_container .quadro-texto h2 { font-size: clamp(23px, 7.2vw, 30px); }
    .sobre_quadro1_container .quadro-texto .logo { height: 46px !important; }

    /* ============================= Contato (Quadro 2) ============================= */
    .contato_form_col .quadro-texto h2 { font-size: clamp(23px, 7.2vw, 30px); }
    .contato_form_col .quadro-texto h2 .logo { height: 46px !important; }

    /* ============================= Soluções (Quadro 1) ============================= */
    .quadro_1_solucoes .solucoes_quadro1_container > p { display: none !important; }
    .quadro_1_solucoes .areas-projetos-grid { margin-bottom: 8px; }
    .quadro_1_solucoes .cta-contact { margin-top: 8px; }

    .contato_box_servicos .header-inline img { height: 30px !important; }
    .contato_box_servicos h3 { font-size: clamp(15px, 5.2vw, 17px); }

    .quadro_1_solucoes { padding: 70px 22px; }
    .quadro_1_solucoes .areas-projetos-grid { gap: 10px; }
    .quadro_1_solucoes .area_projeto { padding: 12px; }
    .quadro_1_solucoes .area_projeto {
        box-sizing: border-box;
        flex: 0 0 calc(50% - 5px) !important; /* duas colunas + gap */
        max-width: calc(50% - 5px) !important;
        width: auto !important;
        min-width: 0 !important; /* evita forçar 1 por linha em telas muito estreitas */
    }
    .quadro_1_solucoes .area_projeto .area-titulo { font-size: clamp(15px, 5.6vw, 18px); }
    .quadro_1_solucoes .area_projeto .area-titulo { font-size: clamp(17px, 6.2vw, 21px); }
    .quadro_1_solucoes .area_projeto > p:first-child { display: none !important; }
    .quadro_1_solucoes .area_projeto .area-titulo { margin-top: 0; }
}