/* ===== 01-portada.css ===== */ /* =================== 01 · PORTADA (#inicio, prefijo s01-) =================== */ #inicio{--tape-zone:clamp(128px,17vh,210px);min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center; padding:calc(var(--hd-h) + clamp(20px,4vh,64px)) 0 var(--tape-zone)} /* malla y halo pintados en el fondo de la sección: sin capa propia, sin parallax y desvanecidos antes del borde (no dejan costura al bajar) */ #inicio{--hr:clamp(280px,31vw,590px);--hx:calc(116% - var(--hr));--hy:calc(var(--hr) - 12%); background-image:radial-gradient(circle at 1.5px 1.5px,rgba(255,255,255,.055) 1.2px,transparent 1.8px), radial-gradient(circle var(--hr) at var(--hx) var(--hy),rgba(46,59,255,.55) 0,rgba(46,59,255,.12) calc(var(--hr) * .55),rgba(46,59,255,0) calc(var(--hr) * .75)); background-size:10px 10px,100% 100%;background-repeat:repeat,no-repeat} #inicio .s01-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(8px,2vw,40px);align-items:center} @media (min-width:1024px){ #inicio .s01-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)} } /* ---------- titular ---------- */ /* --g = cuerpo del titular; se declara en el contenedor y se resuelve (cqi) en cada descendiente */ #inicio .s01-copy{container-type:inline-size;position:relative;z-index:3;--g:clamp(40px,min(10vw,14.5vh),170px);--g:clamp(40px,min(16.6cqi,14.5vh),170px);--g:clamp(40px,min(16.6cqi,14.5svh),170px)} #inicio .s01-q{margin:0;font-weight:400} #inicio .s01-m{display:flex;align-items:flex-start;overflow:hidden;white-space:nowrap;padding-block:.07em;margin-block:-.07em} #inicio .s01-m > span{display:block;flex:none} #inicio .s01-row{align-items:baseline;column-gap:.28em} #inicio .s01-tall{padding-top:.2em;margin-top:-.2em} #inicio .s01-gr{font-family:var(--f-disp);font-weight:900;text-transform:uppercase;font-size:var(--g);line-height:.86;letter-spacing:-.005em} #inicio .s01-q .s01-sf{font-size:calc(var(--g) * .62);line-height:1;color:var(--chalk)} #inicio .s01-solo{font-size:calc(var(--g) * .46)!important;color:rgba(242,239,232,.86)!important} #inicio .s01-ia,#inicio .s01-big{background-image:var(--foil);background-size:200% 100%;background-position:0 0;padding-right:.04em} #inicio .s01-big{padding-top:.14em;margin-top:-.14em} /* ---------- respuesta ---------- */ #inicio .s01-a{margin-top:calc(var(--g) * .22)} #inicio .s01-a1{position:relative;display:inline-block;font-size:min(calc(var(--g) * .41),6.9cqi);line-height:1.05;padding-top:.12em;white-space:nowrap} #inicio .s01-a1 b{font-family:var(--f-disp);font-weight:900;text-transform:uppercase;letter-spacing:.005em} #inicio .s01-a1 .sf{font-size:.74em;color:var(--cobalt-hi);padding-left:.12em} #inicio .s01-a2{display:flex;align-items:center;gap:16px;margin-top:calc(var(--g) * .14);font-family:var(--f-mono);font-weight:700; font-size:clamp(11px,calc(var(--g) * .13),22px);letter-spacing:.22em;text-transform:uppercase;color:var(--chalk)} #inicio .s01-a2 i{display:block;width:44px;height:3px;background:var(--cobalt-hi);flex:none} /* ---------- esfera ---------- */ #inicio .s01-orb{--orb:clamp(240px,34vw,640px);position:relative;justify-self:center;width:var(--orb);aspect-ratio:1/1;z-index:1} #inicio .s01-orbz{position:absolute;inset:0} #inicio .s01-ai{position:absolute;inset:0} #inicio .s01-ai::before{content:"";position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(closest-side,rgba(46,59,255,.4),rgba(46,59,255,.08) 60%,transparent 76%);pointer-events:none} #inicio .s01-sph{position:absolute;inset:0;width:100%;height:100%} #inicio .s01-ring{position:absolute;left:-10.5%;top:-10.5%;width:121%;height:121%;max-width:none;transform:rotate(-10deg);overflow:visible;pointer-events:none} #inicio .s01-ring path{fill:none;stroke:rgba(140,149,255,.4);stroke-width:1.2;stroke-dasharray:2 6} /* etiquetas de la órbita: tres capas pequeñas que 01-portada.js mueve con transform (sin SMIL, sin repintar) */ #inicio .s01-tags span{position:absolute;left:0;top:0;font-family:var(--f-mono);font-weight:700;font-size:clamp(11px,.8vw,15px);letter-spacing:.22em;text-transform:uppercase;color:var(--chalk);white-space:nowrap; transform:translate(var(--tx,0),var(--ty,0)) translate(-50%,-50%) rotate(-10deg)} #inicio .s01-tags{position:absolute;inset:0;pointer-events:none} #inicio .s01-tags span:nth-child(1){--tx:calc(var(--orb) * -.036);--ty:calc(var(--orb) * .595)} #inicio .s01-tags span:nth-child(2){--tx:calc(var(--orb) * .74);--ty:calc(var(--orb) * .2945)} #inicio .s01-tags span:nth-child(3){--tx:calc(var(--orb) * .796);--ty:calc(var(--orb) * .611)} #inicio .s01-logo{position:absolute;left:50%;top:47%;width:37.5%;margin:-14% 0 0 -18.75%} /* el brillo va en un dentro del SVG: se rasteriza una vez (un filter CSS en una capa se recalcula en cada fotograma) */ #inicio .s01-logo svg{width:100%;height:auto;overflow:visible} #inicio .s01-lb{display:block;transform-origin:50% 50%} /* ---------- cinta ---------- */ #inicio .s01-tape{bottom:clamp(30px,6.5vh,88px)} #inicio .s01-tmove{display:flex;flex:none} /* ---------- indicador de scroll ---------- */ #inicio .s01-cue{position:absolute;right:var(--gutter);bottom:calc(var(--tape-zone) - 4px);z-index:3;display:none;align-items:center;gap:12px;text-decoration:none;color:var(--mute)} #inicio .s01-cue i{display:block;width:1.5px;height:44px;background:linear-gradient(var(--cobalt-hi),transparent);transform-origin:50% 0} #inicio .s01-cue:hover{color:var(--chalk)} @media (min-width:1024px) and (min-height:760px){ #inicio .s01-cue{display:flex} } /* ---------- móvil: una columna, esfera estática debajo ---------- */ @media (max-width:1023px){ #inicio{--tape-zone:clamp(96px,14vh,140px);justify-content:flex-start} #inicio .s01-orb{--orb:min(76vw,380px);margin-top:4px} #inicio .s01-tags{display:none} #inicio .s01-a2{letter-spacing:.17em;gap:12px} #inicio .s01-a2 i{width:24px} #inicio{--hr:75vw;--hx:calc(170% - var(--hr));--hy:calc(30% + var(--hr))} /* móvil: dos líneas fijas («Tú pones el negocio.» / «Nosotros, el método.») */ #inicio .s01-a1{display:block;font-size:min(calc(var(--g) * .41),10.4cqi)} #inicio .s01-a1 b,#inicio .s01-a1 .sf{display:block} #inicio .s01-a1 .sf{padding-left:0} } @media (min-width:600px) and (max-width:1023px){ #inicio .s01-orb{--orb:min(56vw,420px)} } /* ---------- entrada (CSS, al cargar). El estado final es el de por defecto ---------- */ @keyframes s01-rise{from{transform:translate3d(0,112%,0) skewY(5deg)}to{transform:none}} @keyframes s01-in{from{opacity:0;transform:translate3d(0,40px,0)}to{opacity:1;transform:none}} @keyframes s01-orbin{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}} @keyframes s01-sweep{0%{transform:scaleX(0);transform-origin:0 50%}49.9%{transform:scaleX(1);transform-origin:0 50%}50%{transform:scaleX(1);transform-origin:100% 50%}100%{transform:scaleX(0);transform-origin:100% 50%}} @keyframes s01-show{from{opacity:0}to{opacity:1}} @keyframes s01-tapein{from{opacity:0;transform:rotate(-1.6deg) translate3d(0,140%,0)}to{opacity:1;transform:rotate(-1.6deg)}} @keyframes s01-sheen{from{background-position:100% 0}to{background-position:0 0}} @keyframes s01-blink{0%,90%,100%{transform:scaleY(1)}93%{transform:scaleY(.08)}96%{transform:scaleY(1)}} @keyframes s01-cue{0%{transform:scaleY(0);transform-origin:50% 0}50%{transform:scaleY(1);transform-origin:50% 0}50.1%{transform-origin:50% 100%}100%{transform:scaleY(0);transform-origin:50% 100%}} html.js:not(.reduce) #inicio .s01-m > span{animation:s01-rise .9s var(--ease) backwards;animation-delay:calc(.05s + var(--i,0) * .06s)} html.js:not(.reduce) #inicio .s01-a1::after{content:"";position:absolute;left:-4px;right:-8px;top:.1em;bottom:-.05em;background:var(--cobalt);transform:scaleX(0);z-index:2; animation:s01-sweep 1s var(--ease-wipe) .95s both} html.js:not(.reduce) #inicio .s01-a1 > *{animation:s01-show .01s linear 1.45s backwards} html.js:not(.reduce) #inicio .s01-a2{animation:s01-in .9s var(--ease) 1.6s backwards} html.js:not(.reduce) #inicio .s01-ai{animation:s01-orbin 1.4s var(--ease) .3s backwards} html.js:not(.reduce) #inicio .s01-tape{animation:s01-tapein 1.1s var(--ease) .7s backwards} html.js:not(.reduce) #inicio .s01-cue{animation:s01-show 1s ease 2s backwards} /* escritorio: un brillo único del foil al entrar (no en bucle), parpadeo del y bucles pausados fuera de pantalla */ html.js:not(.reduce):not(.lite) #inicio .s01-big, html.js:not(.reduce):not(.lite) #inicio .s01-ia{animation:s01-rise .9s var(--ease) backwards,s01-sheen 2.4s var(--ease) backwards;animation-delay:calc(.05s + var(--i,0) * .06s),.9s} html.js:not(.reduce):not(.lite) #inicio .s01-ia{animation:s01-sheen 2.4s var(--ease) 1.1s backwards} html.js:not(.reduce):not(.lite) #inicio .s01-lb{animation:s01-blink 5.2s ease-in-out 2.4s infinite} html.js:not(.reduce):not(.lite) #inicio .s01-cue i{animation:s01-cue 2.2s var(--ease) 2.4s infinite} html.js #inicio:not(.is-on) *{animation-play-state:paused!important} html.js #inicio:not(.is-on) .s01-lb,html.js #inicio:not(.is-on) .s01-cue i,html.js #inicio:not(.is-on) .s01-tags span{animation:none!important} /* bucles: fuera, no en pausa (ver base.css) */ /* capas: cada línea es la suya (se apaga por separado: opacidad en un padre con capas dentro crearía una superficie extra) */ html.js:not(.lite) #inicio .s01-tmove,html.js:not(.lite) #inicio .s01-logo,html.js:not(.lite) #inicio .s01-tags span{will-change:transform} html.js:not(.lite) #inicio .s01-m,html.js:not(.lite) #inicio .s01-a{will-change:translate,opacity} /* táctil: la portada recorta en los dos ejes. La cinta animada en bucle hace que el navegador «suponga» que puede solapar todo lo que viene después y lo junta en capas enormes (memoria en el navegador de WhatsApp); con el recorte, la suposición se queda dentro de la portada */ html.lite #inicio{overflow:clip} /* ===== 02-somos.css ===== */ /* =================== 02 · SOMOS INNATIAL (#somos, prefijo s02-) =================== */ #somos{padding-bottom:clamp(72px,8vw,140px)} /* halo pintado en el fondo de la sección (sin capa ni parallax) */ #somos{--hr:clamp(260px,30vw,550px);background-image:radial-gradient(circle var(--hr) at calc(var(--hr) - 24%) calc(8% + var(--hr)),rgba(46,59,255,.55) 0,rgba(46,59,255,.12) calc(var(--hr) * .55),rgba(46,59,255,0) calc(var(--hr) * .75));background-repeat:no-repeat} /* ---------- rejilla: móvil titular → foto → lista; escritorio la foto a sangre por la derecha, por debajo del texto ---------- */ #somos .s02-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "ph" "pts";row-gap:clamp(24px,4vw,40px)} #somos .s02-head{grid-area:head;position:relative;z-index:2} #somos .s02-t{margin-top:clamp(12px,1.4vw,22px)} #somos .s02-t .ln{padding-top:.1em;margin-top:-.1em} #somos .s02-pts{grid-area:pts;position:relative;z-index:2} /* ---------- foto ---------- */ #somos .s02-ph{grid-area:ph;position:relative;z-index:1;isolation:isolate;contain:paint;margin:0 calc(-1 * var(--gutter));aspect-ratio:5/4;perspective:1600px} #somos .s02-tilt{position:absolute;inset:0} #somos .s02-frame{position:absolute;inset:0;overflow:hidden;background:#07080B} #somos .s02-depth{position:absolute;left:0;right:0;top:-6%;bottom:-6%} #somos .s02-depth img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:80% 40%} /* malla: ventana que baja (su borde superior es la línea de escaneo) con la imagen en sentido contrario: la malla queda quieta */ #somos .s02-mw{position:absolute;inset:0;overflow:hidden;visibility:hidden} #somos .s02-mw::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;background:linear-gradient(90deg,transparent,#8EF6FF 18%,#FFFFFF 50%,#A98BFF 82%,transparent)} #somos .s02-mw::after{content:"";position:absolute;left:0;right:0;top:0;height:clamp(40px,6vw,90px);z-index:1;background:linear-gradient(180deg,rgba(142,246,255,.28),rgba(169,139,255,.08) 45%,transparent)} html.js:not(.reduce) #somos .s02-mw{visibility:visible} /* capas solo mientras dura el escaneo (escritorio: lo lleva el scroll; táctil: una transición, una vez) */ html.js:not(.reduce) #somos .s02-ph.s02-scan .s02-mw,html.js:not(.reduce) #somos .s02-ph.s02-scan .s02-mesh{will-change:transform} html.js.lite:not(.reduce) #somos .s02-mw,html.js.lite:not(.reduce) #somos .s02-mesh{transition:transform 1.6s var(--ease-wipe) .15s} html.js.lite:not(.reduce) #somos .s02-ph.s02-go .s02-mw{transform:translate3d(0,100%,0)} html.js.lite:not(.reduce) #somos .s02-ph.s02-go .s02-mesh{transform:translate3d(0,-100%,0)} html.js:not(.reduce) #somos .s02-ph.s02-done .s02-mw{visibility:hidden} /* cristal holográfico: banda de foil iridiscente y un filo de luz en diagonal (sin mezclas: solo alfa) */ #somos .s02-holo{position:absolute;top:-10%;bottom:-10%;left:-10%;width:80%;pointer-events:none;transform:translate3d(45%,0,0); background:linear-gradient(105deg,transparent 46.5%,rgba(255,255,255,.2) 49%,rgba(255,255,255,.05) 50.5%,transparent 53%), linear-gradient(105deg,transparent 14%,rgba(142,246,255,.13) 32%,rgba(169,139,255,.16) 44%,rgba(255,154,213,.14) 56%,rgba(255,229,138,.1) 66%,transparent 84%)} /* el reflejo y el giro solo tienen capa propia mientras el ratón está encima */ html.js:not(.lite):not(.reduce) #somos .s02-ph.s02-hov .s02-holo,html.js:not(.lite):not(.reduce) #somos .s02-ph.s02-hov .s02-tilt{will-change:transform} #somos .s02-fade{position:absolute;inset:0;pointer-events:none; background:linear-gradient(0deg,var(--ink) 0%,rgba(10,10,12,.45) 14%,transparent 34%),linear-gradient(180deg,rgba(10,10,12,.55) 0%,transparent 16%)} /* ---------- cinco puntos ---------- */ #somos .s02-pts{list-style:none;margin:0;padding:0} #somos .s02-pts li{position:relative;padding:clamp(12px,1.1vw,17px) 0 clamp(12px,1.1vw,17px) clamp(30px,2.4vw,44px);font-size:clamp(17px,1.42vw,27px);line-height:1.3;color:rgba(242,239,232,.84); background:linear-gradient(90deg,var(--line) 0%,var(--line) 70%,transparent 100%) top left / 100% 1.5px no-repeat} #somos .s02-pts li:last-child{background:linear-gradient(90deg,var(--line) 0%,var(--line) 70%,transparent 100%) top left / 100% 1.5px no-repeat, linear-gradient(90deg,var(--line) 0%,var(--line) 70%,transparent 100%) bottom left / 100% 1.5px no-repeat} #somos .s02-pts li::before{content:"";position:absolute;left:3px;top:calc(clamp(12px,1.1vw,17px) + .42em);width:.5em;height:.5em;max-width:14px;max-height:14px;transform:rotate(45deg);background:var(--cobalt-hi)} #somos .s02-pts b{color:var(--chalk);font-weight:600} @media (min-width:1024px){ #somos .s02-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);grid-template-rows:auto 1fr;grid-template-areas:"head head" "pts ph";row-gap:clamp(28px,2.4vw,44px)} #somos .s02-head{grid-column:1 / -1;grid-row:1} #somos .s02-ph{grid-column:2;grid-row:1 / span 2} #somos .s02-ph{margin:calc(var(--sec-y) * -.55) calc(-1 * var(--gutter)) 0 -42%;aspect-ratio:auto;height:clamp(560px,46vw,900px);align-self:start;z-index:1} #somos .s02-depth{top:-20%;bottom:-20%} #somos .s02-depth img{object-position:85% 30%} #somos .s02-fade{background:linear-gradient(90deg,var(--ink) 0%,rgba(10,10,12,.86) 17%,rgba(10,10,12,.3) 36%,transparent 52%), linear-gradient(0deg,var(--ink) 0%,rgba(10,10,12,.5) 13%,transparent 32%), linear-gradient(180deg,var(--ink) 0%,rgba(10,10,12,.35) 9%,transparent 20%)} #somos .s02-holo{left:10%;width:70%} #somos .s02-pts{max-width:min(100%,760px)} } @media (min-width:1600px){ #somos .s02-grid{grid-template-columns:minmax(0,.94fr) minmax(0,1.12fr)} } /* ---------- han confiado en nosotros: sobria y con aire ---------- */ #somos .s02-trust{position:relative;z-index:2;margin-top:clamp(40px,4.4vw,72px)} #somos .s02-tl{color:var(--mute);padding-bottom:clamp(16px,1.6vw,24px);background:linear-gradient(90deg,var(--line),var(--line) 40%,transparent) bottom left / 100% 1px no-repeat} #somos .s02-logos{list-style:none;margin:clamp(20px,2vw,32px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px;align-items:center} #somos .s02-logos li{display:flex;align-items:center;min-height:30px;min-width:0} #somos .s02-lg{--lh:20px;height:var(--lh);width:auto;max-width:100%;object-fit:contain;object-position:left center;filter:brightness(0) invert(1);opacity:.86} #somos .s02-stel{--lh:18px} #somos .s02-sams,#somos .s02-bimba{--lh:16px} #somos .s02-f5{--lh:22px} #somos .s02-md{--lh:20px} #somos .s02-tx{font-family:var(--f-disp);font-weight:900;font-size:clamp(18px,1.3vw,25px);line-height:1.02;letter-spacing:.03em;text-transform:uppercase;color:rgba(242,239,232,.86)} #somos .s02-ue{display:inline-flex;align-items:center;gap:10px;white-space:nowrap} #somos .s02-eu{width:clamp(22px,1.6vw,28px);height:auto;fill:currentColor;flex:none} #somos .s02-mas{font-family:var(--f-mono);font-weight:700;font-size:var(--fs-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);white-space:nowrap} #somos .s02-mas b{font-family:var(--f-disp);font-weight:900;font-size:clamp(20px,1.3vw,24px);letter-spacing:.02em;color:var(--cobalt-hi);margin-right:6px} @media (min-width:768px){ #somos .s02-logos{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px clamp(20px,3vw,48px)} #somos .s02-lg{--lh:24px} #somos .s02-stel{--lh:22px} #somos .s02-sams,#somos .s02-bimba{--lh:19px} #somos .s02-f5{--lh:27px} #somos .s02-md{--lh:24px} } @media (min-width:1400px){ #somos .s02-logos{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:12px} #somos .s02-logos li{flex:0 0 auto} #somos .s02-tx{white-space:nowrap;font-size:clamp(17px,1.2vw,24px)} #somos .s02-lg{--lh:clamp(22px,1.6vw,30px)} #somos .s02-stel{--lh:clamp(20px,1.45vw,27px)} #somos .s02-sams,#somos .s02-bimba{--lh:clamp(17px,1.2vw,23px)} #somos .s02-f5{--lh:clamp(25px,1.8vw,33px)} #somos .s02-md{--lh:clamp(22px,1.6vw,30px)} } @media print{ #somos .s02-mw,#somos .s02-holo{display:none} } /* ===== 03-bloqueo.css ===== */ /* =================== 03 · EL BLOQUEO (#bloqueo, prefijo s03-) =================== */ #bloqueo{padding-top:clamp(64px,7vw,130px)} /* halo pintado en el fondo de la sección (sin capa ni parallax) */ #bloqueo{--hr:clamp(280px,32vw,590px);background-image:radial-gradient(circle var(--hr) at calc(122% - var(--hr)) calc(var(--hr) - 6%),rgba(46,59,255,.55) 0,rgba(46,59,255,.12) calc(var(--hr) * .55),rgba(46,59,255,0) calc(var(--hr) * .75));background-repeat:no-repeat} #bloqueo .s03-top{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,5vw,64px);align-items:center} #bloqueo .s03-t{margin-top:clamp(12px,1.4vw,22px)} #bloqueo .s03-t .ln{padding-top:.12em;margin-top:-.12em} /* que no se corten las tildes de las mayúsculas */ #bloqueo .s03-sub{margin-top:clamp(18px,1.8vw,28px);max-width:none;font-size:clamp(18px,1.56vw,30px);line-height:1.35} /* ---------- el 5 % ---------- */ #bloqueo .s03-n{position:relative;z-index:1;display:flex;align-items:flex-end;gap:clamp(16px,4vw,32px)} #bloqueo .s03-big{flex:none;margin:0;font-family:var(--f-num);font-weight:900;font-size:clamp(150px,22vw,430px);line-height:.78;letter-spacing:-.04em;color:var(--cobalt-hi);white-space:nowrap} #bloqueo .s03-big span{display:inline-block} #bloqueo .s03-pc{font-size:.44em;margin-left:.04em;color:var(--chalk)} #bloqueo .s03-nl{font-size:clamp(17px,1.5vw,28px);line-height:1.4;max-width:24ch;text-wrap:balance;padding-bottom:.1em} html.js:not(.lite):not(.reduce) #bloqueo .s03-5,html.js:not(.lite):not(.reduce) #bloqueo .s03-pc{will-change:transform,opacity} @media (min-width:1024px){ #bloqueo .s03-top{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)} #bloqueo .s03-n{flex-direction:column;align-items:flex-end;text-align:right;gap:clamp(14px,1.2vw,22px)} #bloqueo .s03-nl{max-width:20ch} } /* ---------- las cuatro cajas ---------- */ #bloqueo .s03-blk{list-style:none;margin:clamp(56px,7vw,120px) 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.2vw,18px)} #bloqueo .s03-b{position:relative;background:var(--kit);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(18px,1.4vw,24px) clamp(18px,1.4vw,24px) clamp(22px,1.6vw,28px);min-height:clamp(150px,11vw,200px)} #bloqueo .s03-k{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.2em;color:var(--cobalt-hi)} #bloqueo .s03-b h3{font-family:var(--f-disp);font-weight:900;font-size:clamp(26px,1.9vw,36px);line-height:.98;text-transform:uppercase;margin-top:12px;letter-spacing:.005em;text-wrap:balance} #bloqueo .s03-b p{font-size:clamp(15px,1.06vw,20px);line-height:1.42;color:rgba(242,239,232,.78);margin-top:10px} /* la 03, oscura como las demás (deck slide_03): el único acento es el sello rojo */ #bloqueo .s03-hot{margin-bottom:18px} #bloqueo .s03-stamp{position:absolute;right:16px;bottom:-22px;transform:rotate(-7deg);font-family:var(--f-disp);font-weight:900;font-size:clamp(22px,1.6vw,30px);line-height:1.1;letter-spacing:.06em;text-transform:uppercase; color:var(--trim);border:4px solid var(--trim);padding:4px 14px 2px;background:var(--chalk);white-space:nowrap} @keyframes s03-stamp{0%{opacity:0;transform:scale(2.2) rotate(-14deg)}100%{opacity:1;transform:rotate(-7deg)}} html.js:not(.reduce) #bloqueo .s03-hot.is-in .s03-stamp{animation:s03-stamp .5s var(--ease-pop) .55s backwards} html.js:not(.reduce) #bloqueo .s03-hot:not(.is-in) .s03-stamp{opacity:0} @media (min-width:640px){ #bloqueo .s03-blk{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:1200px){ #bloqueo .s03-blk{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr)} #bloqueo .s03-hot{margin-bottom:0} } /* ===== 04-como-empezamos.css ===== */ /* =================== 04 · CÓMO EMPEZAMOS (#como-empezamos, prefijo s04-, marfil) =================== */ #como-empezamos{padding-bottom:clamp(64px,7vw,120px)} #como-empezamos .s04-t{margin-top:clamp(12px,1.4vw,22px)} #como-empezamos .s04-t .ln{padding-top:.1em;margin-top:-.1em} #como-empezamos .s04-lead{margin-top:clamp(18px,1.8vw,28px);max-width:58ch;font-size:clamp(17px,1.32vw,25px)} /* ---------- rejilla: titular, pasos y tarjeta (móvil, en ese orden; escritorio, la tarjeta a la derecha como en el deck) ---------- */ #como-empezamos .s04-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,6vw,56px);width:100%} #como-empezamos .s04-head{min-width:0} #como-empezamos .s04-steps{min-width:0} /* ---------- cinco pasos ---------- */ #como-empezamos .s04-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)} #como-empezamos .s04-sp{--nw:clamp(34px,3vw,52px);position:relative;display:grid;grid-template-columns:var(--nw) minmax(0,1fr);gap:6px clamp(12px,1.4vw,24px);align-items:start; padding:clamp(13px,1.1vw,17px) 0 clamp(13px,1.1vw,16px);border-bottom:1px solid var(--line-l)} #como-empezamos .s04-bar{position:absolute;left:0;top:-2px;width:var(--nw);height:3px;background:var(--cobalt);transform-origin:0 50%} #como-empezamos .s04-n{grid-column:1;grid-row:1 / span 2;font-family:var(--f-mono);font-weight:700;font-size:var(--fs-mono);letter-spacing:.18em;color:var(--cobalt);padding-top:.5em} #como-empezamos .s04-h{grid-column:2;margin:0;font-family:var(--f-disp);font-weight:900;font-size:clamp(22px,1.75vw,34px);line-height:1;text-transform:uppercase;letter-spacing:.01em;color:var(--ink)} #como-empezamos .s04-scr{display:inline-block} #como-empezamos .s04-p{grid-column:2;margin:0;font-size:clamp(15px,1.06vw,20px);line-height:1.38;color:var(--body-l)} #como-empezamos .s04-stamp{display:inline-block;font-size:clamp(20px,1.5vw,28px);line-height:1.02;color:var(--cobalt);border:2.5px solid var(--cobalt);padding:6px 10px 4px;transform:rotate(-1.5deg);transform-origin:0 50%;letter-spacing:.02em} #como-empezamos .s04-pie{margin-top:clamp(20px,2.2vw,36px);font-size:clamp(15px,1vw,19px);line-height:1.4;color:var(--mute-l)} #como-empezamos .s04-pie i{font-style:normal;color:var(--cobalt);padding-right:10px} @media (min-width:1280px){ #como-empezamos .s04-sp{grid-template-columns:var(--nw) minmax(0,1.1fr) minmax(0,1fr)} #como-empezamos .s04-n{grid-row:1} #como-empezamos .s04-h{white-space:nowrap;padding-top:2px} #como-empezamos .s04-p{grid-column:3;grid-row:1} } /* escritorio, secuencia en marcha (la clase la pone el JS al asomar y la quita al acabar): los pasos se encienden uno a uno, su barra se llena */ #como-empezamos .s04-grid.is-live .s04-sp > :not(.s04-bar){transition:opacity .45s ease} #como-empezamos .s04-grid.is-live .s04-sp:not(.is-cur):not(.is-done) > :not(.s04-bar){opacity:.2} #como-empezamos .s04-grid.is-live .s04-bar{transition:transform .55s linear} #como-empezamos .s04-grid.is-live .s04-sp:not(.is-cur):not(.is-done) .s04-bar{transform:scaleX(0)} @keyframes s04-stamp{0%{opacity:0;transform:rotate(-8deg) scale(1.7)}60%{opacity:1}100%{opacity:1;transform:rotate(-1.5deg) scale(1)}} #como-empezamos .s04-grid.is-live .s04-last.is-cur .s04-stamp{animation:s04-stamp .7s var(--ease-pop) .1s backwards} /* ---------- tarjeta «Tu empresa · mapa» ---------- */ #como-empezamos .s04-twin{position:relative;display:flex;flex-direction:column;width:100%;max-width:460px;justify-self:center;border-radius:22px; background:radial-gradient(110% 70% at 50% 34%,#1d2366 0%,#0d1030 55%,#06070d 100%);box-shadow:0 30px 60px rgba(10,10,12,.28);color:var(--chalk)} #como-empezamos .s04-twin::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0; background-image:linear-gradient(rgba(140,149,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(140,149,255,.06) 1px,transparent 1px);background-size:40px 40px} #como-empezamos .s04-tw-top,#como-empezamos .s04-tw-bot{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:clamp(14px,1.2vw,20px) clamp(16px,1.3vw,22px); font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(242,239,232,.75);white-space:nowrap} #como-empezamos .s04-dot{display:inline-flex;align-items:center;gap:8px} #como-empezamos .s04-dot::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--trim);flex:none} #como-empezamos .s04-chip{letter-spacing:.12em;background:rgba(242,239,232,.12);border-color:rgba(242,239,232,.45);color:var(--chalk)} #como-empezamos .s04-c0{display:none} #como-empezamos .s04-twin.is-live:not(.is-full) .s04-c0{display:inline} #como-empezamos .s04-twin.is-live:not(.is-full) .s04-c1{display:none} #como-empezamos .s04-twin.is-full .s04-chip{background:var(--cobalt);border-color:var(--cobalt)} #como-empezamos .s04-map{position:relative;z-index:1;aspect-ratio:1040/1080} #como-empezamos .s04-bld{position:absolute;inset:0 6%} #como-empezamos .s04-bld img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;object-position:50% 100%} /* ventana del mapeo: sube desde arriba; su borde inferior es la línea de escaneo (la imagen va al revés: queda quieta) */ #como-empezamos .s04-mapw{position:absolute;inset:0;overflow:hidden} #como-empezamos .s04-mapw::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(0deg,rgba(140,149,255,.32),transparent);opacity:0} #como-empezamos .s04-scan{position:absolute;left:0;right:0;bottom:0;height:1.5px;background:rgba(242,239,232,.9);opacity:0} /* la etiqueta del barrido va a la derecha (las fijas «Procesos» y «Muro de datos» están a la izquierda) y se esconde al cruzar «Contexto» */ #como-empezamos .s04-scan b{position:absolute;right:clamp(16px,1.3vw,22px);bottom:10px;transition:opacity .2s ease;font-family:var(--f-mono);font-weight:700;font-size:var(--fs-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt-hi);white-space:nowrap} #como-empezamos .s04-twin.is-scan .s04-scan,#como-empezamos .s04-twin.is-scan .s04-mapw::after{opacity:1} #como-empezamos .s04-twin.is-cross .s04-scan b{opacity:0} html.js:not(.reduce) #como-empezamos .s04-mapw,html.js:not(.reduce) #como-empezamos .s04-mapa{will-change:transform} #como-empezamos .s04-tag{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;background:rgba(6,7,13,.6);padding:4px 6px;font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.14em; text-transform:uppercase;color:var(--chalk);white-space:nowrap;transition:opacity .5s ease,transform .5s var(--ease)} #como-empezamos .s04-tag i{display:block;width:clamp(26px,2.8vw,56px);height:1.5px;background:var(--cobalt-hi)} #como-empezamos .s04-t1{left:clamp(14px,1.3vw,22px);top:22%} #como-empezamos .s04-t2{right:clamp(14px,1.3vw,22px);top:47%} #como-empezamos .s04-t3{left:clamp(14px,1.3vw,22px);top:74%} #como-empezamos .s04-twin.is-live .s04-tag:not(.on){opacity:0;transform:translate3d(0,10px,0)} @media (min-width:1024px){ #como-empezamos .s04-grid{grid-template-columns:minmax(0,1fr) clamp(340px,29vw,520px);grid-template-rows:auto 1fr;column-gap:clamp(40px,4.5vw,88px);row-gap:clamp(28px,2.6vw,44px)} #como-empezamos .s04-head,#como-empezamos .s04-steps{grid-column:1} #como-empezamos .s04-t{font-size:clamp(48px,4.7vw,96px)} #como-empezamos .s04-twin{grid-column:2;grid-row:1 / span 2;align-self:stretch;max-width:none;min-height:clamp(480px,62vh,880px)} #como-empezamos .s04-map{flex:1;min-height:0;aspect-ratio:auto} #como-empezamos .s04-bld{inset:0} } /* escritorio con altura: la sección es una pantalla, como la diapositiva (nada pegajoso) */ @media (min-width:1024px) and (min-height:700px){ html:not(.lite) #como-empezamos{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center; padding-top:calc(var(--hd-h) + clamp(20px,2.4vw,44px));padding-bottom:clamp(28px,3vw,56px)} html:not(.lite) #como-empezamos .s04-twin{min-height:0} } @media print{ #como-empezamos .s04-scan,#como-empezamos .s04-mapw::after{display:none} } /* ===== 05-sistema.css ===== */ /* =================== 05 · EL SISTEMA (#sistema, prefijo s05-) =================== Infografía del deck (slide_07): Entra → El muro → Se ordena → Se conecta. - Por defecto (sin JS, reduce, impresión): todo encendido y quieto. - .s05-armed (lo pone 05-sistema.js): estados ocultos que se van encendiendo. · escena (≥1200 × ≥740, sin .lite): pegajosa; el scroll enciende columnas, llena tuberías y deja pasar partículas. · flujo (móvil, táctil, ventanas bajas): cada columna se enciende al aparecer. - .s05-st1…st4 en la rejilla: hasta dónde ha llegado el flujo (guías y bucles). Solo se anima transform y opacity; los bucles van bajo #sistema.is-on y fuera de .lite. */ #sistema{--gold:#FFE58A;--pipe:clamp(40px,3.4vw,64px)} #sistema .s05-halo{--halo:clamp(560px,60vw,1100px);left:8%;top:-6%;opacity:.6} #sistema .s05-hd{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:end} #sistema .s05-hl{display:flex;flex-direction:column;gap:clamp(10px,1vw,16px)} #sistema .mega .ln{padding-top:.1em;margin-top:-.1em} #sistema .s05-lead{max-width:60ch} @media (min-width:1024px){ #sistema .s05-hd{grid-template-columns:auto minmax(0,1fr)} } #sistema .s05-scene{position:relative;margin-top:clamp(36px,5vw,72px)} #sistema .s05-gw{position:relative} /* ---------- rejilla: por defecto una columna (móvil), tubos verticales entre tarjetas ---------- */ #sistema .s05-g{position:relative;display:grid;grid-template-columns:minmax(0,1fr);max-width:760px;margin-inline:auto} #sistema .s05-fx,#sistema .s05-pts{display:none} /* ---------- columna ---------- */ #sistema .s05-col{position:relative;overflow:hidden;border-radius:var(--radius);padding:clamp(18px,1.35vw,26px);display:flex;flex-direction:column;gap:clamp(12px,1vw,16px);min-width:0; container-type:inline-size; background:linear-gradient(180deg,var(--kit2) 0%,var(--kit) 50%,#101117 100%);box-shadow:0 0 0 1px rgba(242,239,232,.14),0 24px 50px rgba(0,0,0,.5)} #sistema .s05-col > *{position:relative;z-index:1} #sistema .s05-ch{display:flex;align-items:baseline;gap:clamp(10px,.8vw,14px)} #sistema .s05-no{font-family:var(--f-num);font-weight:900;font-size:clamp(40px,3.1vw,60px);line-height:.8;color:var(--cobalt-hi)} #sistema .s05-ch .mega.m{font-size:clamp(30px,2.3vw,44px);text-wrap:nowrap} /* 01 · Entra */ #sistema .s05-in{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(8px,.75vw,14px)} #sistema .s05-in li{position:relative;display:flex;align-items:center;gap:12px;padding:clamp(10px,.8vw,15px) 14px;border-radius:10px;background:rgba(242,239,232,.05);border:1px solid rgba(242,239,232,.1)} #sistema .s05-in svg{width:24px;height:24px;flex:none;fill:none;stroke:var(--chalk);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} #sistema .s05-in b{font-weight:600;font-size:clamp(16px,1.12vw,21px);line-height:1.2} #sistema .s05-in li.s05-voz{background:rgba(46,59,255,.24);border-color:var(--cobalt-hi);box-shadow:0 0 0 1px rgba(140,149,255,.4),0 0 30px rgba(46,59,255,.35)} #sistema .s05-in li.s05-voz svg{stroke:var(--cobalt-hi)} #sistema .s05-wave{display:flex;align-items:center;gap:3px;height:20px;margin-left:auto} #sistema .s05-wave i{display:block;width:4px;height:100%;border-radius:2px;background:var(--cobalt-hi);transform-origin:50% 50%} #sistema .s05-wave i:nth-child(1),#sistema .s05-wave i:nth-child(5){transform:scaleY(.35)} #sistema .s05-wave i:nth-child(2),#sistema .s05-wave i:nth-child(4){transform:scaleY(.7)} #sistema .s05-in li.is-out{border-color:rgba(140,149,255,.9);box-shadow:0 0 0 1px rgba(140,149,255,.6),0 0 18px rgba(46,59,255,.5)} @container (min-width:520px){ #sistema .s05-in{grid-template-columns:repeat(2,minmax(0,1fr))} } /* 02 · El muro */ #sistema .s05-wall{background:var(--cobalt);box-shadow:0 0 0 1.5px rgba(140,149,255,.8),0 0 60px rgba(46,59,255,.45),0 24px 50px rgba(0,0,0,.5)} #sistema .s05-wall > .s05-jacq,#sistema .s05-wall > .s05-scan{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit} #sistema .s05-jacq{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 2px,transparent 2px 14px),repeating-linear-gradient(45deg,rgba(0,0,0,.08) 0 2px,transparent 2px 14px)} #sistema .s05-scan{opacity:0;background:linear-gradient(180deg,transparent 78%,rgba(242,239,232,.08) 90%,rgba(242,239,232,.42) 98.5%,transparent)} #sistema .s05-wall .s05-no{color:var(--chalk)} #sistema .s05-wl{color:var(--chalk);margin-top:-6px;font-size:max(12px,var(--fs-mono))} #sistema .s05-rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(10px,.8vw,16px)} #sistema .s05-rules li{position:relative;display:flex;flex-direction:column;gap:3px;padding:clamp(11px,.8vw,16px) 14px clamp(11px,.8vw,16px) 46px;border-radius:10px;background:rgba(10,10,12,.28); transition:background-color .3s ease} #sistema .s05-rules li::before{content:"";position:absolute;left:14px;top:calc(clamp(11px,.8vw,16px) + 4px);width:18px;height:14px;border:2px solid var(--chalk);border-radius:3px; background:linear-gradient(var(--chalk),var(--chalk)) 50% 55%/2px 5px no-repeat;transition:box-shadow .3s ease} #sistema .s05-rules li::after{content:"";position:absolute;left:17px;top:calc(clamp(11px,.8vw,16px) - 5px);width:12px;height:11px;border:2px solid var(--chalk);border-bottom:0;border-radius:7px 7px 0 0; transition:transform .25s var(--ease-pop)} #sistema .s05-rules b{font-weight:600;font-size:clamp(16px,1.05vw,20px);line-height:1.2} #sistema .s05-rules span{font-size:clamp(14px,.9vw,17px);line-height:1.3;color:rgba(242,239,232,.86)} #sistema .s05-rules li.is-shut{background:rgba(10,10,12,.5)} #sistema .s05-rules li.is-shut::before{box-shadow:0 0 12px var(--chalk)} #sistema .s05-ai{margin-top:auto;display:flex;flex-direction:column;gap:5px;padding:clamp(12px,.9vw,16px);border-radius:12px; background:rgba(10,10,12,.55);border:2px solid var(--gold);box-shadow:0 0 24px rgba(255,229,138,.18)} #sistema .s05-aihd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px} #sistema .s05-badge{font-family:var(--f-disp);font-weight:900;font-size:clamp(24px,1.75vw,34px);line-height:1;letter-spacing:.04em;color:var(--ink);background:var(--gold);padding:6px 10px 3px;white-space:nowrap} #sistema .s05-cnt{display:flex;align-items:baseline;gap:8px} #sistema .s05-cnt b{font-family:var(--f-num);font-weight:900;font-size:clamp(30px,2.1vw,40px);line-height:.9;color:var(--gold);font-variant-numeric:tabular-nums} #sistema .s05-cnt span{font-family:var(--f-mono);font-weight:700;font-size:clamp(11px,.72vw,14px);letter-spacing:.14em;text-transform:uppercase;color:rgba(242,239,232,.8)} #sistema .s05-t{font-weight:600;font-size:clamp(16px,1.05vw,20px);line-height:1.25} #sistema .s05-s{font-size:clamp(14px,.9vw,17px);color:rgba(242,239,232,.85)} #sistema .s05-log{list-style:none;margin:6px 0 0;padding:8px 0 0;border-top:1px dashed rgba(255,229,138,.4);display:flex;flex-direction:column;gap:3px;min-height:calc(3 * 1.35em + 14px); font-family:var(--f-mono);font-size:clamp(11px,.7vw,13px);line-height:1.35;color:rgba(242,239,232,.72)} #sistema .s05-log li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #sistema .s05-log li:first-child{color:var(--gold)} #sistema .s05-log li.s05-nw{animation:s05-log .45s var(--ease) backwards} @keyframes s05-log{from{opacity:0;transform:translate3d(0,-8px,0)}to{opacity:1;transform:none}} /* 03 · Se ordena: círculos concéntricos (Empresa ⊃ Área ⊃ Cliente ⊃ Proyecto) y qué vive dónde */ #sistema .s05-ord{display:flex;flex-direction:column;gap:clamp(14px,1.2vw,22px)} #sistema .s05-circ{position:relative;width:min(100%,300px);aspect-ratio:1/1;margin:6px auto 0;flex:none} #sistema .s05-r{position:absolute;inset:calc(var(--n) * 10.67%);border-radius:50%;border:1.5px solid rgba(140,149,255,.6);background:rgba(46,59,255,calc(.08 + var(--n) * .14)); transition:box-shadow .25s ease} #sistema .s05-r span{position:absolute;left:0;right:0;top:7px;text-align:center;font-family:var(--f-mono);font-weight:700;font-size:clamp(11px,.72vw,14px);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;line-height:1.2} #sistema .s05-r[style*="--n:3"]{background:var(--cobalt);box-shadow:0 0 30px rgba(46,59,255,.6)} #sistema .s05-r[style*="--n:3"] span{top:50%;margin-top:-.6em} #sistema .s05-r.is-hit{box-shadow:0 0 0 3px rgba(255,229,138,.85),0 0 26px rgba(255,229,138,.55)} #sistema .s05-dr{position:absolute;border-radius:50%;pointer-events:none} #sistema .s05-dra{inset:-4.3%;border:2px dashed rgba(140,149,255,.45)} #sistema .s05-drb{inset:16.7%;border:2px dotted rgba(255,229,138,.5)} #sistema .s05-life{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;flex:1} #sistema .s05-life li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 0 6px;border-bottom:1px solid rgba(242,239,232,.12)} #sistema .s05-life b{font-family:var(--f-mono);font-weight:700;font-size:clamp(11px,.72vw,14px);letter-spacing:.14em;text-transform:uppercase;color:var(--chalk)} #sistema .s05-life span{font-size:clamp(14px,.85vw,16px);color:rgba(242,239,232,.72);text-align:right} #sistema .s05-next{margin-top:auto} @container (min-width:520px){ #sistema .s05-ord{flex-direction:row;align-items:center} #sistema .s05-circ{width:min(46%,260px);margin:0} } /* 04 · Se conecta */ #sistema .s05-apps{display:grid;grid-template-columns:minmax(0,1fr);gap:10px} #sistema .s05-ap{position:relative;display:flex;flex-direction:column;gap:2px;padding:12px 34px 12px 14px;border-radius:10px;border:1px dashed rgba(242,239,232,.35);background:rgba(242,239,232,.04); transition:border-color .3s ease,background-color .3s ease,box-shadow .3s ease} #sistema .s05-ap b{font-weight:600;font-size:clamp(16px,1.05vw,20px);line-height:1.2} #sistema .s05-ap span{font-family:var(--f-mono);font-size:clamp(11px,.72vw,14px);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)} #sistema .s05-ap::after{content:"";position:absolute;right:14px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:rgba(242,239,232,.18);transition:background-color .3s,box-shadow .3s} #sistema .s05-ap.is-glow{border-style:solid;border-color:var(--gold);background:rgba(255,229,138,.08);box-shadow:0 0 22px rgba(255,229,138,.18)} #sistema .s05-ap.is-glow::after{background:var(--gold);box-shadow:0 0 12px var(--gold)} #sistema .s05-quote{margin-top:auto;padding-top:12px;font-family:var(--f-disp);font-weight:900;font-size:clamp(30px,2vw,40px);line-height:.95;text-transform:uppercase;color:var(--cobalt-hi)} @container (min-width:520px){ #sistema .s05-apps{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ---------- tuberías (móvil: tubo vertical a la izquierda; el DNI choca y se queda a su lado) ---------- */ #sistema .s05-pipe{position:relative;min-height:56px;display:flex;align-items:center;padding:12px 0 12px 64px} #sistema .s05-tube{position:absolute;left:clamp(22px,4vw,36px);top:6px;bottom:6px;width:10px;border-radius:5px;background:rgba(140,149,255,.16);box-shadow:inset 0 0 0 1px rgba(140,149,255,.35);overflow:hidden} #sistema .s05-fill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,var(--cobalt-hi),var(--cobalt));transform-origin:50% 0; box-shadow:0 0 12px rgba(140,149,255,.6)} #sistema .s05-dni{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px} #sistema .s05-chip{display:inline-block;font-family:var(--f-mono);font-weight:700;font-size:clamp(13px,.85vw,16px);letter-spacing:.12em;color:#fff;background:var(--trim); padding:9px 13px 8px;border-radius:8px;box-shadow:0 0 0 2px rgba(255,255,255,.25),0 0 26px rgba(228,0,43,.6);white-space:nowrap;line-height:1.1} #sistema .s05-hit{display:none} #sistema .s05-blk{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-weight:700;font-size:clamp(11px,.72vw,14px);letter-spacing:.14em;text-transform:uppercase;color:#FF6B85;line-height:1.2} #sistema .s05-blk svg{width:20px;height:20px;flex:none;fill:none;stroke:#FF6B85;stroke-width:2.2} /* ---------- ≥1200: las cuatro columnas en fila, unidas por tuberías horizontales ---------- */ @media (min-width:1200px){ #sistema .s05-g{max-width:none;grid-template-columns:minmax(0,1fr) var(--pipe) minmax(0,1fr) var(--pipe) minmax(0,1fr) var(--pipe) minmax(0,1fr);min-height:620px} #sistema .s05-pipe{display:block;padding:0;min-height:0;z-index:5} #sistema .s05-tube{left:6px;right:6px;top:50%;bottom:auto;width:auto;height:12px;margin-top:-6px;border-radius:6px} #sistema .s05-fill{transform-origin:0 50%;background:linear-gradient(90deg,var(--cobalt-hi),var(--cobalt))} /* DNI: el ancla es el borde izquierdo del muro, abajo; el chip la toca por su derecha */ #sistema .s05-dni{position:absolute;right:0;bottom:clamp(44px,8%,96px);width:0;height:0;display:block} #sistema .s05-chip{position:absolute;right:2px;bottom:0} #sistema .s05-hit{display:block;position:absolute;left:-8px;bottom:-46px;width:16px;height:130px;border-radius:8px;opacity:.55; background:radial-gradient(closest-side,rgba(255,40,80,.95),rgba(228,0,43,.35) 60%,transparent)} #sistema .s05-blk{position:absolute;right:14px;top:12px;white-space:nowrap} #sistema .s05-fx{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible} #sistema .s05-pts{display:block;position:absolute;inset:0;z-index:6;pointer-events:none} } html.lite #sistema .s05-fx,html.lite #sistema .s05-pts,html.reduce #sistema .s05-fx,html.reduce #sistema .s05-pts{display:none} /* guías del flujo (las dibuja 05-sistema.js) y partículas (capas pequeñas movidas con transform) */ #sistema .s05-fx path{fill:none;stroke:rgba(140,149,255,.24);stroke-width:1.5;stroke-dasharray:3 7;opacity:0;transition:opacity .8s ease} #sistema .s05-fx path.s05-au{stroke:rgba(255,229,138,.24)} #sistema .s05-st1 .s05-fx .s05-gA,#sistema .s05-st2 .s05-fx .s05-gW,#sistema .s05-st3 .s05-fx .s05-gB,#sistema .s05-st4 .s05-fx .s05-gC{opacity:1} #sistema .s05-pts i{position:absolute;left:0;top:0;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;opacity:0;will-change:transform,opacity;transition:opacity .3s ease; background:radial-gradient(circle,var(--cobalt-hi) 0 3.5px,rgba(140,149,255,.32) 4.5px,transparent 10px)} #sistema .s05-pts i.s05-au{background:radial-gradient(circle,var(--gold) 0 3.5px,rgba(255,229,138,.32) 4.5px,transparent 10px)} #sistema .s05-pts i.s05-on{opacity:1} /* ---------- escritorio con altura suficiente: la sección es una diapositiva (cabe en una pantalla, sin fijarse) ---------- */ @media (min-width:1200px) and (min-height:740px){ html:not(.lite) #sistema{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center; padding-top:calc(var(--hd-h) + clamp(20px,2.2vw,40px));padding-bottom:clamp(24px,2.4vw,44px)} html:not(.lite) #sistema .s05-scene{margin-top:clamp(16px,1.8vw,32px)} html:not(.lite) #sistema .s05-g{height:clamp(540px,calc(100svh - var(--hd-h) - clamp(330px,17.4vw,420px)),820px);min-height:0} } /* altura justa (portátiles): todo un punto más prieto para que el muro quepa */ @media (min-width:1200px) and (max-height:960px){ #sistema .s05-col{padding:16px 18px;gap:10px} #sistema .s05-no{font-size:44px} #sistema .s05-ch .mega.m{font-size:32px} #sistema .s05-in{gap:8px} #sistema .s05-in li{padding:9px 12px} #sistema .s05-rules{gap:8px} #sistema .s05-rules li{padding-block:9px} #sistema .s05-rules li::before{top:13px} #sistema .s05-rules li::after{top:4px} #sistema .s05-circ{width:min(100%,250px)} #sistema .s05-life li{padding:5px 0 4px} #sistema .s05-ap{padding-block:9px} } /* ---------- estados ocultos (solo con .s05-armed; el JS no arma con movimiento reducido) ---------- */ html.js #sistema .s05-armed .s05-col{transition:opacity .8s var(--ease),transform 1s var(--ease)} html.js #sistema .s05-armed .s05-col:not(.is-lit){opacity:.14;transform:translate3d(0,32px,0) scale(.97)} html.js #sistema .s05-armed.s05-flow .s05-col:not(.is-lit){opacity:0;transform:translate3d(0,48px,0)} html.js #sistema .s05-armed .s05-in li{transition:opacity .5s var(--ease),transform .6s var(--ease-pop),border-color .3s ease,box-shadow .3s ease} html.js #sistema .s05-armed .s05-in li:not(.is-on){opacity:0;transform:translate3d(-26px,0,0) scale(.95)} html.js #sistema .s05-armed .s05-rules li:not(.is-on){background:rgba(242,239,232,.08)} html.js #sistema .s05-armed .s05-rules li:not(.is-on)::after{transform:translate3d(0,-5px,0)} html.js #sistema .s05-armed .s05-ai{transition:opacity .7s var(--ease),transform .8s var(--ease)} html.js #sistema .s05-armed .s05-ai:not(.is-on){opacity:0;transform:translate3d(0,22px,0)} html.js #sistema .s05-armed .s05-r{transition:opacity .6s var(--ease) calc(.15s + var(--n) * .12s),transform .9s var(--ease) calc(.15s + var(--n) * .12s),box-shadow .25s ease} html.js #sistema .s05-armed .s05-c3:not(.is-lit) .s05-r{opacity:0;transform:scale(.5)} html.js #sistema .s05-armed .s05-life li{transition:opacity .6s ease} html.js #sistema .s05-armed .s05-life li:not(.is-on){opacity:0} html.js #sistema .s05-armed .s05-ap{transition:opacity .5s var(--ease),transform .6s var(--ease-pop),border-color .3s ease,background-color .3s ease,box-shadow .3s ease} html.js #sistema .s05-armed .s05-ap:not(.is-on){opacity:0;transform:translate3d(-22px,0,0)} html.js #sistema .s05-armed .s05-quote{transition:opacity .7s var(--ease),transform .8s var(--ease)} html.js #sistema .s05-armed .s05-quote:not(.is-on){opacity:0;transform:translate3d(0,18px,0)} html.js #sistema .s05-armed .s05-fill{transition:transform 1s var(--ease)} html.js #sistema .s05-armed .s05-fill:not(.is-full){transform:scaleY(0)} html.js #sistema .s05-armed .s05-pipe .s05-dni{transition:opacity .6s ease .4s} html.js #sistema .s05-armed:not(.s05-st2) .s05-dni{opacity:0} @media (min-width:1200px){ html.js #sistema .s05-armed .s05-fill:not(.is-full){transform:scaleX(0)} } /* ---------- bucles (escritorio, sección en pantalla, cuando el flujo ha llegado) ---------- */ @keyframes s05-wave{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}} @keyframes s05-scan{0%{opacity:1;transform:translate3d(0,-100%,0)}100%{opacity:1;transform:translate3d(0,100%,0)}} @keyframes s05-spin{to{transform:rotate(360deg)}} @keyframes s05-dni{0%{transform:translate3d(-230px,0,0);opacity:0}10%{opacity:1}42%{transform:none;opacity:1}48%{transform:translate3d(-46px,0,0) rotate(-6deg)} 70%{transform:translate3d(-150px,0,0) rotate(-10deg);opacity:0}100%{transform:translate3d(-150px,0,0);opacity:0}} @keyframes s05-hit{0%,40%{opacity:0;transform:scaleY(.4)}44%{opacity:1;transform:scaleY(1.1)}62%,100%{opacity:0;transform:none}} @keyframes s05-blk{0%,42%{opacity:0;transform:translate3d(0,6px,0)}50%,80%{opacity:1;transform:none}95%,100%{opacity:0}} html.js:not(.lite):not(.reduce) #sistema.is-on .s05-st1 .s05-wave i{animation:s05-wave 1s ease-in-out infinite} html.js:not(.lite):not(.reduce) #sistema.is-on .s05-st1 .s05-wave i:nth-child(2){animation-delay:.15s} html.js:not(.lite):not(.reduce) #sistema.is-on .s05-st1 .s05-wave i:nth-child(3){animation-delay:.3s} html.js:not(.lite):not(.reduce) #sistema.is-on .s05-st1 .s05-wave i:nth-child(4){animation-delay:.45s} html.js:not(.lite):not(.reduce) #sistema.is-on .s05-st1 .s05-wave i:nth-child(5){animation-delay:.6s} html.js:not(.lite):not(.reduce) #sistema.is-on .s05-st2 .s05-scan{animation:s05-scan 3.2s linear .8s infinite} html.js:not(.lite):not(.reduce) #sistema.is-on .s05-st3 .s05-dra{animation:s05-spin 26s linear infinite} html.js:not(.lite):not(.reduce) #sistema.is-on .s05-st3 .s05-drb{animation:s05-spin 18s linear infinite reverse} @media (min-width:1200px){ html.js:not(.lite):not(.reduce) #sistema.is-on .s05-st2 .s05-chip{animation:s05-dni 4.6s cubic-bezier(.3,.6,.4,1) 1.2s infinite both} html.js:not(.lite):not(.reduce) #sistema.is-on .s05-st2 .s05-hit{animation:s05-hit 4.6s ease 1.2s infinite both} html.js:not(.lite):not(.reduce) #sistema.is-on .s05-st2 .s05-blk{animation:s05-blk 4.6s ease 1.2s infinite both} } html.js #sistema:not(.is-on) *{animation:none!important} /* bucles: fuera, no en pausa (ver base.css) */ @media print{ #sistema .s05-fx,#sistema .s05-pts,#sistema .s05-scan,#sistema .s05-halo{display:none!important} #sistema .s05-col,#sistema .s05-col *{opacity:1!important;transform:none!important} } /* ===== 06-ocho-semanas.css ===== */ /* =================== 06 · EN 8 SEMANAS (#ocho-semanas, prefijo s06-, marfil) =================== Deck slide_08: a la izquierda los cinco pasos que se marcan; a la derecha 8 semanas (entender → montar → usar) que se rellenan una a una y acaban en «Medimos · En marcha ✓»; abajo el cierre en tinta. Por defecto (sin JS, reduce, impresión) todo relleno y marcado. .s06-armed (06-ocho-semanas.js) activa los estados vacíos; .is-on los rellena. Solo transform y opacity (y el trazo del tick, una vez). */ #ocho-semanas{--gap-g:clamp(28px,3.4vw,64px)} #ocho-semanas .s06-bgc{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} /* recorta el «8» del parallax: que no invada la sección de arriba */ #ocho-semanas .s06-eight{position:absolute;right:-3%;top:-2%;z-index:0;pointer-events:none;font-family:var(--f-disp);font-weight:900;line-height:.8; font-size:clamp(360px,50vw,1040px);color:rgba(46,59,255,.055);user-select:none} #ocho-semanas .s06-hd{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,64px);align-items:end} #ocho-semanas .s06-hl{display:flex;flex-direction:column;gap:clamp(10px,1vw,16px)} #ocho-semanas .s06-hd .mega{font-size:clamp(44px,5.8vw,112px);line-height:.9} #ocho-semanas .mega .ln{padding-top:.14em;margin-top:-.14em} #ocho-semanas .s06-lead{max-width:600px;padding-bottom:6px} @media (min-width:1024px){ #ocho-semanas .s06-hd{grid-template-columns:auto minmax(0,1fr)} } #ocho-semanas .s06-scene{position:relative;margin-top:clamp(36px,4.4vw,72px)} #ocho-semanas .s06-g{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-g)} @media (min-width:1024px){ #ocho-semanas .s06-g{grid-template-columns:minmax(0,.78fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"chk cal" "fin cal";column-gap:var(--gap-g);row-gap:28px} #ocho-semanas .s06-chk{grid-area:chk} #ocho-semanas .s06-cal{grid-area:cal} #ocho-semanas .s06-fin{grid-area:fin;align-self:end} } /* ---------- pasos con casilla ---------- */ #ocho-semanas .s06-chk{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(8px,.6vw,12px)} #ocho-semanas .s06-chk li{display:flex;align-items:center;gap:clamp(12px,1.1vw,20px)} #ocho-semanas .s06-n{font-family:var(--f-mono);font-weight:500;font-size:clamp(12px,.8vw,15px);letter-spacing:.14em;color:var(--mute-l);width:26px;flex:none} #ocho-semanas .s06-box{width:clamp(34px,2.4vw,46px);height:clamp(34px,2.4vw,46px);flex:none;border:3px solid var(--ink);border-radius:8px;display:grid;place-items:center;background:var(--cobalt)} #ocho-semanas .s06-box svg{width:70%;height:70%;fill:none;stroke:var(--chalk);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:0} #ocho-semanas .s06-w{font-family:var(--f-disp);font-weight:900;font-size:clamp(28px,3vw,58px);line-height:1;letter-spacing:.005em;text-transform:uppercase;color:var(--ink);padding-top:.1em} /* ---------- calendario de 8 semanas ---------- */ #ocho-semanas .s06-cal{position:relative;display:flex;flex-direction:column;min-height:0;padding-top:3px} #ocho-semanas .s06-bar{position:absolute;left:0;right:0;top:0;height:3px;background:var(--ink)} #ocho-semanas .s06-bar i{display:none;position:absolute;inset:0;background:var(--cobalt);transform-origin:0 50%} #ocho-semanas .s06-calh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 20px;padding:14px 0 12px} #ocho-semanas .s06-mo{font-family:var(--f-disp);font-weight:900;font-size:clamp(28px,2.1vw,40px);line-height:1;text-transform:uppercase;color:var(--ink)} #ocho-semanas .s06-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--f-mono);font-size:clamp(11px,.75vw,14px);letter-spacing:.12em;text-transform:uppercase;color:var(--body-l)} #ocho-semanas .s06-legend span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap} #ocho-semanas .s06-legend i{display:block;width:14px;height:14px;border-radius:3px} #ocho-semanas .s06-en{background:var(--ink)} #ocho-semanas .s06-mt{background:repeating-linear-gradient(135deg,#0A0A0C 0 3px,#33343D 3px 7px)} #ocho-semanas .s06-us{background:#C6C1B6} #ocho-semanas .s06-days{list-style:none;margin:0;padding:0;flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px} @media (min-width:600px){ #ocho-semanas .s06-days{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 12px} } #ocho-semanas .s06-day{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0;border-top:1px solid var(--line-l);padding-top:5px} #ocho-semanas .s06-day > b{position:relative;z-index:3;font-family:var(--f-mono);font-weight:700;font-size:clamp(11px,.78vw,15px);letter-spacing:.14em;text-transform:uppercase;line-height:1.1;color:var(--ink)} /* la casilla: ::after = hueco punteado (vacía), ::before = relleno (se abre de izquierda a derecha), = texto */ #ocho-semanas .s06-bk{position:relative;isolation:isolate;flex:1 1 auto;min-height:clamp(96px,8.4vw,170px);border-radius:6px;padding:clamp(12px,.9vw,16px);background:none!important; font-family:var(--f-mono);font-weight:700;font-size:clamp(13px,1.2vw,24px);letter-spacing:.04em;line-height:1.15;text-transform:uppercase;color:var(--chalk);overflow-wrap:break-word} #ocho-semanas .s06-bk::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;border:1.5px dashed rgba(10,10,12,.28)} #ocho-semanas .s06-bk::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;transform-origin:0 50%} #ocho-semanas .s06-bk > span{position:relative;z-index:2;display:block} #ocho-semanas .s06-bk.s06-en::before{background:var(--ink)} #ocho-semanas .s06-bk.s06-mt::before{background:repeating-linear-gradient(135deg,#0A0A0C 0 3px,#33343D 3px 7px)} #ocho-semanas .s06-bk.s06-us::before{background:#C6C1B6} #ocho-semanas .s06-bk.s06-us{color:var(--ink)} #ocho-semanas .s06-bk.s06-go::before{background:var(--cobalt);box-shadow:0 10px 24px rgba(46,59,255,.35)} #ocho-semanas .s06-bk.s06-go{transform-origin:50% 0} /* el pulso crece hacia abajo: no tapa «Semana 8» */ /* ---------- cierre ---------- */ #ocho-semanas .s06-fin{position:relative;background:var(--ink);border-radius:var(--radius);padding:clamp(22px,2vw,32px) clamp(22px,2.2vw,36px) clamp(24px,2.1vw,32px);overflow:hidden} #ocho-semanas .s06-fin::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1.5px 1.5px,rgba(255,255,255,.06) 1.2px,transparent 1.8px);background-size:10px 10px;pointer-events:none} #ocho-semanas .s06-trim{position:relative;display:block;width:22px;height:5px;background:var(--trim);margin-bottom:14px} #ocho-semanas .s06-fint{position:relative;font-size:clamp(28px,2.6vw,50px);line-height:.98;color:#fff} /* ---------- escritorio con altura suficiente: la sección es una diapositiva (cabe en una pantalla, sin fijarse) ---------- */ @media (min-width:1024px) and (min-height:700px){ html:not(.lite) #ocho-semanas{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center; padding-top:calc(var(--hd-h) + clamp(20px,2.2vw,40px));padding-bottom:clamp(24px,2.4vw,44px)} html:not(.lite) #ocho-semanas .s06-scene{margin-top:clamp(18px,2vw,36px)} html:not(.lite) #ocho-semanas .s06-g{height:clamp(500px,calc(100svh - var(--hd-h) - clamp(330px,19.4vw,420px)),820px)} html:not(.lite) #ocho-semanas .s06-bk{min-height:0} } /* ---------- estados vacíos (solo con .s06-armed) ---------- */ @keyframes s06-box{0%{transform:scale(.7)}55%{transform:scale(1.18)}100%{transform:none}} @keyframes s06-pulse{0%,100%{transform:none}40%{transform:scale(1.06)}} html.js #ocho-semanas .s06-armed .s06-bar i{display:block;transform:scaleX(0)} html.js #ocho-semanas .s06-armed.s06-flow .s06-bar i{transition:transform .8s var(--ease)} html.js #ocho-semanas .s06-armed .s06-box{transition:background-color .25s ease} html.js #ocho-semanas .s06-armed .s06-box svg{transition:stroke-dashoffset .35s ease .12s} html.js #ocho-semanas .s06-armed .s06-w{transition:opacity .5s ease} html.js #ocho-semanas .s06-armed .s06-chk li:not(.is-on) .s06-box{background:transparent} html.js #ocho-semanas .s06-armed .s06-chk li:not(.is-on) .s06-box svg{stroke-dashoffset:24} html.js #ocho-semanas .s06-armed .s06-chk li:not(.is-on) .s06-w{opacity:.28} html.js:not(.reduce) #ocho-semanas .s06-armed .s06-chk li.is-on .s06-box{animation:s06-box .45s var(--ease-pop) backwards} html.js #ocho-semanas .s06-armed .s06-bk::before{transition:transform .55s var(--ease) var(--dl,0s)} html.js #ocho-semanas .s06-armed .s06-bk > span{transition:opacity .35s ease calc(var(--dl,0s) + .22s),transform .5s var(--ease) calc(var(--dl,0s) + .22s)} html.js #ocho-semanas .s06-armed .s06-day:not(.is-on) .s06-bk::before{transform:scaleX(0)} html.js #ocho-semanas .s06-armed .s06-day:not(.is-on) .s06-bk > span{opacity:0;transform:translate3d(-10px,0,0)} html.js:not(.reduce) #ocho-semanas .s06-armed .s06-day.is-on .s06-go{animation:s06-pulse 1.1s ease-in-out .6s 2 backwards} html.js #ocho-semanas .s06-armed .s06-fin{transition:opacity .7s var(--ease),transform .9s var(--ease)} html.js #ocho-semanas .s06-armed .s06-fin .ln > span{transition:transform 1s var(--ease) .2s} html.js #ocho-semanas .s06-armed .s06-fin .ln:nth-child(2) > span{transition-delay:.32s} html.js #ocho-semanas .s06-armed .s06-fin:not(.is-on){opacity:0;transform:translate3d(0,36px,0)} html.js #ocho-semanas .s06-armed .s06-fin:not(.is-on) .ln > span{transform:translate3d(0,112%,0)} @media print{ #ocho-semanas .s06-eight{display:none} #ocho-semanas .s06-fin,#ocho-semanas .s06-fin *,#ocho-semanas .s06-bk *,#ocho-semanas .s06-chk *{opacity:1!important;transform:none!important} } /* ===== 07-formacion.css ===== */ /* =================== 07 · FORMACIÓN (#formacion, prefijo s07f-, oscura) =================== Spec: _fuentes/GROWTH_FORMACION.md, bloque 1. El problema con las cajas de «El bloqueo» (03) y los pasos con la lista de «Cómo empezamos» (04). - Por defecto (sin JS, reduce, impresión): todo encendido y quieto. - .s07f-armed (lo pone 07-formacion.js): piezas, pasos y remate esperan apagados y se encienden con .is-on. - Escritorio con altura (≥1024 × ≥700, sin .lite): la sección cabe en una pantalla, como una diapositiva. Nada pegajoso. Solo se anima transform y opacity. */ /* el halo se apaga dentro de la sección (último stop a .78 del radio, centro a .85 del borde): sin costura con «Cuando la IA se pone a trabajar» */ #formacion{--hr:clamp(260px,30vw,560px); background-image:radial-gradient(circle var(--hr) at calc(-6% + var(--hr) * .4) calc(100% - var(--hr) * .85),rgba(46,59,255,.36) 0,rgba(46,59,255,.09) calc(var(--hr) * .55),rgba(46,59,255,0) calc(var(--hr) * .78)); background-repeat:no-repeat} #formacion .s07f-hd{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.6vw,48px);align-items:end} #formacion .s07f-hl{display:flex;flex-direction:column;gap:clamp(10px,1vw,16px)} #formacion .mega .ln{padding-top:.1em;margin-top:-.1em} #formacion .s07f-lead{max-width:58ch;font-size:clamp(17px,1.3vw,25px)} @media (min-width:1024px){ #formacion .s07f-hd{grid-template-columns:auto minmax(0,1fr)} } /* ---------- rejilla: problema · cómo lo hacemos · remate ---------- */ #formacion .s07f-g{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,4vw,56px);margin-top:clamp(36px,4.4vw,72px)} #formacion .s07f-lbl{color:var(--mute);font-size:var(--fs-mono);letter-spacing:.22em;text-transform:uppercase;margin:0 0 clamp(12px,1.1vw,18px)} @media (min-width:1024px){ #formacion .s07f-g{grid-template-columns:minmax(0,.86fr) minmax(0,1.3fr);gap:clamp(28px,2.6vw,48px) clamp(40px,4.4vw,88px);align-items:start} #formacion .s07f-fin{grid-column:1 / -1} } /* ---------- el problema: cajas de «El bloqueo» ---------- */ #formacion .s07f-blk{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,1vw,16px)} #formacion .s07f-b{position:relative;display:flex;align-items:baseline;gap:clamp(14px,1.2vw,22px);background:var(--kit);border:1px solid var(--line);border-radius:var(--radius); padding:clamp(18px,1.4vw,24px) clamp(18px,1.4vw,24px)} #formacion .s07f-k{flex:none;font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.2em;color:var(--cobalt-hi)} #formacion .s07f-b h3{margin:0;font-family:var(--f-disp);font-weight:900;font-size:clamp(24px,1.8vw,34px);line-height:.98;text-transform:uppercase;letter-spacing:.005em;text-wrap:balance} /* ---------- cómo lo hacemos: lista de «Cómo empezamos», en oscuro ---------- */ #formacion .s07f-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--chalk)} #formacion .s07f-sp{--nw:clamp(34px,3vw,52px);position:relative;display:grid;grid-template-columns:var(--nw) minmax(0,1fr);gap:6px clamp(12px,1.4vw,24px);align-items:start; padding:clamp(14px,1.15vw,19px) 0 clamp(14px,1.1vw,18px);border-bottom:1px solid var(--line)} #formacion .s07f-bar{position:absolute;left:0;top:-2px;width:var(--nw);height:3px;background:var(--cobalt-hi);transform-origin:0 50%} #formacion .s07f-n{grid-column:1;grid-row:1 / span 2;font-family:var(--f-mono);font-weight:700;font-size:var(--fs-mono);letter-spacing:.18em;color:var(--cobalt-hi);padding-top:.5em} #formacion .s07f-h{grid-column:2;margin:0;font-family:var(--f-disp);font-weight:900;font-size:clamp(22px,1.75vw,34px);line-height:1;text-transform:uppercase;letter-spacing:.01em;color:var(--chalk)} #formacion .s07f-p{grid-column:2;margin:0;font-size:clamp(15px,1.06vw,20px);line-height:1.38;color:rgba(242,239,232,.78)} @media (min-width:1280px){ #formacion .s07f-sp{grid-template-columns:var(--nw) minmax(0,1fr) minmax(0,1.15fr)} #formacion .s07f-n{grid-row:1} #formacion .s07f-h{padding-top:2px} #formacion .s07f-p{grid-column:3;grid-row:1} } /* ---------- remate ---------- */ #formacion .s07f-fin{display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(16px,1.6vw,28px);padding-top:clamp(20px,1.8vw,30px);border-top:1px solid var(--line)} #formacion .s07f-trim{display:block;flex:none;width:22px;height:5px;background:var(--trim)} #formacion .s07f-fint{flex:1 1 auto;min-width:0;font-size:clamp(28px,2.6vw,50px);line-height:.98;color:var(--chalk)} #formacion .s07f-fint .ln{padding-top:.08em;margin-top:-.08em} #formacion .s07f-wk{display:inline-flex;align-items:center;gap:10px;margin:0;font-size:max(12px,var(--fs-mono));letter-spacing:.14em;text-transform:uppercase;color:var(--mute);white-space:nowrap} #formacion .s07f-wk i{display:block;width:14px;height:14px;border-radius:3px;background:#C6C1B6;flex:none} /* el color de «Usar» del calendario */ @media (min-width:1024px){ #formacion .s07f-fint .ln{display:inline-block} #formacion .s07f-wk{margin-left:auto} } /* ---------- escritorio con altura suficiente: la sección es una diapositiva (cabe en una pantalla, sin fijarse) ---------- */ @media (min-width:1024px) and (min-height:700px){ html:not(.lite) #formacion{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center; padding-top:calc(var(--hd-h) + clamp(20px,2.2vw,40px));padding-bottom:clamp(28px,2.6vw,48px)} html:not(.lite) #formacion .s07f-g{margin-top:clamp(28px,3vw,56px)} } /* ---------- estados apagados (solo con .s07f-armed) ---------- */ html.js #formacion .s07f-armed .s07f-b{transition:opacity .6s var(--ease),transform .8s var(--ease)} html.js #formacion .s07f-armed .s07f-b:not(.is-on){opacity:0;transform:translate3d(0,28px,0)} html.js #formacion .s07f-armed .s07f-bar{transition:transform .6s var(--ease)} html.js #formacion .s07f-armed .s07f-sp > :not(.s07f-bar){transition:opacity .45s ease .1s} html.js #formacion .s07f-armed .s07f-sp:not(.is-on) .s07f-bar{transform:scaleX(0)} html.js #formacion .s07f-armed .s07f-sp:not(.is-on) > :not(.s07f-bar){opacity:.18} html.js #formacion .s07f-armed .s07f-fin{transition:opacity .7s var(--ease)} html.js #formacion .s07f-armed .s07f-fin .ln > span{display:inline-block;transition:transform .9s var(--ease) .1s} html.js #formacion .s07f-armed .s07f-fin .ln + .ln > span{transition-delay:.24s} html.js #formacion .s07f-armed .s07f-fin:not(.is-on){opacity:0} html.js #formacion .s07f-armed .s07f-fin:not(.is-on) .ln > span{transform:translate3d(0,112%,0)} @media print{ #formacion .s07f-b,#formacion .s07f-fin,#formacion .s07f-fin *,#formacion .s07f-sp *{opacity:1!important;transform:none!important} } /* ===== 08-ia-trabajando.css ===== */ /* =================== 07 · CUANDO LA IA SE PONE A TRABAJAR (#ia-trabajando, prefijo s07-) =================== Deck: frag_09 / slide_09. Cuatro piezas con maqueta. Estado por defecto = FINAL (persianas abiertas, maquetas completas y quietas). Con JS (#ia-trabajando.s07-armed, lo pone 08-ia-trabajando.js): cada pieza espera tapada por 7 lamas cobalto y, al entrar en pantalla (.s07-in), las lamas giran y se abren en ola. Después, .s07-live pasa de pieza en pieza: solo una maqueta en marcha a la vez, y solo con la sección en pantalla (.is-on) y en escritorio (en táctil, .lite, las maquetas se quedan quietas en su estado final). Animaciones: transform y opacidad (+ trazos SVG pequeños dentro de la pieza con foco). */ #ia-trabajando.sec{padding-bottom:clamp(56px,5vw,96px)} /* encadena con Developers sin un tramo negro */ #ia-trabajando .s07-halo{--halo:clamp(620px,64vw,1200px);right:-22%;top:-18%} #ia-trabajando .s07-hd{display:flex;flex-direction:column;gap:clamp(14px,1.4vw,24px)} #ia-trabajando .s07-t .ln{padding-top:.12em;margin-top:-.12em} /* ---- rejilla: 1 col · 2 col (640) · 4 col (1280) ---- */ #ia-trabajando .s07-g{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,1.3vw,24px);margin-top:clamp(36px,3.6vw,64px)} @media (min-width:640px){ #ia-trabajando .s07-g{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:1280px){ #ia-trabajando .s07-g{grid-template-columns:repeat(4,minmax(0,1fr))} } #ia-trabajando .s07-k{position:relative;overflow:hidden;border-radius:var(--radius);padding:clamp(18px,1.4vw,26px) clamp(18px,1.4vw,26px) clamp(22px,1.6vw,30px); display:flex;flex-direction:column;min-width:0; background:linear-gradient(180deg,var(--kit2) 0%,var(--kit) 46%,#101117 100%); box-shadow:0 0 0 1px rgba(242,239,232,.14);transition:box-shadow .4s ease} /* sin sombra difusa: sobre el negro no se ve y encarece repintar la pieza con foco */ #ia-trabajando .s07-k.s07-live{box-shadow:0 0 0 1.5px rgba(140,149,255,.7)} #ia-trabajando .s07-khd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} #ia-trabajando .s07-no{font-family:var(--f-num);font-weight:900;font-size:clamp(56px,4.6vw,88px);line-height:.8;letter-spacing:-.03em;color:var(--chalk);transition:color .4s ease} #ia-trabajando .s07-live .s07-no{color:var(--cobalt-hi)} #ia-trabajando .s07-tag{color:var(--mute);padding-top:4px;text-align:right;font-size:clamp(11px,.72vw,14px);transition:color .4s ease} #ia-trabajando .s07-live .s07-tag{color:var(--chalk)} /* ventana de la maqueta */ #ia-trabajando .s07-fx{position:relative;aspect-ratio:5/4;margin-top:clamp(16px,1.2vw,22px);border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center; background:radial-gradient(ellipse 80% 70% at 50% 60%,rgba(46,59,255,.16),transparent 70%),#0B0C11;box-shadow:inset 0 0 0 1px rgba(242,239,232,.08)} #ia-trabajando .s07-fx::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1.5px 1.5px,rgba(255,255,255,.07) 1.1px,transparent 1.6px);background-size:12px 12px} #ia-trabajando .s07-crop{position:absolute;inset:8px;pointer-events:none;opacity:.4; background:linear-gradient(var(--chalk),var(--chalk)) 0 0/16px 1.5px,linear-gradient(var(--chalk),var(--chalk)) 0 0/1.5px 16px, linear-gradient(var(--chalk),var(--chalk)) 100% 0/16px 1.5px,linear-gradient(var(--chalk),var(--chalk)) 100% 0/1.5px 16px, linear-gradient(var(--chalk),var(--chalk)) 0 100%/16px 1.5px,linear-gradient(var(--chalk),var(--chalk)) 0 100%/1.5px 16px, linear-gradient(var(--chalk),var(--chalk)) 100% 100%/16px 1.5px,linear-gradient(var(--chalk),var(--chalk)) 100% 100%/1.5px 16px;background-repeat:no-repeat} #ia-trabajando .s07-fx svg{position:relative;flex:none;overflow:visible;width:min(100% - 36px,340px);height:auto} #ia-trabajando .s07-kt{margin-top:clamp(18px,1.4vw,26px);font-size:clamp(30px,2.5vw,46px);line-height:.95;letter-spacing:.01em} #ia-trabajando .s07-kt::after{content:"";display:block;width:18px;height:3px;background:var(--trim);margin-top:10px} #ia-trabajando .s07-k .body-s{margin-top:12px;font-size:clamp(16px,1.04vw,20px);line-height:1.42;color:rgba(242,239,232,.8)} /* barra de progreso de la pieza con foco (scaleX, no width) */ #ia-trabajando .s07-bar{position:absolute;left:0;top:0;right:0;height:3px;background:var(--cobalt-hi);z-index:4;transform:scaleX(0);transform-origin:0 50%} /* ---- persiana de entrada (solo con JS y movimiento normal) ---- */ #ia-trabajando .s07-blind{display:none} html.js:not(.lite):not(.reduce) #ia-trabajando.s07-armed .s07-blind{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;pointer-events:none} #ia-trabajando .s07-blind i{flex:1;display:block;background:linear-gradient(180deg,#3542FF 0%,var(--cobalt) 70%,#2531E0 100%);border-bottom:1px solid rgba(10,10,12,.3); transform-origin:50% 0;transform:perspective(700px) rotateX(-90deg);visibility:hidden} html.js:not(.lite):not(.reduce) #ia-trabajando.s07-armed .s07-k:not(.s07-in) .s07-blind i{transform:none;visibility:visible} html.js:not(.lite):not(.reduce) #ia-trabajando .s07-k.s07-in .s07-blind i{animation:s07-slat .62s var(--ease-wipe) backwards;animation-delay:calc(.1s + var(--kd) + var(--j,0) * .045s)} /* cascada de izquierda a derecha en la fila (táctil: sin persiana, el contenido aparece con un fundido) */ #ia-trabajando .s07-k{--kd:calc(var(--k,0) * .12s)} html.lite #ia-trabajando .s07-k{--kd:0s} html.js.lite:not(.reduce) #ia-trabajando.s07-armed .s07-k:not(.s07-in) > *{opacity:0} @keyframes s07-slat{from{transform:none;visibility:visible}to{transform:perspective(700px) rotateX(-90deg);visibility:visible}} /* lo de dentro aparece cuando se abren las lamas */ html.js:not(.reduce) #ia-trabajando .s07-k.s07-in .s07-no{animation:s07-stamp .7s var(--ease-pop) calc(.38s + var(--kd)) backwards} html.js:not(.reduce) #ia-trabajando .s07-k.s07-in .s07-tag, html.js:not(.reduce) #ia-trabajando .s07-k.s07-in .s07-kt{animation:s07-up .8s var(--ease) calc(.46s + var(--kd)) backwards} html.js:not(.reduce) #ia-trabajando .s07-k.s07-in .body-s{animation:s07-up .8s var(--ease) calc(.56s + var(--kd)) backwards} html.js.lite:not(.reduce) #ia-trabajando .s07-k.s07-in .s07-fx{animation:s07-fade .6s ease .2s backwards} @keyframes s07-fade{from{opacity:0}to{opacity:1}} @keyframes s07-stamp{from{opacity:0;transform:scale(1.7)}to{opacity:1;transform:none}} @keyframes s07-up{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:none}} /* hover (escritorio): la pieza sube un poco */ html.js:not(.lite) #ia-trabajando .s07-k{transition:box-shadow .4s ease,transform .5s var(--ease)} html.js:not(.lite) #ia-trabajando .s07-k:hover{transform:translate3d(0,-6px,0)} /* =========== maquetas: aspecto (estado final, quieto) =========== */ /* 01 · chat con fuente citada */ #ia-trabajando .s07-win{fill:rgba(242,239,232,.04);stroke:rgba(242,239,232,.28);stroke-width:1.5} #ia-trabajando .s07-wbar{fill:rgba(242,239,232,.08)} #ia-trabajando .s07-dot{fill:rgba(242,239,232,.35)} #ia-trabajando .s07-ub{fill:var(--cobalt)} #ia-trabajando .s07-ul{fill:rgba(242,239,232,.75)} #ia-trabajando .s07-ab{fill:rgba(242,239,232,.1);stroke:rgba(242,239,232,.3);stroke-width:1} #ia-trabajando .s07-al{fill:rgba(242,239,232,.55)} #ia-trabajando .s07-cite rect{fill:rgba(140,149,255,.14);stroke:var(--cobalt-hi);stroke-width:1.5} #ia-trabajando .s07-cite path{fill:none;stroke:var(--cobalt-hi);stroke-width:1.6;stroke-linejoin:round} #ia-trabajando .s07-cite text{font-family:var(--f-mono);font-weight:700;font-size:14px;letter-spacing:.06em;fill:var(--chalk)} #ia-trabajando .s07-typing circle{fill:var(--cobalt-hi);opacity:0} #ia-trabajando .s07-b1,#ia-trabajando .s07-b2,#ia-trabajando .s07-cite{transform-box:fill-box;transform-origin:50% 50%} #ia-trabajando .s07-r{fill:none;stroke:var(--cobalt-hi);stroke-width:1.4;stroke-dasharray:4 4;transform-box:fill-box;transform-origin:center} #ia-trabajando .s07-r1{opacity:.45} #ia-trabajando .s07-r2{opacity:.65;stroke-dasharray:3 5} #ia-trabajando .s07-r3{opacity:.9;stroke-dasharray:none} #ia-trabajando .s07-core{fill:var(--cobalt)} /* 02 · línea de tiempo */ #ia-trabajando .s07-edit text{font-family:var(--f-mono);font-size:14px;font-weight:500;letter-spacing:.06em;fill:var(--mute)} #ia-trabajando .s07-rul{stroke:rgba(242,239,232,.4);stroke-width:8;stroke-dasharray:1.5 12.5} #ia-trabajando .s07-rl{stroke:rgba(242,239,232,.18);stroke-width:1} #ia-trabajando .s07-clips rect{fill:rgba(242,239,232,.13);stroke:rgba(242,239,232,.3);stroke-width:1} #ia-trabajando .s07-clips rect.s07-hot{fill:var(--cobalt);stroke:var(--cobalt-hi)} #ia-trabajando .s07-cmark{fill:#05060A;opacity:.85} #ia-trabajando .s07-trk{fill:rgba(242,239,232,.04);stroke:rgba(242,239,232,.12)} #ia-trabajando .s07-wave rect{fill:var(--cobalt-hi);transform-box:fill-box;transform-origin:50% 50%} #ia-trabajando .s07-stills rect{fill:rgba(242,239,232,.1);stroke:rgba(242,239,232,.26)} #ia-trabajando .s07-stills rect.s07-hot{fill:rgba(140,149,255,.35);stroke:var(--cobalt-hi)} #ia-trabajando .s07-ph{transform:translateX(178px)} #ia-trabajando .s07-ph path{fill:var(--trim)} #ia-trabajando .s07-ph line{stroke:var(--trim);stroke-width:2} /* 03 · panel que sube, con alerta en vivo */ #ia-trabajando .s07-ax{stroke:rgba(242,239,232,.3);stroke-width:1.5} #ia-trabajando .s07-gl{stroke:rgba(242,239,232,.08);stroke-width:1} #ia-trabajando .s07-col{fill:rgba(140,149,255,.45);transform-box:fill-box;transform-origin:50% 100%} #ia-trabajando .s07-col.s07-top{fill:var(--cobalt-hi)} #ia-trabajando .s07-trend{fill:none;stroke:var(--chalk);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} #ia-trabajando .s07-pill rect{fill:rgba(7,8,11,.8);stroke:rgba(242,239,232,.5);stroke-width:1.2} #ia-trabajando .s07-pill circle{fill:var(--trim)} #ia-trabajando .s07-pill text{font-family:var(--f-mono);font-weight:700;font-size:14px;letter-spacing:.12em;fill:var(--chalk)} /* 04 · documento con sello */ #ia-trabajando .s07-paper{fill:var(--chalk)} #ia-trabajando .s07-psh{fill:rgba(242,239,232,.16)} #ia-trabajando .s07-dh{fill:var(--ink)} #ia-trabajando .s07-ai{fill:none;stroke:var(--ink);stroke-width:1.5} #ia-trabajando .s07-ait{font-family:var(--f-disp);font-weight:900;font-size:14px;fill:var(--ink);text-anchor:middle} #ia-trabajando .s07-rows rect{fill:none;stroke:var(--ink);stroke-width:1.5} #ia-trabajando .s07-lbl{font-family:var(--f-mono);font-weight:700;font-size:14px;letter-spacing:.08em;fill:var(--ink)} #ia-trabajando .s07-ck{fill:none;stroke:var(--cobalt);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} #ia-trabajando .s07-tl{fill:rgba(10,10,12,.22)} #ia-trabajando .s07-sig{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round} #ia-trabajando .s07-stamp rect{fill:rgba(46,59,255,.08);stroke:var(--cobalt);stroke-width:3} #ia-trabajando .s07-stamp rect.s07-in2{fill:none;stroke-width:1.2} #ia-trabajando .s07-stamp text{font-family:var(--f-disp);font-weight:900;font-size:22px;letter-spacing:.12em;fill:var(--cobalt);text-anchor:middle} #ia-trabajando .s07-stamp{transform-box:fill-box;transform-origin:50% 50%} /* =========== la pieza con foco: su maqueta en marcha (un ciclo de --s07t; JS reinicia al pasar el foco) =========== Solo con la sección en pantalla (.is-on), en escritorio (sin .lite) y movimiento normal. */ #ia-trabajando{--s07t:4.2s} html.js:not(.lite):not(.reduce) #ia-trabajando.is-on .s07-live .s07-bar{animation:s07-prog var(--s07t) linear both} @keyframes s07-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* 01 */ html.js:not(.lite):not(.reduce) #ia-trabajando.is-on .s07-live .s07-b1{animation:s07-b1 var(--s07t) var(--ease) infinite both} html.js:not(.lite):not(.reduce) #ia-trabajando.is-on .s07-live .s07-b2{animation:s07-b2 var(--s07t) var(--ease) infinite both} html.js:not(.lite):not(.reduce) #ia-trabajando.is-on .s07-live .s07-cite{animation:s07-b3 var(--s07t) var(--ease-pop) infinite both} html.js:not(.lite):not(.reduce) #ia-trabajando.is-on .s07-live .s07-typing circle{animation:s07-typ var(--s07t) infinite both;animation-delay:calc(var(--j) * .12s)} html.js:not(.lite):not(.reduce) #ia-trabajando.is-on .s07-live .s07-r1{animation:s07-spin 14s linear infinite} html.js:not(.lite):not(.reduce) #ia-trabajando.is-on .s07-live .s07-r2{animation:s07-spin 9s linear infinite reverse} @keyframes s07-b1{0%,4%{opacity:0;transform:translateY(14px)}14%,92%{opacity:1;transform:none}100%{opacity:0}} @keyframes s07-b2{0%,38%{opacity:0;transform:translateY(14px)}48%,92%{opacity:1;transform:none}100%{opacity:0}} @keyframes s07-b3{0%,56%{opacity:0;transform:scale(.6)}64%,92%{opacity:1;transform:none}100%{opacity:0}} @keyframes s07-typ{0%,16%{opacity:0}20%{opacity:1}26%{opacity:.25}30%{opacity:1}34%{opacity:.25}37%{opacity:0}100%{opacity:0}} @keyframes s07-spin{to{transform:rotate(360deg)}} /* 02 */ html.js:not(.lite):not(.reduce) #ia-trabajando.is-on .s07-live .s07-ph{animation:s07-play var(--s07t) linear infinite both} html.js:not(.lite):not(.reduce) #ia-trabajando.is-on .s07-live .s07-wave rect{animation:s07-wave .5s ease-in-out infinite alternate both;animation-delay:calc(var(--j) * -.09s)} @keyframes s07-play{from{transform:translateX(30px)}to{transform:translateX(296px)}} @keyframes s07-wave{from{transform:scaleY(.35)}to{transform:scaleY(1.15)}} /* 03 */ html.js:not(.lite):not(.reduce) #ia-trabajando.is-on .s07-live .s07-col{animation:s07-colup var(--s07t) var(--ease) infinite both;animation-delay:calc(var(--j) * .08s)} html.js:not(.lite):not(.reduce) #ia-trabajando.is-on .s07-live .s07-trend{stroke-dasharray:1 1;animation:s07-draw3 var(--s07t) ease-in-out infinite both} html.js:not(.lite):not(.reduce) #ia-trabajando.is-on .s07-live .s07-pill circle{animation:s07-blink 1.2s steps(2) infinite} @keyframes s07-colup{0%,4%{transform:scaleY(.08)}30%,92%{transform:scaleY(1)}100%{transform:scaleY(.08)}} @keyframes s07-draw3{0%,30%{stroke-dashoffset:1}60%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}} @keyframes s07-blink{50%{opacity:.2}} /* 04 */ html.js:not(.lite):not(.reduce) #ia-trabajando.is-on .s07-live .s07-ck, html.js:not(.lite):not(.reduce) #ia-trabajando.is-on .s07-live .s07-sig{stroke-dasharray:1 1} html.js:not(.lite):not(.reduce) #ia-trabajando.is-on .s07-live .s07-c1{animation:s07-c1 var(--s07t) var(--ease) infinite both} html.js:not(.lite):not(.reduce) #ia-trabajando.is-on .s07-live .s07-c2{animation:s07-c2 var(--s07t) var(--ease) infinite both} html.js:not(.lite):not(.reduce) #ia-trabajando.is-on .s07-live .s07-c3{animation:s07-c3 var(--s07t) var(--ease) infinite both} html.js:not(.lite):not(.reduce) #ia-trabajando.is-on .s07-live .s07-sig{animation:s07-sig var(--s07t) ease-in-out infinite both} html.js:not(.lite):not(.reduce) #ia-trabajando.is-on .s07-live .s07-stamp{animation:s07-st var(--s07t) infinite both} @keyframes s07-c1{0%,4%{stroke-dashoffset:1}12%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}} @keyframes s07-c2{0%,13%{stroke-dashoffset:1}21%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}} @keyframes s07-c3{0%,22%{stroke-dashoffset:1}30%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}} @keyframes s07-sig{0%,32%{stroke-dashoffset:1}50%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}} @keyframes s07-st{ 0%,52%{opacity:0;transform:scale(1.9)} 53%{opacity:1;transform:scale(1.9);animation-timing-function:cubic-bezier(.5,0,.75,0)} 60%{opacity:1;transform:scale(.94);animation-timing-function:var(--ease-pop)} 66%,92%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1)}} /* bucles fuera de pantalla: en pausa (por si .is-on tarda un fotograma en irse) */ html.js #ia-trabajando:not(.is-on) .s07-k *{animation-play-state:paused!important} html.js #ia-trabajando:not(.is-on) .s07-live *{animation:none!important} /* bucles: fuera, no en pausa (ver base.css) */ @media print{ #ia-trabajando .s07-blind,#ia-trabajando .s07-bar{display:none!important} #ia-trabajando .s07-k.s07-live{box-shadow:0 0 0 1px rgba(242,239,232,.14)} } /* ===== 09-developers.css ===== */ /* =================== 08 · NO SOLO IA · INNATIAL DEVELOPERS (#developers, prefijo s08-) =================== Deck: frag_10 / slide_10 («INNATIAL [IA] se convierte en developers… no solo IA, crea tu ecosistema de apps a medida»). Estado por defecto = FINAL: caja abierta en DEVELOPERS, titular, piezas, maquetas montadas y fila compacta. Con JS (#developers.s08-armed) lo que aún no ha entrado espera oculto y aparece con .s08-go (retardo en --dl, lo pone el JS). La caja se abre con --o (0 → 1) que el JS escribe en .s08-bx por tiempo (≈0,9 s al asomar): relleno con scaleX, borde derecho con translate, letras con opacidad. Nada de width, filter, blur ni foil en bucle (en el deck petardeaba: 30 fps). Escritorio grande (≥1200 × ≥820, sin .lite ni .reduce): la sección cabe en una pantalla, como la diapositiva; nada pegajoso (ver al final). */ #developers.sec{padding-block:0} #developers .s08-scene{height:auto} #developers .s08-pin{position:relative;top:auto;height:auto;min-height:0;overflow:visible;padding-block:var(--sec-y)} #developers .s08-halo{--halo:clamp(600px,62vw,1150px);right:-18%;top:-14%} #developers .s08-stage{position:relative} /* ---------- wordmark INNATIAL [IA → DEVELOPERS] ---------- */ #developers .s08-lock{position:relative;z-index:2;width:fit-content;max-width:100%} #developers .s08-eb{margin-bottom:clamp(14px,1.4vw,24px)} #developers .s08-wm{--nm:clamp(64px,21vw,120px);--bf:min(calc(var(--nm) * .4),calc((100vw - 2 * var(--gutter)) / 10.4)); display:flex;flex-wrap:wrap;align-items:center;column-gap:calc(var(--nm) * .16);row-gap:calc(var(--nm) * .16);line-height:1} @media (min-width:1024px){ #developers .s08-wm{--nm:clamp(80px,9vw,176px);--bf:calc(var(--nm) * .38);flex-wrap:nowrap} } #developers .s08-wbar{display:block;flex:none;width:calc(var(--nm) * .37);height:calc(var(--nm) * .085);background:var(--trim)} #developers .s08-nm{font-family:var(--f-disp);font-weight:900;font-size:var(--nm);line-height:.8;letter-spacing:.02em;padding-top:.04em;color:var(--chalk)} #developers .s08-bxw{position:relative;display:inline-flex;flex:none} #developers .s08-bx{--bw:max(2px,.07em);position:relative;display:inline-flex;align-items:center;white-space:nowrap;font-family:var(--f-mono);font-weight:700;font-size:var(--bf); letter-spacing:.24em;line-height:1;padding:.31em .36em .25em .47em;color:var(--chalk)} #developers .s08-fill{position:absolute;inset:0;background:var(--cobalt);border-block:var(--bw) solid var(--chalk);transform-origin:0 50%; transform:scaleX(calc(var(--k0,.27) + (1 - var(--k0,.27)) * var(--o,1)))} #developers .s08-ed{position:absolute;top:0;bottom:0;width:var(--bw);background:var(--chalk)} #developers .s08-edl{left:0} #developers .s08-edr{right:0;transform:translate3d(calc((var(--o,1) - 1) * var(--dx,0px)),0,0)} #developers .s08-ia{position:absolute;left:.47em;top:50%;transform:translateY(-50%);opacity:clamp(0,1 - var(--o,1) * 7,1)} #developers .s08-dev{position:relative;display:inline-flex} #developers .s08-dev i{font-style:normal;opacity:clamp(0,(var(--o,1) - .14 - var(--n) * .08) * 10,1)} #developers .s08-burst{position:absolute;inset:0;border:3px solid var(--cobalt-hi);opacity:0;pointer-events:none;box-shadow:0 0 30px rgba(140,149,255,.6)} #developers .s08-burst.s08-b2{border-color:#8EF6FF} html.js:not(.reduce) #developers.s08-open .s08-burst{animation:s08-burst 1.1s var(--ease) both} html.js:not(.reduce) #developers.s08-open .s08-b2{animation:s08-burst 1.3s var(--ease) .15s both} html.js:not(.reduce) #developers.s08-open .s08-fill{animation:s08-flash .6s linear both} @keyframes s08-burst{0%{opacity:0;transform:scale(1)}8%{opacity:1}100%{opacity:0;transform:scale(1.25,2.2)}} @keyframes s08-flash{0%{background-color:var(--chalk)}100%{background-color:var(--cobalt)}} /* ---------- titular ---------- */ #developers .s08-t{margin-top:clamp(22px,2vw,36px);font-size:clamp(30px,3.1vw,60px);line-height:1.04;letter-spacing:.01em;text-wrap:balance} #developers .s08-w{display:inline-block} #developers .s08-c{padding-top:.08em;margin-top:-.08em;background-size:200% 100%;background-position:0 0} /* ---------- red de circuito (la dibuja el JS con las medidas reales, en px del escenario; solo con 4 columnas) ---------- */ #developers .s08-net{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0;display:none} #developers .s08-tr path{fill:none;stroke:rgba(140,149,255,.32);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #developers .s08-tr path.s08-hl{stroke:#8EF6FF;stroke-width:3} #developers .s08-nd circle{fill:var(--ink);stroke:var(--cobalt-hi);stroke-width:2} #developers .s08-pu{position:absolute;left:0;top:0;width:0;height:0;z-index:0;display:none} #developers .s08-pu i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:#E9FDFF;opacity:0; box-shadow:0 0 0 3px rgba(142,246,255,.25),0 0 14px 3px rgba(142,246,255,.5)} @media (min-width:1024px){ #developers .s08-net{display:block} html.js:not(.lite):not(.reduce) #developers .s08-pu{display:block} html.js:not(.lite):not(.reduce) #developers .s08-pu i{will-change:transform,opacity} } /* ---------- piezas ---------- */ #developers .s08-g{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.1vw,18px);margin-top:clamp(40px,4.2vw,76px)} @media (min-width:640px){ #developers .s08-g{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:1024px){ #developers .s08-g{grid-template-columns:repeat(4,minmax(0,1fr))} } #developers .s08-tile{position:relative;min-width:0;display:flex;flex-direction:column;border-radius:var(--radius);background:var(--kit);border:1px solid var(--line); padding:clamp(16px,1.2vw,22px) clamp(18px,1.3vw,24px) clamp(20px,1.4vw,26px)} #developers .s08-tile::before{content:"";position:absolute;left:-1px;top:-1px;right:-1px;height:4px;border-radius:var(--radius) var(--radius) 0 0;background:var(--cobalt);transform-origin:0 50%} #developers .s08-fx{display:grid;place-items:center;aspect-ratio:300/185;margin:0 -6px 12px} #developers .s08-fx svg{width:100%;max-width:300px;height:auto;max-height:100%;overflow:visible} #developers .s08-tag{font-size:clamp(11px,.74vw,14px);letter-spacing:.16em;color:var(--cobalt-hi);transition:color .4s ease} #developers .s08-tt{margin-top:8px;font-size:clamp(28px,2.2vw,46px);line-height:.95;letter-spacing:.01em} #developers .s08-tile .body-s{margin-top:10px;font-size:clamp(15px,1vw,19px);line-height:1.38;color:rgba(242,239,232,.78)} /* foco: la pieza se levanta, su filete pasa a foil (estático) y su tramo de red se enciende */ #developers .s08-tile.s08-live{--ly:-8px;border-color:rgba(140,149,255,.65)} /* la sombra del foco ya va pintada en un pseudo-elemento: al cambiar de pieza solo cambia su opacidad (nada de transicionar una sombra difusa) */ #developers .s08-tile::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s ease; box-shadow:0 0 0 1px rgba(142,246,255,.35),0 28px 60px rgba(46,59,255,.38)} #developers .s08-tile.s08-live::after{opacity:1} #developers .s08-tile.s08-live::before{background:var(--foil)} #developers .s08-tile.s08-live .s08-tag{color:#8EF6FF} html.js:not(.lite) #developers .s08-tile{transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--ly,0px),0); transition:transform .45s var(--ease),border-color .45s ease;will-change:transform} /* maquetas: trazos claros sobre el gris del panel (estado final) */ #developers .s08-fx .s08-o{fill:none;stroke:rgba(242,239,232,.7);stroke-width:2.5} #developers .s08-fx .s08-l,#developers .s08-fx .s08-pl{fill:rgba(242,239,232,.28)} #developers .s08-fx .s08-l.s08-hi{fill:var(--cobalt-hi)} #developers .s08-ph .s08-nt{fill:rgba(242,239,232,.35)} #developers .s08-ph .s08-f{fill:var(--cobalt)} #developers .s08-ph .s08-s{fill:rgba(242,239,232,.12)} #developers .s08-ph .s08-tab circle{fill:rgba(242,239,232,.4)} #developers .s08-ph .s08-tab circle:first-child{fill:var(--cobalt-hi)} #developers .s08-ph .s08-push rect:first-child{fill:var(--chalk)} #developers .s08-ph .s08-push circle{fill:var(--cobalt)} #developers .s08-ph .s08-push .s08-pl{fill:rgba(10,10,12,.35)} #developers .s08-erp .s08-wb{fill:rgba(242,239,232,.12)} #developers .s08-erp .s08-d{fill:rgba(242,239,232,.45)} #developers .s08-erp .s08-side{fill:rgba(242,239,232,.06)} #developers .s08-erp .s08-rows rect{fill:rgba(242,239,232,.1)} #developers .s08-erp .s08-rows .s08-hot{fill:var(--cobalt)} #developers .s08-erp .s08-kpi rect{fill:none;stroke:rgba(140,149,255,.7);stroke-width:2} #developers .s08-bot .s08-u rect:first-child{fill:var(--cobalt)} #developers .s08-bot .s08-u .s08-pl{fill:rgba(242,239,232,.6)} #developers .s08-bot .s08-b rect:first-child{fill:rgba(242,239,232,.12)} #developers .s08-bot .s08-av{fill:var(--chalk)} #developers .s08-bot .s08-avk{stroke:var(--cobalt);stroke-width:3;stroke-linecap:round} #developers .s08-bot .s08-typing{opacity:0} #developers .s08-bot .s08-typing circle{fill:var(--cobalt-hi)} #developers .s08-bot .s08-chips rect{fill:none;stroke:rgba(242,239,232,.4);stroke-width:2} #developers .s08-bot .s08-chips .s08-on{fill:var(--cobalt-hi);stroke:none} #developers .s08-shd .s08-ring{fill:none;stroke:rgba(140,149,255,.55);stroke-width:2;stroke-dasharray:3 9;transform-origin:150px 84px} #developers .s08-shd .s08-sh{fill:rgba(46,59,255,.22);stroke:var(--cobalt-hi);stroke-width:3;stroke-linejoin:round} #developers .s08-shd .s08-ck{fill:none;stroke:var(--chalk);stroke-width:7;stroke-linecap:round;stroke-linejoin:round} #developers .s08-shd .s08-iso rect{fill:var(--chalk)} #developers .s08-shd .s08-iso text{font-family:var(--f-mono);font-weight:700;font-size:16px;letter-spacing:.14em;text-anchor:middle;fill:var(--ink)} #developers .s08-ph .s08-f,#developers .s08-ph .s08-s,#developers .s08-bot .s08-u,#developers .s08-bot .s08-b,#developers .s08-bot .s08-av, #developers .s08-bot .s08-chips rect,#developers .s08-shd .s08-iso,#developers .s08-erp .s08-rows rect,#developers .s08-fx .s08-l{transform-box:fill-box;transform-origin:50% 50%} #developers .s08-ph .s08-f{transform-origin:50% 0} #developers .s08-fx .s08-l,#developers .s08-erp .s08-rows rect{transform-origin:0 50%} #developers .s08-bot .s08-u{transform-origin:100% 100%} #developers .s08-bot .s08-b{transform-origin:0 100%} #developers .s08-bot .s08-typing circle{transform-box:fill-box;transform-origin:50% 50%} /* ---------- fila compacta ---------- */ #developers .s08-row{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,1.1vw,18px)} @media (min-width:640px){ #developers .s08-row{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:1280px){ #developers .s08-row{grid-template-columns:repeat(4,minmax(0,1fr))} } #developers .s08-m{display:flex;align-items:center;gap:clamp(14px,1.1vw,18px);padding:clamp(14px,1.1vw,18px) clamp(16px,1.2vw,22px);border-radius:var(--radius);border:1px solid var(--line);background:rgba(242,239,232,.03);min-width:0} #developers .s08-m svg{width:clamp(34px,2.4vw,44px);height:auto;flex:none;fill:none;stroke:var(--cobalt-hi);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #developers .s08-mt{font-family:var(--f-disp);font-weight:900;font-size:clamp(22px,1.6vw,30px);line-height:1;text-transform:uppercase;letter-spacing:.01em} #developers .s08-m p{margin-top:6px;font-size:clamp(14px,.98vw,19px);line-height:1.25;color:rgba(242,239,232,.72)} /* =================== entrada (solo con JS armado y movimiento normal) =================== */ @keyframes s08-word{from{opacity:0;transform:translate3d(0,.45em,0)}to{opacity:1;transform:none}} @keyframes s08-sheen{from{background-position:100% 0}to{background-position:0 0}} @keyframes s08-flip{0%{opacity:0;transform:perspective(1400px) translate3d(0,90px,0) rotateX(-72deg)}55%{opacity:1}100%{opacity:1;transform:perspective(1400px)}} @keyframes s08-flipm{0%{opacity:0;transform:perspective(1000px) translate3d(0,50px,0) rotateX(-34deg)}60%{opacity:1}100%{opacity:1;transform:perspective(1000px)}} @keyframes s08-line{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes s08-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} @keyframes s08-fade{from{opacity:0}to{opacity:1}} @keyframes s08-pop{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:none}} @keyframes s08-grow{from{transform:scaleX(0)}to{transform:none}} @keyframes s08-growy{from{transform:scaleY(0)}to{transform:none}} @keyframes s08-hotf{0%,100%{fill:var(--cobalt)}50%{fill:var(--cobalt-hi)}} @keyframes s08-typing{0%{opacity:0}10%,85%{opacity:1}100%{opacity:0}} @keyframes s08-dot{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} @keyframes s08-stamp{0%{opacity:0;transform:scale(2.2) rotate(-14deg)}70%{opacity:1;transform:scale(.94) rotate(3deg)}100%{opacity:1;transform:none}} @keyframes s08-spin{from{transform:rotate(-120deg)}to{transform:none}} @keyframes s08-chip{from{opacity:0;transform:translate3d(-30px,0,0)}to{opacity:1;transform:none}} /* esperando (armado y aún sin .s08-go) */ html.js:not(.reduce) #developers.s08-armed .s08-t:not(.s08-go) .s08-w, html.js:not(.reduce) #developers.s08-armed .s08-tile:not(.s08-go), html.js:not(.reduce) #developers.s08-armed .s08-m:not(.s08-go), html.js:not(.reduce) #developers.s08-armed .s08-net:not(.s08-go) .s08-nd{opacity:0} html.js:not(.reduce) #developers.s08-armed .s08-tr path{stroke-dasharray:1 1} html.js:not(.reduce) #developers.s08-armed .s08-net:not(.s08-go) .s08-tr path{stroke-dashoffset:1} /* titular: palabra a palabra; la parte en foil entra entera y le cruza un brillo una sola vez (escritorio) */ html.js:not(.lite):not(.reduce) #developers .s08-t.s08-go .s08-w{animation:s08-word .8s var(--ease) backwards;animation-delay:calc(var(--dl,0s) + var(--w) * .08s)} html.js:not(.reduce):not(.lite) #developers .s08-t.s08-go .s08-c{animation:s08-word .8s var(--ease) backwards,s08-sheen 2.4s var(--ease) backwards; animation-delay:calc(var(--dl,0s) + .24s),calc(var(--dl,0s) + .5s)} /* red: se dibuja tramo a tramo; los nodos aparecen al final */ html.js:not(.lite):not(.reduce) #developers .s08-net.s08-go .s08-tr path{animation:s08-draw 1s var(--ease-wipe) backwards;animation-delay:calc(var(--dl,0s) + var(--j,0) * .08s)} html.js:not(.lite):not(.reduce) #developers .s08-net.s08-go .s08-nd{animation:s08-fade .4s ease backwards;animation-delay:calc(var(--dl,0s) + .8s)} /* piezas: caen girando en 3D (relleno «backwards»: después manda la inclinación con el ratón) y se monta su maqueta */ html.js:not(.reduce) #developers .s08-tile.s08-go{animation:s08-flip 1s var(--ease) backwards;animation-delay:var(--dl,0s)} html.js.lite:not(.reduce) #developers .s08-tile.s08-go{animation-name:s08-flipm} html.js:not(.lite):not(.reduce) #developers .s08-tile.s08-go::before{animation:s08-line .7s var(--ease) backwards;animation-delay:calc(var(--dl,0s) + .5s)} html.js:not(.lite):not(.reduce) #developers .s08-go .s08-fx .s08-o{stroke-dasharray:1 1;animation:s08-draw .8s ease backwards;animation-delay:calc(var(--dl,0s) + .6s)} html.js:not(.lite):not(.reduce) #developers .s08-go .s08-ph .s08-f{animation:s08-growy .5s var(--ease) backwards;animation-delay:calc(var(--dl,0s) + 1s)} html.js:not(.lite):not(.reduce) #developers .s08-go .s08-ph .s08-s{animation:s08-pop .45s var(--ease-pop) backwards;animation-delay:calc(var(--dl,0s) + 1.2s + var(--j) * .12s)} html.js:not(.lite):not(.reduce) #developers .s08-go .s08-ph .s08-l{animation:s08-grow .4s var(--ease) backwards;animation-delay:calc(var(--dl,0s) + 1.4s + var(--j) * .1s)} html.js:not(.lite):not(.reduce) #developers .s08-go .s08-ph .s08-tab{animation:s08-fade .4s ease backwards;animation-delay:calc(var(--dl,0s) + 1.5s)} html.js:not(.lite):not(.reduce) #developers .s08-go .s08-ph .s08-push{animation:s08-chip .6s var(--ease-pop) backwards;animation-delay:calc(var(--dl,0s) + 1.9s)} html.js:not(.lite):not(.reduce) #developers .s08-go .s08-erp .s08-wb, html.js:not(.lite):not(.reduce) #developers .s08-go .s08-erp .s08-side, html.js:not(.lite):not(.reduce) #developers .s08-go .s08-erp .s08-d{animation:s08-fade .4s ease backwards;animation-delay:calc(var(--dl,0s) + 1s)} html.js:not(.lite):not(.reduce) #developers .s08-go .s08-erp .s08-l{animation:s08-grow .4s var(--ease) backwards;animation-delay:calc(var(--dl,0s) + 1.15s)} html.js:not(.lite):not(.reduce) #developers .s08-go .s08-erp .s08-rows rect{animation:s08-grow .45s var(--ease) backwards;animation-delay:calc(var(--dl,0s) + 1.25s + var(--j) * .12s)} html.js:not(.lite):not(.reduce) #developers .s08-go .s08-erp .s08-rows .s08-hot{animation:s08-grow .45s var(--ease) backwards;animation-delay:calc(var(--dl,0s) + 1.49s)} html.js:not(.lite):not(.reduce) #developers .s08-go .s08-erp .s08-kpi rect{stroke-dasharray:1 1;animation:s08-draw .6s ease backwards;animation-delay:calc(var(--dl,0s) + 1.7s + var(--j) * .12s)} html.js:not(.lite):not(.reduce) #developers .s08-go .s08-bot .s08-u{animation:s08-pop .5s var(--ease-pop) backwards;animation-delay:calc(var(--dl,0s) + 1s)} html.js:not(.lite):not(.reduce) #developers .s08-go .s08-bot .s08-av{animation:s08-pop .4s var(--ease-pop) backwards;animation-delay:calc(var(--dl,0s) + 1.35s)} html.js:not(.lite):not(.reduce) #developers .s08-go .s08-bot .s08-typing{animation:s08-typing .9s ease both;animation-delay:calc(var(--dl,0s) + 1.45s)} html.js:not(.lite):not(.reduce) #developers .s08-go .s08-bot .s08-typing circle{animation:s08-dot .45s ease-in-out 2 both;animation-delay:calc(var(--dl,0s) + 1.5s + var(--j) * .12s)} html.js:not(.lite):not(.reduce) #developers .s08-go .s08-bot .s08-b{animation:s08-pop .55s var(--ease-pop) backwards;animation-delay:calc(var(--dl,0s) + 2.3s)} html.js:not(.lite):not(.reduce) #developers .s08-go .s08-bot .s08-chips rect{animation:s08-pop .4s var(--ease-pop) backwards;animation-delay:calc(var(--dl,0s) + 2.6s + var(--j) * .12s)} html.js:not(.lite):not(.reduce) #developers .s08-go .s08-shd .s08-sh{stroke-dasharray:1 1;animation:s08-draw 1s ease backwards;animation-delay:calc(var(--dl,0s) + 1s)} html.js:not(.lite):not(.reduce) #developers .s08-go .s08-shd .s08-ck{stroke-dasharray:1 1;animation:s08-draw .5s ease backwards;animation-delay:calc(var(--dl,0s) + 1.8s)} html.js:not(.lite):not(.reduce) #developers .s08-go .s08-shd .s08-iso{animation:s08-stamp .55s var(--ease-pop) backwards;animation-delay:calc(var(--dl,0s) + 2.15s)} html.js:not(.lite):not(.reduce) #developers .s08-go .s08-shd .s08-ring{animation:s08-fade .6s ease backwards;animation-delay:calc(var(--dl,0s) + 1.6s)} /* compactas: entran de lado y dibujan su icono */ html.js:not(.reduce) #developers .s08-m.s08-go{animation:s08-chip .7s var(--ease) backwards;animation-delay:var(--dl,0s)} html.js:not(.lite):not(.reduce) #developers .s08-m.s08-go svg *{stroke-dasharray:1 1;animation:s08-draw .9s ease backwards;animation-delay:calc(var(--dl,0s) + .2s)} /* =================== una pantalla (escritorio grande) =================== Como la diapositiva: la sección mide una pantalla y su secuencia arranca sola al asomar (el JS, por tiempo). Nada pegajoso. */ @media (min-width:1200px) and (min-height:820px){ html.js:not(.lite):not(.reduce) #developers .s08-pin{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center; padding:calc(var(--hd-h) + 2.2vh) 0 2.6vh} html.js:not(.lite):not(.reduce) #developers .s08-wm{--nm:min(9vw,15vh)} html.js:not(.lite):not(.reduce) #developers .s08-fx{aspect-ratio:auto;height:clamp(120px,18.5vh,236px)} html.js:not(.lite):not(.reduce) #developers .s08-fx svg{width:auto;height:100%} html.js:not(.lite):not(.reduce) #developers .s08-g{margin-top:clamp(40px,5.4vh,76px)} } /* fuera de pantalla: nada corre */ html.js #developers:not(.is-on) *{animation-play-state:paused!important} html.js #developers:not(.is-on) .s08-pu i{animation:none!important} /* bucles: fuera, no en pausa (ver base.css) */ @media print{ #developers .s08-pu,#developers .s08-burst{display:none} } /* ===== 10-growth.css ===== */ /* =================== 10 · GROWTH (#growth, prefijo s10-, marfil) =================== Spec: _fuentes/GROWTH_FORMACION.md, bloque 2a. Banda corta que lleva a growth.html. Wordmark con la caja de la cabecera (.wm de base.css). Tarjetas oscuras con la ventana de maqueta de «Cuando la IA se pone a trabajar». - Por defecto (sin JS, reduce, táctil, impresión): maquetas completas y quietas. - #growth.s10-armed (10-growth.js, solo escritorio con movimiento): cada maqueta espera y se monta una vez al recibir .is-run. Solo se anima transform y opacity (y un trazo SVG pequeño, una sola vez). Nada en bucle. */ #growth{--hr:clamp(280px,30vw,560px); background-image:radial-gradient(circle var(--hr) at calc(104% - var(--hr) * .5) calc(var(--hr) * .25),rgba(46,59,255,.16) 0,rgba(46,59,255,.05) calc(var(--hr) * .55),rgba(46,59,255,0) calc(var(--hr) * .8))!important; background-repeat:no-repeat!important} /* ---------- cabecera de la banda ---------- */ #growth .s10-hd{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.4vw,22px);justify-items:start} #growth .s10-wm{--wm:clamp(34px,4.4vw,84px);margin-top:clamp(2px,.4vw,8px)} #growth .s10-t{margin-top:clamp(8px,1vw,16px)} #growth .s10-t .ln{padding-top:.1em;margin-top:-.1em} #growth .s10-go{margin-top:clamp(6px,.8vw,12px)} /* en marfil, .sec-light .btn lo pasaría a tinta sobre cobalto: aquí va como el «Hablemos» de la cabecera */ #growth .s10-go{color:var(--chalk);border-color:var(--cobalt)} #growth .s10-go:hover{background:var(--ink);border-color:var(--ink);color:var(--chalk)} @media (min-width:1024px){ #growth .s10-hd{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:clamp(32px,4vw,80px)} #growth .s10-hd > *{grid-column:1} #growth .s10-go{grid-column:2;grid-row:3;align-self:end;margin:0 0 .5em} } /* ---------- tarjetas ---------- */ #growth .s10-g{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,1.4vw,26px);margin-top:clamp(36px,4vw,64px)} @media (min-width:760px){ #growth .s10-g{grid-template-columns:repeat(2,minmax(0,1fr))} } #growth .s10-k{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:var(--radius);color:var(--chalk); padding:clamp(18px,1.4vw,26px) clamp(18px,1.4vw,26px) clamp(22px,1.6vw,30px); background:linear-gradient(180deg,var(--kit2) 0%,var(--kit) 46%,#101117 100%);box-shadow:0 0 0 1px rgba(10,10,12,.5),0 24px 50px rgba(10,10,12,.22)} #growth .s10-khd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} #growth .s10-no{font-family:var(--f-num);font-weight:900;font-size:clamp(56px,4.6vw,88px);line-height:.8;letter-spacing:-.03em;color:var(--cobalt-hi)} #growth .s10-tag{color:var(--mute);padding-top:4px;text-align:right;font-size:clamp(11px,.72vw,14px)} #growth .s10-kt{margin-top:clamp(18px,1.4vw,26px);font-size:clamp(30px,2.5vw,46px);line-height:.95;letter-spacing:.01em;color:var(--chalk)} #growth .s10-kt::after{content:"";display:block;width:18px;height:3px;background:var(--trim);margin-top:10px} #growth .s10-k .body-s{margin-top:12px;font-size:clamp(16px,1.04vw,20px);line-height:1.42;color:rgba(242,239,232,.8)} /* escritorio: la tarjeta en horizontal (maqueta a la izquierda), para que la banda quepa en una pantalla */ @media (min-width:1024px){ #growth .s10-k{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:clamp(18px,1.6vw,30px);align-items:start} #growth .s10-fx{grid-column:1;grid-row:1 / span 3;margin-top:0!important} #growth .s10-khd,#growth .s10-kt,#growth .s10-k .body-s{grid-column:2} #growth .s10-khd{flex-direction:column;gap:12px} #growth .s10-tag{text-align:left} } /* ---------- ventana de maqueta (la de 08-ia-trabajando) ---------- */ #growth .s10-fx{position:relative;aspect-ratio:5/4;margin-top:clamp(16px,1.2vw,22px);border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center; background:radial-gradient(ellipse 80% 70% at 50% 60%,rgba(46,59,255,.16),transparent 70%),#0B0C11;box-shadow:inset 0 0 0 1px rgba(242,239,232,.08)} #growth .s10-fx::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1.5px 1.5px,rgba(255,255,255,.07) 1.1px,transparent 1.6px);background-size:12px 12px} #growth .s10-crop{position:absolute;inset:8px;pointer-events:none;opacity:.4;z-index:3; background:linear-gradient(var(--chalk),var(--chalk)) 0 0/16px 1.5px,linear-gradient(var(--chalk),var(--chalk)) 0 0/1.5px 16px, linear-gradient(var(--chalk),var(--chalk)) 100% 0/16px 1.5px,linear-gradient(var(--chalk),var(--chalk)) 100% 0/1.5px 16px, linear-gradient(var(--chalk),var(--chalk)) 0 100%/16px 1.5px,linear-gradient(var(--chalk),var(--chalk)) 0 100%/1.5px 16px, linear-gradient(var(--chalk),var(--chalk)) 100% 100%/16px 1.5px,linear-gradient(var(--chalk),var(--chalk)) 100% 100%/1.5px 16px;background-repeat:no-repeat} #growth .s10-fx svg{position:relative;flex:none;overflow:visible;width:min(100% - 36px,340px);height:auto} /* ---------- 01 · Performance: panel DEMO ---------- */ /* marcador DEMO en HTML (legible a cualquier ancho) y con el mismo código que growth.html: etiqueta dorada, «Probar» en dorado */ #growth .s10-pf{flex-direction:column;gap:clamp(10px,1vw,16px)} #growth .s10-demo{position:relative;z-index:2;margin:0;align-self:flex-start;margin-left:clamp(14px,1.4vw,22px);font-family:var(--f-mono);font-weight:700;font-size:clamp(11px,.7vw,13px); letter-spacing:.14em;line-height:1.2;color:var(--ink);background:#FFE58A;padding:6px 10px 5px;border-radius:4px;box-shadow:0 0 18px rgba(255,229,138,.2)} #growth .s10-kb{fill:rgba(242,239,232,.05);stroke:rgba(242,239,232,.16);stroke-width:1} #growth .s10-kl{fill:rgba(242,239,232,.45)} #growth .s10-sp{fill:none;stroke:var(--cobalt-hi);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} #growth .s10-dots circle{fill:var(--cobalt-hi);transform-box:fill-box;transform-origin:50% 50%} #growth .s10-dots circle.s10-off{fill:rgba(242,239,232,.18)} #growth .s10-th{fill:rgba(242,239,232,.18)} #growth .s10-track{fill:rgba(242,239,232,.07)} #growth .s10-val{fill:var(--cobalt-hi);transform-box:fill-box;transform-origin:0 50%} #growth .s10-st{transform-box:fill-box;transform-origin:50% 50%} #growth .s10-st text{font-family:var(--f-mono);font-weight:700;font-size:11px;letter-spacing:.14em;text-anchor:middle;fill:var(--chalk)} #growth .s10-sc rect{fill:var(--cobalt)} #growth .s10-pr rect{fill:none;stroke:#FFE58A;stroke-width:1.2} #growth .s10-pr text{fill:#FFE58A} #growth .s10-ct rect{fill:none;stroke:var(--trim);stroke-width:1.4} #growth .s10-ct text{fill:#FF6B85} #growth .s10-cut .s10-th,#growth .s10-cut .s10-val{opacity:.4} /* ---------- 02 · Creatividad: malla → arcilla → render → real ---------- */ #growth .s10-ph{align-items:stretch;justify-content:stretch} #growth .s10-fr{position:absolute;left:0;right:0;top:12px;bottom:44px} #growth .s10-f{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;object-position:50% 100%} #growth .s10-steps{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:center;gap:clamp(6px,.6vw,10px);list-style:none;margin:0;padding:10px 12px 12px; background:linear-gradient(0deg,#0B0C11 55%,rgba(11,12,17,0));font-family:var(--f-mono);font-weight:700;font-size:clamp(11px,.66vw,12px);letter-spacing:.14em;text-transform:uppercase} #growth .s10-steps li{padding:4px 8px 3px;border:1px solid rgba(242,239,232,.3);border-radius:999px;color:rgba(242,239,232,.85);white-space:nowrap} /* tarjeta en horizontal con poco ancho (1024-1319): más sitio para la maqueta y píldoras más compactas, que nunca se corten */ @media (min-width:1024px) and (max-width:1319px){ #growth .s10-k{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)} #growth .s10-steps{flex-wrap:wrap;gap:4px;padding:8px 6px 10px;letter-spacing:.08em} #growth .s10-steps li{padding:3px 6px 2px} } #growth .s10-steps li.s10-cur{background:var(--cobalt);border-color:var(--cobalt);color:var(--chalk)} #growth .s10-prog{position:absolute;left:0;right:0;top:0;height:3px;z-index:4;background:rgba(242,239,232,.08)} #growth .s10-prog i{display:block;height:100%;background:var(--cobalt-hi);transform-origin:0 50%} /* ---------- montaje (una vez, al asomar; solo escritorio con movimiento) ---------- */ @keyframes s10-in{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}} @keyframes s10-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}} @keyframes s10-bar{from{transform:scaleX(0)}to{transform:none}} @keyframes s10-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} @keyframes s10-dim{from{opacity:1}to{opacity:.4}} @keyframes s10-fade{from{opacity:0}to{opacity:1}} @keyframes s10-lbl{from{opacity:.3}to{opacity:1}} html.js:not(.lite):not(.reduce) #growth.s10-armed .s10-k:not(.is-run) .s10-fx svg, html.js:not(.lite):not(.reduce) #growth.s10-armed .s10-k:not(.is-run) .s10-fr{opacity:0} /* Performance */ html.js:not(.lite):not(.reduce) #growth .s10-perf.is-run .s10-kpi{animation:s10-in .6s var(--ease) backwards;animation-delay:calc(.1s + var(--j) * .12s)} html.js:not(.lite):not(.reduce) #growth .s10-perf.is-run .s10-sp{stroke-dasharray:1;animation:s10-draw 1s var(--ease) backwards;animation-delay:calc(.35s + var(--j) * .12s)} html.js:not(.lite):not(.reduce) #growth .s10-perf.is-run .s10-dots circle{animation:s10-pop .4s var(--ease-pop) backwards} html.js:not(.lite):not(.reduce) #growth .s10-perf.is-run .s10-dots circle:nth-child(2){animation-delay:.6s} html.js:not(.lite):not(.reduce) #growth .s10-perf.is-run .s10-dots circle:nth-child(3){animation-delay:.7s} html.js:not(.lite):not(.reduce) #growth .s10-perf.is-run .s10-dots circle:nth-child(4){animation-delay:.8s} html.js:not(.lite):not(.reduce) #growth .s10-perf.is-run .s10-dots circle:nth-child(1){animation-delay:.5s} html.js:not(.lite):not(.reduce) #growth .s10-perf.is-run .s10-dots circle:nth-child(5){animation-delay:.9s} html.js:not(.lite):not(.reduce) #growth .s10-perf.is-run .s10-row{animation:s10-in .5s var(--ease) backwards;animation-delay:calc(.5s + var(--j) * .12s)} html.js:not(.lite):not(.reduce) #growth .s10-perf.is-run .s10-row .s10-val{animation:s10-bar 1s var(--ease) backwards;animation-delay:calc(.75s + var(--j) * .16s)} html.js:not(.lite):not(.reduce) #growth .s10-perf.is-run .s10-st{animation:s10-pop .45s var(--ease-pop) backwards;animation-delay:calc(1.6s + var(--j) * .18s)} html.js:not(.lite):not(.reduce) #growth .s10-perf.is-run .s10-cut .s10-th, html.js:not(.lite):not(.reduce) #growth .s10-perf.is-run .s10-cut .s10-val{animation:s10-dim .5s ease 2.3s backwards} html.js:not(.lite):not(.reduce) #growth .s10-perf.is-run .s10-cut .s10-val{animation:s10-bar 1s var(--ease) 1.07s backwards,s10-dim .5s ease 2.3s backwards} /* Creatividad: cada fase entra encima de la anterior; se queda en «Real» */ html.js:not(.lite):not(.reduce) #growth .s10-crea.is-run .s10-f{animation:s10-fade .7s ease backwards;animation-delay:calc(.15s + var(--j) * .85s)} html.js:not(.lite):not(.reduce) #growth .s10-crea.is-run .s10-steps li{animation:s10-lbl .4s ease backwards;animation-delay:calc(.15s + var(--j) * .85s)} html.js:not(.lite):not(.reduce) #growth .s10-crea.is-run .s10-prog i{animation:s10-bar 2.8s linear .15s backwards} /* hover (escritorio): la tarjeta sube un poco, como en «Cuando la IA se pone a trabajar» */ html.js:not(.lite) #growth .s10-k{transition:transform .5s var(--ease)} html.js:not(.lite) #growth .s10-k:hover{transform:translate3d(0,-6px,0)} /* ---------- escritorio con altura suficiente: la banda cabe en una pantalla ---------- */ @media (min-width:1024px) and (min-height:700px){ html:not(.lite) #growth{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center; padding-top:calc(var(--hd-h) + clamp(20px,2.2vw,40px));padding-bottom:clamp(32px,3vw,56px)} } @media print{ #growth .s10-fx *{opacity:1!important;transform:none!important;animation:none!important} } /* ===== 11-cierre.css ===== */ /* =================== 09 · CIERRE (#contacto, prefijo s09-) =================== Deck: frag_11 / slide_11. Repite la portada (cursiva + titular en foil, barrido cobalto, cinta) con el contacto a la derecha. Contacto: solo LinkedIn y email. La cinta lleva las credenciales y, al bajar, corre en horizontal (11-cierre.js). Estado por defecto = FINAL; las entradas son las del motor ([data-reveal]) y el parallax, [data-parallax]. */ #contacto{--tape-zone:clamp(150px,19vh,230px);min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center; padding-block:var(--sec-y) var(--tape-zone)} #contacto .s09-halo{--halo:clamp(620px,62vw,1150px);right:-16%;top:6%} #contacto .s09-in{display:flex;flex-direction:column;gap:clamp(40px,5vw,96px)} /* wordmark grande: INNATIAL [IA] [DEVELOPERS] [GROWTH], las tres cajas iguales (pieza común .wm) */ #contacto .s09-top{display:flex;flex-direction:column;gap:clamp(14px,1.4vw,22px)} #contacto .s09-wm{--wm:clamp(18px,5.2vw,84px);align-self:flex-start;max-width:100%} /* ---- rejilla: titular | contacto ---- */ #contacto .s09-g{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(48px,6vw,80px);align-items:center} @media (min-width:1024px){ #contacto .s09-g{grid-template-columns:minmax(0,1fr) minmax(0,clamp(380px,32vw,620px));gap:clamp(40px,4vw,72px)} } /* titular: --g = cuerpo de «PARA CAMBIAR?», en función del ancho de su columna (cqi) */ #contacto .s09-hk{container-type:inline-size;min-width:0;--g:clamp(46px,10vw,168px);--g:clamp(46px,16.4cqi,168px)} #contacto .s09-q{margin:0;font-weight:400} #contacto .s09-q .ln{white-space:nowrap;padding-block:.07em;margin-block:-.07em} #contacto .s09-sf{font-size:calc(var(--g) * .56);line-height:1;color:var(--chalk)} #contacto .s09-l2{padding-top:.18em;margin-top:-.18em} #contacto .s09-gr{font-family:var(--f-disp);font-weight:900;text-transform:uppercase;font-size:var(--g);line-height:.86;letter-spacing:-.005em; padding:.14em .04em 0 0;margin-top:-.14em;background-size:200% 100%;background-position:0 0} #contacto .s09-a{margin-top:calc(var(--g) * .2)} #contacto .s09-a1{display:inline-block;font-family:var(--f-disp);font-weight:900;text-transform:uppercase;letter-spacing:.005em;font-size:calc(var(--g) * .4);line-height:1.05;padding-top:.1em;color:var(--chalk)} #contacto .s09-a1 b{font-weight:900} #contacto .s09-a1::after{left:-4px;right:-8px} #contacto .s09-a2{margin-top:calc(var(--g) * .08);font-size:calc(var(--g) * .32);line-height:1.08;color:var(--cobalt-hi);max-width:22ch} @media (min-width:600px){ #contacto .s09-a2{max-width:none} } /* ---- contacto: etiqueta mono + dato grande, se puede pulsar ---- */ #contacto .s09-ct{display:flex;flex-direction:column;border-left:3px solid var(--cobalt);padding-left:clamp(18px,2vw,36px);min-width:0} #contacto .s09-cth{font-size:clamp(12px,.84vw,16px);letter-spacing:.24em;color:var(--cobalt-hi);margin-bottom:14px} #contacto .s09-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;padding:clamp(14px,1.1vw,20px) 0 clamp(12px,1vw,18px); border-top:1px solid var(--line);color:var(--chalk);text-decoration:none;min-height:44px} #contacto .s09-row:last-child{border-bottom:1px solid var(--line)} #contacto .s09-row .mono{grid-column:1;font-size:clamp(11px,.74vw,14px);letter-spacing:.2em;color:var(--mute)} /* el email no se corta nunca: el cuerpo baja con el ancho y, en el peor caso (texto ampliado), parte la línea */ #contacto .s09-row b{grid-column:1;font-family:var(--f-disp);font-weight:900;font-size:min(clamp(34px,3.1vw,58px),8.6vw);line-height:1;letter-spacing:.01em;margin-top:6px; overflow-wrap:anywhere;transition:color .25s ease} #contacto .s09-row i{grid-column:2;grid-row:1 / span 2;align-self:center;font-style:normal;font-size:clamp(22px,1.6vw,30px);color:var(--cobalt-hi);transition:transform .25s var(--ease)} #contacto .s09-row:hover b,#contacto .s09-row:focus-visible b{color:var(--cobalt-hi)} #contacto .s09-row:hover i{transform:translate(4px,-4px)} /* ---- cinta de credenciales ---- */ #contacto .s09-tape{bottom:clamp(36px,7vh,96px)} #contacto .s09-tmove{display:flex;flex:none} html.js:not(.lite):not(.reduce) #contacto .s09-tmove{will-change:transform} /* «PARA CAMBIAR?»: un solo brillo del foil al revelarse (escritorio; nunca en bucle) */ @keyframes s09-sheen{from{background-position:100% 0}to{background-position:0 0}} html.js:not(.reduce):not(.lite) #contacto .s09-q.is-in .s09-gr{animation:s09-sheen 2.4s var(--ease) .35s backwards} @media (max-width:1023px){ #contacto{justify-content:flex-start} #contacto .s09-halo{--halo:150vw;right:-70%;top:30%} }