/* =========================================================
   CriAromas — páginas de segmento
   Depende de tokens.css, site.css e projetos.css
   ========================================================= */

/* ---------- prova com clientes ---------- */
.prova-seg{max-width:820px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem);text-align:center}
.prova-seg p{margin-top:1.1rem;font-size:1.12rem;line-height:1.75;color:var(--color-text-soft)}
.prova-seg strong{color:var(--color-text);font-weight:600}

.logos-seg{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
   max-width:1180px;margin:2.6rem auto 0;padding:0 clamp(1.25rem,4vw,3rem)}
.logos-seg div{flex:0 0 150px;display:flex;align-items:center;justify-content:center;padding:.5rem .4rem}
.logos-seg img{height:96px;width:auto;max-width:100%;object-fit:contain;mix-blend-mode:multiply;
   filter:grayscale(1) contrast(1.3);transition:filter var(--transition-fast)}
.logos-seg img:hover{filter:grayscale(0)}

/* ---------- o problema técnico ---------- */
.problema-seg{max-width:680px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
.problema-seg p{font-size:1.05rem;line-height:1.78;color:var(--color-text-soft)}
.problema-seg p + p{margin-top:1.2rem}

/* ---------- equipamentos indicados ---------- */
.equip-seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem;
   max-width:1000px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
.equip-seg article{background:var(--color-background);border-radius:var(--radius-md);
   padding:2rem 1.9rem;display:flex;flex-direction:column}
.equip-seg h3{font-size:1.2rem}
.equip-seg .spec{font-family:var(--font-interface);font-size:.75rem;letter-spacing:.08em;
   text-transform:uppercase;color:var(--color-brand);margin-top:.45rem}
.equip-seg p{margin-top:.9rem;font-size:.93rem;line-height:1.65;color:var(--color-text-soft)}

@media(max-width:640px){
  .logos-seg div{flex:0 0 33%}
  .logos-seg img{height:64px}
}

/* =========================================================
   O DESAFIO DESTE AMBIENTE
   Decisao do dono em 24/08/2026: texto a esquerda, foto a direita,
   os dois dentro do container. A versao que sangrava ate a borda foi
   descartada: a foto estourada, alinhada so pela direita, ficava feia.
   ========================================================= */
.desafio{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);
   align-items:center;max-width:var(--container);margin:0 auto;
   padding:0 clamp(1.25rem,4vw,3rem)}
.desafio .txt{order:1}
.desafio .foto{order:2}
.desafio img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
   border-radius:var(--radius-md)}
.desafio .eyebrow{display:block;margin-bottom:.9rem}
.desafio h2{font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.18;
   margin-bottom:1.4rem;text-wrap:balance}
.desafio p{font-size:1.05rem;line-height:1.78;color:var(--color-text-soft)}
.desafio p + p{margin-top:1.2rem}

@media(max-width:820px){
  .desafio{grid-template-columns:1fr;gap:1.8rem}
  .desafio .txt{order:2}
  .desafio .foto{order:1}
  .desafio img{aspect-ratio:16/10}
}

/* ---------- equipamento: faixa oliva com os cartoes por cima ----------
   A pagina de segmento era creme do inicio ao fim e por isso parecia
   plana. A home ganha ritmo alternando com o oliva; aqui o bloco do
   equipamento assume esse papel. */
.equip-faixa{background:var(--color-brand-deep)}
.equip-faixa .sec-head .eyebrow{color:#cfd7bb}
.equip-faixa .sec-head h2{color:var(--color-cream-on-dark)}
.equip-faixa .sec-head h2 em{color:#fff}
.equip-faixa .sec-head p{color:#f0ead9}
.equip-faixa .equip-seg article{background:var(--color-background);padding:0;overflow:hidden;
   border-radius:var(--radius-md);display:flex;flex-direction:column}
.equip-faixa .equip-seg article img{width:100%;aspect-ratio:3/4;object-fit:cover;
   object-position:center;display:block}
.equip-faixa .equip-seg article .corpo{padding:1.6rem 1.7rem 1.8rem;display:flex;flex-direction:column;flex:1}