/* BAW v15 · Redes que emergen · Método legible y tecnológico · Final con la firma como protagonista */

/* =========================================================
   1 · REDES: el contenido emerge de los teléfonos
   ========================================================= */
.rs-emerge{position:absolute;inset:-34px 0 0;pointer-events:none;z-index:4}
.rs-em{position:absolute;left:var(--x);bottom:var(--y);display:grid;place-items:center;opacity:0;
  animation:rsEmerge var(--d,7s) cubic-bezier(.22,.7,.3,1) var(--dl,0s) infinite;will-change:transform,opacity}
@keyframes rsEmerge{
  0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0deg)}
  12%{opacity:1;transform:translate(calc(var(--dx)*.18),calc(var(--dy)*.18)) scale(1.08) rotate(calc(var(--r)*.3))}
  70%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.92) rotate(var(--r))}
}
.rs-em-like{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#FF5C8A,#E64980);box-shadow:0 8px 21px rgba(230,73,128,.45);color:#fff}
.rs-em-like b{position:absolute;right:-26px;top:-6px;font:700 12px 'IBM Plex Mono',monospace;color:#fff;background:#E64980;border-radius:999px;padding:2px 7px}
.rs-em-reel{width:42px;height:56px;border-radius:10px;background:linear-gradient(160deg,#7048E8,#E64980 60%,#FF922B);box-shadow:0 8px 21px rgba(112,72,232,.4);color:#fff}
.rs-em-story{width:52px;height:52px;border-radius:50%;padding:3px;background:conic-gradient(#FFD43B,#FF922B,#E64980,#AE3EC9,#4C6EF5,#FFD43B)}
.rs-em-story i{display:block;width:100%;height:100%;border-radius:50%;border:3px solid #fff;background:radial-gradient(circle at 35% 35%,#FFE8A3,#FF922B)}
.rs-em-post{width:50px;height:50px;border-radius:9px;background:#fff;box-shadow:0 8px 21px rgba(40,10,80,.3);padding:5px;display:grid;grid-template-rows:1fr 6px;gap:4px}
.rs-em-post i{border-radius:5px;background:linear-gradient(135deg,#63E6BE,#4DABF7)}
.rs-em-post u{border-radius:3px;background:#E9ECEF;text-decoration:none}
.rs-em-tag{padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.95);color:#7048E8;font:700 14px 'Space Grotesk',sans-serif;box-shadow:0 8px 21px rgba(40,10,80,.25);white-space:nowrap}
.rs-em-music{width:46px;height:46px;border-radius:50%;background:#111126;color:#6CF0C2;box-shadow:0 0 0 3px rgba(108,240,194,.5),0 8px 21px rgba(17,17,38,.35)}
.rs-em-video{width:54px;height:40px;border-radius:9px;background:linear-gradient(135deg,#1C7ED6,#22B8CF);box-shadow:0 8px 21px rgba(28,126,214,.4);color:#fff}
.rs-em-comment{padding:8px 12px;border-radius:14px 14px 14px 4px;background:#fff;color:#2B3140;font:600 12px 'IBM Plex Sans',sans-serif;box-shadow:0 8px 21px rgba(40,10,80,.25);white-space:nowrap}
.rs-em svg{width:22px;height:22px}
.rs-sec.is-off .rs-em,.m10-paused .rs-em{animation-play-state:paused}
@media (max-width:760px){.rs-em:nth-child(n+11){display:none}}
@media (prefers-reduced-motion:reduce){.rs-emerge{display:none}}
.ma-lite .rs-em:nth-child(n+7){display:none}

/* =========================================================
   2 · MÉTODO (sección azul): legible, dinámico y tecnológico
   ========================================================= */
#metodo{background:
  radial-gradient(ellipse 60% 50% at 12% 0%,rgba(108,240,194,.18),transparent 70%),
  radial-gradient(ellipse 50% 60% at 95% 30%,rgba(230,73,128,.22),transparent 70%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 34px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 34px),
  linear-gradient(135deg,#1F3BD1 0%,#3A2BB8 48%,#5B21B6 100%)!important;color:#FFFFFF!important}
#metodo .grid-floor,#metodo .scan{opacity:.35}
#metodo .lz-phi{--lz-c:rgba(255,227,107,.13)!important}
#metodo .phi-mark{opacity:.08!important}
#metodo h2{color:#FFFFFF!important;text-shadow:0 2px 21px rgba(10,8,60,.35)}
#metodo>div>p:first-of-type{color:#FFE36B!important}
#metodo>div>p:nth-of-type(2){color:#EEF1FF!important;font-size:19px!important;line-height:1.618}
#metodo .m10-layer{background:rgba(14,10,58,.86)!important;border-color:rgba(255,255,255,.55)}
#metodo .m10-layer b{font-size:15px!important;line-height:1.3}
#metodo .m10-layer small{font-size:11px!important;letter-spacing:.1em}
#metodo .m10-engine-description{background:rgba(14,10,58,.78)!important;border-color:rgba(255,255,255,.4)}
#metodo .m10-engine-description p{font-size:18px!important;line-height:1.5}
#metodo .m10-engine-description .m10-counter{font-size:14px!important}
#metodo .m10-engine-note{font-size:12px!important;color:#E6E0FA!important}
@media (max-width:900px){#metodo .m10-layer b{font-size:14px!important}#metodo .m10-layer small{font-size:10px!important}}

/* Las cinco capas como tarjetas técnicas */
#metodo .m10-layer-details{display:grid!important;grid-template-columns:repeat(6,1fr);gap:21px;border-top:0!important;margin-top:55px!important}
#metodo .m10-layer-details>span[aria-hidden]{display:none}
#metodo .m10-layer-details>.rv{--c:#FFE36B;grid-column:span 2;position:relative;overflow:hidden;isolation:isolate;display:flex!important;flex-direction:column;gap:8px!important;
  padding:26px 26px 24px!important;border:1px solid rgba(255,255,255,.26)!important;border-radius:21px;background:linear-gradient(160deg,rgba(40,26,140,.92),rgba(24,16,96,.9));
  box-shadow:0 21px 55px rgba(8,6,50,.28);animation:none!important;opacity:1!important;transform:none;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .5s,box-shadow .5s}
#metodo .m10-layer-details>.rv:nth-child(4),#metodo .m10-layer-details>.rv:nth-child(5){grid-column:span 2}
#metodo .m10-layer-details>.rv:nth-child(6){grid-column:2 / span 2}
#metodo .m10-layer-details>.rv:nth-child(7){grid-column:4 / span 2}
#metodo .m10-layer-details>.rv:nth-child(4){--c:#6CF0C2}#metodo .m10-layer-details>.rv:nth-child(5){--c:#FFA9D4}#metodo .m10-layer-details>.rv:nth-child(6){--c:#9BD8FF}#metodo .m10-layer-details>.rv:nth-child(7){--c:#D7B4FF}
#metodo .m10-layer-details>.rv::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--c)}
#metodo .m10-layer-details>.rv::after{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:-40%;width:40%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 22%,transparent),transparent);transform:translateX(0);opacity:0}
#metodo .m10-layer-details>.rv>span{flex:none!important;font:700 44px/1 'Space Grotesk',sans-serif!important;letter-spacing:-.04em;color:var(--c)!important;font-family:'Space Grotesk',sans-serif!important}
#metodo .m10-layer-details>.rv>span::after{content:' / capa';font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.1em;color:rgba(255,255,255,.7);vertical-align:middle;margin-left:6px}
#metodo .m10-layer-details>.rv>h3{flex:none!important;color:#FFFFFF!important;font-size:22px!important;line-height:1.2}
#metodo .m10-layer-details>.rv>p{flex:none!important;color:#E9ECFF!important;font-size:16px;line-height:1.618}
#metodo .m10-layer-details>.rv.mt-on{border-color:var(--c)!important;transform:translateY(-6px);box-shadow:0 0 0 2px var(--c),0 21px 55px color-mix(in srgb,var(--c) 30%,transparent)}
#metodo .m10-layer-details>.rv.mt-on::after{opacity:1;animation:mtScan 2.4s linear infinite}
@keyframes mtScan{from{transform:translateX(0)}to{transform:translateX(350%)}}
@media (max-width:1099px){#metodo .m10-layer-details{grid-template-columns:1fr 1fr}#metodo .m10-layer-details>.rv,#metodo .m10-layer-details>.rv:nth-child(n){grid-column:auto}#metodo .m10-layer-details>.rv:nth-child(7){grid-column:1/-1}}
@media (max-width:640px){#metodo .m10-layer-details{grid-template-columns:1fr}#metodo .m10-layer-details>.rv:nth-child(7){grid-column:auto}}
@media (prefers-reduced-motion:reduce){#metodo .m10-layer-details>.rv.mt-on::after{animation:none;opacity:0}}

/* =========================================================
   3 · FINAL DEL SITIO: cierre, pie y la firma con orgullo
   ========================================================= */
/* el pie entra con borde pintado: el color del cierre gotea en él */
.site footer{margin-top:-30px;padding-top:30px;border-top:0!important;
  -webkit-mask:url(lienzo-borde.svg) top left/1440px 32px repeat-x,linear-gradient(#000 0 0) 0 31px/100% calc(100% - 31px) no-repeat;
  mask:url(lienzo-borde.svg) top left/1440px 32px repeat-x,linear-gradient(#000 0 0) 0 31px/100% calc(100% - 31px) no-repeat;
  background:linear-gradient(170deg,#3B2BB0 0%,#5A2CC0 46%,#8E2F9E 100%)!important}
.site footer .circuits{opacity:.28!important}
.site footer .ft-grid{padding-top:34px!important}
.site footer #pie-logo{width:72px!important;height:76px!important;filter:drop-shadow(0 6px 13px rgba(10,6,50,.35))}
.site footer .ft-grid>div:first-child strong{font-size:22px!important}
.site footer .ft-grid>div:first-child>span>span{color:#EDEBFF}
.site footer .ft-grid+div{text-align:center;color:#E6E3FF;border-top-color:rgba(255,255,255,.2)!important}

/* La firma, protagonista */
.bsh{position:relative;isolation:isolate;flex-direction:column;align-items:center;gap:13px;padding:55px 16px 34px!important;overflow:hidden}
.bsh::before{width:min(900px,96vw)!important;height:320px!important;translate:-50% -46%!important;background:radial-gradient(closest-side,rgba(255,227,107,.34),rgba(255,227,107,.08) 61.8%,rgba(255,227,107,0))!important}
.bsh-phi{position:absolute;z-index:-1;left:50%;top:50%;width:min(520px,90vw);aspect-ratio:1618/1000;translate:-50% -50%;color:rgba(255,227,107,.32);pointer-events:none}
.bsh-sp{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 3.2s cubic-bezier(.5,0,.2,1)}
.bsh.bsh-in .bsh-sp{stroke-dashoffset:0}
.bsh-spot{position:absolute;z-index:-1;left:50%;top:0;width:340px;height:100%;translate:-50% 0;background:conic-gradient(from 160deg at 50% 0%,transparent 0deg,rgba(255,246,214,.22) 14deg,rgba(255,246,214,.06) 26deg,transparent 40deg);clip-path:polygon(50% 0,100% 100%,0 100%);opacity:.9;pointer-events:none}
.bsh-k{margin:0;font:600 12px 'IBM Plex Mono',monospace;letter-spacing:.24em;text-transform:uppercase;color:#FFE36B}
.bsh-k span{display:inline-block;animation:bshTw 2.6s ease-in-out infinite}
.bsh-k span:last-child{animation-delay:1.3s}
@keyframes bshTw{0%,100%{opacity:.4;scale:.8}50%{opacity:1;scale:1.15}}
.bsh-sub{margin:0;max-width:560px;text-wrap:balance;text-align:center;font:italic 15px/1.618 Georgia,'Times New Roman',serif;color:#F4F0FF}
.baw-sign--hero{--bg:#3A1F8F;font-size:16px;padding:16px 30px 16px 16px;gap:16px;
  box-shadow:0 0 0 1px rgba(255,227,107,.55),0 13px 34px rgba(10,6,50,.4),0 0 55px rgba(255,227,107,.22);animation:bshGlow 4.2s ease-in-out infinite}
.baw-sign--hero .baw-ring::before{background:conic-gradient(from 0deg,transparent 0 62%,#FFE36B 72%,#FFFFFF 82%,#FFB86B 90%,transparent 97%)!important;animation-duration:5s}
.baw-sign--hero .baw-ring::after{inset:2px}
.baw-sign--hero .baw-phi{position:relative;width:55px;height:55px;font-size:30px;background:radial-gradient(circle at 35% 30%,#FFF6C8,#FFE36B 45%,#F2B53A);box-shadow:0 0 0 3px rgba(255,227,107,.35),0 0 21px rgba(255,227,107,.55)}
.baw-sign--hero .baw-txt b{font-size:18px}
.bsh-orbit{position:absolute;inset:-6px;border-radius:50%;animation:bawSpin 6s linear infinite;pointer-events:none}
.bsh-orbit b{position:absolute;width:6px;height:6px;border-radius:50%;background:#FFF6C8;box-shadow:0 0 8px #FFE36B}
.bsh-orbit b:nth-child(1){left:50%;top:-3px}.bsh-orbit b:nth-child(2){right:2px;bottom:6px;width:4px;height:4px}.bsh-orbit b:nth-child(3){left:2px;bottom:10px;width:5px;height:5px}
@keyframes bshGlow{0%,100%{box-shadow:0 0 0 1px rgba(255,227,107,.55),0 13px 34px rgba(10,6,50,.4),0 0 34px rgba(255,227,107,.16)}50%{box-shadow:0 0 0 1px rgba(255,227,107,.9),0 13px 34px rgba(10,6,50,.4),0 0 70px rgba(255,227,107,.36)}}
a.baw-sign--hero:hover,a.baw-sign--hero:focus-visible{transform:translateY(-2px) scale(1.02)}
@media (max-width:560px){.baw-sign--hero{font-size:13px;padding:13px 16px 13px 13px;gap:13px;border-radius:21px}.baw-sign--hero .baw-phi{width:44px;height:44px;font-size:24px}.baw-sign--hero .baw-txt b{font-size:15px}.bsh-sub{font-size:14px}}
.m10-paused .bsh *,.m10-paused .baw-sign--hero{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.bsh *,.baw-sign--hero{animation:none!important;transition:none!important}.bsh-sp{stroke-dashoffset:0}}
.ma-lite .bsh-orbit,.ma-lite .baw-sign--hero{animation:none!important}
