/* ==========================================================
   REALEZA ACESSÓRIOS
   LAYOUT v0.2
   Containers + Grid + Estrutura Global
   /assets/css/layout.css
========================================================== */

/* ==========================================================
   CONTAINER PRINCIPAL
========================================================== */

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* ==========================================================
   CONTAINER REDUZIDO
========================================================== */

.container-sm {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* ==========================================================
   GRID
========================================================== */

.grid {
    display: grid;
    gap: 24px;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* ==========================================================
   FLEX
========================================================== */

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

/* ==========================================================
   HERO SECTION
========================================================== */

.hero-section {
    padding-top: 96px;
    padding-bottom: 96px;
}

.hero-content {
    max-width: 700px;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    margin-top: 32px;
}

/* ==========================================================
   PRODUTOS / CATEGORIAS / COLEÇÕES / DEPOIMENTOS
   Card fixo de 300px, mesmo padrão adotado na Home (2026-07-29,
   ver assets/css/home.css) — grade centralizada em vez de esticar
   pra preencher a largura toda, pra bater com o tamanho de card
   usado no resto do site.
========================================================== */

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 300px);
    justify-content: center;
    gap: 24px;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 300px);
    justify-content: center;
    gap: 24px;
}

.collections-grid {
    display: grid;
    grid-template-columns: repeat(3, 300px);
    justify-content: center;
    gap: 24px;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(4, 300px);
    justify-content: center;
    gap: 24px;
}

/* ==========================================================
   FAQ
========================================================== */

.faq-container {
    max-width: 900px;
    margin: 0 auto;
}

/* ==========================================================
   BREADCRUMB
========================================================== */

.breadcrumb {
    padding: 24px 0;
}

.breadcrumb ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
}

.breadcrumb li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-light);
}

.breadcrumb li:not(:last-child)::after {
    content: '/';
    color: var(--color-border);
}

.breadcrumb li a:hover {
    color: var(--color-primary);
}

.breadcrumb li:last-child {
    color: var(--color-text);
}

/* ==========================================================
   PÁGINAS INTERNAS
========================================================== */

.page-header {
    padding-top: 64px;
    padding-bottom: 64px;
    text-align: center;
    background: var(--color-secondary);
}

.page-header .section-badge {
    display: inline-flex;
}

.page-header p {
    max-width: 600px;
    margin: 12px auto 0;
    color: var(--color-text-light);
}

.page-content {
    padding-top: 64px;
    padding-bottom: 96px;
}

/* ==========================================================
   CARD DE CATEGORIA
   Sem foto (categorias ainda não têm imagem cadastrada) — ícone +
   nome + descrição, mesmo espírito visual do ".benefit-card" da Home.
========================================================== */

.category-card {
    display: block;
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    padding: var(--space-32) var(--space-24);
    text-align: center;
    box-shadow: var(--shadow-default);
    transition: var(--transition-default);
}

.category-card:hover {
    transform: translateY(-4px);
}

/* .icon-circle é o PADRÃO deste projeto pra ícone único centralizado
   (2026-08-01, print 10 do Luciano — ícones dos cards de contato.php
   apareciam encostados à esquerda em vez de centralizados). Nasceu
   como ".category-card-icon" (categorias.php) e virou componente
   compartilhado — centraliza de verdade via flexbox (não depende de
   `text-align` do elemento pai, que é frágil quando o ícone vira
   `display:block`, como estava acontecendo em contato.php). Qualquer
   card novo com ícone único deve usar `.icon-circle`, não reinventar. */
.category-card-icon,
.icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-16);
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--color-primary);
    font-size: 24px;
}

.category-card h3 {
    margin-bottom: var(--space-8);
}

.category-card p {
    font-size: 15px;
    color: var(--color-text-light);
    margin-bottom: var(--space-16);
}

.category-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--color-primary);
    font-size: 15px;
}

/* ==========================================================
   GRADE DE BENEFÍCIOS / VALORES
   Componente compartilhado — nasceu só na Home (home.css) e "vazou"
   pra sobre.php sem CSS nenhum junto (2026-08-01, print 08 do
   Luciano: cards colados, sem grid/gap/sombra, porque sobre.php não
   carrega home.css). Centralizado aqui pra qualquer página poder usar
   `.benefits-grid`/`.benefit-card` sem precisar puxar home.css inteiro.
========================================================== */

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.benefit-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
    box-shadow: var(--shadow-default);
    transition: var(--transition-default);
}

.benefit-card:hover {
    transform: translateY(-4px);
}

/* Ícone do .benefit-card usa o componente compartilhado `.icon-circle`
   (ver comentário acima, junto da definição) — não estilizar `i`
   direto aqui, mesma lição do print 10 (contato.php). */

.benefit-card h3 {
    margin-bottom: 12px;
}

.benefit-card p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-light);
    margin: 0;
}

/* ==========================================================
   CTA FINAL
   Componente compartilhado — nasceu como ".sobre-cta" só em sobre.css
   (2026-08-01) e foi promovido pra cá no mesmo lote das páginas
   institucionais novas (duvidas/contato/trocas/política/rastreamento),
   mesma lição do ".benefits-grid" logo acima: componente usado por
   mais de uma página vive em layout.css, não no CSS de uma página só.
========================================================== */

.cta-final {
    padding-top: 64px;
    padding-bottom: 96px;
    text-align: center;
    background: var(--color-secondary);
}

.cta-final h2 {
    margin-bottom: 24px;
}

/* ==========================================================
   ESTADO VAZIO
   Usado sempre que uma listagem (categoria, coleção, busca) não tem
   nenhum resultado — nunca deixar a página em branco sem explicação.
========================================================== */

.empty-state {
    text-align: center;
    padding: 64px 24px;
    color: var(--color-text-light);
}

.empty-state i {
    font-size: 40px;
    color: var(--color-border);
    margin-bottom: 16px;
    display: block;
}

/* ==========================================================
   UTILITÁRIOS
========================================================== */

.w-100 {
    width: 100%;
}

.mt-16 {
    margin-top: 16px;
}

.mt-24 {
    margin-top: 24px;
}

.mt-32 {
    margin-top: 32px;
}

.mt-48 {
    margin-top: 48px;
}

.mb-16 {
    margin-bottom: 16px;
}

.mb-24 {
    margin-bottom: 24px;
}

.mb-32 {
    margin-bottom: 32px;
}

.mb-48 {
    margin-bottom: 48px;
}

/* ==========================================================
   RESPONSIVO — GRIDS (TABLET ≤991px / MOBILE ≤600px)
   Vale pra qualquer página futura que usar estas classes de grid
   (listagem de produtos, categorias, coleções, depoimentos etc.) —
   nasce responsiva desde já, sem precisar lembrar depois.
========================================================== */

@media (max-width: 991px) {

    .grid-3,
    .grid-4,
    .products-grid,
    .categories-grid,
    .collections-grid,
    .testimonials-grid,
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .grid-2,
    .grid-3,
    .grid-4,
    .products-grid,
    .categories-grid,
    .collections-grid,
    .testimonials-grid,
    .benefits-grid {
        grid-template-columns: 1fr;
    }

    .container,
    .container-sm {
        padding-left: 16px;
        padding-right: 16px;
    }

    .hero-section {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .page-content {
        padding-top: 40px;
        padding-bottom: 56px;
    }

    .cta-final {
        padding-top: 40px;
        padding-bottom: 56px;
    }

}