/* Componentes específicos da Home: busca, título de seção, cards de blog, mapa */

.busca-home{
    background: var(--cor-linho-2);
    border-radius: var(--raio-lg);
    padding: var(--espaco-md) var(--espaco-lg);
    display: flex;
    align-items: center;
    gap: var(--espaco-sm);
    max-width: 720px;
    margin: 0 auto;
}
.busca-home input[type="search"]{
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: var(--espaco-sm) 0;
    font-size: var(--texto-md);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.busca-home input[type="search"]:focus{
    outline: none;
    box-shadow: none;
}
.busca-home button{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--cor-mata);
}
.busca-home button svg{ width: 22px; height: 22px; }

@media (max-width: 600px){
    .busca-home{
        margin-inline: var(--espaco-lg);
        padding: var(--espaco-sm) var(--espaco-md);
    }
}

/* ===== Barra de confiança sólida (referência: Purelis Beauty, 21/07/2026) =====
   Antes era ícone solto direto no fundo creme, sem nenhum bloco de cor —
   achado do próprio Ricardo ("tá faltando verde"). Agora é uma seção
   full-width em --cor-mata sólido, texto/ícone branco, igual ao padrão da
   referência (barra "Free Shipping / Returns / Secure Checkout"). */
.secao-confianca{
    background: var(--cor-mata);
    /* Barra mais fina (pedido do Ricardo, 24/07/2026): padding-block
       reduzido de --espaco-lg (ate 32px) pra --espaco-sm (12px fixo). */
    padding-block: var(--espaco-sm);
}
/* Barra rolando lateralmente em loop (pedido do Ricardo, 24/07/2026, "tipo
   um letreiro correndo na tela"). CSS puro: @keyframes translateX(-50%) em
   loop infinito na trilha, que tem os itens duplicados 1x (ver
   front-page.php) — como translateX(-50%) desloca exatamente a largura de
   UM conjunto de itens, o reinicio do loop cai em cima do conjunto
   duplicado identico, sem salto visivel. Nao depende de scroll nem de JS,
   mesma familia de risco baixo da animacao de entrada da hero. */
.faixa-confianca{
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.faixa-confianca__trilha{
    display: flex;
    width: max-content;
    gap: var(--espaco-2xl);
    animation: faixaConfiancaMarquee 24s linear infinite;
}
.faixa-confianca:hover .faixa-confianca__trilha{
    animation-play-state: paused;
}
@keyframes faixaConfiancaMarquee{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
    .faixa-confianca__trilha{ animation: none; }
    .faixa-confianca{ overflow-x: auto; }
}
.faixa-confianca__item{
    display: flex;
    align-items: center;
    gap: var(--espaco-sm);
    flex-shrink: 0;
    white-space: nowrap;
    padding-inline: var(--espaco-lg);
}
.faixa-confianca__item .icone{
    width: 1.4rem;
    height: 1.4rem;
    color: var(--cor-branco);
    flex-shrink: 0;
}
.faixa-confianca__item strong{
    display: block;
    font-size: var(--texto-sm);
    color: var(--cor-branco);
}
.faixa-confianca__item span{
    display: block;
    font-size: var(--texto-xs);
    color: rgba(255, 255, 255, 0.75);
}

.secao-titulo{
    text-align: center;
    margin-bottom: var(--espaco-2xl);
}
.secao-titulo h2{
    font-size: var(--texto-2xl);
}

.grade-blog{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--espaco-lg);
}
.blog-card{
    display: flex;
    flex-direction: column;
}
.blog-card__imagem{
    aspect-ratio: 4 / 3;
    border-radius: var(--raio-md);
    overflow: hidden;
    margin-bottom: var(--espaco-md);
}
.blog-card__imagem img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.blog-card:hover .blog-card__imagem img{
    transform: scale(1.05);
}
.blog-card__titulo{
    font-size: var(--texto-lg);
    margin-bottom: var(--espaco-xs);
}
.blog-card__resumo{
    color: var(--cor-cacau-70);
    font-size: var(--texto-sm);
}

/* ===== Complemento do card de blog (item 1 do swarm de Fase 2, 23/07/2026) =====
   .blog-card já existia (Home "Últimos artigos" e resultados de Busca), mas
   sem data nem chamada de leitura. As duas classes abaixo completam o mesmo
   card e passam a ser usadas em três lugares: a listagem /blog/ (index.php),
   o post único (single.php, como data de publicação avulsa) e os "Mais
   artigos" do rodapé do post (single.php, dentro do card). */
.blog-card__data{
    display: block;
    font-size: var(--texto-xs);
    color: var(--cor-cacau-70);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: var(--espaco-2xs);
}
.blog-card__leia-mais{
    display: inline-block;
    margin-top: var(--espaco-xs);
    font-size: var(--texto-sm);
    font-weight: 700;
    color: var(--cor-mata);
}
.blog-card:hover .blog-card__leia-mais{
    color: var(--cor-terracota);
}

.mapa-secao iframe{
    width: 100%;
    height: 400px;
    border: none;
    border-radius: var(--raio-md);
}

/* =====================================================================
   Vitrine de categoria: cartões grandes com as categorias reais do
   catálogo (top por contagem de produtos, ver front-page.php). Classes
   próprias (não reaproveita .produto-card, que outro agente edita em
   paralelo em product-card.css) para evitar conflito entre agentes.
   ===================================================================== */
/* Redesenho de 24/07/2026 (Ricardo: "muito generico, quer mais minimalista
   e bonito" — substitui a grade de 4 cartoes identicos icone+titulo+
   contagem por uma lista editorial: nome grande, regua fina, contagem+seta
   a direita. Miniatura so aparece quando a categoria tem foto real
   cadastrada; sem foto, e so tipografia, sem bloco de cor generico nem
   icone repetido. */
.vitrine-categoria-lista{
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--vidro-borda-escura);
}
.vitrine-categoria-linha{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-lg);
    padding-block: var(--espaco-lg);
    padding-inline: var(--espaco-md);
    margin-inline: calc(var(--espaco-md) * -1);
    border-bottom: 1px solid var(--vidro-borda-escura);
    /* Achado do detector mecanico do impeccable: animar padding-left causa
       layout thrash (reflow a cada frame). Trocado por transform:translateX,
       que so mexe em compositing, mesmo efeito visual de "deslizar", sem o
       custo de performance. O padding-inline fixo acima (nao mais 0->md)
       so reserva o espaco que o texto ocupa quando desliza, pra nao
       cortar contra a borda do container. */
    transform: translateX(0);
    transition: transform 0.25s ease, background 0.25s ease;
}
.vitrine-categoria-linha:hover{
    transform: translateX(var(--espaco-xs));
    background: var(--cor-linho-2);
}
.vitrine-categoria-linha__miolo{
    display: flex;
    align-items: center;
    gap: var(--espaco-lg);
    min-width: 0;
}
.vitrine-categoria-linha__miniatura{
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: var(--raio-md);
    overflow: hidden;
}
.vitrine-categoria-linha__miniatura img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vitrine-categoria-linha__nome{
    font-family: var(--fonte-display);
    font-size: var(--texto-xl);
    color: var(--cor-cacau);
    transition: color 0.25s ease;
}
.vitrine-categoria-linha:hover .vitrine-categoria-linha__nome{
    color: var(--cor-mata);
}
.vitrine-categoria-linha__direita{
    display: flex;
    align-items: center;
    gap: var(--espaco-md);
    flex-shrink: 0;
}
.vitrine-categoria-linha__contagem{
    font-size: var(--texto-sm);
    color: var(--cor-cacau-70);
    white-space: nowrap;
}
.vitrine-categoria-linha__seta{
    width: 20px;
    height: 20px;
    color: var(--cor-terracota);
    transition: transform 0.25s ease;
}
.vitrine-categoria-linha:hover .vitrine-categoria-linha__seta{
    transform: translateX(4px);
}
@media (max-width: 600px){
    .vitrine-categoria-linha__contagem{ display: none; }
    .vitrine-categoria-linha__miniatura{ width: 48px; height: 48px; }
    .vitrine-categoria-linha__nome{ font-size: var(--texto-lg); }
}

/* =====================================================================
   Chamada para Terapias: cross-sell do serviço (a Home só tinha vitrine
   de produto, faltava puxar visitante pra página de Terapias já existente).
   Reestruturado em 2 colunas em 21/07/2026 (referência: Purelis Beauty,
   bloco de fidelidade) — card sólido + diferenciais reais ao lado. NÃO é um
   programa de pontos/recompensa (a EQMS não tem isso), só reaproveita o
   padrão visual com conteúdo real que já existia.
   ===================================================================== */
.secao-cta-terapias{
    background: var(--cor-linho);
}
/* Redesenho de 24/07/2026 (Ricardo: "mesma coisa aqui" — mesmo padrao de
   cartao-dentro-de-cartao do bloco de categoria). Antes eram 2 superficies
   separadas (verde solido + bege solido) lado a lado; agora e UMA
   superficie so, verde, conteudo de um lado e lista tipografica do outro.
   Sem eyebrow "TERAPIAS" acima do titulo (o titulo carrega a informacao
   sozinho) e sem icone-em-circulo nos 3 diferenciais (viravam cartao
   repetido dentro do bloco bege antigo). */
.cta-terapias-bloco{
    background: var(--cor-mata);
    border-radius: var(--raio-lg);
    padding: var(--espaco-2xl);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--espaco-2xl);
    align-items: center;
}
@media (max-width: 900px){
    .cta-terapias-bloco{
        grid-template-columns: 1fr;
        padding: var(--espaco-xl);
        gap: var(--espaco-lg);
    }
}

.cta-terapias-conteudo__titulo{
    font-size: var(--texto-2xl);
    color: var(--cor-branco);
    margin-bottom: var(--espaco-md);
}
.cta-terapias-conteudo__texto{
    font-size: var(--texto-md);
    color: rgba(255, 255, 255, 0.85);
    max-width: 46ch;
    margin-bottom: var(--espaco-lg);
}

.cta-terapias-lista{
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.cta-terapias-lista__item{
    padding-block: var(--espaco-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.cta-terapias-lista__item strong{
    display: block;
    font-family: var(--fonte-display);
    font-size: var(--texto-md);
    color: var(--cor-branco);
    margin-bottom: 2px;
}
.cta-terapias-lista__item span{
    display: block;
    font-size: var(--texto-sm);
    color: rgba(255, 255, 255, 0.7);
}

/* =====================================================================
   Depoimento: estrutura visual pronta pra receber prova social real.
   Conteúdo abaixo é placeholder marcado (ver TODO em front-page.php),
   nunca fabricar depoimento de cliente.
   ===================================================================== */
.depoimento-home{
    max-width: var(--largura-container-estreito);
    margin: 0 auto;
    text-align: center;
    padding-top: var(--espaco-md);
}
.depoimento-home__aspas{
    display: inline-flex;
    width: 2.5rem;
    height: 2rem;
    color: var(--cor-salvia);
    margin-bottom: var(--espaco-sm);
}
.depoimento-home__foto{
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--cor-linho-2);
    color: var(--cor-musgo);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--espaco-sm);
}
.depoimento-home__foto svg{
    width: 32px;
    height: 32px;
}
.depoimento-home__estrelas{
    display: flex;
    justify-content: center;
    gap: var(--espaco-2xs);
    color: var(--cor-terracota);
    margin-bottom: var(--espaco-md);
}
.depoimento-home__estrelas svg{
    width: 18px;
    height: 18px;
}
.depoimento-home__texto{
    font-family: var(--fonte-display);
    font-size: var(--texto-lg);
    font-style: italic;
    color: var(--cor-cacau);
    margin-bottom: var(--espaco-md);
}
.depoimento-home__nome{
    font-weight: 700;
    color: var(--cor-cacau-70);
    margin-bottom: var(--espaco-md);
}

/* =====================================================================
   Newsletter: captura de e-mail, back-end de envio pendente de decisão
   (ver TODO em front-page.php). Só estrutura visual por enquanto.
   ===================================================================== */
.secao-newsletter{
    background: var(--cor-cacau);
}
.newsletter-home{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-xl);
    flex-wrap: wrap;
}
.newsletter-home__texto{
    flex: 1 1 320px;
}
.newsletter-home__titulo{
    color: var(--cor-branco);
    font-size: var(--texto-xl);
    margin-bottom: var(--espaco-xs);
}
.newsletter-home__subtitulo{
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--texto-sm);
}
.newsletter-home__form{
    display: flex;
    gap: var(--espaco-sm);
    flex: 1 1 380px;
    background: var(--cor-branco);
    border-radius: var(--raio-pill);
    padding: var(--espaco-2xs);
}
.newsletter-home__form input{
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: var(--espaco-sm) var(--espaco-md);
    font-size: var(--texto-base);
}
.newsletter-home__form input:focus{
    outline: none;
}
.newsletter-home__aviso{
    flex-basis: 100%;
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--texto-sm);
    margin-top: var(--espaco-xs);
}
@media (max-width: 768px){
    .newsletter-home{
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .newsletter-home__form{
        flex-direction: column;
        border-radius: var(--raio-md);
    }
    .newsletter-home__form .btn{
        width: 100%;
    }
}