/* Apenas a área de planos. Mantém os tokens, a tipografia e o restante do layout. */
.approach .engagements {
  display: block;
  margin-top: 72px;
  padding: clamp(26px, 4vw, 58px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 28px;
  background: radial-gradient(circle at 90% 5%, rgba(217, 4, 41, .10), transparent 37%), linear-gradient(145deg, #ffffff09, #ffffff02 60%);
  box-shadow: inset 0 1px 0 #ffffff17, 0 32px 85px #0003;
}
.engagement-heading {margin-bottom: 36px}
.approach .engagement-heading h3 {max-width: 800px; margin: 18px 0 0; font-size: clamp(38px, 5vw, 72px); line-height: 1.02; letter-spacing: -.07em; font-weight: 500}
.cinema-rule {display: flex; align-items: center; gap: 24px; padding: 22px 25px; margin-bottom: 25px; border: 1px solid #ffffff22; border-left: 2px solid var(--gold); border-radius: 17px; background: #ffffff08}
.cinema-rule img {width: 52px; height: 52px; flex: 0 0 52px; object-fit: contain; opacity: .75}
.cinema-rule span {font: 10px monospace; letter-spacing: .17em; color: #d5ba83}
.cinema-rule p {margin: 8px 0 0; max-width: 920px; font-size: 14px; line-height: 1.65; color: #e3e1e8}
.production-plans {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch}
.plan-card {display: flex; flex-direction: column; min-width: 0; min-height: 500px; padding: clamp(22px, 2.2vw, 32px); border: 1px solid #ffffff21; border-radius: 20px; background: linear-gradient(160deg, #ffffff0c, #ffffff02 65%); box-shadow: inset 0 1px 0 #ffffff11; transition: border-color .3s, transform .45s var(--ease), box-shadow .3s}
.plan-card:hover {border-color: #ffffff55; transform: translateY(-5px)}
.plan-card.plan-featured {border-color: #c3a0529a; background: radial-gradient(circle at 100% 0, #c3a05218, transparent 47%), linear-gradient(160deg, #ffffff0f, #ffffff03 70%); box-shadow: inset 0 1px 0 #c3a05233, 0 18px 55px #0003}
.featured-topline {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 9px; align-items: center}
.plan-index {font: 10px monospace; letter-spacing: .12em; color: #aaaab5}
.featured-tag {padding: 7px 9px; border-radius: 99px; background: #c3a05220; color: #ebd49e; font: 9px monospace; letter-spacing: .04em; white-space: nowrap}
.plan-card h4 {min-height: 55px; margin: 29px 0 8px; font-size: clamp(21px, 2.15vw, 29px); letter-spacing: -.05em; line-height: 1.13; font-weight: 500}
.plan-price {font-size: clamp(34px, 3.3vw, 47px); line-height: 1; letter-spacing: -.07em; font-weight: 600; color: #f4f2f0; margin: 0 0 21px; font-variant-numeric: tabular-nums}
.plan-featured .plan-price {color: #e6c47a}
.plan-focus {min-height: 68px; margin: 0 0 23px; color: #c5c2ce; font-size: 13px; line-height: 1.6}
.plan-card dl {margin: 0 0 24px}
.plan-card dl>div {padding: 16px 0; border-top: 1px solid #ffffff18}
.plan-card dt {font: 10px monospace; letter-spacing: .13em; color: #a9a6b1; margin-bottom: 9px}
.plan-card dd {margin: 0; color: #eeeef2; font-size: 13px; line-height: 1.6}
.plan-cta,.institutional-cta {min-height: 49px; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 17px; border: 1px solid #ffffff2d; border-radius: 11px; color: #f7f4f4; background: #ffffff0d; font-size: 12px; transition: background .25s, border-color .25s, transform .25s}
.plan-cta {width: 100%; margin-top: auto}
.plan-cta:hover,.institutional-cta:hover {background: #ffffff1a; border-color: #ffffff77; transform: translateY(-2px)}
.plan-featured .plan-cta {background: var(--red); border-color: #f33d5d; box-shadow: inset 0 1px 0 #ffffff2b}
.plan-featured .plan-cta:hover {background: #ef1236}
.plan-cta span,.institutional-cta span {font-size: 18px; line-height: 1}
.institutional-projects {display: flex; justify-content: space-between; align-items: end; gap: 35px; padding-top: clamp(42px, 5vw, 68px); margin-top: clamp(42px, 5vw, 68px); border-top: 1px solid #ffffff26}
.institutional-projects h4 {margin: 20px 0; font-size: clamp(34px, 4vw, 57px); line-height: 1.04; letter-spacing: -.065em; font-weight: 500}
.institutional-projects p {max-width: 665px; margin: 0; color: #b1b0ba; font-size: 14px; line-height: 1.7}
.institutional-cta {flex: 0 0 auto; min-height: 54px; padding-inline: 21px; background: #d90429; border-color: #ef3654; white-space: nowrap}
.institutional-cta:hover {background: #ef1236}
@media (max-width: 1100px) {
  .production-plans {gap: 10px}
  .plan-card {padding: 22px; min-height: 540px}
  .featured-tag {white-space: normal}
}
@media (max-width: 800px) {
  .production-plans {grid-template-columns: 1fr; gap: 14px}
  .plan-card {min-height: 0; padding: 25px}
  .plan-card h4,.plan-focus {min-height: 0}
  .plan-card h4 {margin-top: 20px}
  .plan-card dl {margin-bottom: 20px}
  .institutional-projects {display: block}
  .institutional-cta {margin-top: 27px; white-space: normal}
}
@media (max-width: 600px) {
  .approach .engagements {margin-top: 52px; padding: 21px; border-radius: 22px}
  .cinema-rule {align-items: flex-start; gap: 13px; padding: 17px}
  .cinema-rule img {width: 34px; height: 34px; flex-basis: 34px}
  .cinema-rule p {font-size: 12px}
  .plan-card {padding: 22px}
  .institutional-projects h4 {font-size: 35px}
  .institutional-cta {width: 100%}
}
@media (prefers-reduced-motion: reduce) {
  .plan-card,.plan-cta,.institutional-cta {transition: none}
  .plan-card:hover,.plan-cta:hover,.institutional-cta:hover {transform: none}
}
