/* =====================================================
   Páginas internas (Quem somos, Resistência, SAC, Privacidade)
   Usa os tokens e componentes do style.css
   ===================================================== */

/* ---------- Topo da página ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(8rem, 14vw, 10.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  background: var(--olive-900); color: var(--sand-100);
}
.page-hero .kicker { margin-bottom: 1.1rem; }
.page-hero h1 { font-size: clamp(2.4rem, 5.2vw, 4.2rem); max-width: 24ch; }
@media (max-width: 400px) { .page-hero h1 { font-size: min(2.2rem, 8.4vw); } }
.page-hero .lead { margin-top: 1.2rem; max-width: 56ch; font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--muted-light); text-wrap: pretty; }
.page-hero.has-photo { min-height: min(78svh, 680px); display: flex; align-items: flex-end; }
.page-hero-bg { position: absolute; inset: 0; z-index: -1; background: var(--photo) center / cover no-repeat; }
.page-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22, 27, 12, .55) 0%, rgba(22, 27, 12, .35) 40%, rgba(22, 27, 12, .92) 100%);
}
.page-hero-bg.quem-somos { --photo: url("../../images/sobre-2.webp"); background-position: center 30%; }
/* ícone da marca grande no fundo (páginas sem foto) */
.page-hero-mark { position: absolute; z-index: -1; right: -4rem; top: 50%; translate: 0 -45%; font-size: clamp(18rem, 38vw, 30rem); color: var(--gold); opacity: .07; }
.page-hero-mark.ji::before { width: 100%; height: 100%; }

/* ---------- Texto corrido ---------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 2.8rem 0 .8rem; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--muted); font-size: 1.02rem; text-wrap: pretty; }
.prose p + p { margin-top: .9rem; }
.prose ul { display: grid; gap: .55rem; margin-top: .8rem; }
.prose li { display: flex; gap: .7rem; }
.prose li i { color: var(--gold-700); margin-top: .2rem; font-size: 1.2rem; }
.prose a { color: var(--olive-800); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); }
.prose .updated { margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid var(--sand-300); font-size: .88rem; }

/* ---------- Boxes (mesmo jogo da home) ---------- */
.box-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.box-grid.two { grid-template-columns: repeat(2, 1fr); }
.box {
  display: flex; flex-direction: column; gap: .9rem; padding: 1.6rem;
  border-radius: var(--radius); background: var(--sand-100);
  box-shadow: 0 1px 2px rgba(22, 27, 12, .06), 0 10px 30px -14px rgba(22, 27, 12, .18);
}
.box > .ji { width: 52px; height: 52px; font-size: 52px; border-radius: 12px; color: var(--gold); background: var(--olive-800); }
.box h3 { font-size: 1.2rem; }
.box p { color: var(--muted); font-size: .96rem; text-wrap: balance; }
.box .btn { margin-top: auto; align-self: flex-start; }
.box.inline { flex-direction: row; align-items: center; gap: 1rem; padding: 1.2rem 1.4rem; }
.box.inline > .ji { flex: none; }
.box.inline h3 { font-size: 1.08rem; text-wrap: balance; }
.bg-dark .box { background: rgba(251, 247, 238, .05); border: 1px solid rgba(251, 247, 238, .1); box-shadow: none; }
.bg-dark .box > .ji { background: rgba(212, 152, 14, .14); }
.bg-dark .box p { color: var(--muted-light); }

/* ---------- SAC ---------- */
.contact-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
.company {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 2.6rem;
  padding: 1.2rem 1.4rem; border-radius: var(--radius-sm); background: var(--sand-200); border: 1px solid var(--sand-300);
}
.company img { height: 22px; width: auto; }
.company p { font-size: .92rem; color: var(--olive-800); }

/* ---------- Quem somos ---------- */
.about-page { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.about-page .prose p { font-size: 1.08rem; }
.prose .pull { margin: 1.8rem 0; padding-left: 1.4rem; border-left: 3px solid var(--gold); font-family: var(--font-display); font-style: italic; font-weight: 700; letter-spacing: -.01em; font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.35; color: var(--olive-800); text-wrap: balance; }
.about-page .stats { margin-top: 2rem; border-top-color: var(--sand-300); }
.about-page .stats span { color: var(--muted); }
.about-page .stats strong { color: var(--gold-700); }
.about-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- Chamada final ---------- */
.page-cta { text-align: center; }
.page-cta h2 { max-width: 20ch; margin-inline: auto; text-wrap: balance; }
.page-cta p { max-width: 52ch; margin: 1rem auto 2rem; color: var(--muted-light); text-wrap: pretty; }
.page-cta .kicker, .page-cta .eyebrow { margin-bottom: 1rem; }

@media (max-width: 960px) {
  .box-grid, .box-grid.two, .about-page { grid-template-columns: 1fr; }
  .about-photo { max-width: 460px; }
}
@media (max-width: 640px) {
  .page-hero-mark { right: -7rem; opacity: .05; }
  .contact-row .btn { width: 100%; justify-content: center; }
}
.page-hero .lead { text-wrap: balance; }
@media (max-width: 640px) { .prose .pull { font-size: 1.2rem; } }

/* ---------- Números (quem somos) ---------- */
.about-page .stats { display: flex; flex-wrap: wrap; gap: 1.2rem 2.5rem; padding-top: 1.6rem; border-top: 1px solid rgba(22, 27, 12, .15); }
.about-page .stats strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2.3rem; line-height: 1; letter-spacing: -.03em; }
.about-page .stats span { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }

/* títulos longos sem palavra sozinha no celular */
@media (max-width: 640px) { .prose h2 { font-size: min(1.7rem, 6.3vw); } }

/* mobile centralizado */
@media (max-width: 640px) {
  .page-hero .container { text-align: center; }
  .page-hero h1, .page-hero .lead { margin-inline: auto; }
}