/* about.css — secoes da pagina About, carregado so na pagina.
   Extraido de overrides.css (Fase 2). */


        /* About valores — card flat */
        .kametas-about-valores__card.kametas-card {
            border-left: 2px solid var(--cor-cta) !important;
            border-radius: 0 !important;
            text-align: left !important;
        }

        /* About historia — blocos texto/foto */
        .kametas-about-historia__bloco {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
            margin-bottom: 80px;
        }

        /* Reset do direction:rtl herdado do style.css antigo */
        .kametas-about-historia__bloco,
        .kametas-about-historia__bloco--reverse {
            direction: ltr !important;
        }

        /* Garante ordem natural nos blocos normais */
        .kametas-about-historia__bloco
        .kametas-about-historia__texto {
            order: 1 !important;
        }

        .kametas-about-historia__bloco
        .kametas-about-historia__foto-wrap {
            order: 2 !important;
        }

        /* Blocos reverse: foto à esquerda, texto à direita */
        .kametas-about-historia__bloco--reverse
        .kametas-about-historia__foto-wrap {
            order: 1 !important;
        }

        .kametas-about-historia__bloco--reverse
        .kametas-about-historia__texto {
            order: 2 !important;
        }
        .kametas-about-historia__foto-wrap img {
            width: 100%;
            height: 500px;
            object-fit: cover;
            object-position: top;
            border-radius: 2px;
            display: block;
            float: none;
        }

        /* Bloco RAIZ — texto largo, foto vertical menor */
        .kametas-about-historia__bloco--raiz {
            grid-template-columns: 1.7fr 1fr !important;
            align-items: center !important;
        }

        /* Texto do bloco raiz — fonte maior no desktop */
        .kametas-about-historia__bloco--raiz
        .kametas-about-historia__texto p {
            font-size: 1.15rem !important;
            line-height: 1.85 !important;
        }

        .kametas-about-historia__bloco--raiz
        .kametas-about-historia__foto-wrap--vertical {
            display: flex !important;
            justify-content: center !important;
        }

        .kametas-about-historia__bloco--raiz
        .kametas-about-historia__foto-wrap--vertical img {
            height: auto !important;
            width: 100% !important;
            max-width: 360px !important;
            max-height: none !important;
            object-fit: contain !important;
            object-position: center !important;
            margin: 0 auto !important;
            border-radius: 2px !important;
        }

        /* About — espaçamento entre seções e blocos */
        .kametas-about-historia {
            padding: 80px 0;
        }

        /* h2/h3 agora vivem dentro da coluna de texto (__texto), logo acima do
           parágrafo da história — margem menor para ficarem junto do texto. */
        .kametas-about-historia h2 {
            font-size: clamp(1.8rem, 3.5vw, 2.4rem);
            font-weight: 700;
            color: var(--cor-realce);  /* fogo escuro — mais legível que o vivo em título grande */
            margin: 0 0 16px;
        }

        .kametas-about-historia__subtitulo {
            font-size: clamp(1.3rem, 2.5vw, 1.8rem);
            font-weight: 700;
            color: var(--cor-realce);
            margin: 0 0 16px;
        }@media (max-width: 768px) {

            .kametas-about-historia__subtitulo {
                margin: 0 0 14px;
            }
}


        .kametas-about-historia__bloco:last-of-type {
            margin-bottom: 0;
        }

        .kametas-about-historia__final {
            max-width: 800px;
            margin: 48px auto 0;
            text-align: center;
            padding: 40px 0 0;
            border-top: 1px solid rgba(0,0,0,0.06);
        }

        .kametas-about-historia__final p {
            font-size: 1.1rem;
            line-height: 1.8;
            font-style: italic;
            color: #1C1C1C;
            margin: 0;
        }@media (max-width: 768px) {

            /* Bloco normal: foto sobe antes do texto */
            .kametas-about-historia__bloco {
                grid-template-columns: 1fr;
                gap: 32px;
                direction: ltr;
            }

            /* Bloco reverso: reseta direction e
               força foto sempre primeiro */
            .kametas-about-historia__bloco--reverse {
                direction: ltr;
            }

            /* Raiz no mobile — volta para coluna única */
            .kametas-about-historia__bloco--raiz {
                grid-template-columns: 1fr !important;
                align-items: start !important;
            }

            /* Fonte volta ao normal no mobile */
            .kametas-about-historia__bloco--raiz
            .kametas-about-historia__texto p {
                font-size: 1rem !important;
                line-height: 1.75 !important;
            }

            /* Foto do raiz acima do texto no mobile */
            .kametas-about-historia__bloco--raiz
            .kametas-about-historia__foto-wrap--vertical {
                order: 1 !important;
            }

            .kametas-about-historia__bloco--raiz
            .kametas-about-historia__texto {
                order: 2 !important;
            }

            .kametas-about-historia__bloco--raiz
            .kametas-about-historia__foto-wrap--vertical img {
                max-width: 300px !important;
                max-height: none !important;
            }

            /* Mobile: foto sempre acima do texto em todos os blocos */
            .kametas-about-historia__bloco
            .kametas-about-historia__foto-wrap,
            .kametas-about-historia__bloco--reverse
            .kametas-about-historia__foto-wrap {
                order: 1 !important;
            }

            .kametas-about-historia__bloco
            .kametas-about-historia__texto,
            .kametas-about-historia__bloco--reverse
            .kametas-about-historia__texto {
                order: 2 !important;
            }

            .kametas-about-historia__foto-wrap img {
                height: 300px;
            }

            /* Mobile — espaço entre foto e texto */
            .kametas-about-historia__foto-wrap {
                margin-bottom: 24px;
            }

            .kametas-about-historia__foto-wrap img {
                margin-bottom: 0;
            }

            .kametas-about-historia {
                padding: 48px 0;
            }
}

        /* =====================================================
           CTA "Shop Now" sobre o painel de BRASA — outline branco
           que preenche branco no hover (texto fogo). Restaura o
           desenho de style.css, que perdia para o .kametas-btn base
           !important do overrides.css. about.css carrega DEPOIS do
           overrides -> empate de !important resolvido pela ordem.
           Branco sobre brasa = AA em todos os stops (pior 4.57:1);
           texto fogo sobre branco no hover = 7.19:1.
           ===================================================== */
        .kametas-about-cta .kametas-btn {
            background-color: transparent !important;
            color: #fff !important;
            border: 2px solid #fff !important;
            padding: 12px 36px !important; /* -2px compensa a borda */
        }
        .kametas-about-cta .kametas-btn.kametas-btn:hover,
        .kametas-about-cta .kametas-btn.kametas-btn:focus {
            background-color: #fff !important;
            color: var(--cor-cta-hover) !important;
            border-color: #fff !important;
            box-shadow: var(--sombra-md) !important;
            transform: translateY(-1px) !important;
        }