/* ==========================================================================
   Visite o decorado — Section (Figma node 6335:2301, revisão do 6334:2285)
   Desktop: linha de conteúdo com 928px (título 392px + coluna 351px,
   espaçamento automático via justify-content:space-between).
   Sem desenho mobile no Figma — layout mobile criado com base nos padrões
   já usados no restante do site (stack vertical, mesmo espaçamento/tokens).
   Mobile-first — breakpoint em 1024px (Notebook)
   ========================================================================== */

.visita {
  position: relative;
  background-color: var(--gray-200);
  overflow: hidden;
}

.visita__inner {
  padding-block: 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 1024px) {
  .visita__inner {
    padding-block: 80px;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    width: 928px;
    margin-inline: auto;
  }
}

/* esta seção usa 1120px como largura máxima também no XL — não cresce
   para 1440px como o .container padrão */
@media (min-width: 1440px) {
  .visita__inner {
    max-width: var(--container-lg);
  }
}

.visita__title {
  margin: 0;
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-light);
  font-size: var(--h2-font-size);
  line-height: var(--line-height-md);
  letter-spacing: var(--letter-spacing-lg);
  text-transform: uppercase;
  color: var(--gray-700);
}

@media (min-width: 1024px) {
  .visita__title {
    width: 392px;
    flex-shrink: 0;
  }
}

.visita__info {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

@media (min-width: 1024px) {
  .visita__info {
    width: 351px;
    flex-shrink: 0;
    gap: 32px;
  }
}

.visita__address {
  margin: 0;
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-base);
  line-height: var(--line-height-sm);
  color: var(--gray-700);
}

.visita__cta {
  display: inline-flex;
  align-items: center;
  padding: 14px 32px 12px;
  background-color: var(--brand-color-primary);
  font-family: var(--font-family-02);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-color-secondary);
}

/* --------------------------------------------------------------------------
   Detalhe decorativo — barrinha amarela na borda direita da viewport
   -------------------------------------------------------------------------- */
.visita__accent {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 64px;
  background-color: var(--brand-color-primary);
}

@media (min-width: 1024px) {
  .visita__accent {
    width: 18px;
    height: 100px;
  }
}