/* Zavra · Como trabalhamos. Depende de site.css. */

/* ============ abertura: frase longa, coluna mais larga ============ */
.page-hero h1 { max-width: 22ch }

/* ============ TIME DE IMPLEMENTAÇÃO ============ */
.crew { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.crew-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(380px, 38vw, 540px); border-radius: var(--r); color: #fff }
.photo { position: absolute; inset: 0; z-index: -2 }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block }
.crew-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8, 10, 14, .78), rgba(8, 10, 14, .2) 55%, rgba(8, 10, 14, 0)) }
.crew-in { display: grid; gap: 10px; justify-items: start; padding: clamp(20px, 2.6vw, 32px); max-width: 52ch }
.crew-in .h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 500; letter-spacing: -.025em }
.crew-in p { font-size: var(--fs-sm); line-height: 1.5; color: rgba(255, 255, 255, .9) }
.crew-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: clamp(40px, 5vw, 64px) }
.crew-facts li { display: grid; gap: 6px; align-content: start; padding-top: 16px; border-top: 1px solid var(--line-2) }
.crew-facts b { font-size: var(--fs-h3); font-weight: 550; letter-spacing: -.02em; line-height: 1.25 }
.crew-facts span { color: var(--muted); font-size: var(--fs-sm) }
@media (max-width: 860px) {
  .crew { grid-template-columns: 1fr }
  .crew-card { min-height: 340px }
  .crew-facts { grid-template-columns: 1fr; gap: 20px }
}

/* ============ PROCESSO: quatro degraus que sobem ============ */
.climb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; align-items: end; counter-reset: none }
.climb li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 2vw, 26px); border-radius: var(--r-step); background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--c);
  opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1) }
.climb .c1 { min-height: 280px } .climb .c2 { min-height: 330px; transition-delay: .12s } .climb .c3 { min-height: 380px; transition-delay: .24s } .climb .c4 { min-height: 430px; transition-delay: .36s }
.climb.is-in li, html:not(.js) .climb li { opacity: 1; transform: none }
.climb .c4 { background: linear-gradient(180deg, rgba(125, 158, 204, .2), rgba(125, 158, 204, .04)); border-color: rgba(125, 158, 204, .4) }
.climb .n { font-size: var(--fs-2xs); font-weight: 600; color: var(--c) }
.climb p { color: var(--muted); font-size: var(--fs-sm) }
.climb .out { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); color: var(--text); font-size: var(--fs-sm); font-weight: 550 }
.climb .out span { display: block; margin-bottom: 2px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint) }
@media (max-width: 900px) {
  .climb { grid-template-columns: 1fr 1fr }
  .climb li { min-height: 0 !important }
  .climb .c3, .climb .c4 { margin-top: 0 }
}
@media (max-width: 560px) {
  .climb { grid-template-columns: 1fr }
  .climb .c1 { margin-right: 18% } .climb .c2 { margin-right: 12% } .climb .c3 { margin-right: 6% }
}

/* ============ O QUE BUSCAMOS: abas à esquerda, cena animada à direita ============ */
.operating-thesis { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 24px; align-items: stretch }
.outcome-tabs { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 8px }
.choice { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; padding: 20px 24px; text-align: left; color: var(--text); background: #fff; border: 1px solid var(--line); border-radius: 12px; transition: background .25s ease, border-color .25s ease }
.choice:hover { border-color: var(--line-2) }
.choice[aria-selected="true"] { border-color: var(--text); background: var(--surface-2) }
.choice-head { display: flex; align-items: baseline; gap: 12px }
.choice-n { flex: none; font-size: var(--fs-xs); font-weight: 600; color: var(--c) }
.choice-t { font-size: var(--fs-h3); font-weight: 550; line-height: 1.3; letter-spacing: -.02em }
.choice-d { display: block; padding-left: calc(2ch + 12px); color: var(--muted); font-size: var(--fs-sm); line-height: 1.55 }
.outcome-visual { --d-ink: #eef1f5; --d-ink-2: #c4cdd6; --d-muted: #9aa6b2; --d-line: rgba(255, 255, 255, .1); --d-beige: #f2a07b; --d-beige-fill: #e48a5a;
  position: relative; isolation: isolate; min-width: 0; display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; color: var(--d-ink); background: #12262b url("../img/mar.jpg") center / cover }
.outcome-visual::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(9, 20, 24, .58) }
.outcome-stage { display: grid; flex: 1; padding: 32px 32px 24px }
.outcome-scene { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; transition: opacity .35s ease, visibility .35s }
.outcome-scene:not(.is-active) { opacity: 0; visibility: hidden }
.panel-label { margin-bottom: 16px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #a9b6bf }
.overline { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase }
.outcome-scene h3 { font-size: var(--fs-h3); line-height: 1.2; font-weight: 500; letter-spacing: -.02em; color: var(--d-ink) }
.outcome-scene .scene-visual { margin-block: auto; padding-block: 28px }
.so-what { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; border-radius: 10px; font-size: var(--fs-sm); line-height: 1.5; background: rgba(255, 255, 255, .08); color: var(--d-ink) }
.dk-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 12px; color: #a9b6bf }
.dk-head > span:last-child { text-align: right }
.dk-head .human { color: var(--d-beige) }
.thesis-foundation { display: flex; gap: 14px; align-items: center; margin: 0 32px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .14) }
.thesis-signature { display: flex; align-items: center; gap: 8px; color: #fff; font-size: var(--fs-body); font-weight: 650; letter-spacing: -.02em }
.thesis-signature svg { shape-rendering: crispEdges }

.principle-head, .principle-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(56px, .75fr) minmax(0, 1.25fr); column-gap: 16px; align-items: center }
.principle-head > span:last-child { grid-column: 3; text-align: left }
.principle-row { min-height: 68px; border-top: 1px solid var(--d-line) }
.principle-row > span { color: var(--d-ink-2); font-size: var(--fs-sm); transition: color .4s ease }
.principle-row > b { color: var(--d-ink); font-size: var(--fs-sm); font-weight: 450; transition: color .5s ease }
.principle-link { position: relative; height: 30px }
.principle-link::before, .principle-link .fill { content: ""; position: absolute; left: 0; right: 30px; top: 50%; height: 1px }
.principle-link::before { background: rgba(255, 255, 255, .12) }
.principle-link .fill { background: linear-gradient(90deg, rgba(242, 160, 123, .06), var(--d-beige-fill)); transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.5, 0, .3, 1), opacity .6s ease }
.principle-link .pulse { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; margin-top: -4.5px; background: var(--d-beige-fill); box-shadow: 0 0 12px rgba(228, 138, 90, .6); opacity: 0; transition: left .9s cubic-bezier(.5, 0, .3, 1), opacity .25s ease }
.principle-check { position: absolute; right: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-xs); font-style: normal; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); color: var(--d-ink); transition: background .35s ease, color .35s ease, border-color .35s ease }
.principle-check::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid #fff; opacity: 0 }
.control-principle.is-live .principle-row > b { color: #8b97a3 }
.control-principle.is-live .principle-check { background: transparent; color: #8b97a3 }
.principle-row.sending > span { color: #fff }
.principle-row.sending .pulse { left: calc(100% - 39px); opacity: 1 }
.principle-row.sending .fill, .principle-row.applied .fill { transform: scaleX(1) }
.principle-row.applied .pulse { left: calc(100% - 39px) }
.control-principle.is-live .principle-row.applied > b { color: #fff }
.control-principle.is-live .principle-row.applied .principle-check { background: #fff; color: var(--ink); border-color: #fff }
.principle-row.applied .principle-check::after { animation: check-ring .9s ease-out }
@keyframes check-ring { from { opacity: .7; transform: scale(1) } to { opacity: 0; transform: scale(2) } }

.routine-task { display: grid; grid-template-columns: 1.2fr 1fr 20px; align-items: center; gap: 18px; min-height: 64px; border-top: 1px solid var(--d-line) }
.routine-task > span { font-size: var(--fs-sm); color: var(--d-ink) }
.routine-task b { color: var(--d-beige); font-weight: 400; font-size: var(--fs-sm); animation: task-check 5s infinite }
.routine-track { height: 3px; background: rgba(255, 255, 255, .09); overflow: hidden }
.routine-track i { display: block; height: 100%; background: var(--d-beige-fill); transform-origin: left; animation: task-progress 5s infinite }
.routine-task:nth-child(3) i, .routine-task:nth-child(3) b { animation-delay: .65s }
.routine-task:nth-child(4) i, .routine-task:nth-child(4) b { animation-delay: 1.3s }
@keyframes task-progress { 0%, 8% { transform: scaleX(.03); opacity: .5 } 55%, 83% { transform: scaleX(1); opacity: 1 } 100% { transform: scaleX(1); opacity: .15 } }
@keyframes task-check { 0%, 35% { opacity: .22 } 55%, 90% { opacity: 1 } 100% { opacity: .22 } }

.document-field { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; padding: 4px 0 16px }
.review-document { height: 42px; border: 1px solid #6f8790; padding: 8px 7px; position: relative; border-radius: 2px; background: rgba(255, 255, 255, .01); animation: document-neutral 5.5s infinite; animation-delay: calc(var(--order) * .2s) }
.review-document i { display: block; height: 1px; margin-bottom: 5px; background: rgba(160, 180, 188, .4) }
.review-document i:nth-child(2) { width: 75% }
.review-document b { position: absolute; bottom: 3px; right: 5px; font-size: var(--fs-2xs); font-weight: 400; line-height: 1; color: #d5dee8; animation: task-check 5.5s infinite; animation-delay: calc(var(--order) * .2s) }
.document-exception { border-color: var(--d-beige); background: rgba(242, 160, 123, .06); animation: none }
.document-exception b { color: var(--d-beige); opacity: 1; animation: none }
.review-key { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 20px; font-size: var(--fs-xs); color: #c3cdd9 }
.review-key span:last-child { color: var(--d-beige) }
.review-process { display: grid; grid-template-columns: 1fr 1fr; gap: 24px }
.review-process > div { border-top: 1px solid var(--d-line); padding-top: 14px }
.review-process span { display: block; color: var(--d-ink); font-size: var(--fs-sm) }
.review-process b { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--d-ink-2); margin-top: 4px; line-height: 1.5 }
@keyframes document-neutral { 0%, 12%, 100% { background: rgba(255, 255, 255, .01) } 40%, 80% { background: rgba(185, 203, 227, .1) } }
[data-style="s0"] { --order: 0 } [data-style="s1"] { --order: 1 } [data-style="s2"] { --order: 2 } [data-style="s3"] { --order: 3 }
[data-style="s4"] { --order: 4 } [data-style="s5"] { --order: 5 } [data-style="s6"] { --order: 6 } [data-style="s7"] { --order: 7 }
[data-style="s8"] { --lane: 0 } [data-style="s9"] { --lane: 1 } [data-style="s10"] { --lane: 2 }

.memory-lane { display: grid; grid-template-columns: 1fr 64px 1.1fr; align-items: center; min-height: 76px }
.memory-source { padding: 12px 8px 12px 0 }
.memory-source > span, .memory-record > span { display: block; color: var(--d-ink); font-size: var(--fs-sm) }
.memory-source > span { color: var(--d-ink-2) }
.memory-source small, .memory-record small { display: block; color: var(--d-muted); font-size: var(--fs-xs); margin-top: 3px; line-height: 1.45 }
.memory-record small { color: var(--d-ink-2) }
.memory-route { height: 1px; position: relative; background: rgba(255, 255, 255, .09); margin-right: 12px }
.memory-document { position: absolute; width: 12px; height: 16px; top: -8px; left: 0; background: var(--d-beige-fill); border: 1px solid #f6c1a6; padding: 4px 2px; animation: memory-travel 7s linear infinite; animation-delay: calc(var(--lane) * .8s) }
.memory-document b { display: block; height: 1px; background: #7a3f22; margin-bottom: 3px }
.memory-record { position: relative; border: 1px solid rgba(118, 133, 153, .6); border-radius: 8px; padding: 12px 14px; background: rgba(255, 255, 255, .02); animation: memory-store 7s linear infinite; animation-delay: calc(var(--lane) * .8s) }
.memory-lane + .memory-lane .memory-record { margin-top: 6px }
.memory-record > span { display: flex; gap: 8px; justify-content: space-between }
.memory-record i { font-style: normal; color: #d9e4f0; font-size: var(--fs-xs); animation: memory-stamp 7s linear infinite; animation-delay: calc(var(--lane) * .8s) }
@keyframes memory-travel { 0%, 6% { left: 0; opacity: 0 } 12% { left: 0; opacity: 1 } 35% { left: calc(100% - 12px); opacity: 1 } 42%, 100% { left: calc(100% - 12px); opacity: 0 } }
@keyframes memory-store { 0%, 30% { background: rgba(255, 255, 255, .02); border-color: rgba(118, 133, 153, .6) } 40%, 84% { background: rgba(185, 203, 227, .1); border-color: #dce6f3 } 100% { background: rgba(255, 255, 255, .02); border-color: rgba(118, 133, 153, .6) } }
@keyframes memory-stamp { 0%, 30% { opacity: .12; transform: translateY(3px) } 40%, 84% { opacity: 1; transform: translateY(0) } 100% { opacity: .12; transform: translateY(0) } }
.outcome-visual:not(.motion-visible) *, .outcome-visual.motion-paused * { animation-play-state: paused !important }
@media (max-width: 860px) {
  .operating-thesis { grid-template-columns: 1fr; gap: 16px }
  .outcome-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none }
  .choice { padding: 14px 16px; min-height: 60px }
  .choice-d { display: none }
  .choice-t { font-size: var(--fs-body) }
  .outcome-stage { padding: 26px 20px 20px }
  .thesis-foundation { margin-inline: 20px }
}
@media (max-width: 620px) {
  .principle-head, .principle-row { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); column-gap: 10px }
  .principle-link::before, .principle-link .fill { right: 26px }
  .principle-check { width: 26px; height: 26px; top: 2px }
  .principle-row.sending .pulse, .principle-row.applied .pulse { left: calc(100% - 35px) }
  .principle-row { min-height: 72px }
  .routine-task { grid-template-columns: 1.4fr .75fr 14px; gap: 10px }
  .document-field { grid-template-columns: repeat(6, 1fr); gap: 7px }
  .review-document { height: 35px; padding: 6px }
  .review-document:nth-child(n+19) { display: none }
  .review-process { gap: 14px }
  .memory-lane { grid-template-columns: 1fr 32px 1.1fr; min-height: 88px }
  .memory-route { margin-right: 7px }
  .memory-record { padding: 12px 10px }
}

/* ============ SEGURANÇA E LGPD ============ */
#seguranca { padding-block: var(--sec-y) }
.privacy { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); padding: clamp(28px, 5vw, 64px); border-radius: var(--r); color: #fff }
.privacy-veil { position: absolute; inset: 0; z-index: -1; background: rgba(10, 13, 18, .42) }
.privacy-intro { display: grid; gap: 18px; align-content: start }
.privacy .eyebrow { color: rgba(255, 255, 255, .7) }
.privacy-list li { display: grid; gap: 4px; padding-block: 16px; border-top: 1px solid rgba(255, 255, 255, .2) }
.privacy-list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .2) }
.privacy-list b { font-weight: 600 }
.privacy-list span { font-size: var(--fs-sm); color: rgba(255, 255, 255, .86) }
@media (max-width: 860px) { .privacy { grid-template-columns: 1fr } }

/* ============ INFRAESTRUTURA: espectro do mais simples ao mais isolado ============ */
.spec-axis { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-bottom: 28px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint) }
.spec-axis i { position: relative; height: 2px; background: linear-gradient(90deg, rgba(109, 104, 56, .18), var(--c)) }
.spec-axis i::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--c); border-right: 0 }
.spec-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.spec-opts li { display: grid; gap: 10px; align-content: start; padding: clamp(20px, 2.4vw, 28px); background: #fff; border: 1px solid var(--line); border-radius: var(--r) }
.spec-opts p { color: var(--muted); font-size: var(--fs-sm) }
/* o marcador cresce em degraus: um, dois, três módulos do símbolo */
.spec-mark { display: flex; align-items: flex-end; gap: 3px; height: 24px; margin-bottom: 8px }
.spec-mark i { width: 8px; height: 8px; background: var(--c) }
.spec-mark i:nth-child(2) { height: 16px } .spec-mark i:nth-child(3) { height: 24px }
.spec-opts li:nth-child(1) .spec-mark i:nth-child(n+2), .spec-opts li:nth-child(2) .spec-mark i:nth-child(3) { visibility: hidden }
@media (max-width: 860px) { .spec-opts { grid-template-columns: 1fr } }

/* ============ celular: mais denso ============ */
@media (max-width: 560px) {
  .crew-card { min-height: 280px }
  .crew-in { padding: 18px }
  .crew-facts { gap: 18px; margin-top: 32px }
  .climb li { padding: 16px; gap: 8px }
  .outcome-stage { padding: 20px 16px 16px }
  .outcome-scene .scene-visual { padding-block: 18px }
  .thesis-foundation { margin-inline: 16px; padding: 12px 0 }
  .privacy { padding: 20px; gap: 20px }
  .privacy-list li { padding-block: 12px }
  .spec-opts li { padding: 18px }
  .spec-axis { margin-bottom: 18px }
}