/* ================= HOME ================= */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; display: flex; z-index: 0; }
/* o ripado: a mesma parede fatiada em réguas que se deslocam com o cursor */
.hero-bg .slat {
  flex: 1 1 0; height: 100%;
  background-image: url("../img/deck/d1-1.jpg");
  background-size: max(100vw, 177.8svh) auto;
  background-repeat: no-repeat;
  transform: translateY(var(--y, 0px)); transition: transform 1.4s var(--ease-out);
  will-change: transform;
}
.hero-bg::after {
  content: ""; position: absolute; inset: -40px 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(11,9,8,.9) 30%, rgba(11,9,8,.45) 62%, rgba(11,9,8,.25) 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 28%),
    linear-gradient(180deg, rgba(11,9,8,.7) 0%, transparent 20%);
}
.hero-inner {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--nav-h) + clamp(24px, 6vh, 64px));
  padding-bottom: clamp(28px, 6vh, 72px);
  gap: clamp(18px, 3.4vh, 36px);
}
.hero-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(20px, 4vw, 64px); }
.hero-logo { width: clamp(150px, min(24vw, 34vh), 360px); opacity: 0; transform: scale(.94); transition: opacity 1.6s var(--ease-out) .3s, transform 1.8s var(--ease-out) .3s; }
.hero-logo.in { opacity: 1; transform: none; }
.hero-lede { max-width: 760px; }
.hero-foot {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: clamp(8px, 3vh, 32px); font-size: 14px; letter-spacing: .04em; color: var(--text-3);
}
.scroll-cue { text-decoration: none; color: var(--accent); }
.scroll-cue span { display: inline-block; animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------- tese ---------- */
.tese .eyebrow { display: block; margin-bottom: clamp(24px, 4vh, 44px); }
.changes { list-style: none; margin: 0; padding: 0; }
.changes li {
  font-family: var(--f-serif); font-size: clamp(30px, min(4.4vw, 8.2vh), 68px); line-height: 1.12; letter-spacing: -.025em;
  padding: clamp(10px, 1.6vh, 18px) 0; border-bottom: 1px solid var(--line);
  color: var(--text-2);
}
.changes li:first-child { border-top: 1px solid var(--line); }
.changes li:nth-child(2) { transition-delay: .06s; } .changes li:nth-child(3) { transition-delay: .12s; }
.changes li:nth-child(4) { transition-delay: .18s; } .changes li:nth-child(5) { transition-delay: .24s; }
.changes .grad { font-style: italic; }

/* ---------- contradição ---------- */
.contra-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.contra-grid .head { margin-bottom: 0; }
.contra-grid .lede { margin-top: 24px; }
.boxes { display: grid; gap: 14px; }
.boxes .card { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 18px; padding: 20px 24px; }
.boxes .card h3 { margin: 0; font-size: clamp(19px, 1.6vw, 24px); }
.boxes .card .sub { margin: 0; text-align: right; }
.boxes-note { margin: 10px 0 0; color: var(--text-3); }

/* ---------- ideia oposta ---------- */
.mut-stage { position: relative; overflow: hidden; margin: clamp(8px, 2vh, 24px) 0 clamp(28px, 5vh, 56px); }
.mut-img { width: min(106vw, 1440px); margin-left: 50%; transform: translateX(calc(-50% + var(--pan, 0px))); }
.mut-img img { width: 100%; height: auto; border-radius: var(--radius); }
.mut-stage::before, .mut-stage::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12vw; z-index: 1; pointer-events: none; }
.mut-stage::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.mut-stage::after { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); }
.steps li { border-top: 1px solid var(--line-2); padding-top: 18px; }
.steps .num { font-weight: 600; font-size: 13px; letter-spacing: .2em; color: var(--accent); }
.steps p { margin: 8px 0 0; font-family: var(--f-serif); font-size: clamp(19px, 1.6vw, 24px); line-height: 1.3; color: var(--text); }
.steps li:nth-child(2) { transition-delay: .1s; } .steps li:nth-child(3) { transition-delay: .2s; }

/* ---------- não precisa ser fixa ---------- */
.fixa { min-height: min(92svh, 900px); display: flex; align-items: center; }
.fixa .atmos img { object-position: 70% 50%; }
.fixa .atmos::after { background: linear-gradient(90deg, var(--bg) 0%, rgba(11,9,8,.82) 36%, rgba(11,9,8,.1) 70%, rgba(11,9,8,0) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 25%), linear-gradient(180deg, var(--bg) 0%, transparent 25%); }
.fixa-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 720px; }
.fixa-copy { display: grid; gap: 22px; }
.fixa-copy .body-copy { color: var(--text-2); }

/* ---------- duas formas ---------- */
.duas { padding-top: clamp(80px, 13vh, 150px); }
.duas-head { margin-bottom: clamp(32px, 5vh, 56px); }
.duas-head .eyebrow { display: block; margin-bottom: 18px; }
.doors { display: flex; gap: 2px; height: clamp(520px, 82svh, 860px); padding: 0 2px; }
.door {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 6px;
  display: flex; align-items: flex-end; text-decoration: none; color: var(--text);
  transition: flex-grow 1s var(--ease);
}
.doors.lean-a .door-a, .doors.lean-b .door-b { flex-grow: 1.6; }
.door-img { position: absolute; inset: 0; }
.door-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1.2s var(--ease), transform 6s var(--ease-out); }
.door-img .alt-img { opacity: 0; }
.door:hover .door-img .alt-img, .door:focus-visible .door-img .alt-img { opacity: 1; }
.door:hover .door-img img { transform: scale(1.04); }
.door::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,9,8,.96) 0%, rgba(11,9,8,.7) 38%, rgba(11,9,8,.15) 75%); }
.door-b::after { background: linear-gradient(0deg, rgba(10,13,16,.96) 0%, rgba(10,13,16,.7) 38%, rgba(10,13,16,.15) 75%); }
.door-body { position: relative; z-index: 1; padding: clamp(24px, 3.4vw, 56px); max-width: 620px; }
.door-body .eyebrow { display: block; margin-bottom: 14px; }
.eyebrow.ice { color: var(--ice); }
.door-name { font-size: clamp(34px, min(4.2vw, 7.6vh), 68px); line-height: 1.02; letter-spacing: -.03em; margin: 0 0 14px; }
.door-desc { margin: 0 0 14px; font-size: clamp(16px, 1.3vw, 19px); color: var(--text-2); max-width: 34ch; }
.door-rule { margin: 0 0 26px; font-family: var(--f-serif); font-style: italic; font-size: clamp(18px, 1.5vw, 22px); color: var(--accent); }
.door-b .door-rule { color: var(--ice); }
.door-rule span { color: var(--text); }
.door-b .door-btn { border-color: rgba(156,192,212,.35); }
.door:hover .door-btn { background: var(--text); color: var(--bg); border-color: var(--text); }
.door:hover .door-btn .arr { transform: translateX(5px); }
.symmetry { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 22px; padding-bottom: clamp(64px, 10vh, 120px); color: var(--text-3); font-size: 15px; }
.symmetry b { font-weight: 500; color: var(--text); }

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .hero-main { grid-template-columns: 1fr; }
  .hero-logo { order: -1; width: clamp(110px, 30vw, 170px); }
  .contra-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .doors { flex-direction: column; height: auto; gap: 2px; }
  .door { min-height: 72svh; flex: none; }
  .doors.lean-a .door-a, .doors.lean-b .door-b { flex-grow: 0; }
  .mut-img { width: 170vw; }
}
@media (max-width: 600px) {
  .lead-line { grid-template-columns: 1fr; }
  .lead-line::before { width: 64px; }
  .boxes .card { grid-template-columns: auto 1fr; }
  .boxes .card .sub { grid-column: 2; text-align: left; }
  .hero-foot { font-size: 13px; }
  .hero-lede .br-d { display: none; }
}
@media (max-height: 640px) and (min-width: 901px) {
  .hero-logo { width: clamp(120px, 26vh, 220px); }
}
.hero .frame { top: calc(var(--nav-h) + 4px); }