/* ==========================================================================
   cards.css - Estilização da seção Estrutura do Site (Sprint 04 - Refinada)
   ========================================================================== */

.site-structure-section {
    background-color: var(--color-background-light); /* Fundo branco e limpo */
    padding-top: 36px; /* Ajuste compacto vertical desktop */
    padding-bottom: 42px; /* Ajuste compacto vertical desktop */
    overflow: hidden;
}

/* Cabeçalho com linhas laterais douradas finas */
.section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 40px; /* Espaço para o grid abaixo */
}

.section-header::before,
.section-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--color-secondary-gold); /* Linha fina dourada */
}

.section-header::before {
    margin-right: 30px; /* Margem até o texto */
}

.section-header::after {
    margin-left: 30px; /* Margem até o texto */
}

.section-title {
    font-family: var(--font-primary);
    font-size: 1.5rem; /* ~24px, tamanho elegante e discreto */
    font-weight: 700;
    color: var(--color-text-dark);
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
    letter-spacing: 1.5px;
}

/* Grade de Blocos */
.structure-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 colunas no desktop */
    gap: 40px; /* Gap entre itens de 40px (intervalo de 35px a 45px) */
    align-items: flex-start;
    width: 100%;
}

/* Design Limpo do Item (Sem visual de card pesado) */
.structure-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: transparent;
    border: none;
    padding: 0;
    outline: none;
    transition: transform var(--transition-normal) cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ícone */
.item-icon-wrapper {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-icon {
    font-size: 42px; /* Tamanho entre 38px e 44px */
    color: var(--color-primary-navy); /* Azul escuro padrão */
    transition: color var(--transition-fast) ease;
    line-height: 1;
    display: block;
}

/* Título */
.item-title {
    font-family: var(--font-primary);
    font-size: 1.125rem; /* 18px */
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Texto explicativo */
.item-description {
    font-family: var(--font-primary);
    font-size: 0.875rem; /* 14px */
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Hover e Focus (Navegação por teclado) */
.structure-item:hover,
.structure-item:focus-visible {
    transform: translateY(-3px); /* Elevação discreta de 3px */
}

/* Ícone muda para dourado no hover/focus */
.structure-item:hover .item-icon,
.structure-item:focus-visible .item-icon {
    color: var(--color-secondary-gold);
}

/* Foco de acessibilidade sutil */
.structure-item:focus-visible {
    outline: 2px solid var(--color-secondary-gold);
    outline-offset: 8px;
    border-radius: var(--border-radius-sm);
}

/* ==========================================================================
   Responsividade - Estrutura do Site
   ========================================================================== */

/* Notebooks / Desktops Menores */
@media (max-width: 1199px) {
    .structure-grid {
        gap: 24px; /* Reduz gap para comportar 5 colunas em telas menores */
    }
    
    .item-icon {
        font-size: 38px;
    }
    
    .item-title {
        font-size: 1rem;
    }
    
    .item-description {
        font-size: 0.813rem;
    }
}

/* Tablets (2 Colunas) */
@media (max-width: 991px) {
    .site-structure-section {
        padding-top: 40px;
        padding-bottom: 50px;
    }
    
    .section-header::before,
    .section-header::after {
        display: none; /* Oculta linhas laterais no mobile/tablet para evitar quebras */
    }
    
    .structure-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas */
        gap: 36px var(--spacing-md);
    }
    
    .structure-item {
        max-width: 320px;
        margin: 0 auto; /* Centraliza itens */
    }
}

/* Mobile (1 Coluna) */
@media (max-width: 575px) {
    .structure-grid {
        grid-template-columns: 1fr; /* 1 coluna */
        gap: 32px;
    }
    
    .structure-item {
        max-width: 380px;
        margin: 0 auto;
    }
}

/* ==========================================================================
   Seção: Instagram + Diferenciais do Projeto (Sprint 05)
   ========================================================================== */

.instagram-project-section {
    background-color: var(--color-background-light); /* Fundo geral claro */
    padding: 48px 0; /* Padding vertical confortável */
    overflow: hidden;
}

.instagram-project-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr; /* Coluna esquerda maior, coluna direita compacta */
    gap: 30px;
    align-items: stretch; /* Garante que ambas as colunas tenham a mesma altura */
    width: 100%;
}

/* Coluna Esquerda: Instagram (Fundo Cinza Claro) */
.instagram-box {
    background-color: #F4F5F7; /* Cinza claro */
    border-radius: var(--border-radius-md);
    padding: 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color var(--transition-normal);
}

.instagram-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.instagram-header-icon {
    width: 56px; /* Definido exatamente em 56px para nitidez premium */
    height: 56px;
    flex-shrink: 0;
    display: inline-block;
}

.instagram-title {
    font-family: var(--font-primary);
    font-size: 1.25rem; /* ~20px */
    font-weight: 700;
    color: var(--color-text-dark);
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0.5px;
}

.instagram-text {
    font-family: var(--font-primary);
    font-size: 0.875rem; /* 14px */
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0 0 24px 0;
}

/* Grid de Postagens */
.instagram-posts-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 colunas exatas no desktop */
    gap: 12px;
    margin-bottom: 28px;
}

.instagram-post-link {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    display: block;
    background-color: var(--color-primary-navy);
}

.instagram-post-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal) cubic-bezier(0.16, 1, 0.3, 1);
    display: block;
}

.instagram-post-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(229, 169, 60, 0.9); /* Dourado institucional com opacidade */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-normal) ease;
}

.instagram-post-overlay i {
    color: #FFFFFF;
    font-size: 20px;
}

/* Efeitos de Hover nas Fotos */
.instagram-post-link:hover .instagram-post-img,
.instagram-post-link:focus-visible .instagram-post-img {
    transform: scale(1.08); /* Zoom sutil */
}

.instagram-post-link:hover .instagram-post-overlay,
.instagram-post-link:focus-visible .instagram-post-overlay {
    opacity: 1; /* Exibe overlay dourado */
}

/* Botão Instagram */
.instagram-action {
    display: flex;
    justify-content: flex-start;
}

.instagram-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary-navy);
    border: 2px solid var(--color-primary-navy);
    border-radius: var(--border-radius-sm);
    background-color: transparent;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all var(--transition-fast) ease;
    text-decoration: none;
    outline: none;
}

.instagram-btn-icon {
    width: 18px; /* Ícone do botão com 18px */
    height: 18px;
    flex-shrink: 0;
    display: inline-block;
    border-radius: 4px;
}

.instagram-btn:hover,
.instagram-btn:focus-visible {
    background-color: var(--color-primary-navy);
    color: #FFFFFF;
}

.instagram-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(10, 17, 40, 0.2);
}

/* Coluna Direita: Diferenciais do Projeto (Card Azul Escuro) */
.project-benefits-box {
    background-color: var(--color-primary-navy); /* Azul escuro */
    border-radius: var(--border-radius-md);
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: var(--shadow-medium);
}

.benefits-title {
    font-family: var(--font-primary);
    font-size: 1.25rem; /* ~20px */
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 28px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 12px;
    display: inline-block;
}

/* Linha fina dourada abaixo do título */
.benefits-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--color-secondary-gold);
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espaçamento confortável */
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.benefit-icon {
    color: var(--color-secondary-gold); /* Check dourado */
    font-size: 18px;
    margin-top: 2px;
    line-height: 1;
}

.benefit-text {
    font-family: var(--font-primary);
    font-size: 0.938rem; /* 15px */
    color: #FFFFFF; /* Texto branco */
    line-height: 1.5;
}

/* ==========================================================================
   Responsividade - Seção Instagram + Diferenciais
   ========================================================================== */

/* Notebooks / Desktops Menores */
@media (max-width: 1199px) {
    .instagram-project-grid {
        grid-template-columns: 1.2fr 1fr;
        gap: 24px;
    }
    
    .instagram-box,
    .project-benefits-box {
        padding: 30px;
    }
    
    .instagram-posts-grid {
        gap: 8px;
    }
}

/* Tablets (Empilhamento) */
@media (max-width: 991px) {
    .instagram-project-grid {
        grid-template-columns: 1fr; /* Empilha colunas */
        gap: 30px;
    }
    
    .instagram-box {
        padding: 36px;
    }
    
    .project-benefits-box {
        padding: 36px;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .instagram-project-section {
        padding: 36px 0;
    }
    
    .instagram-box,
    .project-benefits-box {
        padding: 24px;
    }
    
    /* Quebra para 4 colunas de fotos no mobile para não espremer */
    .instagram-posts-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
    
    .benefit-text {
        font-size: 0.875rem;
    }
}

/* ==========================================================================
   Seção: Como Funciona Nossa Operação (Sprint 06)
   ========================================================================== */

.operation-section {
    background-color: #FFFFFF; /* Fundo branco limpo */
    padding: 60px 0 40px 0;
    overflow: hidden;
}

.operation-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colunas no desktop */
    gap: 30px;
    align-items: flex-start;
    width: 100%;
}

/* Card leve e limpo da etapa */
.operation-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0;
    background-color: transparent;
    border: none;
    outline: none;
    cursor: default;
}

/* Número da etapa em marca d'água dourada */
.operation-number {
    font-family: var(--font-primary);
    font-size: 2.5rem; /* ~40px */
    font-weight: 800;
    color: var(--color-secondary-gold); /* Laranja/Dourado institucional */
    opacity: 0.8; /* Opacidade maior para manter a cor laranja idêntica aos botões */
    margin-bottom: -5px; /* Afasta o ícone para baixo para não cobrir tanto os números */
    z-index: 1;
    line-height: 1;
    transition: opacity var(--transition-normal) ease;
}

/* Círculo do ícone */
.operation-icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #F4F5F7; /* Fundo cinza muito claro */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border: 1px solid rgba(10, 17, 40, 0.05);
    z-index: 2;
    position: relative;
    transition: background-color var(--transition-normal) ease,
                border-color var(--transition-normal) ease,
                transform var(--transition-normal) ease;
}

.operation-icon {
    font-size: 28px;
    color: var(--color-primary-navy); /* Ícone azul escuro padrão */
    transition: color var(--transition-fast) ease;
    line-height: 1;
    display: block;
}

/* Título do Card */
.operation-card-title {
    font-family: var(--font-primary);
    font-size: 1.125rem; /* 18px */
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Descrição */
.operation-card-text {
    font-family: var(--font-primary);
    font-size: 0.875rem; /* 14px */
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* Microinteração elegante no Hover */
.operation-card:hover .operation-icon-wrapper,
.operation-card:focus-within .operation-icon-wrapper {
    background-color: var(--color-secondary-gold); /* Fundo fica dourado */
    border-color: var(--color-secondary-gold);
    transform: translateY(-4px); /* Elevação de 4px */
}

.operation-card:hover .operation-icon,
.operation-card:focus-within .operation-icon {
    color: var(--color-primary-navy); /* Ícone fica azul escuro */
}

.operation-card:hover .operation-number,
.operation-card:focus-within .operation-number {
    opacity: 1; /* Destaque total (100% de opacidade) no hover */
}

/* Foco de acessibilidade sutil */
.operation-card:focus-within {
    outline: 2px solid var(--color-secondary-gold);
    outline-offset: 12px;
    border-radius: var(--border-radius-sm);
}

/* ==========================================================================
   Responsividade - Seção Como Funciona a Operação
   ========================================================================== */

/* Notebooks */
@media (max-width: 1199px) {
    .operation-grid {
        gap: 20px;
    }
    
    .operation-card-title {
        font-size: 1rem;
    }
    
    .operation-card-text {
        font-size: 0.813rem;
    }
}

/* Tablets (2 Colunas) */
@media (max-width: 991px) {
    .operation-section {
        padding: 50px 0 30px 0;
    }
    
    .operation-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas */
        gap: 40px 24px;
    }
    
    .operation-card {
        max-width: 280px;
        margin: 0 auto;
    }
}

/* Mobile (1 Coluna) */
@media (max-width: 575px) {
    .operation-grid {
        grid-template-columns: 1fr; /* 1 coluna */
        gap: 36px;
    }
}

/* ==========================================================================
   Seção: Nossos Valores (Sprint 07)
   ========================================================================== */

.values-section {
    background-color: #FFFFFF; /* Fundo branco e limpo */
    padding: 60px 0; /* Padding vertical confortável */
    overflow: hidden;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colunas no desktop */
    gap: 0; /* Gap zero para encaixar perfeitamente as linhas divisórias */
    align-items: stretch;
    width: 100%;
}

/* Bloco de Valor Individual */
.value-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 30px; /* Espaço horizontal generoso dentro de cada coluna */
    border-right: 1px solid rgba(10, 17, 40, 0.08); /* Divisor vertical sutil */
    background-color: transparent;
    border-top: none;
    border-bottom: none;
    border-left: none;
    outline: none;
    cursor: default;
    transition: transform var(--transition-normal) cubic-bezier(0.16, 1, 0.3, 1);
}

/* Remove a linha divisória do último elemento */
.value-item:last-child {
    border-right: none;
}

.value-icon-wrapper {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.value-icon {
    font-size: 40px; /* Ícone dourado grande e elegante */
    color: var(--color-secondary-gold); /* Dourado institucional */
    transition: transform var(--transition-normal) cubic-bezier(0.16, 1, 0.3, 1);
    line-height: 1;
    display: block;
}

.value-title {
    font-family: var(--font-primary);
    font-size: 1.25rem; /* ~20px */
    font-weight: 700;
    color: var(--color-primary-navy); /* Azul escuro institucional */
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.value-text {
    font-family: var(--font-primary);
    font-size: 0.875rem; /* 14px */
    color: var(--color-text-muted); /* Cinza escuro discreto */
    line-height: 1.5;
    margin: 0;
}

/* Microinteração de Hover */
.value-item:hover .value-icon,
.value-item:focus-within .value-icon {
    transform: scale(1.12); /* Zoom sutil do ícone */
}

/* Acessibilidade de foco de teclado */
.value-item:focus-visible {
    outline: 2px solid var(--color-secondary-gold);
    outline-offset: 8px;
    border-radius: var(--border-radius-sm);
}

/* ==========================================================================
   Responsividade - Seção Nossos Valores
   ========================================================================== */

/* Notebooks */
@media (max-width: 1199px) {
    .value-item {
        padding: 10px 15px; /* Reduz padding horizontal em telas médias */
    }
    
    .value-title {
        font-size: 1.125rem;
    }
    
    .value-text {
        font-size: 0.813rem;
    }
}

/* Tablets (2 Colunas) */
@media (max-width: 991px) {
    .values-section {
        padding: 50px 0;
    }
    
    .values-grid {
        grid-template-columns: repeat(2, 1fr); /* Grade 2x2 */
        gap: 36px 20px;
    }
    
    .value-item {
        border-right: none; /* Oculta divisores verticais no tablet */
        padding: 10px 20px;
        max-width: 320px;
        margin: 0 auto;
    }
}

/* Mobile (1 Coluna) */
@media (max-width: 575px) {
    .values-grid {
        grid-template-columns: 1fr; /* 1 coluna */
        gap: 30px;
    }
    
    .value-item {
        padding: 10px 0;
        max-width: 380px;
    }
}