/* 13-metodo: Seção Método: etapas, prisma, frentes e formatos. */

/* método */
/* cena do prisma atrás de "O que isso inclui": uma luz, dois feixes = as duas frentes.
   O prisma (55% da largura da foto) fica 530px à direita do centro, livre do texto. */
.method{overflow-x:clip;}
.fronts-intro{--cover-h:clamp(600px, 100vh, 1000px);position:relative;min-height:var(--cover-h);align-items:end;
  margin-top:clamp(64px, 8vw, 120px);padding-bottom:clamp(8px, 2vw, 24px);}
.fronts-cover{position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;overflow:hidden;z-index:-1;pointer-events:none;}
.fronts-cover img{position:absolute;top:-8%;height:116%;width:auto;aspect-ratio:16 / 9;max-width:none;
  left:calc(50% + 530px - var(--cover-h) * 1.16 * 16 / 9 * .55);display:block;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 34%);mask-image:linear-gradient(to right, transparent 0%, #000 34%);}
.fronts-cover::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, var(--ink) 0%, rgb(17 17 17 / 0) 16%, rgb(17 17 17 / 0) 60%, var(--ink) 100%);}
.method .fronts-intro .h3{font-size:clamp(2rem, 1rem + 3vw, 3.75rem);max-width:12ch;text-shadow:0 2px 24px rgb(0 0 0 / .55);}
.fronts-intro p{text-shadow:0 1px 12px rgb(0 0 0 / .6);}
@media (max-width: 1100px){
  .fronts-cover img{left:calc(50% - var(--cover-h) * 1.16 * 16 / 9 * .55);-webkit-mask-image:none;mask-image:none;}
  .fronts-cover::after{background:linear-gradient(to bottom, var(--ink) 0%, rgb(17 17 17 / 0) 12%, rgb(17 17 17 / 0) 40%, rgb(17 17 17 / .92) 62%, var(--ink) 100%);}
}
@media (max-width: 767px){ .fronts-intro{--cover-h:92svh;} .fronts-cover img{top:-4%;height:66%;left:calc(50% - var(--cover-h) * .66 * 16 / 9 * .55);} }
.method{background:var(--ink);color:var(--white);}
.method-head .h2{max-width:14ch;}
.method-stage{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,96px);align-items:center;
  margin-top:clamp(56px,6vw,88px);
}
.method-visual{position:relative;}
.method-visual svg{width:100%;max-width:440px;margin:0 auto;overflow:visible;}
#morph{fill:var(--red);}
.method-orbit{fill:none;stroke:var(--white);stroke-width:11.9;}
.method-stage{position:relative;}
.method-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.method-wires .mw-wire{fill:none;stroke:var(--red);stroke-width:1.5;opacity:.45;}
.method-wires .mw-jn{fill:var(--red);}
.method-count{display:flex;align-items:center;gap:14px;margin-top:28px;justify-content:center;color:var(--muted-on-dark);}
.method-bar{width:120px;height:2px;background:var(--line-on-dark);position:relative;overflow:hidden;}
.method-bar i{position:absolute;inset:0;background:var(--red);transform-origin:left;transform:scaleX(1);}
.steps{list-style:none;margin:0;padding:0;display:grid;}
.step{
  display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:20px;
  padding:clamp(18px,2vw,26px) 0;
  border-top:1px solid var(--line-on-dark);
}
.step:last-child{border-bottom:1px solid var(--line-on-dark);}
.step-num{font-weight:800;font-stretch:125%;font-size:1.25rem;color:var(--red);font-variant-numeric:tabular-nums;line-height:1.3;}
.step h3{margin:0 0 6px;font-size:var(--t-h3);font-weight:800;font-stretch:108%;letter-spacing:-.015em;line-height:1.2;}
.step p{margin:0;color:#c4c4c4;max-width:46ch;}
.step-glyph{display:none;}
@media (max-width:900px){
  .method-stage{grid-template-columns:1fr;}
  .method-visual{display:none;}
  .step-glyph{display:block;width:22px;height:22px;margin-top:4px;}
  .step{grid-template-columns:40px minmax(0,1fr);}
}

.fronts-intro{margin-top:clamp(96px,10vw,160px);}
.fronts-intro .h3{max-width:24ch;}
.fronts-intro p{color:#bdbdbd;max-width:60ch;margin:16px 0 0;}
.fronts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,72px);margin-top:clamp(40px,4vw,64px);}
.front{border-top:2px solid var(--white);padding-top:32px;}
.front-title{display:flex;align-items:center;gap:14px;margin:0 0 28px;font-size:var(--t-h3);font-weight:800;font-stretch:108%;}
.front-title svg{width:20px;height:20px;flex:0 0 20px;}
.front p{margin:0;color:#c4c4c4;}
.front .front-title{margin-bottom:28px;}
/* entregas de cada frente em lista curta, com o mesmo marcador quadrado dos perfis */
.front-list{list-style:none;margin:0;padding:0;display:grid;gap:18px;}
.front-list li{display:flex;gap:14px;align-items:baseline;color:#c4c4c4;line-height:1.5;}
.front-list li::before{content:"";flex:0 0 7px;height:7px;background:var(--red);transform:translateY(-2px);}
@media (max-width:820px){.fronts{grid-template-columns:1fr;}}

.formats{margin-top:clamp(80px,8vw,128px);}
.formats-label{color:var(--muted-on-dark);margin:0 0 20px;}
/* rótulo à esquerda, CTAs no canto superior direito; ficam visíveis enquanto os formatos acendem */
.formats-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-bottom:20px;}
.formats-head .formats-label{margin:0;}
.method .formats-head .cta-pair{margin-top:0;}
.format{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.2vw,36px);
  padding:24px 0;border-top:1px solid var(--line-on-dark);
  align-items:baseline;
}
.format:last-child{border-bottom:1px solid var(--line-on-dark);}
.format h4{grid-column:1 / span 4;margin:0;font-size:var(--t-h3);font-weight:800;font-stretch:108%;line-height:1.2;}
.format p{grid-column:5 / -1;margin:0;color:#c4c4c4;max-width:58ch;}
@media (max-width:760px){
  .format h4,.format p{grid-column:1 / -1;}
  .format p{margin-top:8px;}
}
.method .cta-pair{margin-top:clamp(48px,5vw,72px);}
/* CTA: no computador fica preso abaixo das formas durante o palco fixo; no celular vem depois das etapas */
.method .method-side-cta{justify-content:center;margin-top:clamp(28px,3vw,40px);}
.method-cta{display:none;}
@media (max-width:900px){ .method-side-cta{display:none;} .method-cta{display:flex;} }