/* =========================================================
   CriAromas — estilos das páginas Sobre e Contato
   Depende de tokens.css, site.css e projetos.css
   ========================================================= */

/* ---------- hero compacto, sem foto (Contato) ---------- */
.hero-compacto{background:var(--color-brand-deep);color:var(--color-cream-on-dark);padding-bottom:clamp(3.5rem,7vw,5.5rem)}
.hero-compacto .interno{max-width:var(--container);margin:0 auto;padding:clamp(4.5rem,9vw,6.5rem) clamp(1.25rem,4vw,3rem) 0;text-align:center}
.hero-compacto h1{color:#fff;font-size:var(--text-display);text-wrap:normal;margin-top:.8rem}
.hero-compacto h1 em{color:#d9e2c2;font-style:italic}
.hero-compacto p{color:var(--color-cream-on-dark);max-width:52ch;margin:1.2rem auto 0}
.hero-compacto .eyebrow{color:#cfd7bb}

/* ---------- manifesto em duas colunas ---------- */
.manifesto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,3.6rem);
   max-width:960px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
.manifesto p{color:var(--color-text-soft);margin-top:0}
.manifesto p + p{margin-top:1.1rem}
.manifesto strong{color:var(--color-text);font-weight:600}
@media(max-width:760px){.manifesto{grid-template-columns:1fr;gap:1.1rem}}

/* ---------- linha de equipamentos ---------- */
.equip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem;
   max-width:var(--container);margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
.equip article{background:var(--color-background);border-radius:var(--radius-md);padding:0;
   overflow:hidden;display:flex;flex-direction:column}
.equip article img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.equip article .corpo{padding:1.5rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.equip h3{font-size:1.15rem}
.equip .uso{font-size:.9rem;line-height:1.6;color:var(--color-text-soft);margin-top:.5rem;flex:1}
.equip dl{margin:1.2rem 0 0;border-top:1px solid var(--color-border);padding-top:.9rem;
   font-family:var(--font-interface);font-size:.82rem}
.equip dl div{display:flex;justify-content:space-between;gap:.8rem;padding:.32rem 0}
.equip dt{color:var(--color-text-muted)}
.equip dd{margin:0;color:var(--color-text);font-variant-numeric:tabular-nums}
.nota-equip{text-align:center;margin-top:2rem;font-family:var(--font-interface);font-size:.82rem;
   line-height:1.6;color:var(--color-text-muted);max-width:62ch;margin-left:auto;margin-right:auto;
   padding:0 clamp(1.25rem,4vw,3rem)}

/* ---------- comparativo de dois caminhos ---------- */
.comparativo{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;max-width:1040px;margin:0 auto;
   padding:0 clamp(1.25rem,4vw,3rem)}
.comparativo article{border-radius:var(--radius-md);padding:2rem 1.9rem}
.comparativo .comum{background:var(--color-surface)}
.comparativo .nosso{background:var(--color-brand-deep);color:#fff}
.comparativo .nosso h3,.comparativo .nosso .rot{color:#fff}
.comparativo .nosso p{color:var(--color-cream-on-dark)}
.comparativo .rot{font-family:var(--font-interface);font-size:.75rem;letter-spacing:.14em;
   text-transform:uppercase;color:var(--color-text-muted)}
.comparativo h3{font-size:1.3rem;margin-top:.6rem}
.comparativo p{margin-top:.9rem;font-size:.95rem;line-height:1.65;color:var(--color-text-soft)}
.comparativo svg{width:100%;height:56px;margin-top:1.4rem;display:block}
@media(max-width:760px){.comparativo{grid-template-columns:1fr}}

/* ---------- canais de contato ---------- */
.canais{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;
   max-width:var(--container);margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
.canais a,.canais div{background:var(--color-background);border-radius:var(--radius-md);
   padding:1.9rem 1.7rem;display:flex;flex-direction:column;gap:.55rem;text-decoration:none;
   border:1px solid transparent;transition:border-color .3s ease,transform .3s cubic-bezier(.22,.61,.36,1)}
.canais a:hover{border-color:rgba(107,122,74,.45);transform:translateY(-2px)}
.canais .ico{width:30px;height:30px;color:var(--color-brand);stroke-width:1.5}
.canais .rot{font-family:var(--font-interface);font-size:.75rem;letter-spacing:.14em;
   text-transform:uppercase;color:var(--color-text-muted);margin-top:.4rem}
.canais .valor{font-size:1.08rem;color:var(--color-text);line-height:1.4}
.canais .obs{font-size:.85rem;color:var(--color-text-soft);line-height:1.55}

/* ---------- dois caminhos de contato ---------- */
.caminhos{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;max-width:1000px;margin:0 auto;
   padding:0 clamp(1.25rem,4vw,3rem)}
.caminhos article{background:var(--color-surface);border-radius:var(--radius-md);padding:2.2rem 2rem;
   display:flex;flex-direction:column}
.caminhos h3{font-size:1.35rem;margin-top:.6rem}
.caminhos p{margin-top:.8rem;font-size:.95rem;line-height:1.65;color:var(--color-text-soft);flex:1}
.caminhos .btn{margin-top:1.6rem;align-self:flex-start}
@media(max-width:760px){.caminhos{grid-template-columns:1fr}}

/* ---------- dados da empresa ---------- */
.dados-empresa{max-width:var(--container);margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem);
   display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem 2.4rem;
   font-family:var(--font-interface);font-size:.88rem;line-height:1.65}
.dados-empresa dt{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted)}
.dados-empresa dd{margin:.4rem 0 0;color:var(--color-text-soft)}

@media(max-width:900px){
  .equip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .canais{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dados-empresa{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .equip,.canais,.dados-empresa{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .canais a{transition:none}
}

/* ---------- linha de equipamentos em faixa oliva ----------
   Mesmo tratamento das paginas de segmento: a faixa quebra o creme no
   meio da pagina e da peso ao bloco que explica o equipamento. Os
   cartoes ficam claros por cima, com foto, texto e ficha tecnica. */
.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 .nota-equip{color:#e6dfd0}