/* BizStrat Studio · La Forja de la Marca (v1, 2 nov 2026). Solo en el sitio publicado, solo en #metodo.
   Escritorio (≥768 px, sin «reducir movimiento»): html.f-on → escenario fijo (sticky) con el monolito que evoluciona
   en 4 fases y el texto en el 50 % izquierdo (Safe Zone). El resto de casos conserva la sección original:
   - reduced-motion / sin JavaScript: lista de 3 pasos + monolito estático de la cabecera (sin html.f-on).
   - móvil (<768 px): lista de 3 pasos, sin pin; el monolito queda al fondo con opacity .35 (.forja-ghost). */

.forja,.forja-ghost{display:none;}

/* ───────── escritorio ───────── */
.f-on .forja{display:block;position:relative;height:calc(400vh - 73px);height:calc(400svh - 73px);}
.f-on .forja-stage{position:sticky;top:73px;height:calc(100vh - 73px);height:calc(100svh - 73px);min-height:520px;}
.f-on .forja-obj{position:absolute;top:0;right:0;bottom:0;width:50%;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.f-on .forja-obj::before{content:"";position:absolute;inset:0;background:radial-gradient(58% 52% at 50% 58%,rgba(255,37,102,.24),rgba(255,37,102,0) 72%);opacity:var(--glow,0);}
.f-on .forja-obj svg{position:relative;height:min(88%,620px);width:auto;aspect-ratio:2/3;overflow:visible;display:block;}
.f-on .forja-imgs{position:relative;height:min(92%,660px);aspect-ratio:2/3;isolation:isolate;mix-blend-mode:lighten;-webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 60%,transparent 100%);will-change:transform;}
.forja-imgs img,.forja-imgs video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.forja-imgs img:not(:first-child){opacity:0;}
.forja-imgs video{opacity:0;}
.f-on .forja-copy{position:absolute;inset:0;pointer-events:none;}

.fpanel{position:absolute;left:0;top:50%;width:min(calc(50% - 32px),520px);opacity:0;visibility:hidden;transform:translateY(calc(-50% + 18px));transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1),visibility 0s linear .45s;}
.fpanel.on{opacity:1;visibility:visible;transform:translateY(-50%);pointer-events:auto;transition:opacity .5s ease .12s,transform .7s cubic-bezier(.2,.7,.2,1) .12s,visibility 0s;}
.f-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;min-height:28px;margin-bottom:26px;}
.f-num{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8a8a8a;}
.f-num b{color:#FF2566;font-weight:700;}
.f-num span{color:#ffffff;}
.f-brand{display:flex;align-items:center;height:28px;padding-left:16px;border-left:1px solid #3a3a3a;}
.f-brand img{display:block;width:auto;max-width:none;opacity:.92;}
.fpanel h3{font-size:clamp(34px,4.3vw,60px);line-height:1.02;letter-spacing:-.04em;font-weight:700;color:#ffffff;text-wrap:balance;}
.fpanel h3 em{font-style:normal;color:#FF2566;}
.fpanel h3.f-long{font-size:clamp(30px,3.5vw,50px);}
.fpanel p.f-sub{margin-top:22px;font-size:clamp(15px,1.3vw,18px);line-height:1.65;color:#c4c4c4;max-width:470px;}
.fpanel .btn{margin-top:30px;}
.f-price{margin-top:18px;font-size:14px;color:#a3a3a3;}
.f-price b{color:#ffffff;font-weight:600;}

.f-progress{position:absolute;left:0;bottom:28px;display:flex;align-items:center;gap:8px;pointer-events:none;}
.f-progress i{display:block;width:28px;height:3px;border-radius:2px;background:#3a3a3a;transition:background .3s ease;}
.f-progress i.on{background:#FF2566;}
.f-progress span{margin-left:10px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8a8a8a;}

/* con La Forja activa, la lista original sigue para lectores de pantalla pero no se ve; y no se repite el texto que ya cuenta el escenario */
.f-on #metodo .steps{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
.f-on #metodo figure[aria-hidden="true"]{display:none !important;}
.f-on #metodo .pull-rent{display:none;}
.f-on #metodo .pull-brand{margin-top:clamp(40px,5vw,72px) !important;}

/* piezas del monolito */
.f-floor-pulse{animation:f-pulse 3.2s ease-in-out infinite;transform-origin:center;}
@keyframes f-pulse{0%,100%{opacity:.75}50%{opacity:1}}

/* ───────── móvil: sin pin; el monolito al fondo, a baja opacidad ───────── */
@media (max-width:767px){
  #metodo .steps{position:relative;isolation:isolate;}
  .forja-ghost{display:block;position:absolute;z-index:-1;top:-8px;right:-26vw;width:86vw;max-width:420px;opacity:.35;pointer-events:none;}
  .forja-ghost svg,.forja-ghost img{display:block;width:100%;height:auto;overflow:visible;}
  .forja-ghost img{mix-blend-mode:lighten;-webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 60%,transparent 100%);}
}

@media (prefers-reduced-motion:reduce){
  .f-floor-pulse{animation:none;}
  .fpanel,.fpanel.on{transition:none;}
}