.materials-page { background: var(--bg); }
.materials-page #materiais, .materials-page #como-funciona { scroll-margin-top: 100px; }
.materials-hero { overflow: hidden; padding: 105px 0 110px; background: radial-gradient(circle at 78% 45%,rgba(255,204,68,.12), transparent 35%),linear-gradient(125deg,var(--surface),var(--bg) 68%); border-bottom: 1px solid var(--line); }
.materials-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 65px; }
.materials-hero h1 { max-width: 680px; font-size: clamp(3rem,5.6vw,5.1rem); }
.materials-hero h1 strong { color: var(--gold); font-weight: inherit; }
.materials-hero .hero-lead { max-width: 590px; margin: 26px 0 32px; }
.materials-hero .button { gap: 16px; }
.materials-hero-note { margin: 17px 0 0; color: var(--muted); font-size: .83rem; }
.materials-hero-art { position: relative; isolation: isolate; height: 470px; display: flex; justify-content: center; align-items: center; }
.materials-orbit { position: absolute; border: 1px solid rgba(255,204,68,.16); border-radius: 50%; }
.orbit-one { width: 430px; height: 430px; }
.orbit-two { width: 330px; height: 330px; }
.hero-sheet { position: absolute; width: 263px; height: 330px; border-radius: 12px; padding: 26px; box-shadow: 0 25px 60px rgba(0,0,0,.42); }
.hero-sheet-back { left: 12%; top: 17%; transform: rotate(-15deg); border: 1px solid var(--line); background: var(--surface-2); }
.hero-sheet-back span, .hero-sheet-front > span, .hero-sheet-front em { font-size: .65rem; font-weight: 700; font-style: normal; letter-spacing: .18em; }
.hero-sheet-back div { height: 9px; background: rgba(169,182,192,.15); border-radius: 8px; margin-top: 22px; }
.hero-sheet-back div:nth-of-type(2) { width: 70%; }
.hero-sheet-back div:nth-of-type(3) { width: 85%; }
.hero-sheet-front { left: 29%; top: 14%; transform: rotate(8deg); display: flex; flex-direction: column; border: 1px solid rgba(255,204,68,.55); background: linear-gradient(155deg,var(--surface-2) 0%,var(--surface-2) 55%,var(--surface) 100%); }
.hero-sheet-front > span { color: var(--gold); }
.hero-sheet-front strong { margin-top: 48px; font: 700 2.4rem/1.05 'Space Grotesk',sans-serif; letter-spacing: -.045em; }
.sheet-bars { display: flex; gap: 6px; margin-top: auto; align-items: end; height: 32px; }
.sheet-bars i { display: block; width: 35px; height: 12px; border: 1px solid rgba(255,204,68,.55); border-radius: 3px; }
.sheet-bars i:nth-child(2) { height: 24px; }
.sheet-bars i:nth-child(3) { height: 32px; background: rgba(255,204,68,.7); }
.hero-sheet-front em { display: block; margin-top: 18px; color: var(--muted); }
.hero-stamp { position: absolute; right: 0; bottom: 33px; z-index: 2; display: grid; place-content: center; width: 104px; height: 104px; transform: rotate(13deg); border-radius: 50%; background: var(--gold); color: var(--bg); text-align: center; line-height: 1.1; font-weight: 800; box-shadow: 0 16px 35px rgba(0,0,0,.3); }
.hero-stamp small { font-size: .67rem; letter-spacing: .08em; }

.materials-section { background: var(--surface); }
.materials-heading h2 { max-width: 700px; }
.materials-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.material-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.material-art { position: relative; overflow: hidden; height: 210px; display: flex; align-items: center; justify-content: center; }
.art-number, .art-label { position: absolute; z-index: 2; color: var(--text); font-size: .67rem; font-weight: 700; letter-spacing: .17em; }
.art-number { top: 21px; left: 23px; }
.art-label { bottom: 18px; right: 22px; }
.art-images { background: radial-gradient(circle at 47% 35%,rgba(255,204,68,.2),transparent 46%),linear-gradient(135deg,var(--surface-2),var(--surface-2)); }
.art-window { position: relative; width: 210px; height: 128px; margin-top: 18px; overflow: hidden; transform: rotate(-7deg); border: 6px solid var(--text); border-bottom-width: 14px; border-radius: 5px; background: linear-gradient(var(--gold),var(--surface-2)); box-shadow: 17px 21px 35px rgba(0,0,0,.36); }
.art-sun { position: absolute; top: 14px; right: 27px; width: 37px; height: 37px; border-radius: 50%; background: var(--gold); }
.art-landscape { position: absolute; left: -5px; bottom: -48px; width: 145px; height: 116px; border-radius: 40%; transform: rotate(-19deg); background: var(--surface-2); box-shadow: 100px 16px 0 var(--surface-2); }
.art-work { background: radial-gradient(circle at center,rgba(255,204,68,.2),transparent 57%),linear-gradient(145deg,var(--surface-2),var(--surface-2)); }
.art-workflow { display: flex; align-items: center; gap: 7px; transform: rotate(-5deg); }
.art-workflow span { padding: 12px 10px; border: 1px solid rgba(255,204,68,.55); border-radius: 6px; background: var(--surface-2); color: var(--gold); font-size: .66rem; font-weight: 800; letter-spacing: .04em; box-shadow: 0 14px 25px rgba(0,0,0,.3); }
.art-workflow b { color: var(--gold); }
.art-food { background: radial-gradient(circle at 60% 40%,rgba(255,204,68,.18),transparent 50%),linear-gradient(145deg,var(--surface-2),var(--surface-2)); }
.art-food-mark { display: flex; align-items: center; gap: 16px; transform: rotate(-5deg); }
.art-food-mark span { color: var(--gold); font-size: 5rem; line-height: 1; }
.art-food-mark strong { color: var(--text); font: 700 1.6rem/1.03 'Space Grotesk',sans-serif; letter-spacing: -.04em; }
.art-tools { background: radial-gradient(circle at 50% 45%,rgba(68,221,255,.2),transparent 48%),linear-gradient(145deg,var(--surface-2),var(--surface-2)); }
.art-tool-grid { display: grid; grid-template-columns: repeat(2,58px); gap: 9px; transform: rotate(-6deg); }
.art-tool-grid i { display: grid; place-items: center; height: 58px; border: 1px solid rgba(68,221,255,.52); border-radius: 10px; background: rgba(8,17,24,.55); color: var(--primary-button); font: 700 1.1rem 'Space Grotesk',sans-serif; font-style: normal; box-shadow: 0 10px 24px rgba(0,0,0,.23); }
.art-tool-grid i:nth-child(2), .art-tool-grid i:nth-child(3) { color: var(--gold); border-color: rgba(255,204,68,.48); }
.material-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 28px; }
.material-type { color: var(--gold); font-size: .69rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.material-body h3 { margin-top: 14px; min-height: 52px; font-size: 1.48rem; }
.material-body p { color: var(--muted); margin: 14px 0 26px; font-size: .95rem; }
.material-body .button { width: 100%; min-height: 50px; margin-top: auto; padding: 12px 14px; gap: 8px; text-align: center; }
.materials-fineprint { margin: 23px 0 0; color: var(--muted); font-size: .83rem; text-align: center; }

.steps-section { background: var(--bg); }
.steps-header { max-width: 690px; margin-bottom: 40px; }
.steps-header p { margin: 19px 0 0; color: var(--muted); font-size: 1.05rem; }
.steps-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; }
.step { padding: 28px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.step > span { display: block; margin-bottom: 28px; color: var(--gold); font: 700 1.75rem 'Space Grotesk',sans-serif; }
.step h3 { font-size: 1.18rem; }
.step p { color: var(--muted); font-size: .94rem; margin: 12px 0 0; }
.materials-final { padding: 90px 0; background: radial-gradient(circle at 50% 0,rgba(255,204,68,.13),transparent 44%),var(--surface); text-align: center; }
.materials-final-inner { display: flex; flex-direction: column; align-items: center; }
.materials-final h2 { max-width: 760px; }
.materials-final .button { margin-top: 28px; gap: 12px; }

@media (max-width: 900px) {
  .materials-hero-grid { gap: 18px; }
  .materials-hero-art { height: 410px; transform: scale(.84); transform-origin: center; }
  .materials-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 800px) {
  .materials-hero { padding: 64px 0 68px; }
  .materials-hero-grid { grid-template-columns: 1fr; gap: 10px; }
  .materials-hero-copy, .materials-heading, .steps-header { text-align: center; }
  .materials-hero .eyebrow, .materials-heading .eyebrow, .steps-header .eyebrow, .materials-final .eyebrow { display: block; text-align: center; }
  .materials-hero h1 { font-size: clamp(2.6rem,10vw,4rem); }
  .materials-hero .hero-lead { margin: 22px auto 28px; }
  .materials-hero-art { width: 100%; height: 300px; transform: scale(.7); margin: -24px auto -10px; }
  .hero-sheet-back { left: calc(50% - 180px); top: 3%; }
  .hero-sheet-front { left: calc(50% - 80px); top: 0; }
  .hero-stamp { right: calc(50% - 200px); bottom: -32px; }
  .materials-heading { flex-direction: column; align-items: center; }
  .materials-heading > p { max-width: 570px; margin: 0 auto; }
  .steps-header { margin-left: auto; margin-right: auto; }
  .materials-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .material-body { align-items: stretch; }
  .material-body h3, .material-body p, .material-type { text-align: left; }
  .material-body h3 { min-height: 0; }
  .steps-grid { grid-template-columns: 1fr; }
  .materials-final { padding: 70px 0; }
  .materials-final .button { align-self: stretch; }
}

@media (max-width: 380px) {
  .materials-hero-art { transform: scale(.57); margin: -38px auto -34px; }
}