/* ==========================================================
   NOSSA HISTÓRIA
   ========================================================== */

/* ---------- INTRODUÇÃO ---------- */
.intro {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.intro__lead {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.intro__lead .highlight {
  color: var(--color-yellow);
}

.intro__text {
  margin-top: var(--space-md);
  padding-left: var(--space-md);
  border-left: 3px solid var(--color-yellow);
  font-size: var(--fs-md);
  color: var(--text-secondary);
}

.intro__media {
  position: relative;
  aspect-ratio: 3 / 4;
}

.intro__media .placeholder,
.intro__media img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  object-fit: cover;
}

.intro__media img {
  object-position: 62% center;
}

/* Fita de claquete sobre a imagem */
.intro__media::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 1.5rem;
  right: 1.5rem;
  z-index: 1;
  height: 28px;
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(
    -45deg,
    var(--color-yellow) 0 18px,
    var(--color-black) 18px 36px
  );
  box-shadow: var(--shadow);
}

.intro__media::after {
  content: "";
  position: absolute;
  inset: auto -1.25rem -1.25rem auto;
  z-index: -1;
  width: 60%;
  height: 60%;
  border-right: 2px solid var(--color-yellow);
  border-bottom: 2px solid var(--color-yellow);
  border-radius: 0 0 var(--radius) 0;
}

/* ---------- PARA QUEM PRODUZIMOS ---------- */
.audience {
  background: var(--color-black-soft);
}

.audience__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.audience-card {
  position: relative;
  padding: var(--space-lg) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  transition: transform var(--transition), border-color var(--transition);
}

.audience-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 209, 0, 0.35);
}

/* Cada card leva uma cor da faixa tricolor */
.audience-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--space-md);
  width: 48px;
  height: 3px;
  background: var(--accent, var(--color-yellow));
}

.audience-card:nth-child(1) { --accent: var(--color-green); }
.audience-card:nth-child(2) { --accent: var(--color-white); }
.audience-card:nth-child(3) { --accent: var(--color-red); }

.audience-card__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-sm);
  background: rgba(255, 209, 0, 0.1);
  color: var(--color-yellow);
}

.audience-card__icon svg {
  width: 28px;
  height: 28px;
}

.audience-card__title {
  margin-bottom: 0.6rem;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.03em;
}

.audience-card__text {
  color: var(--text-secondary);
}

/* ---------- PROPÓSITO (pilares) ---------- */
.pillars__list {
  border-top: 1px solid var(--color-border);
}

.pillar {
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  align-items: center;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition), padding var(--transition);
}

.pillar:hover {
  padding-inline: var(--space-md);
  background: linear-gradient(90deg, rgba(255, 209, 0, 0.06), transparent 70%);
}

.pillar__number {
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-yellow);
}

.pillar__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.pillar__title .highlight {
  color: var(--color-yellow);
}

.pillar__text {
  color: var(--text-secondary);
}

/* ---------- ASSINATURA (efeito tela de cinema) ---------- */
.signature {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 80vh;
  padding: calc(var(--space-section) + 3rem) var(--gutter);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(255, 209, 0, 0.18), transparent 70%),
    var(--color-black-soft);
}

/* Barras pretas de letterbox (topo e base) */
.signature::before,
.signature::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(2.5rem, 7vw, 5rem);
  background: var(--color-black);
  z-index: 1;
}

.signature::before { top: 0; }
.signature::after  { bottom: 0; }

.signature__content {
  position: relative;
  z-index: 2;
}

.signature__brand {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2rem + 8vw, 9rem);
  font-weight: 400;
  line-height: 0.9;
  text-transform: uppercase;
}

.signature__slogan {
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-yellow);
}

.signature .tricolor {
  width: 120px;
  margin: var(--space-md) auto;
}

.signature__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* ---------- RESPONSIVO ---------- */
@media (max-width: 900px) {
  .intro {
    grid-template-columns: 1fr;
  }


  .intro__media {
    max-width: 420px;
    width: calc(100% - 1.25rem);
  }

  .audience__grid {
    grid-template-columns: 1fr;
  }

  .pillar {
    grid-template-columns: 80px 1fr;
    gap: var(--space-xs) var(--space-md);
  }

  .pillar__number {
    grid-row: span 2;
    align-self: start;
    font-size: 3.5rem;
  }
}

@media (max-width: 560px) {
  .signature__actions .btn {
    flex: 1 1 100%;
  }
}