/* ── page-product-rich.css ────────────────────────────────────
   Shell para páginas de Produto com aprofundamento (múltiplas
   seções, tabelas, timeline). Reaproveita os tokens do site
   (Bricolage Grotesque + Inter, #142540 / #f05162 / #f5f5f5) —
   carregar depois de page-simple.css. */

.seg-section { padding: 80px 0; }
.seg-section--white { background: #fff; }
.seg-section--cream { background: #f5f5f5; }

.seg-container { max-width: 1000px; margin: 0 auto; padding: 0 40px; }
@media(max-width: 640px) { .seg-container { padding: 0 20px; } .seg-section { padding: 56px 0; } }

.seg-eyebrow {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(20, 37, 64, .45); margin-bottom: 16px; display: block;
}

.seg-title {
  font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(28px, 3.6vw, 40px); font-weight: 700;
  color: #142540; line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 14px;
}

.seg-subtitle { font-family: 'Inter', sans-serif; font-size: 15px; color: rgba(20, 37, 64, .6); line-height: 1.65; max-width: 620px; }

.seg-section-cta {
  display: inline-flex; align-items: center; gap: 6px; font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px; font-weight: 700; color: #142540; text-decoration: none; margin-top: 32px;
}
.seg-section-cta:hover { opacity: .7; }

/* grids + cards (mesma linguagem visual da home) */
.seg-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 36px; }
@media(max-width: 700px) { .seg-grid-2 { grid-template-columns: 1fr; } }
.seg-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 36px; }
@media(max-width: 800px) { .seg-grid-3 { grid-template-columns: 1fr; } }
.seg-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media(max-width: 900px) { .seg-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 500px) { .seg-grid-4 { grid-template-columns: 1fr; } }
/* faixa de passos numerados (5 a 6 itens em uma linha) */
.seg-steps-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 36px; }
@media(max-width: 800px) { .seg-steps-row { grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 500px) { .seg-steps-row { grid-template-columns: 1fr; } }
/* ── colapso responsivo a prova de style inline ──
   Varias paginas trazem grid-template-columns num atributo style="", que tem
   precedencia sobre as media queries acima. O resultado eram cards saindo da
   tela no celular: a pagina passava a rolar na horizontal e, pior, o drawer
   (position:fixed; right:0) ia junto e ficava parcialmente fora do viewport,
   deixando o menu mobile inalcancavel.
   O !important abaixo age SO abaixo de 800px — o desktop continua exatamente
   como cada pagina declarou. */
@media(max-width: 800px) {
  .seg-grid-2, .seg-grid-3, .seg-grid-4, .seg-grid-6, .seg-steps-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media(max-width: 560px) {
  .seg-grid-2, .seg-grid-3, .seg-grid-4, .seg-grid-6, .seg-steps-row {
    grid-template-columns: 1fr !important;
  }
}
/* grid de 6 colunas — 3 itens normais (span 2) + 2 itens em destaque (span 3) */
.seg-grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 36px; }
.seg-grid-6 .span-2 { grid-column: span 2; }
.seg-grid-6 .span-3 { grid-column: span 3; }
@media(max-width: 800px) { .seg-grid-6 { grid-template-columns: 1fr; } .seg-grid-6 .span-2, .seg-grid-6 .span-3 { grid-column: auto; } }

.seg-card { border-radius: 18px; padding: 26px 22px; display: flex; flex-direction: column; gap: 12px; }
.seg-card--cream { background: #f5f5f5; border: 1px solid #dce1e8; }
.seg-card--white { background: #fff; border: 1px solid #dce1e8; }
.seg-card--lime { background: #f05162; }
.seg-card__num { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 13px; color: #142540; background: rgba(20, 37, 64,.08); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.seg-card--lime .seg-card__num { background: rgba(0,0,0,.1); color: #f5f5f5; }
.seg-card__title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700; color: #142540; }
.seg-card--lime .seg-card__title { color: #f5f5f5; }
.seg-card__text { font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.6; color: rgba(20, 37, 64,.6); }
.seg-card--lime .seg-card__text { color: rgba(245,245,245,.85); }
.seg-card__link { display: inline-flex; align-items: center; gap: 5px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 13px; font-weight: 700; color: #142540; text-decoration: none; margin-top: auto; }
.seg-card__link:hover { opacity: .65; }
.seg-card--lime .seg-card__link { color: #f5f5f5; }

/* ── flow (herda de page-simple.css .simple-flow) — sem alterações aqui ── */

.seg-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 20px 0 4px; }
.seg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 100px; background: rgba(0,0,0,.06); font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: rgba(20, 37, 64,.65); }

/* ── tabela de comparação entrada × saída ── */
.compare { background: #fff; border: 1px solid #dce1e8; border-radius: 18px; overflow: hidden; margin-top: 36px; }
.compare__head { display: grid; grid-template-columns: 1fr 1fr; }
.compare__head span { font-family: 'Bricolage Grotesque', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #142540; padding: 16px 20px; background: #f5f5f5; }
.compare__head span:first-child { border-right: 1px solid #dce1e8; }
.compare__row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #e4e9ef; }
.compare__cell { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; font-family: 'Inter', sans-serif; font-size: 14px; color: #142540; }
.compare__cell:first-child { border-right: 1px solid #e4e9ef; }
.status { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.status svg { width: 12px; height: 12px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.status--ok { background: rgba(20, 37, 64,.08); }
.status--ok svg { stroke: #142540; }
.status--bad { background: #f05162; }
.status--bad svg { stroke: #f5f5f5; }
.status--warn { background: rgba(240, 81, 98,.35); }
.status--warn svg { stroke: #142540; }
.status--neutral { background: rgba(20, 37, 64,.08); font-family: 'Inter', sans-serif; font-weight: 700; font-size: 10px; color: rgba(20, 37, 64,.65); }
.compare__foot { padding: 14px 20px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 13px; font-weight: 700; color: #142540; background: #f5f5f5; border-top: 1px solid #dce1e8; }

/* ── "já não estava lá" — mini timeline vertical ── */
.trace { max-width: 340px; margin: 36px auto 0; text-align: center; }
.trace__item { font-family: 'Bricolage Grotesque', sans-serif; font-size: 13px; font-weight: 700; color: #142540; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 20px; }
.trace__step { background: #fff; border: 1px solid #dce1e8; border-radius: 14px; padding: 14px 18px; text-align: left; }
.trace__step-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(20, 37, 64,.45); margin-bottom: 4px; }
.trace__step-value { font-family: 'Inter', sans-serif; font-size: 14px; color: #142540; }
.trace__arrow { display: flex; justify-content: center; padding: 8px 0; color: rgba(20, 37, 64,.3); }
.trace__note { font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(20, 37, 64,.55); line-height: 1.6; margin-top: 24px; text-align: left; }

/* ── vistoria por ambiente ── */
.rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 36px; }
@media(max-width: 700px) { .rooms { grid-template-columns: 1fr; } }
.room-card { background: #fff; border: 1px solid #dce1e8; border-radius: 16px; padding: 20px; }
.room-card__title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 16px; font-weight: 700; color: #142540; margin-bottom: 6px; }
.room-card__meta { font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(20, 37, 64,.5); margin-bottom: 12px; }
.room-card__bar { height: 6px; border-radius: 4px; background: #e4e9ef; overflow: hidden; }
.room-card__bar span { display: block; height: 100%; background: #142540; }

.room-detail { background: #fff; border: 1px solid #dce1e8; border-radius: 16px; margin-top: 20px; overflow: hidden; }
.room-detail__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-top: 1px solid #e4e9ef; }
.room-detail__row:first-child { border-top: none; }
.room-detail__name { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: #142540; }
.room-detail__toggle { font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(20, 37, 64,.45); }
.room-detail__photo { width: 26px; height: 26px; border-radius: 7px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; color: rgba(20, 37, 64,.4); flex-shrink: 0; }
.room-detail__photo svg { width: 13px; height: 13px; }
.room-detail__right { display: flex; align-items: center; gap: 10px; }

/* ── delegação / cross-sell centralizado ── */
.cross { background: #fff; border: 1px solid #dce1e8; border-radius: 20px; padding: 48px; text-align: center; margin-top: 8px; }
@media(max-width: 640px) { .cross { padding: 32px 24px; } }

/* ── fotos e evidências ── */
.evidence { background: #fff; border: 1px solid #dce1e8; border-radius: 18px; padding: 24px; max-width: 420px; margin: 36px auto 0; }
.evidence__title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 16px; font-weight: 700; color: #142540; margin-bottom: 10px; }
.evidence__status { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: #142540; margin-bottom: 18px; }
.evidence__photos { display: flex; gap: 8px; margin-bottom: 16px; }
.evidence__photo { flex: 1; aspect-ratio: 4/3; border-radius: 10px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; color: rgba(20, 37, 64,.3); }
.evidence__photo svg { width: 22px; height: 22px; }
.evidence__meta { font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(20, 37, 64,.5); }

/* ── resultado da vistoria ── */
.result { background: #fff; border: 1px solid #dce1e8; border-radius: 20px; padding: 36px; max-width: 440px; margin: 36px auto 0; text-align: center; }
.result__badge { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: #142540; background: #f5f5f5; padding: 6px 14px; border-radius: 100px; margin-bottom: 16px; }
.result__title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; font-weight: 700; color: #142540; margin-bottom: 4px; }
.result__count { font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(20, 37, 64,.55); margin-bottom: 20px; }
.result__rows { display: flex; flex-direction: column; gap: 10px; text-align: left; margin-bottom: 20px; }
.result__row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 10px; background: #f5f5f5; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: #142540; }
.result__pill { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 100px; background: #d3374e; color: #fff; }

/* ── histórico ── */
.history { display: flex; flex-direction: column; margin-top: 36px; max-width: 560px; }
.history__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid #dce1e8; }
.history__date { font-family: 'Bricolage Grotesque', sans-serif; font-size: 13px; font-weight: 700; color: #142540; letter-spacing: .03em; text-transform: uppercase; min-width: 150px; }
.history__who { font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(20, 37, 64,.6); flex: 1; }
.history__status { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 100px; white-space: nowrap; }
.history__status--ok { background: rgba(20, 37, 64,.08); color: #142540; }
.history__status--bad { background: #d3374e; color: #fff; }

/* ── caixa de link compartilhável (copiar link + canais) ── */
.link-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid #e4e9ef; padding: 14px; border-radius: 8px; }
.link-box code { font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(20, 37, 64,.65); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-box__copy { border: none; background: #142540; color: #f5f5f5; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 4px; cursor: pointer; flex-shrink: 0; }

.channel-list { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid #dce1e8; }
.channel-list span:not(.channel-list__sep) { font-family: 'Bricolage Grotesque', sans-serif; font-size: 12px; font-weight: 700; color: #142540; }
.channel-list__sep { color: rgba(20, 37, 64,.3); }

/* ── CTA final (mesma linguagem da home) ── */
.seg-final-cta { background: #f05162; padding: 80px 0; text-align: center; }
.seg-final-cta .seg-title { max-width: 640px; margin: 0 auto 14px; color: #f5f5f5; }
.seg-final-cta .seg-subtitle { margin: 0 auto 28px; color: rgba(245,245,245,.75); }
.seg-final-cta .simple-hero__actions { margin-bottom: 0; }
.seg-final-cta .simple-hero__back { color: rgba(245,245,245,.75); }
.seg-final-cta .simple-hero__back:hover { color: #f5f5f5; }

/* ── FAQ (mesmo padrão visual usado em /precos) ── */
.seg-faq-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start; }
@media(max-width: 700px) { .seg-faq-layout { grid-template-columns: 1fr; gap: 32px; } }
.seg-faq-items { display: flex; flex-direction: column; }
.seg-faq-item { border-bottom: 1px solid #d3d9e1; }
.seg-faq-item summary {
  list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 0; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 700;
  color: #142540; line-height: 1.3;
}
.seg-faq-item summary::-webkit-details-marker { display: none; }
.seg-faq-btn { width: 26px; height: 26px; border-radius: 50%; background: #dce1e8; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.seg-faq-btn svg { width: 11px; height: 11px; fill: none; stroke: #4E5C70; stroke-width: 2.2; stroke-linecap: round; transition: transform 0.2s; }
details[open] .seg-faq-btn { background: #f05162; }
details[open] .seg-faq-btn svg { stroke: #f5f5f5; transform: rotate(45deg); }
.seg-faq-answer { font-family: 'Inter', sans-serif; font-size: 14px; color: #5e6c80; line-height: 1.7; padding-bottom: 18px; }