/* ==========================================================================
   Páginas internas
   ========================================================================== */

/* --- Hero interno ---------------------------------------------------------- */
.page-hero {
  position: relative;
  padding-top: calc(92px + var(--space-md));
  padding-bottom: var(--section-tight);
  background-color: var(--color-surface);
  overflow: hidden;
}

.page-hero::after {
  content: "";
  position: absolute;
  top: -22rem;
  left: -16rem;
  width: 44rem;
  height: 44rem;
  background: radial-gradient(circle at center, rgba(93, 161, 195, .14), rgba(93, 161, 195, 0) 64%);
  pointer-events: none;
}

.page-hero__inner { position: relative; }

.page-hero__grid {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  margin-top: var(--space-md);
}

.page-hero__title {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1.14;
  letter-spacing: var(--ls-display);
}

.page-hero__text {
  max-width: 46ch;
  margin-top: var(--space-md);
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--color-text-soft);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: var(--space-lg);
}

.page-hero__media { aspect-ratio: 4 / 5; }
.page-hero__media--wide { aspect-ratio: 3 / 2; }

/* Variante sem fotografia: composição gráfica derivada do símbolo */
.page-hero--graphic { background-color: var(--color-surface-alt); }

.graphic-panel {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  color: #FFFFFF;
  background: var(--gradient-institucional);
  border-radius: var(--radius-arch) var(--radius-arch) var(--radius-md) var(--radius-md);
}

.graphic-panel__arcs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .18;
}

.graphic-panel__content {
  position: relative;
  padding: var(--space-lg);
  text-align: center;
}

.graphic-panel__content img { width: 92px; margin: 0 auto var(--space-md); }

.graphic-panel__content p {
  max-width: 26ch;
  margin-inline: auto;
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, .88);
}

/* --- Blocos de conteúdo das páginas de público ------------------------------ */
.detail__grid { display: grid; gap: var(--space-lg); align-items: start; }

.detail__body > * + * { margin-top: var(--space-sm); }
.detail__body p { color: var(--color-text-soft); }
.detail__body h3 { margin-top: var(--space-lg); font-size: var(--fs-h3); }

.checklist { display: grid; gap: .65rem; margin-top: var(--space-md); }

.checklist li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  font-size: var(--fs-small);
  color: var(--color-text);
}

.checklist li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: .25rem;
  background-color: var(--color-accent);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.4 7.2 13l7.3-8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.4 7.2 13l7.3-8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.detail__aside {
  position: sticky;
  top: 7.5rem;
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-md);
}

.detail__aside h2 { font-size: var(--fs-h4); }
.detail__aside p { font-size: var(--fs-small); color: var(--color-text-soft); }

.detail__note {
  max-width: 64ch;
  padding: var(--space-md);
  margin-top: var(--space-lg);
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: var(--color-text-soft);
  background-color: var(--color-surface-alt);
  border-left: 2px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* --- Faixa de citação editorial --------------------------------------------- */
.pullquote {
  padding-block: var(--section-tight);
  text-align: left;
}

.pullquote blockquote {
  max-width: 24ch;
  margin: 0;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem);
  font-weight: var(--fw-medium);
  line-height: 1.24;
  color: var(--color-heading);
  letter-spacing: var(--ls-heading);
}

/* --- Navegação relacionada --------------------------------------------------- */
.related { border-top: 1px solid var(--color-line); }

.related__grid {
  display: grid;
  gap: 0;
  margin-top: var(--space-md);
}

.related__item {
  display: grid;
  gap: .3rem;
  padding-block: var(--space-md);
  text-decoration: none;
  border-bottom: 1px solid var(--color-line);
  transition: padding-left var(--transition-normal);
}

.related__item:hover { padding-left: .6rem; }
.related__item h3 { font-size: var(--fs-h4); color: var(--color-heading); }
.related__item p { font-size: var(--fs-small); color: var(--color-text-soft); }

/* --- Página de serviços ------------------------------------------------------- */
.service-block {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
  padding-block: var(--section-tight);
  border-top: 1px solid var(--color-line);
  scroll-margin-top: 7rem;
}

.service-block__media { aspect-ratio: 3 / 2; }
.service-block__body p { color: var(--color-text-soft); }
.service-block__body .btn { margin-top: var(--space-md); }

.service-index {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: var(--space-md);
}

.service-index a {
  padding: .55rem .95rem;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-primary-dark);
  text-decoration: none;
  background-color: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.service-index a:hover { border-color: var(--color-primary); background-color: var(--color-surface-alt); }

/* --- Página institucional ------------------------------------------------------ */
.values__grid { display: grid; gap: 0; margin-top: var(--space-md); }

.value {
  display: grid;
  gap: .3rem;
  padding-block: var(--space-md);
  border-top: 1px solid var(--color-line);
}

.value:last-child { border-bottom: 1px solid var(--color-line); }
.value h3 { font-size: var(--fs-h4); }
.value p { font-size: var(--fs-small); color: var(--color-text-soft); }

.mission {
  display: grid;
  gap: var(--space-lg);
  padding: var(--space-lg);
  color: #FFFFFF;
  background: var(--gradient-institucional);
  border-radius: var(--radius-md);
}

.mission h3 {
  margin-bottom: .6rem;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

.mission p { color: rgba(255, 255, 255, .92); font-size: var(--fs-body); }

.history__grid { display: grid; gap: var(--space-lg); align-items: start; }

.history__steps { display: grid; gap: 0; }

.history__step {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-top: 1px solid var(--color-line);
}

.history__step:last-child { border-bottom: 1px solid var(--color-line); }

.history__step > span {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

.history__step h3 { font-size: var(--fs-h4); }
.history__step p { margin-top: .25rem; font-size: var(--fs-small); color: var(--color-text-soft); }

/* --- Página de contato ---------------------------------------------------------- */
.contact__grid { display: grid; gap: var(--space-xl); align-items: start; }

.contact__card {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-md);
}

.contact__item { display: grid; gap: .25rem; }

.contact__item dt {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-primary);
}

.contact__item dd {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-heading);
}

.contact__item dd a { color: inherit; text-decoration: none; }
.contact__item dd a:hover { text-decoration: underline; }
.contact__item dd small { display: block; font-size: var(--fs-caption); font-weight: var(--fw-book); color: var(--color-text-soft); }

.form-card {
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* --- Trabalhe conosco ------------------------------------------------------------ */
.jobs__intro { display: grid; gap: var(--space-lg); align-items: center; }
.jobs__media { aspect-ratio: 4 / 5; }

.jobs__profile { display: grid; gap: 0; margin-top: var(--space-md); }

.jobs__profile li {
  display: grid;
  gap: .25rem;
  padding-block: var(--space-sm);
  border-top: 1px solid var(--color-line);
}

.jobs__profile li:last-child { border-bottom: 1px solid var(--color-line); }
.jobs__profile strong { font-size: var(--fs-h4); color: var(--color-heading); }
.jobs__profile span { font-size: var(--fs-small); color: var(--color-text-soft); }

.form-grid { display: grid; gap: var(--space-sm); }

/* --- Documentos legais ------------------------------------------------------------- */
.legal { max-width: 70ch; }
.legal h2 { margin-top: var(--space-lg); font-size: var(--fs-h3); }
.legal h3 { margin-top: var(--space-md); font-size: var(--fs-h4); }
.legal p, .legal li { font-size: var(--fs-small); color: var(--color-text-soft); }
.legal p + p { margin-top: var(--space-sm); }
.legal ul { display: grid; gap: .5rem; margin-top: var(--space-sm); padding-left: 1.2rem; list-style: disc; }
.legal ul li::marker { color: var(--color-accent); }
.legal__meta { font-size: var(--fs-caption); color: var(--color-text-soft); }

/* --- Página 404 ---------------------------------------------------------------------- */
.notfound {
  display: grid;
  place-items: center;
  min-height: 72vh;
  padding-block: var(--section-base);
  text-align: left;
}

.notfound__code {
  font-size: clamp(3.5rem, 2rem + 8vw, 7rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-accent-mid);
  letter-spacing: var(--ls-display);
}

.notfound .roofline { margin-top: var(--space-sm); }
.notfound__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--space-lg); }

/* --- FAQ como página ------------------------------------------------------------------ */
.faq-page__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: var(--space-lg);
}

.faq-page__nav a {
  padding: .5rem .9rem;
  font-size: var(--fs-caption);
  color: var(--color-primary-dark);
  text-decoration: none;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
}

.faq-page__nav a:hover { background-color: var(--color-surface-alt); }

.faq-group { scroll-margin-top: 7rem; }
.faq-group + .faq-group { margin-top: var(--space-xl); }
.faq-group h2 { margin-bottom: var(--space-sm); font-size: var(--fs-h3); }

/* --- Media queries ---------------------------------------------------------------------- */
@media (min-width: 48rem) {
  .values__grid { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-xl); }
  .mission { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); padding: var(--space-xl); }
  .form-grid--2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
  .form-grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
  .related__grid { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-xl); }
}

@media (min-width: 62rem) {
  .page-hero { padding-top: calc(92px + var(--space-lg)); }
  .page-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-xl); }
  .detail__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--space-xl); }
  .service-block { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-xl); }
  .service-block:nth-child(even) .service-block__media { order: 2; }
  .history__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--space-xl); }
  .contact__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .jobs__intro { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-xl); }
  .jobs__media { order: 2; }
  .related__grid { grid-template-columns: repeat(3, 1fr); column-gap: var(--space-xl); }
  .notfound { justify-items: start; }
}