/* Scase — Tráfego Pago e Performance */

.traffic-hero {
  position: relative;
  isolation: isolate;
  min-height: 680px;
  min-height: clamp(640px, 78svh, 850px);
  overflow: hidden;
  background: var(--night);
  color: var(--paper);
}

.traffic-hero__image,
.traffic-hero__shade,
.traffic-hero__columns {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.traffic-hero__image {
  object-fit: cover;
  object-position: 100% 50%;
  filter: grayscale(1) brightness(.78);
}

.traffic-hero__shade {
  background: linear-gradient(90deg, rgb(11 11 11 / .94) 0%, rgb(11 11 11 / .72) 43%, rgb(11 11 11 / .22) 100%),
              linear-gradient(0deg, rgb(11 11 11 / .8) 0%, transparent 65%);
}

.traffic-hero__columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
}

.traffic-hero__columns span + span { border-left: 1px solid rgb(255 255 255 / .08); }

.traffic-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: inherit;
  padding: clamp(32px, 4vw, 60px) var(--gutter) clamp(44px, 5vw, 76px);
}

.traffic-hero__meta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  color: var(--muted-light);
}

.traffic-hero__content { width: 100%; }

.traffic-hero h1 {
  max-width: 1320px;
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(62px, 8.1vw, 146px);
  line-height: .96;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.traffic-hero h1 em {
  color: var(--green);
  font-style: italic;
  font-weight: 600;
}

.traffic-hero__bottom {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-top: clamp(40px, 6vw, 88px);
  padding-top: 26px;
  border-top: 1px solid rgb(255 255 255 / .3);
}

.traffic-hero__bottom p {
  max-width: 42ch;
  font-size: clamp(18px, 1.75vw, 25px);
  line-height: 1.28;
  letter-spacing: -.02em;
  text-wrap: pretty;
}

.traffic-hero__actions { display: flex; align-items: center; gap: 16px; }
.traffic-hero__actions img { display: block; flex: none; width: 58px; height: 58px; border-radius: 6px; }

.traffic-statement {
  max-width: 18ch;
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(44px, 5.3vw, 88px);
  line-height: 1.03;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.traffic-statement span { color: var(--green-dark); }
.section--dark .traffic-statement span { color: var(--green); }

.traffic-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr);
  align-items: end;
  gap: clamp(48px, 8vw, 140px);
}

.traffic-intro__body { max-width: 510px; }
.traffic-intro__body p { font-size: 17px; line-height: 1.55; color: var(--text-soft); text-wrap: pretty; }
.traffic-intro__body .traffic-intro__lead { margin-bottom: 22px; color: var(--ink); font-size: clamp(21px, 2vw, 28px); line-height: 1.32; letter-spacing: -.025em; }
.traffic-text-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; padding-bottom: 7px; border-bottom: 1px solid currentColor; font-size: 15px; font-weight: 700; }
.traffic-text-link:hover { color: var(--green-dark); }

.traffic-intro__rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(72px, 10vw, 160px);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.traffic-intro__rail span { padding: 22px 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.traffic-intro__rail span:first-child { padding-left: 0; }
.traffic-intro__rail span + span { border-left: 1px solid var(--ink); }

.traffic-objectives { padding-top: 0; }
.traffic-objectives .display { max-width: 1100px; }
.traffic-objectives__list { border-top: 1px solid var(--ink); }
.traffic-objective {
  display: grid;
  grid-template-columns: minmax(115px, .25fr) minmax(0, 1fr) minmax(260px, .65fr);
  align-items: start;
  gap: 24px;
  padding: clamp(26px, 3.4vw, 50px) 0;
  border-bottom: 1px solid var(--ink);
}
.traffic-objective__num { padding-top: 7px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; }
.traffic-objective h3 { max-width: 14ch; font-size: clamp(27px, 3.2vw, 50px); font-weight: 700; line-height: 1.05; letter-spacing: -.04em; }
.traffic-objective p { max-width: 42ch; font-size: 16px; line-height: 1.55; color: var(--text-soft); text-wrap: pretty; }

.traffic-channels__head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 48px; align-items: end; }
.traffic-channels__head p { max-width: 38ch; font-size: clamp(18px, 1.7vw, 23px); line-height: 1.45; text-wrap: pretty; }
.traffic-channels__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(70px, 9vw, 130px); border-top: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-left: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
.traffic-channels__grid article { min-height: 220px; padding: clamp(24px, 3vw, 45px); border-right: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
.traffic-channels__grid article > span { font-family: var(--font-mono); font-size: 11px; color: var(--green); }
.traffic-channels__grid h3 { margin-top: 40px; font-size: clamp(30px, 3vw, 50px); line-height: 1.05; letter-spacing: -.04em; }
.traffic-channels__grid p { margin-top: 8px; font-size: 15px; line-height: 1.5; opacity: .8; }

.traffic-method__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr); gap: clamp(55px, 8vw, 140px); }
.traffic-method__intro { max-width: 42ch; margin-top: 34px; font-size: clamp(18px, 1.7vw, 23px); line-height: 1.45; color: var(--text-soft); text-wrap: pretty; }
.traffic-method__steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.traffic-method__steps li { display: grid; grid-template-columns: 42px 1fr; gap: 22px; padding: 26px 0; border-bottom: 1px solid var(--ink); }
.traffic-method__steps li > span { padding-top: 5px; font-family: var(--font-mono); font-size: 11px; }
.traffic-method__steps h3 { font-size: clamp(23px, 2vw, 30px); line-height: 1.14; letter-spacing: -.025em; }
.traffic-method__steps p { max-width: 40ch; margin-top: 7px; font-size: 15px; line-height: 1.5; color: var(--text-soft); }

.traffic-investment { background: var(--paper-row); }
.traffic-investment .traffic-statement { max-width: none; }
.traffic-investment__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(52px, 7vw, 100px); border: 1px solid var(--ink); }
.traffic-investment__grid > div { min-height: 330px; padding: clamp(25px, 3vw, 45px); display: flex; flex-direction: column; align-items: flex-start; }
.traffic-investment__grid > div + div { border-left: 1px solid var(--ink); background: var(--green); }
.traffic-investment__grid h3 { max-width: 16ch; margin-top: auto; font-size: clamp(30px, 3vw, 48px); line-height: 1.04; letter-spacing: -.04em; }
.traffic-investment__grid p { max-width: 48ch; margin-top: 18px; font-size: 16px; line-height: 1.5; }

.traffic-faq__layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(380px, 1.1fr); gap: clamp(55px, 8vw, 140px); }
.traffic-faq__layout > div:first-child > p { max-width: 38ch; margin-top: 30px; font-size: 18px; line-height: 1.5; color: var(--text-soft); }
.traffic-faq .faq__item p { padding-top: 2px; }

.traffic-close { padding: clamp(72px, 9vw, 140px) var(--gutter); background: var(--green); color: var(--ink); }
.traffic-close .rule { margin-bottom: clamp(56px, 7vw, 110px); }
.traffic-close__content { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.traffic-close h2 { max-width: 16ch; font-size: clamp(48px, 6.5vw, 110px); line-height: .98; letter-spacing: -.055em; font-weight: 800; font-stretch: 112%; text-wrap: balance; }
.traffic-close h2 em { font-style: italic; font-weight: 600; }
.traffic-close .btn { flex: none; }

@media (max-width: 940px) {
  .traffic-hero { min-height: 660px; }
  .traffic-hero h1 { font-size: clamp(58px, 9.2vw, 90px); }
  .traffic-intro__grid, .traffic-channels__head, .traffic-method__layout, .traffic-faq__layout { grid-template-columns: 1fr; gap: 42px; }
  .traffic-intro__body { max-width: 690px; }
  .traffic-objective { grid-template-columns: 95px minmax(0, 1fr); }
  .traffic-objective p { grid-column: 2; }
  .traffic-close__content { align-items: start; flex-direction: column; }
}

@media (max-width: 640px) {
  .traffic-hero { min-height: 660px; }
  .traffic-hero__image { object-position: 100% 50%; }
  .traffic-hero__shade { background: linear-gradient(90deg, rgb(11 11 11 / .89), rgb(11 11 11 / .62)), linear-gradient(0deg, rgb(11 11 11 / .9), transparent 75%); }
  .traffic-hero__inner { padding-top: 30px; padding-bottom: 32px; }
  .traffic-hero__meta span + span { display: none; }
  .traffic-hero h1 { font-size: clamp(50px, 12.5vw, 72px); line-height: .98; }
  .traffic-hero h1 em { font-size: .72em; font-stretch: 100%; }
  .traffic-hero__bottom { align-items: flex-start; flex-direction: column; gap: 24px; margin-top: 46px; }
  .traffic-hero__bottom p { max-width: 32ch; }
  .traffic-hero__actions { width: 100%; }
  .traffic-hero__actions .btn { padding: 16px 18px; font-size: 14px; }
  .traffic-hero__actions img { width: 50px; height: 50px; }
  .traffic-statement { font-size: clamp(42px, 11vw, 60px); }
  .traffic-intro__rail { grid-template-columns: 1fr; margin-top: 70px; }
  .traffic-intro__rail span { padding: 16px 0; }
  .traffic-intro__rail span + span { border-left: 0; border-top: 1px solid var(--ink); }
  .traffic-objectives { padding-top: 0; }
  .traffic-objective { grid-template-columns: 1fr; gap: 12px; }
  .traffic-objective p { grid-column: 1; }
  .traffic-objective h3 { margin-top: 8px; }
  .traffic-channels__grid { grid-template-columns: 1fr; margin-top: 58px; }
  .traffic-channels__grid article { min-height: 180px; }
  .traffic-channels__grid h3 { margin-top: 30px; }
  .traffic-investment__grid { grid-template-columns: 1fr; }
  .traffic-investment__grid > div { min-height: 280px; }
  .traffic-investment__grid > div + div { border-left: 0; border-top: 1px solid var(--ink); }
  .traffic-faq__layout { gap: 40px; }
  .traffic-faq .faq__item p { padding-right: 0; }
  .traffic-close h2 { font-size: clamp(46px, 11vw, 70px); }
  .traffic-intro .rule span + span,
  .traffic-objectives .rule span + span,
  .traffic-channels .rule span + span,
  .traffic-method .rule span + span,
  .traffic-investment .rule span + span,
  .traffic-faq .rule span + span,
  .traffic-close .rule span + span { display: none; }
}

@media (max-width: 400px) {
  .traffic-hero h1 { font-size: clamp(45px, 14.7vw, 47px); }
  .traffic-hero__actions { flex-wrap: wrap; gap: 8px; }
  .traffic-hero__actions .btn { font-size: 13px; padding: 14px; }
  .traffic-hero__actions img { width: 46px; height: 46px; }
}